Sam Webster
Created Dec 20, 2022Designing your Home Page
In this tutorial, we will learn how to design your website home page, primarily using the Content Templates feature, which allows you to create detailed web page content without having to write HTML code.
For more information on adjusting your home page banner via HTML, please see BG_005_Editing your Homepage banner via HTML:
Step by step guide
Default Home Page
Our default home page is shown in the image below, containing a slider, along with several sample sections containing various styled imagery and text.
Our task in this tutorial will be to understand, modify and further design our home page.
To begin, we will locate the Editable Content blocks controlling the home page content.
Navigate to the Admin area and click on Content Management
Click on Editable Content
Navigate to section 2. Homepage
The Homepage section contains three Editable Content blocks, each controlling elements within different areas of the page.
Homepage Banner : The main banner content at the top of your homepage (excluding the header). In our default configuration, this contains a slider and a simple 4 column content section.
"Midpage Content": This is a term you will see on two of the three content blocks for the Homepage. Midpage can be considered the location where featured products will appear (adding these will be covered in a later tutorial).
Above Midpage Content will insert elements above this, whilst Below Midpage Content will insert elements below. Multiple elements can be applied both above and below the midpage content.
Click on Edit on the Homepage Banner block
Select your Body text editor type
By default, the specification style for your homepage banner will use Content Templates (more on these in a moment), however you are able to select other input styles.
Rich Text Editor: Think of this as a word-processor style input, with direct content formatting options. This will not generally be suitable for something complex such as the banner, but may be suitable for general page content.
Code Mirror Editor: A code editor where HTML code can be input. This option may appeal to those with HTML coding experience, and can give you greater control over the design and functionality of your header.
For more information on adjusting your home page banner via HTML, please see BG_005_Editing your Homepage banner via HTML:
Step by step guide
In our example, we will remain on the default of Content Template Editor.
The Content Template functionality eliminates the need for any HTML knowledge, by replacing the standard Code Mirror Editor with a series of simple inputs and controls to create the header that works for you.
This functionality is constantly being improved, meaning the layout of controls may differ slightly from the images shown in this guide. The general methodology, however, will remain the same.
Select a Content Template
Several Content Templates are available for use based on the Editable Content block being modified.
Examples are; Footer, Content and Header. Each will provide their own range of available content formats. In our example, we will remain on the currently selected Builder template.
The asterisk "*" next to the templates relates to default and supported templates.
Sections
We build up the content of our templates within the Sections area.
Each template can contain numerous sections, with each section capable of containing completely different content.
For example, we can see in our default configuration that we have two sections.
Slider: This scrollable banner images at the top of our home page is fully configurable. This can contain text, imagery buttons and much more.
Sections - Four Column: A generic section within our home page, specifically created with four columns. Sections can also be made with a different number of columns. These sections can contain imagery, text, links and much more.
Click on the Settings icon for the Slider section
We will begin by reviewing the configuration of our slider.
Much of the content added to our templates will have their own separate configuration options. Where these options are available, the gear icon will appear.
Configure your slider
The Slider is hugely configurable, with many of the general settings governing all slides contained within the slider configuration pop up.
Settings in this screen include:
Animation controls, allowing you do define whether slides progress automatically and how these animations are styled.
Additional slide progress controls, giving bullets below the slide to navigate to a specific entry, or enabling arrow controls to the left and right of your slides.
Click on Ok to confirm the slider configuration
Expand the Slider section to see details on individual slides
Each slide will have it's own specification, operating in much the same way as the main Slider section detailed above.
Click on Add new Slide
Exiting slides can be amended or deleted. Additionally, we are able to add new slides to our slider.
To begin adding content to our new slide, click on Add Content
Select the slide layout you wish to add
This will control how your content will appear on your new slide.
In our example, we will select 2 Column Image and Content
The appropriate slide layout details will be added to your slide
Add an image to your slide layout by clicking Upload
Your image will be uploaded
Note: A white image/logo has been uploaded here, hence it isn't visible in this screengrab.
Your uploaded image will display, along with options to download your image, upload a replacement or remove the image from your slide.
Click the slide settings for additional configuration options
Slide configuration options
Available configuration options for a slide include:
Specification of a single background colour
Specification of a background image, along with its position and size
Modify slide configuration settings
In our example, our new slide will have a solid background colour, matching the primary colour selected in our Appearance Settings. No background image is required.
Click OK once the configuration is complete.
To begin adding content to the 2nd "content" column, click Add Content
Numerous content types are available for addition, including:
Title
Sub-title
Paragraph - Allowing word-processor style content formatting
Wysiwyg - Allowing enhanced word-processor style content formatting, including advanced features such as table creation.
Buttons - Include clickable buttons with defined URL's to your slide
And more...
Add a Title content block and enter a title in the resulting field
Add a Paragraph content block
Input and format text in the resulting field
Text and additional formatting options are available directly above the content input area.
Add a Buttons content block
This block can contain multiple buttons
Click on Add new Button
Define text to appear on the button in your storefront, such as "Find Out More"
To begin defining a URL for the button, click on Select one option
This dropdown list will provide access to different resources and pages available on your storefront. This includes content pages, categories and products.
Search for a relevant target
Based on your target selection, a search box will appear where you can begin to search for a relevant web page to link to.
This list will automatically refine as you type, only showing items that match your search criteria.
Select a Content Page
In our example, we will create a link to our About Us page, a content page already present on your site.
Content Pages will be covered in more detail in a later tutorial.
The URL field will be populated based on your selection
Click on Save and Continue Edit
View the new slide on your storefront
Your newly created slide will now be available on your storefront.
The slide can be further modified by returning to the banner content template at any time.
Next, we will take a closer look at the second section within the Banner editable content block
This is the section controlling the 4 column content directly below our homepage slider, containing an image, header, sub-header and paragraph.
Navigate to your Banner editable content block and expand the Four Column section
Multiple content blocks can be added to this section to form a bespoke layout. Expand the default Layout to reveal the specification options for the individual columns
Explore column content
Each column is pre-defined with an image, title, subtitle and paragraph.
Each of these can be amended or deleted. Additionally, extra content can be added using the Add Content button.
Sections can be deleted entirely should they be surplus to requirements. Click the delete (X) icon next to the section header
You will be asked to confirm this command.
Click on Delete
Click on Save and Continue Edit
Refresh your homepage to review changes
The 4 column section below the slider will no longer be present, with the remaining content moved upwards.
Return to the Editable Content page and review the Homepage section
A reminder about "Midpage Content": This is a term you will see on two of the three content blocks for the Homepage. Midpage can be considered the location where featured products will appear (adding these will be covered in a later tutorial).
Above Midpage Content will insert elements above this, whilst Below Midpage Content will insert elements below. Multiple elements can be applied both above and below the midpage content.
Click on Edit next to the Homepage Above Mispage Content section
These sections can be built, modified and deleted using the same methodology as the main banner editable content block
Fully customisable home page
With this knowledge, you should now be able to fully customise your home page.
The Content Template functionality is extensive, with only the core principals covered in this tutorial.
It is recommended that you experiment with these capabilities to get a well rounded feel for their abilities and so you can get the very best out of Infigo.
