Your Website Builder is built from a header, a footer, rows, and columns. Every widget that you add is inserted into one of these sections.
Widgets
Widgets contain the text, images, buttons, and other content of your website. To add widgets to your website, click Widgets in the left-hand menu, search for the widget you want, and then drag and drop it into your website.
There are a few ways to delete widgets from your site. You can right-click anywhere within the widget to open the context menu and then select Delete.
Alternatively, you can click the Red X at the top right corner of the widget.
Rows
Rows are the horizontal sections of your Website. When you add widgets and columns to your website, they are placed within these rows.
You can add rows to your Website by dragging in widgets to the area that would like the row to form. Once placing the widget, a new row will automatically be created. See above for instructions on adding a widget.
There are two ways of deleting rows. You can right-click anywhere on the row to open the context menu and then select Delete.
Alternately, you can click the Row button at the top left corner of the row and select Delete.
Moreover, in the context menu, you can also edit your rows design, among others.
Columns
Every row contains at least one column. Columns hold all the widgets in your site and control their arrangement.
Every row can contain up to four columns and whenever adding a new column, it will appear alongside the existing column in that row. Note that in mobile versions you can see up to two columns per row.
There are two ways of deleting columns. You can right-click anywhere on the column to open the context menu and then select Delete.
Alternatively, you can click the Red X at the top right corner of the column.
You can place widgets directly into columns, or structure the column further by adding inner rows.
Inner Rows
Inner rows allow extra design flexibility by enabling you to add rows inside columns. With the help of inner rows, you can vary the column layout and keep the general design of the row (background, spacing, bleed, etc.).
Just like regular rows, inner rows can have their own background and spacing, be split into up to four columns, and have their column order changed on mobile. Columns within an inner row can be populated by any widget but inner rows cannot be added to such columns.
To add an inner row to a column, follow these directions:
- Right-click the row and click Add Inner Row. If there are multiple columns in the row, you’ll have to choose which column you want to add to the inner rows
- Right-click the column and click Add Inner Row
- Right-click the inner row and click Add Row to place an inner row below the current one
Some important considerations when it comes to editing inner rows:
- You can only use the order switching arrows to switch the order between inner rows. To switch the order of widgets and inner rows, you need to manually drag and drop the widgets above or below the inner row
- 2 columns, 3 columns, 4 columns widgets cannot be placed in inner rows. To add a column, right-click the row and click Add Column
- Unlike regular rows, inner rows cannot be copy-pasted
Snap to Align
While resizing widgets within the same column, the editor will attempt to ‘Snap to Align’ them to be the exact same size. You’ll notice that as you resize, the editor will jump ahead or behind to snap to location. This should make it easier to make widgets the exact same size.
Snap to Grid
The Snap to Grid feature can help you lay widgets in the pages of your site with professional precision. This system allows you to align widgets horizontally and vertically within columns and rows. Rulers are presented when moving an element in its row or column, or when resizing the widget. The aligned elements are marked with a colored border. A widget may be aligned with more than one other widget, depends on the specific use-case. Note that alignment is supported in the views of the three different devices (desktop, tablet, mobile).
Common Questions:
How do I put widgets side by side?
There are several ways of arranging widgets side by side. You can drag a widget onto your Website, add a column to the row where that widget has been placed, and then drag another widget into that column. You can also drag the two-column widget onto your Website and then drag and drop the widgets into each column.
How do I select a column or row?
Widgets often take up the full size of a column or row, making it difficult to select them. To get around this, right-click the widget in the column or row you want to select, hover over the Select Container option and then select either Column or Row.
How do I delete the last column in a row?
No need to! An empty column doesn't display on the live site. It's just there in case you want to drop content into it. You can delete the column by deleting the row it's contained in.
Notes:
While desktop and tablet views allow each row to hold up to four columns, mobile websites can only show at most two columns in a row.
Columns added in desktop or tablet views will assume the full width of the page when switched to mobile view; to create a row with two columns in the mobile view, first switch to mobile view, then add a two-column widget.
For further information or to speak with one of our Support Agents, simply click on the link here and submit your message via the green Help button on the bottom right-hand corner.