Sections, columns and widgets

Every page in the PageShift editor is built from three kinds of items, one inside the other:

Sections, columns and rows hold other items; widgets hold your content. Each one has its own settings: for example a section's background color, a column's alignment, a button's link.

Add a section

1. Point between two sections on the page. A dashed line with + Add section shows. Click it.

   

   You can also click Section in the Add panel, or Add a section in the settings panel when nothing is selected.

2. Choose a layout: One column, Two columns, up to Six columns, or 1/3 + 2/3 and 2/3 + 1/3 for a narrow and a wide column.

   

3. The new section is added and selected. Fill its columns with widgets (below).

A section added from the panel goes right below the selected section, or at the end of the page when nothing is selected. You can change column sizes later in the section's settings.

Add a widget

Drag and drop: drag a widget from the Add panel onto the page, and drop it where you want it.

Or click:

1. Select a column on the page. (Click an item inside it, then click the column's name in the path at the top of the settings panel.) The Add panel shows into … (1) with the column's name.
2. Type in Search widgets (2), for example butt for Button, or scroll the list.
3. Click the widget (3). It's added at the end of that column and its settings open.

The widgets are grouped: Basic (heading, text, image, button, icon, spacer, divider), Media (video, gallery, slider, Google Maps, PDF viewer), Content (FAQ, testimonials, tabs, table), Boxes, Numbers, Business (contact info, business hours, process steps), Forms and Store and more. Modules you've turned on add their own widgets, such as Products grid or Course grid.

To put two buttons side by side, add a Row from the Layout group, then drop the buttons into it. To split a column in two, add Columns.

Move items

• Drag an item to its new place on the page.
• Or select it and press Alt + ↑ or Alt + ↓, or click the Move up and Move down arrows in the settings panel.
• To move a whole section, select it first: click any item in it, then the first name in the path.

Layers: see every item

Click Layers (1) in the tool rail. It shows the page as a list: sections, with their columns and widgets inside.

• Click a name to select that item on the page.
• Click ▸ to open an item, or Expand all / Collapse all.
• Drag a name to move the item.
• Click ✎ to rename it, for example "Hero" or "Quote band". Names are only for you: visitors and search engines don't see them.

Layers is the easiest way to select a column or a section that is hard to click on the page.

Delete an item

Select it and press Delete, or click the trash can in the settings panel. Deleting a section deletes everything inside it. Changed your mind? Press Ctrl + Z. See Undo changes and restore old versions.

Section settings worth knowing

Select a section to change:

• On the Content tab: Content width, either Boxed (centered) or Full width (the background always fills the width), and Minimum height (px) with the Vertical position of the content.
• On the Style tab: Background (a color, a gradient, or a picture with an overlay color so text stays readable), Animated background and Shape dividers at the top or bottom.

Some settings can be different on phones; see Design for desktop, tablet and phone.