Creating a new website page (advanced)

Owned by Havil Paspula (Unlicensed), created
Last updated: Feb 02, 2024 by Elliott
9 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 https://webdadi.atlassian.net/wiki/spaces/PKB/pages/945946628

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

  • 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 . Simply add the html tag which is always fa- then the name of the icon. Eg: this icon 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:

 

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