Content Block
Content
Using the Format dropdown and the styling buttons in the Content Block toolbar will give you the basic default styles from the stylesheet.
Headings
Headings are set up in a sliding scale to make content hierarchy clearer...
Heading 1
There should be only one Heading 1 per page which is set up by default in most templates.
Heading 2
Heading 3
Heading 4
Heading 5
Text Styles
Styles available using the formatting buttons in the Content Block......
Default Text - The site uses Poppins font with a base size ranging from 16px to 20px depending on screen size. Basic styles for hyperlinks, for italics / emphasis and for bold text have already been set up in the style sheet.
Additional custom text styles are available using the Styles dropdown menu...
Lead Text - Emphasised text for introductory paragraphs.
Highlight Text - Brand coloured text to highlight content.
Small Text - Smaller text size for smallprint.
Muted Text - Lighter grey coloured text for a subtler effect.
Small Muted Text - Smaller text size and lighter grey colour for smallprint.
and for links in your content...
Lists
Using the List options in the content block...
Unordered List...
- List item
- List item
- List item
Ordered List...
- List item
- List item
- List item
Blockquotes
Default quote style...
"This is a very exciting quote"
Mr V. Important
Horizontal Rules
Default Horizontal Rule in Content Block...
For a styled version use the Horizontal Rule block...
Custom Templates
The format of a content block can be changed by applying a Custom Template.
Description
The Description template will display the page description on the page using the Lead Text style as an introduction. This has been included automatically on most templates but if you do not want to show the description you can edit this content block and add you own content.
This is the description of the page being displayed automatically
Panel
The Panel template will create a light grey panel to highlight your content. This also includes a watermark of the logo and a curved bottom right corner...
This is a Panel
You can add any content in this box.
Like Lists...
- List Item
- List Item
- List Item
Box
The Box template will create a red panel to highlight your content...
This is a Box
You can add any content in this box.
Box Dark
The Box Dark template will create a balck panel to highlight your content...
This is a Box Dark
You can add any content in this box.
Image Block
Images
By default images will fill the available space (up to the size of the image itself) with a bottom corner curve.
Custom Templates
Applying Custom Templates to your image block can change the appearance of the image.
Banner Title
The Banner Title is used to display the section name on each of the pages. You can add your own Banner Title using the Title of the image block to name the section...
This is the Title
Center
Where images are not larger enough to fill the container the Center template will ensure images are aligned centrally...
Caption
By using the Caption template any text added to the Title section of the image block will be displayed on the page...
Intro Image
The Intro Image automatically resizes the image and aligns it to the right to allow content to flow around it...
This text will automatically wrap around the image placed above it so they fit together nicely.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam aut commodi totam fuga illo quisquam reiciendis consectetur illum? Possimus necessitatibus quaerat fugit quisquam? Omnis voluptates blanditiis perferendis, rerum ex suscipit.
It doesnt matter how much text you add it will wrap around the image as soon as it is long enough to drop down below the image height.
Image Slider
The Image Slider block is an excellent way to display multiple images in a small space.
Home Slider
Currently used on the home page to show the Industries supported but can be place anywhere in the site for the same effect...
If no text is added to the slide this would just be an image gallery...
Image Gallery
Currently used on product pages to provide a small 2 column image gallery of product images with captions. This can be added anywhere in the site for the same effect...
This is a caption using the Title
This is a caption using the Title
File Block
Files
Default Style when adding a file block to the page. The icon and file size will be automatically added...
List Files from Set
HTML Block (Specification Tables)
Specification Tables
The HTML block can be useful for adding external code to the site. Using Custom Templates we have set the HTML block up to take spreadsheet data and present it in table format. It is possible to export spreadsheets as a comma separated value (CSV) file but as the descriptions of products contain a lot of commas we need to replace those separators with a | (pipe) character. Each new line is a new row in the table.
Table
Using simple pipe separated text and the Table custom template we can create a table...
Value 1 | Value 2 | Value 3
Value 1 | Value 2 | Value 3
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |
Empty cell must still have the | character in place...
Value 1 | | Value 3
Value 1 | Value 2 |
| Value 1 | Value 3 | |
| Value 1 | Value 2 |
Rows with only 1 value will automatically span the full width...
Value 1
Value 1 | Value 2 | Value 3
Value 1 | Value 2 | Value 3
| Value 1 | ||
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |
Table Heading
Table Heading will automatically make the first line a table heading...
Title 1 | Title 2 | Title 3
Value 1 | Value 2 | Value 3
Value 1 | Value 2 | Value 3
| Title 1 | Title 2 | Title 3 |
|---|---|---|
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |
The Table Heading can also span the full width if necessary...
Title 1
Value 1 | Value 2 | Value 3
Value 1 | Value 2 | Value 3
| Title 1 | ||
|---|---|---|
| Value 1 | Value 2 | Value 3 |
| Value 1 | Value 2 | Value 3 |
Page List / Navigation
Page List
The Page List block is very useful for setting up links to multiple pages grouped by either section of the site or page template type.
Gallery
Introduction.
Slats
Introduction.
With Thumbnail image...
or without...
SubNav
The section navigation is already added to the templates but it is possible to set up your own using the SubNav Custom Template.
Page List Title
Date Navigation
The News Archive uses the Date Navigation block to show a filtered list of articles. By default this will list by month and year but the News custom template simplifies this to just Years...
Page Attribute Block
Page Attributes
The site makes a lot of use of Page Attributes to categorise content and form relationships between different pages. These Page Attributes are set up in the Composer form so they can be added when a page is created. These Page Attributes can then be displayed on the page by using the Page Attribute Display block with Custom Templates to change how they are displayed.
Intro Image
The Thumbnail attribute is used for products and news items to display a featured image in Page Lists on other pgae. This can also be displayed on the page itself using the Intro Image custom template...
This text will automatically wrap around the image placed above it so they fit together nicely.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam aut commodi totam fuga illo quisquam reiciendis consectetur illum? Possimus necessitatibus quaerat fugit quisquam? Omnis voluptates blanditiis perferendis, rerum ex suscipit.
It doesnt matter how much text you add it will wrap around the image as soon as it is long enough to drop down below the image height.
Related Pages
Related Pages allow you to select Products / Probes which are related to the current page to be displayed in a gallery format with links...
File Download
Product brochures can be added as a Page Attriute when adding a new page and will be automatically displayed in the product template...
Form Block
Forms
Using either the default Legacy From block or the new Formidable form block the styling remains the same and is built into the stylesheet so no Custom Templates are required...
Search Form
The search form has already been added to the search page but it would be possible to set up an additional search e.g. Product Search using the Search block...
Colour Reference
Brand Colours
Introduction.
- Brand Primary
- Brand Secondary
Greyscale
- Black
- Dark Grey
- Grey
- Light Grey
- Silver
Additional Colours
- Navy
- Blue
- Aqua
- Teal
- Olive
- Green
- Lime
- Yellow
- Orange
- Red
- Maroon
- Fuschia
- Purple