Subpage Styles

Overview

Overview

The page editor allows you to assign custom classes/styles to elements in the content area.

Custom Buttons

There are 3 custom button options for your site.  You can highlight text in your content area, select the link icon to assign a link and then choose the button class from the formats menu.  The three options are "button-small", "button-medium" and "button-large"

 

Meta Class

Meta Class

The class option "p-meta" in the format menu can be assigned to a paragraph tag to display the text in a smaller meta color.

Two Column Layout

Two Column Layout

You can create a two column layout by using custom classes and div tags.  Each two column area should have a single div tag with the class "div-col-2" that wraps two separate div tags with the class "div-col".  Inside each of the "div-col" tags you can place content as needed.  

*NOTE - Video embed code that requires iframes such as Vimeo video will automatically be resized for different screen resolutions.

Example HTML:

<div class="div-col-2">

<div class="div-col">

<div><img src="http://a1d191981f93d3a96770-a310d4659ecf8665c483aabf633311d9.r49.cf2.rackcdn.com/uploaded/b/0e3170975_1398806244_banner-5.jpg" /></div>

<h3>Two Column Style</h3>

<p class="p-meta">Graecum enim hunc versum nostis omnes.</p>

<p>Graecum enim hunc versum nostis omnes. Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.</p>

</div>

<div class="div-col">

<div><img src="http://a1d191981f93d3a96770-a310d4659ecf8665c483aabf633311d9.r49.cf2.rackcdn.com/uploaded/b/0e3170975_1398806244_banner-5.jpg" /></div>

<h3>Two Column Style</h3>

<p>Graecum enim hunc versum nostis omnes. Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.</p>

<p><a href="#" class="button-medium">Medium Button</a></p>

</div>

</div>

Three Column Layout

Three Column Layout

You can create a three column layout by using custom classes and div tags.  Each two column area should have a single div tag with the class "div-col-3" that wraps three separate div tags with the class "div-col".  Inside each of the "div-col" tags you can place content as needed.  

*NOTE - Video embed code that requires iframes such as Vimeo video will automatically be resized for different screen resolutions.

Example HTML:

<div class="div-col-3">

<div class="div-col">

<div><img src="http://a1d191981f93d3a96770-a310d4659ecf8665c483aabf633311d9.r49.cf2.rackcdn.com/uploaded/b/0e3170959_1398806210_banner-1.jpg" /></div>

<h3>Three Column Style</h3>

<p>Graecum enim hunc versum nostis omnes. Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.</p>

</div>

<div class="div-col">

<div><img src="http://a1d191981f93d3a96770-a310d4659ecf8665c483aabf633311d9.r49.cf2.rackcdn.com/uploaded/b/0e3170959_1398806210_banner-1.jpg" /></div>

<h3>Three Column Style</h3>

<p>Graecum enim hunc versum nostis omnes. Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.</p>

</div>

<div class="div-col">

<div><img src="http://a1d191981f93d3a96770-a310d4659ecf8665c483aabf633311d9.r49.cf2.rackcdn.com/uploaded/b/0e3170959_1398806210_banner-1.jpg" /></div>

<h3>Three Column Style</h3>

<p>Graecum enim hunc versum nostis omnes. Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.</p>

</div>

</div>