Using the Page Designer

  1. Home
  2. Support
  3. Using the Page Designer
  4. Working With Regular, Specialty and Fullwidth Sections Using The Page Designer

Working With Regular, Specialty and Fullwidth Sections Using The Page Designer

The foundation to every page you create with the page designer starts with the Sections. These are the initial blocks that stack all your rows and modules, grouping them into differentiated areas, making your website organized and good looking.

Add a Section

Insert a section

In the page designer, click on the blue “+” button to add a new section to your page. There are three types of sections to pick from: Regular, Specialty, and Fullwidth.

Once you have selected a type of section, you will need to pick a column structure to the row thats automatically included to the new section.

Clicking on the settings icon of the section you are able to adjust the content, design, and advanced tabs.

Customize the settings

Content settings

Open another page by clicking on the section.

Under the Content tab, you can pick a URL link, that when the section is clicked will open a new window or tab.

Select a background for the section.

Define a color, gradient, image or video as the section background. The videos must be uploaded in .mp4 and .Webm formats. For them to be correctly displayed, you should specify the width and height of your video in the settings.

You can change the admin label.

This label will appear on the back end and skeleton view.

Design settings

These are the styling options, that will change how the section looks.

Pick if your section shows an inner shadow.

Under the layout option, you can enable this shadow option.

Choose the width.

Adjust the width of the section on the screen. It can also be adapted to the mobile version.

Include a divider.

The page designer offers some nice looking dividers that you can customize and put on the top or bottom of your page.

Adjust the spacing and borders.

Customize the margins and padding, and change the borders of the section to your likings.

Add outer shadow.

There are different options to shadow the section.

Shift your filters.

Change hue, saturation, blur, and more filters.

Pick an animation.

Enable an animation style to the change to give it some movement.

Advanced settings

The advanced options let you include CSS code and choose the device visibility options. Check this article to know more about the Advanced settings.

Specialty Section

If you select a Specialty section, it will offer you advance column structures for more complex column variations.

When you add a specialty section you will have a constant area to add modules, colored in orange, and another area to include a defined row structure, colored in teal. Add the number of modules you want to the row and they will spread across the vertical width of the section. You can also insert new rows to the side that supports adding additional rows (Teal).

Fullwidth Section

As the name reveals, this kind of section uses the full width of the browser and can be wonderful to give the page a stunning look. Once you add a fullwidth section to a page, the only modules you will be able to add inside it are full withs ones.

There are no rows or columns since the fullwidth modules occupy the entire width of the section. You can include fullwidth modules with code, header, images, maps, menus, portfolios, sliders, and post titles.

 

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?