Sections, wraps and elements

Every builder page is made of three kinds of items, one inside the other:

• A section is a band across the page: the hero at the top, a row of services, the footer's columns. Sections stack from top to bottom.
• A wrap is a column inside a section. Wraps sit side by side and move under each other on smaller screens. A wrap can also hold other wraps, up to four levels deep, for layouts such as a text column beside a grid of cards.
• An element is the content in a wrap: a heading, an image, a button, a slider, a form. Elements stack inside their wrap.

The Navigator tab shows this tree for the page you are editing.

Wrap widths

Each wrap has a Width: 1/6, 1/5, 1/4, 1/3, 2/5, 1/2, 3/5, 2/3, 3/4, 4/5, 5/6 or 1/1 of its section, or a percentage of your own. Drag the handle on a wrap's edge to change it on the page.

Widths are set per device. A common layout:

On phones, wraps are full width unless you give them a mobile width.

Section settings

Select a section (click its edge, or its name in the Navigator) to see its settings.

Content

Style: background (color, gradient or image, with parallax), an Overlay over the background, a Background video from a file, Aparat, YouTube or Vimeo, and shape dividers (waves, curves, triangles…) at the top and bottom. A video shows its poster image on phones unless you turn on Play the video on phones.

Advanced: see below. A section's CSS ID also makes it an anchor: a menu link to #services scrolls to the section whose CSS ID is services.

Settings every item has

Sections, wraps and elements all have these, besides their own. The full list is in Style and Advanced settings.

Style

• Typography, text color and text color on hover.
• Background and background color on hover.
• Padding and margin, per device.
• Border, corner radius and box shadow, each with a hover version.

Advanced

• CSS ID and CSS classes, for your own CSS.
• Entrance animation, with delay and duration: the item fades or slides in when it scrolls into view. Visitors who asked their device for less motion see it without animation.
• Sticky: the item sticks to the top or bottom of the screen while its section scrolls.
• Hide on: desktop, laptop, tablet or mobile.
• Show to: everyone, only logged-in users (optionally only some roles), or only visitors who are not logged in.
• Show from and Show until: dates, for an offer that starts and ends by itself.
• Custom CSS for this item only.

Note "Show to" and dates are checked when the page is built. If your site uses a page cache, make sure logged-in users are not served cached pages (most cache plugins do this by default).

Directions: start and end

Settings say start and end rather than left and right. On a Persian site start is the right side; on an English site it is the left. A design made in one language works in the other without changes: an image "at the start" sits on the right in Persian and on the left in English.

Elements

Elements are grouped in the Elements tab:

What each one does and all its settings: the elements reference.