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.
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.
- This is a list item
- Another Item
- Another Item
- This is also a list item
- This is yet another list item
- This is a list item
- This is also a list item
- Another Item
- Another Item
- 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.
- 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
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.
- 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
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.
- 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
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 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
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.
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.