Resources

Standard Section Options

Overview

Each section contains a standard set of options that allow you to determine specific aspects of the section. These standard options are located below the sections own configuration options and allow you to customize the section to you own taste.

Standard Section Options

These options are separated into five categories Padding/Margin, Grid and Sizing, Font Size and Alignment, Background and Color and finally Advanced.

Padding/Margin

Margins and Padding are the two most commonly used properties for spacing elements. The Margin is space outside the element, whereas padding is space inside the element.

The Padding/Margin option uses the percentage unit and allows control for the top, right, bottom and left. You can either enter a value or use the row-resize cursor to increase/decrease the value.

Padding & Margin controls

Grid and Sizing

The Grid and Sizing options provide a visual way of laying out your section(s). You can control the grid and offset, as well as content height and width. The grid is a responsive grid system that appropriately scales up to 12 columns. The controls allow you to select the column size, starting at 2 and ending at 12.

Offset, allows you to nudge the section horizontally to the right by the number specified. Offset provides an alternative to margins for placement of your section.

Content height and width options allow you to control the min-height and max-width of your section content. This provides full control over your sections position, width and height and allows pixel-perfect placement of sections.

Grid and Sizing Option

Font Size and Alignment

The font size and alignment options provide control over typography and the alignment on a section by section basis without the need for custom code.

Text/Element alignment provides four options for alignment default, left, center and right. Selecting one of these options will position all text used in the section to that alignment.

Font size provides control over the font size and uses the percentage unit, this is relative to the base font size. You can select between 90-300 percent of the relative base size.

Font Alignment and Sizing

Background and Color

The background and color options provide control of the background of your section(s).

Background Image allows for adding an image by either using the Upload option or selecting an image from the WordPress Media library.

Text / Element Base Color provides control over the color base of any included text to the section. There are three options to choose from Default, Light Text and Dark Text.

Background Color allows selecting a solid color as your background via the built-in color picker, instead of using an image.

Font Color allows selecting a color for your text via the built-in color picker.

Size and Scroll Effect provides control on setting the section to be window height.

Background Advanced

Provides additional advanced options to your section backgrounds.

Background Video provides the option to add an .mp4 video to the sections background, you can either upload or select an existing video via the WordPress Media Library.

Background Overlay allows for adding an optional image to overlay your background image/color/video by either using the Upload option or selecting an image from the WordPress Media library.

Background Cover provide control over how your background image size acts and there are three options to choose from.

  • None: No background size styling and simply uses the full size image.
  • Cover: Scales the background image to be as large as possible so that the background area is completely covered by the image/video. Some parts of the background image/video may not be in view within the background positioning area.
  • Contain: Scales the image to the largest size such that both its width and its height can fit inside the content area. Small images will be repeated.

Advanced

The Advanced options provide optional controls to further customize and control how the section acts on the page.

Additional Section Classes, provide the option to include your own additional class(es) to sections. This allows for unique styling or styling groups of sections without the need for repetitive code.

For more information, see the Additional Section Classes article.

Hide on Pages, provides the ability to hide the section on specific pages. Enter the pages unique ID into the option field, to add more than one page separate the ID's by comma: "," e.g. 1, 2, 3 and so forth.

Custom Name, provides the option to add a custom name to the section. Allowing for easily management of section(s).

Unique Section ID, use this ID in CSS/JS to target this specific section.