Weebly replaced “Columns” element with “Spacer” element to accommodate more flexibilities during online editing. This has both advantages and disadvantages, especially from user’s perspective, the concept of laying out the elements had been completely changed with new spacer element. Here we discuss the features of spacer element and tips for effectively aligning elements to create a compact columned content.
Drag & Drop Elements Alongside
Weebly changed the whole concept of drag & drop on its WYSIWYG editor with the introduction of spacer element. Unlike before, where elements can only be aligned one below other, now you can place any elements adjacent to other element in the content area. This provides lot of flexibility for users to play around the elements to make a multi column layout easily.
Spacer element can be used to provide space between elements, above the element, down the element or beside the elements. For example, you can adjust the position of an image by adding spacer above and below.
How to Use it?
Assuming you want to make three-column layout with spacer between all three columns. In this case you can just drag and drop 3 text or image elements next to each other and the three-column layout will be automatically formed. Then add spacer element between columns and adjust the width to provide enough space between three columns.
The content height within the columns can be adjusted again by adding spacer element below the column’s content.
Pros & Cons
- Elements can be added next to next.
- Easy to make columns.
- Easy to add required space between elements.
- Difficult to make consistent height and width of spacer on a single page.
- Also difficult to mane consistent two or three columns layout across a site having hundreds of pages.
- It is cumbersome task to adjust the elements to fill in a column and adjust the height and width using spacer.
Watch out this demo to understand the possibilities of using Weebly spacer element to build multi-column layout.