Subpage Styles
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
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
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
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>