Hero tagline (optional).

Hero Heading.

Image is optional.

Utility / Modifier CSS classes

These modifier classes are basically some instructions to change the section’s by using the “Custom HTML Class” field that can be found at the bottom of the section (while editing the page).

Margins and Paddings

margin-0 margin-top-** margin-bottom-** padding-0 padding-top-** padding-bottom-**

where ** can be: 0 20, 50, 70, 100

eg: padding-top-0 – will force the section to adopt a top padding of 0 pixels.(between its top extremity/boundary and top of the actual content).
eg: padding-bottom-50 – will force the section to have a bottom padding of 50 pixels.

Padding – space between section’s boundary and section’s content.
Margin – space between current section and previous or next section, depending on margin-top-** or margin-bottom-**

Colors

c-lightblue c-blue c-darkblue c-navy c-white c-black c-green c-lightgreen c-gray

Color class can be used on individual HTML elements. You can add color classes to elements by switching the WYSIWYG editor from Visual to Text.

eg: This <strong class="c-darkblue">This is a bold darbblue text</strong>

will render the following: This is a bold darbblue text

Backgrounds

bg-primary bg-lightblue bg-blue bg-darkblue bg-navy bg-white bg-black bg-green bg-lightgreen bg-gray

Background classes can be used at section’s level via the “Custom HTML Class” field.

Eg: adding bg-blue to an Editor Section/Block’s Custom HTML Class field will render that section with a blue background.

Block Widths

block-width-1000 block-width-900 block-width-800 block-width-600

The default content container is 1200px. Using these modifier classes can narrow the content container down based on specific needs.

These classes can be used on blocks/section such as: Editor, Two Columns, Three Columns, Four Columns, Logos Grid, SuperHero, Testimonial, Accordion.

Rotating Heading 1

Rotating Heading 2

Rotating Heading 3

Section: Text Editor

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, eveniet vero id eum consectetur dicta perferendis aliquid. Doloremque omnis alias earum ipsam ducimus quae delectus eaque quo facilis saepe! Nobis.

Section: Text Editor with a solid background color

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, eveniet vero id eum consectetur dicta perferendis aliquid. Doloremque omnis alias earum ipsam ducimus quae delectus eaque quo facilis saepe! Nobis.

Section: Text & Image

The Image position can be swapped: left or right.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, eveniet vero id eum consectetur dicta perferendis aliquid. Doloremque omnis alias earum ipsam ducimus quae delectus eaque quo facilis saepe! Nobis.

Section: Two Columns

Section header is optional and can be toggled on/off.

The Two Columns Section can be: 1. simple ( no images, no icons), 2. with images (images at top of the “card”), 3. with icons (icons)

The Two Columns Section can use background colors (can select or toggle on/off): blue, lightblue, darkblue, navy, green, lightgreen, gray.

All these options are available for other section with columns, such as: Three Columns, Four Columns