Adding pages

Paul Bradley -

Introduction

In future, you may decide you wish to introduce a new service that you are now practising. As a result, it may be worth creating and publishing a new page for this new service so that your clients and visitors are able to reach it to read all the information.

This guide will help explain the process of doing this, which will include using the Divi visual builder tool.

Use the anchor links below to jump to the relevant section:

Creating a new page

Creating a new page

To create a new page, you can do this via two ways:

Via Dashboard:

If you are in the dashboard, click on the option for Pages, then click ‘add new’.

This option only appears if you are in the dashboard itself.

new_page_1.png

via + New:

At the top of your screen will be an option called +New. This will allow you to create new content, depending on what you need at the time. From the list, click pages.

This option will appear wherever you are on your website [dashboard or on a webpage of your site].

new_page_2.png

Whatever option you chose, you will be taken to the page creator tool. This is where you can craft out the page content and layout.

There’s a lot of options here but we will go through the main elements.

Specify page title

At the top, you’ll see a field to add a new page title*. This is essentially the page's Header 1 so name it as relevant. Once done, you should notice the system automatically applies the page URL just below that box.

*NOTE: You must select a page title before pressing 'Use the Divi Builder' otherwise it will provide a placeholder title.

screenshot-wptraining.hz-uat.dev.sift.com-2019.01.14-11-17-19.png

Using the Divi Builder

Below that, you’ll find a purple button labelled 'Use the Divi Builder'. In previous guides we discussed the divi builder, which is the main functionality for crafting the page contents.

Untitled-1.jpg

Once clicked, you’ll now see this menu appear. As you can imagine, creating a new page from scratch would require a larger amount of time than you may be able to give.

Fortunately the visual builder does allow you to copy or clone an existing page. As you want your new pages to have the same feel and consistency as the others, this is a great way to cut down the time needed for actually creating a page from scratch and allow you to keep your new pages in a similar style - colours, layout, styling, etc.

Click ‘choose page’ and a new menu will appear allowing you to choose from the library. Library in this context is a collection of saved pages or posts stored in VB. From the list, you can then choose from one of your existing pages to clone the styling from.

Each listing should be in alphabetical order for you to import from. If you know what type of page you’re looking for, it makes sense to select a similar one. For example, if you wanted to create a new service page, you can copy an existing one so you have the same style/layout.

screenshot-wptraining.hz-uat.dev.sift.com-2019.01.14-11-26-57.png

Once you make your pick it will import its contents, of which will mainly consist of different coloured boxes that form together to make up that page’s content.

Then you can start updating the page contents.

Before we start editing the page, there are a couple of things we can still do in the page backend.

Setting the parent item

Depending on where the new page ‘sits’ on your website you can set its parent item. A parent page is a top-level page, with child pages nested under it. For example, if you check your team page, it might be listed as: www.yourwebsite/about-us/meet-the-team/ [where ‘About Us’ is the parent item].

Setting parent items is a good way to organise your site pages into hierarchies. A solid site structure is also important to SEO.

You can configure this under 'Page Attributes’ on the right-hand side of the screen. Edit the ‘parent’ field by assigning your page’s parent item by selecting it from the drop-down. When you update the page, note that the page URL will also change to reflect this.

page-attributes.png

2. Page excerpts

Below the page template, you’ll see a field called ‘Excerpt’. In this field, you can provide a short summary or snippet about your page. 

excerpt.png

This would be particularly useful when someone uses the search function on the website, as the results page will include the excerpts - and users will read the excerpt to get an idea of what that service page is about.

 

3. Yoast SEO 

Right at the bottom is a section called Yoast SEO. Yoast is a plugin for SEO. In this section, you can have a look at the SEO settings for a particular page or post. 

mceclip0.png

 

In the SEO tab, you will see:

 

Focus keyphrase:
This allows you to add the keyphrases of your page. For example, if the page talks about Bookkeeping, you might want to add ‘bookkeeping’ as its keyphrase. For further information you can click the question mark button to open an article on this.

 

Google preview:

This shows you a Google search result of your page. In the meta-description box, you should see it say ‘excerpt only’. This is an automation, where the meta-description will take whatever you have put in the excerpt field. 

In the meta-description box, you may see a colour bar appear below of differentiating colours. Yoast will let you know the score via a traffic light system. For the meta-description, typically this is to do with the length, so a green bar means it is the right length, while an orange or red bar means it is too long.

When someone searches for your page, this is what they’ll see. If certain words are bolded in the meta-description, it means those are keywords you set previously.

 

SEO analysis:

This gives some results of your page, ranked by a traffic light system. Green is good, amber is for improvements, red is for issues.

The ‘Readability’ & ‘Social’ tabs also provide additional improvement to the page for SEO. 

 

Frontend

Building on the front end

When you want to start editing your page content, there’s a button at the top called ‘Build on the front end'. This makes changes easier. If you click it, you’ll be taken to the front-end builder which will allow you to see the content and changes as you go

screenshot-wptraining.hz-uat.dev.sift.com-2019.01.16-10-36-04.png

Once you do, you can edit this in exactly the same way as shown in the guide Using the Visual Builder.

Generally you want to change the existing copy to your new service. For example, if you chose to copy a page about ‘audit’, everything on that page will relate to audit. You can simply edit the copy to whatever new service you want using the visual builder. 

 

Adding modules

When you click on a module (grey box), you’ll notice a ‘plus’ icon. Clicking it will allow you to add new modules. A menu will appear allowing you to select different types of modules to add depending on your needs.

insert-module.png

 

NOTE: While you have the ability to add, we always recommend that you use the duplicate function instead. is highly recommended that you use the duplicate function instead. when duplicating a module, you’re making sure that the same styles and settings (defined by your designer) are being applied. This is really important to keep your pages visually consistent and make sure they’re responsive across devices.

 

Duplicating modules

When you click on a module, you’ll notice a ‘two rectangle’ icon. Clicking it will allow you to duplicate that module, essentially copying it onto your page again. 

duplicate-module.png

Even if the content is the same, the modules are not linked, meaning that any changes you make will only apply to the copy and not the original.

 

Deleting modules

When you click on a module, you will notice a 'trash can' icon. Clicking it will allow you to delete that module, removing it from the page. The module will disappear once clicked.

delete-module.png

 This can be handy if you duplicated by mistake and no longer need a copy of the module.

 

NOTE: Be careful using this option! It can have drastic changes on how the page content looks. If you delete something by mistake, you can always use the undo shortcut of 'control + z', or discard all changes when you exit the visual builder.

 

Moving modules

When you hover over modules, your cursor turns into a 4-headed arrow. If you click and hold, you can use this to drag the module to a new place on that page, which means you can change the layout of the page.

move-module.png

When you move a module to somewhere else, you should see a darkened rectangle that tells you space is available to move it there. 

 

NOTE: You can only move a module if there’s an available space for it. For example, if you wish to move a text module, you will only be able to move if other modules exist.

 Generally, you want to keep your page consistent in design/layout, so that it’s similar to the other pages on your site.

 

Publishing the page

There are two ways of publishing your page depending on whether you're in the back end or front end of your website. 

If you've been working in the front end using the Visual Builder you can save all changes and publish your page from there. 

With the visual builder enabled go to the bottom of the page and click on the purple circle with three white dots. 

save-publish.png

Now you're ready to publish the page. Click on 'Edit Page' in that top black menu. This will take you to the back end. Here you can publish your new page. 

A few options will show. On the right-hand side there's a 'Publish' green button, click it. 

mceclip0.png

If you've been working in the back end you can publish your page by clicking the blue ‘publish’ button on the right-hand side of the screen.

publish-back-end.png

Whatever method you chose, after a moment the page will then be published. Any changes you made - parent item, page excerpt, page content changes - will be applied. 

Congratulations, your page is published!

 

NOTE: While your page is published and a parent has been assigned, it’s not automatically added to the main menu. You will need to do this by following this guide 'How to add a page to the menu'.
Have more questions? Submit a request

Comments

Powered by Zendesk