Creating a new website page (advanced)

Owned by Havil Paspula (Unlicensed), created
Last updated: Feb 02, 2024 by Elliott
10 min read

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

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

Duplicating a website page

Creating a new Website page

 

Keywords: Add page, add new page, create page, create new page, build page, build new page, new, advanced, modular page building, items, modules