Creating a new website page (advanced)
- Havil Paspula (Unlicensed)
- Elliott
- Elliott Rowland (Unlicensed)
Adding a brand new page to your website can be done quickly and easily using our simple page layouts. However, if you want to design a more complicated page layout, the following instructions will run through how.
VIA allows you to add what are called items to a page. Items are essentially modules that come in different formats, such as contact forms, carousels of images or testimonials. The modules help you build a highly configurable website page and move them around so you can build virtually any layout that you want.
Before you start to build a website page from scratch, remember that you are able to clone/duplicate existing website pages. So if the page you want to build would be more easily recreated by simply duplicating and then editing an existing page, you may want to read the following guide Duplicating a website page
How to create a new website page:
Login to VIA
In the left hand menu, go to Website > Pages
In the top of the tab, click the Add button. This will open a new tab where you can input your page content. First you'll want to add the following information
Page URL - add the URL of the page. Spaces will automatically be replaced with -
Visible - tick this box if you want your page to be visible and not stay as a draft
Window Title - add you unique window here. A window title is essentially the title of the page as it will appear in a Google listing. Find out more here What is a Window Title or Page Title?
Meta description - add your meta description here. A Meta Description is essentially the wording of the page's Google listing. Find out more here What is a Meta Description?
Click Save and Close. You can still edit the fields above at a later date, but you have now created a page in which you can add your items
Add basic information to the page:
In the Pages tab, search for the page you have just created and double click the relevant page from the list view or right click and select edit
This will open a new tab showing you the wireframe of the page. This is essentially the current layout of the page with a preview of the text. This will be blank at this stage. Click the underlined Page URL at the top. A window will slide out from the right hand side to allow you to add the page fields
To build the rest of the page, you can utilise some, all or none of the fields within the page tab itself. These fields are outlined below for reference. However, if you simply want to build your website page using items, skip to the next step below
Title - this will the main title/header of the website page (it will also be allocated as the H1)
Sub Heading - this will display as a secondary title (it will be allocated as the H2)
Content - this will display as the main body of text on the page. Use the variopus options in the text editor to embolden, italicise or underline your text. You can also add further images, videos and grids/tables of information
Hide from search engines - tick this box if you don’t want search engines to crawl and index your web page
Media - upload an image to display on the page here. Whatever you upload here will appear full width at the top of the page
To add items to a page, click the Add item button
A new pop up will appear with a drop down down.
Adding items to the page
To add an existing item to the page
To add an existing item, select the relevant item from the drop down selector. Your item will be added to the page. Use the arrow icons to move the item up/down the page or to the left/right. You can also remove the icon from the page if you’ve added it in error. Click the name of the item which is underlined at the top to edit the items content. Clicking this will enable a window to appear from the left hand side which can then be used to edit the content of the item
To build a new item from scratch to add to the page
To add a new item/build one from scratch, select New Item from the drop down (which will be the default option) and click OK. A new window will slide out from the right hand side for you to create an item
The following fields will need to be added
Summary - give your new item a name. We recommend you give it a name that is self descriptive to make it easy to find (eg: if you’re adding a team member, make the summary the team member’s name)
Visible - tick this box to make the item available to be added to a page
Item template - use the drop down selector to choose what type of module you want to build
You can use the following fields to format the module that you are adding to the page. Once you select your item template, you’ll only see the fields relevant to the item you’ve chosen. You can choose to enter text in the fields, or leave them blank, depending on how you want your page to look. For example, if you add a contact us form to the page, simply leave every field blank to just add a form to the page. Or use the Title and content fields if you wanted to add a title and some small explainer text above the form itself
Title - you an add a title to the module. Use the text editor options to format your text
Subheading - you can add a subtitle to the module. Use the text editor options to format your text
Content - you can add a main body of content to the module. Use the text editor options to format your text, or add an image or video to be contained within the item
Form submit message - You can customise the message which appears once someone has submitted a form (only relevant to form items)
Icon code - add a font awesome icon to your module. A list of icons you can use is here https://fontawesome.com/icons. Simply add the html tag which is always fa- then the name of the icon. Eg: this icon https://fontawesome.com/icons/house?f=classic&s=solid would be fa-solid fa-house
URL - enter the URL of the page you want to go to when the item is clicked. If you’re linking to another page of your website, you don’t need to enter the full URL, just anything after the /
Open URL in - choose whether the link above opens in the same tab or a new tab. If you’re linking to a third party website, we recommend you select new tab/window
Background colour - choose the background colour of your item by adding a hex code or RGB code to this field. If you leave this blank, the website will have a default colour that it uses
Video Embed Code - add the Youtube or Vimeo code of a video you want to embed as the background of the item. Like adding an image as the background, except it will be a video instead
Animation - choose to add an animation effect to your item which displays when the page is first loaded
Send Email to - only relevant to form items. You can customise where the email alerting you to the lead gores to. If left blank, it will simply go to your default email address
Hover effect - add an effect when someone hovers their mouse over this element of the page
Allow full screen - usually, the size of the item will be defined by the content that has been added to it, or by the item it sits next to. Clicking this option will make your item take up the entire screen size. Perfect for large, impactful pieces of information.
Layout - only relevant to specific items such as the Blog item. Allows you to choose whether the blogs previews appear in a grid or carousel layout
Slide duration - only relevant to the Slider item. Allows you to control the speed of the slide/carousel transitions
Slider navigation - only relevant to the Slider item. Choose whether to display arrows, dots, a combination of both or none to allow people to transition between slides
Use tags - only relevant to the blog item. Choose which tag or tags of blogs will be pulled into the item. Used to customise the page so it only displays specific blogs. Leave blank to show all
Number of blogs - only relevant to the blog item. Choose how many blogs display in the item
Media - upload an image will be used as the background to the item
Editing the layout and design
When you add items to the page, by default these items will be the width of the page and they will be added underneath each other as you add them.
Use the arrow icons to move items up and down to change the layout
To edit the content of an item, click the underlined name of the item and a window will appear from the left where you can edit the items content and settings
If you want to create items that sit side by side
Click the add item icon (3 squares and a +)
Select New Item from the drop down (which will be the default option) and click OK. A new window will slide out from the right hand side for you to create an item
The following fields will need to be added
Summary - give your new item a name. We recommend you give it a name that is self descriptive to make it easy to find (eg: if you’re adding a team member, make the summary the team member’s name)
Visible - tick this box to make the item available to be added to a page
Item template - Select the item container option
Click Save
Your new item container will now be visible on the page. This essentially creates a space where you can add items to that will now format side by side. Click the add item button (3 squares and a +) from within the item. You can now add any item such as forms or basic items and anything you add to the container will now sit side by side (we recommend adding a maximum of 4 items to the container)
Click the left and right arrows to move your items within the container. Click the up/down arrows to move the whole section/item up or down the page
You can add a background image, colour, and a title to the item container itself depending on what design you want to create
If you want to create a carousel of images/information or a testimonial carousel
Click the add item icon (3 squares and a +)
Select New Item from the drop down (which will be the default option) and click OK. A new window will slide out from the right hand side for you to create an item
The following fields will need to be added
Summary - give your new item a name. We recommend you give it a name that is self descriptive to make it easy to find (eg: if you’re adding a team member, make the summary the team member’s name)
Visible - tick this box to make the item available to be added to a page
Item template - Select the slider container option
Slide duration - Allows you to control the speed of the slide/carousel transitions
Slider navigation - Choose whether to display arrows, dots, a combination of both or none to allow people to transition between slides
Click Save
Your new slider container will now be visible on the page. Click the add item button (3 squares and a +) from within the item itself to add slides. We recommend only adding basic items to the carousel
Click the up and down arrows to change the order of the slides
You can add a background image, colour, and a title to the item container itself depending on what design you want to create. For example, if you add a background image to the container, but don’t add background images to the items you are adding and only text, then the text will transition seamlessly over a consistent background. If you add a background image to your slides, the background will change each time
Duplicating/cloning items
Once you’ve created an item on the page, you can then clone/duplicate it. This is a quick way to add a something to the page in the same design style. You can then add the cloned/duplicated item to the page and edit it. For example, you may have created a grid of 4 tiles. You may want to add this to the page again, but with 4 different tiles of information.
On the page, simply click the name of item you want to duplicate. This will be the underlined text at the top of the item. Duplicating the container item will duplicate both the container and all the items added to it, or you can duplicate individual items.
A window will slide out from the right. Click the Duplicate button
A new item(s) will now have been created that you can add to the page. It’s name will the same as the original item you duplicated followed by -copy and a unique code/number. Eg if you were duplicating an item called tesimonial-slider-1, the clone would be called testimonial-slider-1-copy-1g34
To add to the page, click the add icon button (3 square and +) at the top of the page, and select the item from the drop down list
Once added to the page, you can then click into the item you have duplicated, a window will then slide out from the side where you can edit the content, including the name of the item
You can use all of the instructions above to create and build a whole array of pages designs.
Related Pages:
How to format text correctly on a website page using the text editor field
Adding a new website page to your menu
Keywords: Add page, add new page, create page, create new page, build page, build new page, new, advanced, modular page building, items, modules