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

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"

A quote can be created by highlighting text on a page and selecting the blockquote icon in the editor.  For the name/reference style you will highlight the last part of the quote text and select the bold icon in the editor.

Example HTML:

<blockquote>

<p>This is a blockquote olor sit amet, consectetur adipi scing elit. Septem autem illi non suo, sed populorum suffr agio om nium nominati sunt.&nbsp; <strong>Name or Reference</strong></p>

</blockquote>

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 - for responsive full width images and embed code that requires iframes such as Vimeo video you will need to wrap them in a div tag with the class "div-embed".

Example HTML:

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

<div class="div-col">

<div class="div-embed"><img src="http://eeee84686e2ad94e371f-a15545195c005d77ed9461836ee71a13.r3.cf2.rackcdn.com/uploaded/g/0e3124373_1397772869_generic.jpg" alt="" /></div>

<h5>Heading 5</h5>

<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 class="div-embed"><iframe width="100%" height="150" src="//player.vimeo.com/video/78869468" frameborder="0" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe></div>

<h5>Heading 5</h5>

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

</div>

</div>

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 - for responsive full width images and embed code that requires iframes such as Vimeo video you will need to wrap them in a div tag with the class "div-embed".

Example HTML:

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

<div class="div-col">

<div class="div-embed"><img src="http://eeee84686e2ad94e371f-a15545195c005d77ed9461836ee71a13.r3.cf2.rackcdn.com/uploaded/g/0e3124373_1397772869_generic.jpg" alt="" /></div>

<h6>Heading 6</h6>

<p>Graecum enim hunc versum nostis omnes.</p>

</div>

<div class="div-col">

<div class="div-embed"><img src="http://eeee84686e2ad94e371f-a15545195c005d77ed9461836ee71a13.r3.cf2.rackcdn.com/uploaded/g/0e3124373_1397772869_generic.jpg" alt="" /></div>

<h6>Heading 6</h6>

<p>Graecum enim hunc versum nostis omnes.</p>

</div>

<div class="div-col">

<div class="div-embed"><img src="http://eeee84686e2ad94e371f-a15545195c005d77ed9461836ee71a13.r3.cf2.rackcdn.com/uploaded/g/0e3124373_1397772869_generic.jpg" alt="" /></div>

<h6>Heading 6</h6>

<p>Graecum enim hunc versum nostis omnes.</p>

</div>

</div>

For instructions on how to set-up accordions within the content editor, please view our Help article here: https://help.ekklesia360.com/article/accordions-within-a-page/