Content Templates | A Visual Guide
This page is designed to act as a visual guide into the different available sections, layouts and elements available within Infigo's Content Template functionality.
There are examples of each feature, allowing you to learn about and decide upon the elements available within Content Templates which would are suitable for your site.
This page is viewed on an Infigo storefront and has been fully configured using Content Templates.
Product Champion for Content Templates and UI
Ashleigh Bacon
- Our Customer Support team have responsible areas for which they are designated Product Champions.
- The Product Champion for Content Templates and wider UI (User Interface) queries is Ashleigh Bacon.
- Ashleigh has been with Infigo since January 2023 and has quickly made her skills known to both our team and our customers.
- Send any UI related queries via the usual Zendesk channels.
Available Tutorial Resources
Sections > Section
The area with the navy background is a single section
- Structural Blocks: Sections are like building blocks that help organize a web page. They divide the content into different parts, making it easier to manage and understand.
- Content Grouping: Each section groups related content together. For example, a "Header" section might contain the website's logo and navigation, while a "Footer" section could hold contact information and links.
- Visual Layout: Sections also contribute to the visual layout of a webpage. They help define where different elements like text, images, and buttons should go, creating a clear and pleasing arrangement.
Sections > Section > Layouts
Allows you to specify how the content within a section is displayed.
- Primarily involves selecting a number of columns (from 1 to 4)
- These will provide equal width columns spanning the section
- 2 Column Image and Content* | Two equal columns, preconfigured to accept an image on one side and additional content on the other
- The additional content can be of numerous types
- Featured Tiles* | Specify individual tiles, with pre-configured fields for elements such as image, links, titles and buttons.
One Column layout
This is a one column layout example.
The single column automatically spans the entire section.
This content has been placed within a block to show the span of the single column within the section.
Two column layout
Column 1
This is the first column of a 2 column layout.
The columns are of equal size and will rescale to span the entire section
Column 2
The length of the individual columns is controlled by the content within that column
3 column layout
Column 1
Column 2
Column 3
4 column layout
Column 1
Column 2
Column 3
Column 4
2 Column Image and Content
This layout provides two columns.
One column is configured to allow an image upload.
The other column allows for multiple content elements of various types to be input.
Or additional images
Custom column layout
33% width
Admins can define the width of columns
Facilitates creating columns of different widths spanning the section
66% width
For example, a 33% section and a 66% section will be viewed side-by-side
20% width
If the next column in the list doesn’t fit in the remaining space, it will be placed below on the page.
20% width
60% width
-
Sections > Slider
A slider is an automated section on a webpage that cycles through multiple images and information panels, often used to showcase products or content in an engaging manner.
Infigo allows you to create numerous slides with completely different layouts and content.
Each slide is specified individually.
The length of the slider will be based on the length of the longest slide.
-
Sections > Slider
Versatile background
The background of individual slides can be adjusted to have a custom solid colour, or can utilise an image.
The user can decide how the image is anchored and how it is sized. -
Slide layouts
The layout of a slide can be set up in much the same way as the sections detailed above.
The user specifies the number of / size of the columns, then specifies the content present in each of those columns.
Sections > Featured Content - Products Style*
Use these to manually showcase elements of your site (not necessarily products) but using the styling of your Featured Products section
This is a featured content example
Mimic appearance settings
Sections > Featured Content - Category Style*
Example Sub Title
Sections > Section > Layout > Content
- A range of element types to place within your formatted pages.
- Infigo gives you the ability to define a wide range of content types.
- Each content type has its own set of relevant configuration options.
- Examples of available content types include:
- WYSIWYG
- Image
- Button
- Embed
Content is not exclusive to Section > Layouts.
Content elements will be present in or added to any content template format and constitutes the actual information on the page.
Content Element | Blocks
Blocks
Block elements in web development are HTML elements that create distinct content sections
Infigo allows you to place multiple subsequent elements inside a block element.
Blocks are completely configurable and come in several styles.
This style is a box style block
This is a default style block, where the block exists but is not visible in the section
This is a notification style block.
Content Element | Page Title
Content Templates
Above is a Page Title content element, which takes the name of the page it is placed on.
Content Element | Title
This is a Title element
The configuration settings for a title allow styling options such as alignment, font colour, size and more.
Content Element | Sub Title
This is a Sub title content element
The configuration settings for a title allow styling options such as alignment, font colour, size and more.
You can also specify the HTML tag associated with the title. For example, it is h3 by default.
Content Element | Paragraph
This is a Paragraph content element.
This element allows for multi-line input and basic styling can be done from within the input box (see screenshot below).
Images 
, links and anchors can also be inserted into the paragraph input area.
Additional configuration options include alignment, text colour and custom styling (covered later).
Content Element | WYSIWYG
This is a WYSIWYG content element, standing for What You See Is What You Get.
Essentially, whatever you see when styling the input box is how it will appear on your web page.
This element contains more advanced styling options within the input box, including:
- Bullets
- Numbering
- Font selection
- Font Size
- Font colour and highlighting
In addition to the styling options available in the Paragraph content element.
More advanced content formatting is also available, such as tables and code blocks:
| Header 1 | Header 2 |
<p><b>This is a code block</b></p>
Content Element | Buttons
These are examples of button elements.
Users can dictate the colour and styling of the buttons, along with their alignment.
An intuitive interface allows easy selection of linked URL, by enabling the search of other pages, products, categories, etc on your storefront.
Content Element | List
- This is an example of a List content element
- It allows the definition of a list of items with an adjustable list style
- Such as unordered (bullet points)
- Or ordered using letters, numbers, roman numerals, etc
- Each list item can also be specified as a link, with the same intuitive URL input method seen in other elements.
Content Element | Image
The examples below show the Image content element.
These elements allow users to upload a selected image and configure how it is displayed (such as shape and size).
Also available are options to turn the image into a hyperlink and control its alignment.
Above is an image set as a ratio matching the original image
Above is an image forced into an alternate ratio. In this case 3 by 1.
Above is an image set to a round shape, with auto sizing specified.
Above is an image set to a round shape, with a specified size. In this case, 128 x 128 pixels.
Above is an image set to a square shape, with auto sizing specified.
Above is an image set to a square shape, with a specified size. In this case, 128 x 128 pixels.
Content Element | File
Below are examples of a file content element.
These allow administrators to provide a means of users downloading a particular file.
Various customisation options are available, allowing the download link to be displayed in various different ways.
All the admin needs to do is select the file to be made available for download, Infigo will do the rest.
Content Element | Linked List
Content Element | Embed
The Embed content element is a versatile tool allowing the input of code snippets into specific areas of your page. These code snippets include, for example, iframes and Infigo modules (found in the Tokens section).
Embedded items can have a ratio and alignment defined to control how they appear on the page.
Above is an example of an embedded iframe. In this case incorporating a video hosted on YouTube. The code used within the Embed element to achieve this was:
<iframe width="560" height="315" src="https://www.youtube.com/embed/0l9op92WDgQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Above is an example of an embedded layout token. These are Infigo modules which input certain pre-written code to give access to features such as search boxes, category navigators, currency selectors and more.
In this example, the layout token Module.Search Box was used.
Content Element | Accordion
Sample Accordion content
An Accordion element provides the ability to create expandable sections of information.
These allow you to place a lot of information on a page whilst keeping it short.
Sample Accordion
Multiple content elements can be added to an accordion
Social Media Links
The Social Media Links content element allows you to specify a URL, paired with an icon from a list of pre-selected social media platforms.
Content Element | Spacer
Spacer elements allow simple imput of 1-5 line breaks per element using a simple input.
For example, a 5 space spacer is input below.
End of spacer.
Custom Styling
Many elements within Content Templates allow admins to define custom styling as part of the configuration options.
For example, the images below show custom text colour selection options within a Title element. These are listed from Custom 1 to Custom 4.
Defining these custom colours or styling is accomplished with the use of the CSS Override functionality.
For example, this element has the "Custom 1" colour option selected, which has been defined by a section within the CSS Override area:
.has-text-custom-1 {
color: #f06765 !important;
}
Step-by-step guides to configuring custom styling are included below.
Additional tutorial resources on this topic are planned for the future.