Subpage Styles
Overview
The page editor allows you to assign custom classes/styles to elements in the content area.
Custom Buttons
There are several 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 class must be assigned to the link. The options are button-small, .button-medium and .button-large. The style guide page displays each of these.
Div Callout
You can display a custom callout area on a page by wrapping content in a div tag with a class "div-callout". This will present that content block with a dark background.
Example HTML:
<div class="div-callout">
<h3>Call to Action</h3>
<p>Atque haec couod cum accidisset ut alter alterum necopinato videremus. Moriatur, inquit. Deinde etiam cum mediocri amico.</p>
<p><a href="#" class="button-large">Large Button</a></p>
</div>
Accordions
**If you purchased your website prior to May 12, 2017, this feature may not be available to you. To look into the cost of implementing this on your site, please contact our Support Team at: [email protected].**
The purpose of an accordion is to allow your content to be expanded and collapsed throughout the body of a page. In order to utilize this feature, you will first create text that has headers with text underneath. You can use any of the header options that are in the content editor drop down.
To begin, highlight the header text and then click on Formats. From the Formats drop down select the "accordiontrigger" option. You will notice that the text remains highlighted in gray with the action underneath.
Now let's move on to the text that is going to be expanded and contracted. Highlight that text and then click on the Formats dropdown a second time. Once there, you will select the option "accordiontext."
You will notice that the text appears highlighted in the content editor but will NOT appear highlighted on the live site. They are just markers indicating that the accordion functionality has been applied.
When you are done, save the page and view on the website to see your changes. You will notice each header is linkable and has a + and - sign to click on to view the accordion content.
Tabbed Content
Add the info you want in one tab into a section by going to CONTENT > SECTIONS > ADD A NEW SECTION
Add a link list with the tab titles you want by going to CONTENT > LINK LISTS (Tabs Example Below)
In the link list item description, add the slug of the corresponding section name. (Example: If my section is called Tab 1 Example then I would add the slug which is tab-1-example below)
Insert the monklet called "Section Monklet Tabs" and tell it which link list to display using an inline parameter. An example of this syntax would be section-monklet-tabs|find="tabs-example".