Introduction
In previous guides, we talked about enabling/disabling the VB (Visual Builder) tool, and how to use it to make changes on an existing page. In this guide, we’ll explain how to create and edit new pages.
Backend
Creating a new page
To do this, login and go to the link called ‘Pages’ on the left. There will be an option to “Add New” page for you to click on. After a moment, you will be taken to the page creator.
At the top, you’ll see a field to add a new page title*. This is the title of the page and is essentially the Header 1. Add the title to your page. Once done, you should notice the system automatically applies the page URL.
| *NOTE: You must select a page title before pressing 'Use the Divi Builder' |
Below that, you’ll find a purple button labelled 'Use the Divi Builder'. Click that.
You’ll now see this menu appear. For context, this function allows you to copy an existing page to re-use for your new one. By copying an existing page, we already have its colours, layout, styling - which saves you time having to design a new page.
A new menu will appear allowing you to choose from the library. This is a library of saved pages or posts. From the list, you can then choose from one of your existing pages and clone the styling from that page.
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.
Choose from one of your existing pages to copy from.
You’ll then need to update the new page content. This is shown with different coloured boxes for the sections, rows and modules.
Before we start editing the page, there are a couple of things we can still do in the page backend.
1. Setting 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.
| NOTE: For example, if your page is called 'Meet the team' the parent item is likely to be 'About us'. |
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.
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.
In the SEO tab, you will see:
Focus keyphrase:
This allows you to add the keyphrases of your page. For example,it’s 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.
Once you do, you can edit this in exactly the same way as shown in the guide [link to guide on using VB].
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.
| 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.
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.
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.
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.
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.
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.
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'. |
Comments