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