What's Included
- Page – Header – 6 layout options
- Content & Media – 4 layout options
- Statistics Bar – 2 styles
- CTA Box – 3 styles
- Social Proof – 3 types with layout options
- Feature Cards – 3 layout options
- Feature & Highlight Grid – 2 styles
- FAQ Accordion
- Visual Highlight Grid – 2 layouts
- Location(s) Map
Page – Header Specific Instructions and Options
There are 6 different layout options:
- Header – Medium Image, which displays the image to the right of the Page Heading
- Header – No Image, used on this page up top with background color
- Header – Large Image, with option to display the image on the right or left
- Header – Background Image* (PRO, PREM)
- Show Slider (PREM)
- Layered – Add small image to break the plane (PREM)
- Header – Form* (PRO, PREM)
- Header – Hero and 2 Logos* (PRO, PREM)
- Each logo can have a link
- Option for 2 buttons
- Header – Large Image with option to display the image on the right or left (PRO, PREM)
Additional Fields & Settings
- Add Media (image or video (PRO, PREM), if appropriate)
- Add a Heading – This is the H1 for the page (Required)
- Add a Sub-heading (Optional)
- Add a short description for top of page (Optional)
- Add a button (Optional)
- Select text alignment: Left, Right or Center
- Show Scroll To Next Arrow: Toggle On to display an arrow to indicate there is more below the fold. Add anchor to main section of the page, this is likely not needed for these Header options.
- Update Padding/Margin for devices – default settings can be set once desired setting is achieved
- Image Carousel for Medium/Large Image
*For these options, it is recommended to use the “Show Scroll To Next” option and anchor the main section of the page when there is more to view below the fold.
Content & Media Options
The Content & Media component has five layout options:
- Media on Right
- Media on Left
- Full Width Image Above Content (PRO, PREM)
- Hero Image Only (PRO, PREM)
- Divider (PRO, PREM)
Additional Fields & Settings
- Text in the description box can be formatted as needed. Italics, bold, etc., using headers, lists, and links.
- Media can be an image or video (PRO, PREM) and there can be multiple, in which case select Show Carousel (PRO, PREM) checkbox to add multiple. Be sure to show arrows or dots and format so they are visible based on images used.
- Media can be Square or Rectangle (PRO, PREM)
- Additional style option to “break the plan” using Layered toggle (PREM) can be used on the Image Right/Left options.
- Add a button to the component to link to another page on the site or external to the site.
- Background Color of this component can be adjusted below.
Content & Media – Media on Left (Square)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Content & Media – Media on Right (Rectangle)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Feature & Highlight – Title Only Grid Left
Feature & Highlight Grid (PRO, PREM) has 2 content type options: Title or Title & Description and 3 content position options: Grid Below, Left or Right
- Content boxes may be links
- A button may be added below the description of grid
- Background color of the component may changed
- Alignment of text may be changed
Fourth one no link
Fifth one no link
Sixth one no link
CTA – Instructions/Options:
- Select CTA Size: Medium or Small
- Add Heading and button (optional)
- Select Background Color so that the CTA stands out on the page OR CTA – Wrapper Color (if meant to be full width CTA)
- Select Text Alignment: Left, Right, Center
Feature Cards – Grid Small
- The Feature Cards component has 4 Layout Options: Editable, Blog (PRO), Flip (PRO), Color Option (PREM)
- Each layout option has 3 size options: Small, Medium, Large.
- Editable and Blog (PRO) can display as a Grid or Carousel (PRO), Flip (PRO) is Grid only, and each can have a button on the entire component or a link on the card itself, , Color Options (PREM) is Carousel only.
- The Heading and Description can be Left, Center or Right aligned.
- A background color can be used for the component.
- Show Animation toggle can be set to yes/no to enable/disable the card animation to slide in from right.
- For Editable and Flip: Add row below to add more cards, for each card: add an image, title, description, and link (optional).
- Blog option is auto-populated based on selection of Category and/or Tag assignment
Title 1
Short description for card 1
Card 2 Title
Short description for card 2
FAQ Accordion
Add a button for this component using the Select Link button below.
Use Add Row button below to add additional FAQ items, once added, they can be reordered by dragging and dropping to new location.
Add and remove items by hovering in the right column next to the Answer Description and selecting the + or –
Lorem ipsum odor amet, consectetuer adipiscing elit. Placerat blandit mus tellus luctus elementum ullamcorper. Convallis potenti pharetra ac fames pharetra felis nulla dis.
Visual Highlight Grid – Icon Top
There are three layout options available: Icon Top (PRO), Icon Left (PRO), and Services Section (PREM)
- Additional Settings include:
- Add a Button/Link for the component
- Change the Background and/or Font color for the entire component
- Font alignment: Left, Right, Center
- Instructions:
- Select Layout Type
- Add Heading for the component
- Add Description (Optional)
- Add row in section below to add “cards” and related details for each item
- Image, Title, Content, Button
- Ability to add a link for each card with or without link text displayed (Optional)
Location(s) Map
This only works with API in place when site is live. Image below shows example of this on a live site.
Add Row to add link, image title, sub title and description below.
Title
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
