A ‘lead in’ is a short paragraph at the start of a page with a bold presentation. It is designed to catch the visitor’s attention and ‘lead in’ to the content that follows.

1. Add or edit a Content element at the top of the main content area..

2. Type in a short text paragraph.

3. Highlight the text with your cursor.

4. Click on the ‘Styles’ drop-down in the content editor toolbar.

5. Select ‘lead-in’ from the dropdown list.

6. Save the element updates.

Tip: Lead ins are recommended on every interior page with a text-based introduction to establish a consistent flow to the content throughout your website.

A style button is the best formatting choice for important links to pages, downloads and external websites that should stand out visually on the page. 

Small and large buttons will have the same color options. 

Button style are additive, i.e. for a large blue button, in the link editor apply the 'button1' 'Large' styles.  

Button style combinations are listed in the text of each button below.

Creating a Basic Button

1. Add or edit a Content element.

2. Type in the text label for the link.

3. Highlight the text label with your cursor.

4. Click on the ‘Link’ button in the content element toolbar and choose ‘Add Link’.

5. Add a link in the ‘Link Properties’ window

6. Click on the ‘Class’ drop-down and select one of the colored button styles outlined below.

7. (Optional) Add the Full Width Button Class 

8. Save the element updates. 

By default, the width of a button is determined by the length of its text label. Button treatments that include a border as part of their styling can optionally be set to display at the full-width of the available space.

Large buttons with subtext

As an additional feature, large buttons can also include subtext. 

1. Type the text label and subtext on one line

2. Highlight the subtext

3. Click the Italics button in the editor

4. Select the 'link' tool in the editor

5. Follow instructions to create a link 

6. Select the colored button class + the large button class 

7. Save

Buttons

Small, medium and large buttons will have the same color options.

The blockquote tool in the content editor toolbar is the best choices for text-based quotes and testimonials throughout interior pages. This can optionally include an author citation at the bottom of the quote.

1. Type in the quotation.

2. Optionally press the return key and type in the name of the author.

3. Highlight both the quotation and author citation with your cursor.

4. Click on the ‘Block quote’ button in the content editor toolbar.

5. Now highlight the author citation only with your cursor.

6. Click on the ‘Styles’ drop-down in the content editor toolbar.

7. Select ‘Citation’ from the dropdown list.

8. Save the element updates.

Tip: If you cannot see the ‘Block quote’ icon button in the content editor toolbar, click on the arrow toggle at the far right of the toolbar to display the full set of controls available.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna.Herman Melville

A callout is an eye-catching text excerpt or styled panel that can be used to draw attention to an important message in the sidebar or main content area. 

1. Add or edit a Content element in the main content area or sidebar.

2. Type in a short text paragraph.

3. Highlight the text with your cursor.

4. Click on the ‘Styles’ drop-down in the content editor toolbar.

5. Select ‘callout-content' from the dropdown list.

6. Save the element updates.

FinalSIte can create fully accessible tables, but the process requires several steps. Do not use tables to format the layout of content! Tables should be used to present organized data. Open this content tab to see detailed instructions on how to format your tables:

The styled table formatting option is recommended for all tables added to interior pages on the website to establish a visually-engaging and consistent presentation:

1. Add or edit a Content element.

2. Click on the ‘Table’ button in the content element toolbar.

3. Set the desired number of rows and columns

4. Select ‘First Row’ from the ‘Headers’ dropdown

5. Set ‘Border Size’, ‘Cell Padding’ and ‘Cell Spacing’ to ‘0’.

6. Set ‘Width’ to ‘100%’

7. Click on the ‘Class’ drop-down in the ‘Table Properties' window and select ‘table-styled ’ from the dropdown.

8. Click on the ‘OK’ button and populate the table data

9. Save the element updates.

Important: Always apply the ‘table-styled’ style using the ‘Class’ dropdown in the ‘Table Properties’ window. Avoid using the ‘Styles’ dropdown in the content editor toolbar to achieve this because it may apply the style to the wrong part of the table and could result in an incorrect presentation.

Note: Tables must only be used for tabular data and are not recommended for laying out content. Please use the Layout element for this instead to ensure the content displays effectively on all devices.

Highlighting the table and right clicking will bring up additional table properties that can be used to adjust the table.

If done correctly the table will look something like this:

The Tabs element lets you organize a large amount of content into a series of panels that occupy the same space on the page. Splitting up information using this element makes it easier for the visitor to explore.

To add a Tabs element:

1. Add a Tabs element from the Layout section in the Add Element window. This will insert a tabs element with one panel that has the title New Panel.

2. Hover over the panel title and click on the gear icon to the right of it.

3. Click into the Title field in the Edit Panel Element Settings window to add a new title for your panel and click on the Save button. 

4. Populate the panel with new content. This can include one or more elements of any type and includes an empty Content element by default to get you started.

5. Click on the Add Tab button to add a second panel to the set of tabs.

6. Repeat steps 2 to 6 for each panel required.

Tip: Tabs are best suited to content split over a smaller number of panels with short titles. If the number of tabs exceeds one row on desktop screen resolutions, consider using an Accordion element to organize the content instead.

Note: Tabs will automatically display as accordions on mobile phones and other narrow devices to improve ease of use for the visitor.

To learn more about the Tabs element, please read our Knowledge Base article on how to Customise an Accordion or Tabs Element.