Here you’ll find all of the designer styled page elements to use for new page builds and page expansions. Below, you’ll find an example of each styled stripe, along with how certain page elements display within them.

Further down, you’ll find sample page elements, explanations of their function, recommended usage, and where to edit them.

Jump to Sample Elements

Default Stripe

This is what the default stripe will look like. Use the Row preset Default Stripe or set the stripe to Default in the row settings.

This is an example of a default link. This is an example of a gps-link.

GPS Button 1
Small Button 1
GPS Button 2
Small Button 2
GPS Button 3
Small Button 3
  • This is a list item
    • Another Item
    • Another Item
  • This is also a list item
  • This is yet another list item
  1. This is a list item
  2. This is also a list item
    1. Another Item
    2. Another Item
  3. This is yet another list item

This is a default Pull Quote. Use it well! Use it well! Use it well! This is a default Pull Quote. Use it well! Use it well! Use it well!

This is a default blockquote. Use it well! Use it well! Use it well! This is a default blockquote. Use it well! Use it well! Use it well!

This is a default blockquote. Use it well!
– Source

Stripe 1

This is what stripe 1 will look like. Use the Row preset Stripe 1 or set the stripe to Stripe 1 in the row settings.

For the CTA version, use Row preset CTA Stripe. This is an example of a gps-link.

GPS Button 1
Small Button 1
GPS Button 2
Small Button 2
GPS Button 3
Small Button 3
  • This is a list item
  • This is also a list item
  • This is yet another list item
  1. This is a list item
  2. This is also a list item
  3. This is yet another list item

This is a Stripe 1 Pull Quote. Use it well!

This is a Stripe 1 blockquote. Use it well!

This is a default blockquote. Use it well!
– Source

Stripe 2

This is what stripe 2 will look like. Use the Row preset Stripe 2 or set the stripe to Stripe 2 in the row settings.

This is an example of a default link. This is an example of a gps-link.

GPS Button 1
Small Button 1
GPS Button 2
Small Button 2
GPS Button 3
Small Button 3
  • This is a list item
  • This is also a list item
  • This is yet another list item
  1. This is a list item
  2. This is also a list item
  3. This is yet another list item

This is a Stripe 2 Pull Quote. Use it well!

This is a Stripe 2 blockquote. Use it well!

This is a default blockquote. Use it well!
– Source

Stripe 3

This is what stripe 3 will look like. Use the Row preset Stripe 3 or set the stripe to Stripe 3 in the row settings.

This is an example of a default link. This is an example of a gps-link.

GPS Button 1
Small Button 1
GPS Button 2
Small Button 2
GPS Button 3
Small Button 3
  • This is a list item
  • This is also a list item
  • This is yet another list item
  1. This is a list item
  2. This is also a list item
  3. This is yet another list item

This is a Stripe 3 Pull Quote. Use it well!

This is a Stripe 3 blockquote. Use it well!

This is a default blockquote. Use it well!
– Source

Sample Elements

Custom Links

This an example of a custom link on the default stripe, which utilizes class=”gps-link”. Check above to see how it displays and compares to default links on other stripes.

Custom Link styling can be edited in the Custom Link section of the Custom CSS file located under Theme Options > General > Custom CSS.

Custom Buttons

Custom Button Usage

Custom buttons can be added via their related Text Block presets, or by copy/pasting the HTML from the icons next to them.

Custom Button styling can be edited in the Buttons section of the Custom CSS file located under Theme Options > General > Custom CSS.

GPS Button 1
Copy this: 

<div class="gps-button-wrapper"><a class="gps-button" href="#">GPS Button 1</a></div>

Small Button 1
Copy this: 

<div class="gps-button-wrapper"><a class="gps-button small" href="#">Small Button 1</a></div>

GPS Button 2
Copy this: 

<div class="gps-button-wrapper"><a class="gps-button button-2" href="#">GPS Button 2</a></div>

Small Button 2
Copy this: 

<div class="gps-button-wrapper"><a class="gps-button button-2 small" href="#">Small Button 2</a></div>

Review Buttons

Review Button Usage

Review buttons can be added via their related Text Block presets, or by copy/pasting the HTML from the icons next to them. Their setup is identical to that of custom buttons, but instead using class="review-button" and another class with the name of the particular review site.

Review Button styling can be edited in the Buttons section of the Custom CSS file located under Theme Options > General > Custom CSS.

Leave us a review
Copy this: 

<div class="review-button-wrapper"><a class="review-button google-plus" href="#">Leave us a review</a></div>

Leave us a review
Copy this: 

<div class="review-button-wrapper"><a class="review-button yelp" href="#">Leave us a review</a></div>

Copy this: 

<div class="review-button-wrapper"><a class="review-button facebook" href="#">Leave us a review</a></div>

Leave us a review
Copy this: 

<div class="review-button-wrapper"><a class="review-button yahoo" href="#">Leave us a review</a></div>

Custom Lists

GPS List Usage

Use class="gps-list" to a <ol> or <ul> to apply custom list styling.

Custom List styling can be edited in the Custom Lists section of the Custom CSS file located under Theme Options > General > Custom CSS.

  • This is a list item
  • This is also a list item
  • This is yet another list item
  1. This is a list item
  2. This is also a list item
  3. This is yet another list item

Custom List Row

Use class=”gps-list-row” on a row containing gps-lists split across multiple columns in order to make them appear as a single list on mobile. Use only for unordered lists.

Custom List Row styling can be edited in the Custom Lists section of the Custom CSS file located under Theme Options > General > Custom CSS.

  • This is a list item
  • This is also a list item
  • This is yet another list item
  • This is a list item
  • This is also a list item
  • This is yet another list item

Headers

Header Usage

The following are actual headers which use the <h#> tags and have semantic value. They can be restyled via Theme Options > Fonts. Doing so will cause the Header Size classes to reflect their styling.

Use only when necessary, otherwise use Header Size.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Header Size

Header Size Usage

The following utilize the class="h#-size", which mimic header styling created under Theme Options > Fonts. This class will most likely be applied to <strong> or <span> tags.

Use in place of actual header tags in most scenarios.

class=”h1-size”

class=”h2-size”

class=”h3-size”

class=”h4-size”

class=”h5-size”

class=”h6-size”

Quotes

Pull Quote Usage

Use <q> (Pull Quote) it when quoting text originating on the current page. You can see how it displays on other stripes above.

Blockquote Usage

Use <blockquote> it when quoting text originating from another source (e.g. Testimonials). You can see how it displays on other stripes above.

Blockquote + Source Usage

Use <blockquote> when using a blockquote and a named source and within it put two <span> tags with the class="source". To easily add this type of blockquote to a page section, use the Text Block preset Blockquote + Source.

Pull Quote, Blockquote, and Source styling for each stripe can be changed under the Quotes section, located in Theme Options > General > Custom CSS.

This is a default Pull Quote. Use it well!

This is a default blockquote. Use it well!

This is a default blockquote. Use it well!
– Source

Utility Classes

For your convenience, many commonly used styling changes have been added as utility classes. Simply add these classes to the element you wish to target (or its container, in some cases) to quickly apply styling, or remove if no longer needed.

Display

Inline

<div class="inline">Inline Div</div>

Inline-Block

<div class="inline-block">Inline-Block Div</div>

Block

<span class="block">Block Span</span>

None

<div class="none">Hidden Div</div>

Mobile-Only

<div class="mobile-only">Element visible only on Mobile</div>

Tablet-Only

<div class="tablet-only">Element visible only on Tablet</div>

Desktop-Only

<div class="desktop-only">Element visible only on Desktop</div>

Hide on Mobile

<div class="hide-on-mobile">Element hidden only on Mobile</div>

Hide on Tablet

<div class="hide-on-tablet">Element hidden only on Tablet</div>

Hide on Desktop

<div class="hide-on-desktop">Element hidden only on Desktop</div>

Alignment

Left

<div class="left">Float Left</div>

Center

<div class="center">Float Center</div>

Right

<div class="right">Float Right</div>

Text Alignment

Text Left

<div class="text-left">Text Left</div>

Text Center

<div class="text-center">Text Center</div>

Text Right

<div class="text-right">Text Right</div>

Clear

Clear Left

<div class="clear-left">Clear Left</div>

Clear Both

<div class="clear-both">Clear Both</div>

Clear None

<div class="clear-none">Clear None</div>

Clear Right

<div class="clear-right">Clear Right</div>

Font Weight

Lighter

<p class="fw-l">Font Weight - Lighter</p>

Normal

<p class="fw-n">Font Weight - Normal</p>

Bold

<p class="fw-b">Font Weight - Bold</p>

Bolder

<p class="fw-br">Font Weight - Bolder</p>

100

<p class="fw-100">Font Weight - 100</p>

200

<p class="fw-200">Font Weight - 200</p>

300

<p class="fw-300">Font Weight - 300</p>

400

<p class="fw-400">Font Weight - 400</p>

500

<p class="fw-500">Font Weight - 500</p>

600

<p class="fw-600">Font Weight - 600</p>

700

<p class="fw-700">Font Weight - 700</p>

800

<p class="fw-800">Font Weight - 800</p>

900

<p class="fw-900">Font Weight - 900</p>

Margin

Margin can be added to page elements using the following formula: class=”m[side]-[margin size]-[screen size]”.

The side field refers to which side of the element the margin will be applied to: top (t), right (r), bottom (b), or left (l). Leaving this field blank will apply the margin equally to all sides of the element.

The margin size field refers to how much margin will be applied to the element. The default options are:

0 = 0px

xs = 10px

sm = 15px

md = 25px

lg = 50px

xl = 75px

The values for these sizes can be altered under the Margin sub-sections of the Utility Classes section under Theme Options > General > CSS.

Use screen size only if margin is needed only at specific screen sizes. The default options are mobile, tablet, and desktop.

Examples:

Margin – 0

<div class="m-0">Margin - 0</div>

Margin Top – Extra Small

<div class="mt-xs">Margin Top - Extra Small</div>

Margin Right – Small

<div class="mr-sm">Margin Right - Small</div>

Margin Bottom – Medium – Mobile Only

<div class="mb-md-mobile">Margin Bottom - Medium - Mobile Only</div>

Margin Left – Large – Tablet Only

<div class="ml-lg-tablet">Margin Left - Large - Tablet</div>

Margin – Extra Large – Desktop Only

<div class="m-xl-desktop">Margin - Extra Large</div>

Padding

Padding can be added to page elements using the following formula: class=”p[side]-[padding size]-[screen size]”.

The side field refers to which side of the element the padding will be applied to: top (t), right (r), bottom (b), or left (l). Leaving this field blank will apply the padding equally to all sides of the element.

The padding size field refers to how much padding will be applied to the element. The default options are:

0 = 0px

xs = 10px

sm = 15px

md = 25px

lg = 50px

xl = 75px

The values for these sizes can be altered under the Padding sub-sections of the Utility Classes section under Theme Options > General > CSS.

Use screen size only if padding is needed only at specific screen sizes. The default options are mobile, tablet, and desktop.

Examples:

Padding – 0

<div class="p-0">Padding - 0</div>

Padding Top – Extra Small

<div class="pt-xs">Padding Top - Extra Small</div>

Padding Right – Small

<div class="pr-sm">Padding Right - Small</div>

Padding Bottom – Medium – Mobile Only

<div class="pb-md-mobile">Padding Bottom - Medium - Mobile Only</div>

Padding Left – Large – Tablet Only

<div class="pl-lg-tablet">Padding Left - Large - Tablet</div>

Padding – Extra Large – Desktop Only

<div class="p-xl-desktop">Padding - Extra Large</div>

Max-Width

Full-Width

<div class="mw-full">Full-Width</div>

One-Fourth Width

<div class="mw-fourth">One-Fourth Width</div>

One-Third Width

<div class="mw-third">One-Third Width</div>

One-Half Width

<div class="mw-half">One-Half Width</div>

Two-Thirds Width

<div class="mw-two-thirds">Two-Thirds Width</div>

Three-Fourths Width

<div class="mw-three-fourths">Three-Fourths Width</div>

Similarly to the Margin and Padding classes, these classes can utilize the suffixes -mobile, -tablet, or -desktop to apply themselves only at specific screen sizes

The values for these sizes can be altered under the Max-Width sub-sections of the Utility Classes section under Theme Options > General > CSS.

Gravity Form Float

Apply class=”form-float” as the Extra Class Name in the Column Settings of the column containing the Gravity Form/Widgetized Sidebar you want to float. You can also apply the Form Float column preset.

Doing so will cause the form to float, allowing subsequent stripes to flow under the contact form. Make sure to set the Row Layout for any stripes that will be displayed the same as the one with the form, which will usually be 2/3 + 1/3.

You can find and alter styling for the form-float class in the Form Float sub-section of the Custom CSS, located under Theme Settings > General > Custom CSS.

Free Quote

Get Your
Free Quote

  • This field is for validation purposes and should be left unchanged.

This Row Is Being Floated Over

This row is being floated over. Make sure its Row Layout is the same as the row with the contact form. This row is being floated over. Make sure its Row Layout is the same as the row with the contact form. This row is being floated over. Make sure its Row Layout is the same as the row with the contact form.

This Row Is Being Floated Over

This row is being floated over. Make sure its Row Layout is the same as the row with the contact form. This row is being floated over. Make sure its Row Layout is the same as the row with the contact form. This row is being floated over. Make sure its Row Layout is the same as the row with the contact form.

CTA Stripe

This is what a CTA Stripe will look like. Use the Row preset CTA Stripe or set the stripe to Stripe 1 with a negative bottom margin in the row settings.

Contact Button