Page layout modules make it easy for you to visually separate content on your website and embed new content via HTML. Find these modules under the category Page layout in the Add module menu.

0_-overview-Page-layout-modules.jpg

 

Divider

Use the Divider module to visually separate content and thereby create a more structured and browsing-friendly website for your visitors. Hover the module and click on Design on the dropdown to edit your Divider module. 

1_-Divider.jpg


Design

In the Design section you have the option to set margin (spacing) for the module. If you want more styling options, click More local design options and the following parameters will become visible:

  • Divider type: you have four different style options for the divider line: none, solid, dashed and dotted.2_-Design.jpg
  • Divider color: select the color of the divider line. You can either choose one of your Global Colors or pick a new one.
  • Divider thickness: the thickness of the divider is counted in pixels and can be altered by dragging on the slider or typing in a specific number in the field. 

    3__divider_module_pixels.png

  • Divider width: width is set in percentage where 100% spans the entire width of the column frame. 
  • Divider alignment: choose where you want your divider to be placed within the column. 

  Why doesn't the alignment change?

The alignment will only visibly change if the divider width is less than 100%. If the divider width is 100%, it means that it spans the entire column and therefore can't be left or right aligned.

 

HTML

This module gives you the opportunity to add custom content and widgets on your page by pasting an HTML snippet. Use he HTML module if the feature or functionality you want on your website isn't natively supported by the Editor through existing modules. Hover the module and click on Content or Design on the dropdown to edit your HTML module. 

  Example of how to use the HTML Module

The Editor's native Video module doesn't support files from the video hosting provider Wistia. If you want to add a Wistia-hosted video on your website, you can include it by using the HTML module. In order to do so, you'll need the video's embed code and paste it into the HTML module. Once you've published your website, the video will be displayed.

4__html_module1.png 

Content

Paste your HTML snippet in the Content tab. The left column within the embed field shows the number of lines of code included whereas the right part is where you paste and view your actual HTML code. 

5_-HTML.jpg

  Implement HTML throughout your website

If you want to add HTML elements across your website within the <head> or <body> tag, you should use the Global HTML option in Settings instead of the HTML module. Read more about using Global HTML here.

Additionally, you can add HTML code inside individual page's <head> tag from the Page Settings menu.


Design

The Design section is where you change the background, border and spacing on your HTML module.

 

Autospacer

Use the Autospacer module to adjust the position and appearance of other modules. The module automatically adds spacing between neighboring modules to help align them correctly. It is not possible to edit the Autospacer module settings or design. 

  How to use autospacing

Use autospacing to push modules to the bottom of a column, align modules within different columns, or center a module within its column.

Was this article helpful?
1 out of 2 found this helpful