Arrange Content

How you arrange the content on your site is really important. Arranging content well makes it easy for visitors to find what they are looking for, and allows you to highlight sections of your site that might otherwise be overlooked. A well-organized page makes your site look professional and helps increase sales by making it easy for site visitors to find what they are looking for.

Website Builder Structure

The Website Builder is built from a header, footer, rows, and columns. Every widget you add is inserted into one of these sections.

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.

Rows

Rows are the horizontal sections of your site. When you add widgets and columns to your site, they are placed within these rows. To change how content is displayed in the mobile view, click the reverse column order toggle in the row editor.

You can add rows to your site by dragging widgets into the site. When you drag a widget between rows or into a space where want to add a row, a new row will be created when you drop the widget.

To delete a row, right-click anywhere on the row to open the context menu, and then click Delete. Alternatively, click the Row button at the top left corner of the row and click Delete.

Note: For detailed information on editing and arranging rows, see Row Editor.

Columns

Every row contains at least one column. Columns contain all the widgets in your site and control their arrangement.

Every row can contain up to four columns. Whenever you add a new column, it appears alongside the existing column in that row.

Note

• 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.

To delete a column, right-click anywhere on the column to open the context menu, and then click Delete. Alternatively, click the red X at the top right corner of the column.

You can place widget directly into columns, or structure the column further by adding inner rows.

Note

For detailed information on editing and arranging columns, see Column Editor.

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 (for example, background, spacing, bleed).

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 in inner rows can be populated by any widget, but inner rows cannot be added to such columns.

To add an inner row to a column, do one of the following:

1. Right-click the row, and click Add Inner Row. If there are multiple columns in the row, choose to which column you want to add the inner rows.
2. Right-click the column, and click Add Inner Row.
3. Right-click the inner row, and click Add Row to place an inner row below the current one.

Inner Row Example

To give an example of how to use inner row, let’s look at two ways a layout that contains a title and 3 buttons can be designed:

• Add two rows. Place the Title in Row 1 with 1 Column. Split Row 2 into 3 columns. Place a button into each column.
• Two separate rows cannot share the same background image and you need to set spacing and bleed style separately for each row.

添加一行。默认情况下，每行包含一列。向列添加 2 个内行。将标题放入内行 1。将内行 2 拆分为 3 列。在每列中放置一个按钮。这两个内行将共享主行背景、间距和出血。

编辑内行时需要考虑一些重要事项：

• 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 row, inner rows cannot be copy-pasted.

Widgets

Widgets contain the text, images, buttons, and other content of your site.

To add widgets to your site:

1. In the left panel, click Widgets.
2. Search for the widget you want, and then drag and drop it into your site.

To delete a widget from your site, right-click anywhere on the widget to open the context menu, and then click Delete. Alternatively, click the red X at the top right corner of the widget.

To arrange widgets side by side, drag a widget onto your site, add a column to the row where that widget has been placed, and then drag another widget into that column. Alternatively, drag the two-column widget onto your site and then drag and drop the widgets into each column.

Snap to Align

在调整同一列中的小部件大小时，Website Builder 会尝试对齐它们，使它们的大小完全相同。调整大小时，Website Builder 会向前或向后跳动以对齐到位置。这样可以更轻松地使小部件的大小完全相同。

Snap to Grid

对齐网格功能可帮助您以专业的精度在网站页面中放置小部件。此系统允许您在列和行内水平和垂直对齐小部件。在行或列中移动元素或调整小部件大小时，会显示标尺。对齐的元素会用彩色边框标记。小部件可能与多个其他小部件对齐，具体取决于具体用例。

TIP: Alignment is supported in the views of the three different devices (desktop, tablet, mobile).

Customer Support Hours

Mon - Fri, 9 am to 9 pm (CT)

Sat, 9 am to 6 pm (CT)

(Chat Unavailable on Saturdays)

iClassPro offices will be closed in observance of the following holidays:
New Year's 2024 (Jan 1, 2024), Good Friday (March 29, 2024), Memorial Day (May 27, 2024), Independence Day (Jul 4, 2024) Labor Day (Sep 2, 2024), Thanksgiving (Nov 28 - 29, 2024), Christmas (Dec 24 - 25, 2024)

Visit the Customer Support Page