Home > Editing Events > Create New Page

Creating a new page

In the WordPress dashboard for the website, select Add New Page in the Pages menu. 

Where it says ‘Add title’ give the page its name. This does not have to be the same as the name that may appear in a menu. As demonstrated later.

Then click Use Divi Builder

The option used here is Build from scratch

Templates for page designs may be donwloaded from third-party sources, or you may have saved an entire page layout to your Divi library and are now effectively cloning that page, with page specific changes.

Adding content to the new page

The new page is born with the top menu and footer in place, along with one blank section, with the Insert row menu open.

Rows are available with a various column segmentation, select one to fit your layout requirements. In this example that is a row with no column divisions.

 

When you first save a new page you have the option to Save as Draft (which means it will not be visible on the website yet) or Publish

As soon as you create a new row, the Insert Module menu will appear over the first column of the row.

You do have to insert a module in every column (cell) of a row and you can always come back later and swap to another module, or completely delete any module from a given cell. Likewise whole rows and all their modules can be deleted in one go via the dustbin symbol in the relevant rows menu.

From the multitude of modules available I am selecting to insert a Heading module.

As soon as you select the module to insert, the Settings for the specific module will open.

The Settings for all modules have 3 tabs.

Content for specifying what content (text in the case of the Heading module) should feature.

Design for specifying colours, borders, spacing around the module (margins and padding), animations, whether the module needs to be specific to say desktop viewing of the site and not visible when viewed on a phone, and many other things.

Advanced is for the addition of code (Javascript and CSS) and for naming the module, when it needs to be referenced from elsewhere on the page, or from another page.

The heading text has been set as ‘Onny Valley’ in the Content.

In the Design section the colour for the text is being selected. In this case the terracotta shade predefined in Appearance > Customize – accessed from the WordPress dashboard)  section for the Shropshire Geology website. That is where the default font, etc. for the whole site is defined.

Adding an image

First Add new row

The green circle with the ‘+’ symbol will appear when you hover your mouse pointer near the base of the box surrounding the column above.

 

In this example I selected a row divided into two equal columns. The left hand column is to hold the image, the right one some text.

In the Insert Module menu I am selecting an Image module.

As soon as you select Image module, the Image Settings dialogue opens.

Click inside the area (highlighted with pink rectangle) to open the Media library.

Note the option to have an image created by AI. The results can be quite remarkable!

 

 

This approach described here also applies when you wish to change the image already present in the image module of an existing page.

Here you will find all the images that feature in the website, along with uploaded documents, like PDF’s.

You can either select to display an image already in the library or upload an image from any disk drive, USB flash drive, etc. on your computer.

See extra guidance about uploading images and other image related issues.

Select the image from the library by clicking on it.

 

Then click Upload an image
Highlighted in screen shot opposite.
The ‘upload’ here means place the image into your web page layout.

That will close the Media libary and return you to the page you are building. This step can sometimes take a few seconds before you return to your page, whilst the database which underlies the whole website is updated,

Back on your web page with your chosen image in place.

The Link setting in the Content tab contains the option to Open in Lightbox. That allows the image to be viewed full size when the user clicks it.

 

The Design tab has filters, which permit the image to be made semi-transparent, tonally inverted, brightened, colour balance adjusted …

 

The animation options allow the image to be faded in, or animated into position as the user moves to the part of the page where the image is located.

In the vacant cell adjacent to the image you could insert a text module, or maybe another image module, or some another module.

The page building process from now consists of just adding rows with varying column arrangements and placing modules into the resulting cells to suite your content and design requirements. 

 

Don’t forget to SAVE the page frequently !

Linking to a document (e.g. a PDF) for reading/download

First go into the media library. If not alreadty done, upload the file to the library by just drsgging into the library window from where you have the file stored on your computer. A copy is transferred, the original file remains on your computer.

Having selected the file in the media library, select Copy URL to clipboard

You can now exit the media library and open the page you want to insert the document link into.

Highlight the text that is to function as the link.
Then click the chain symbol, which will open the Insert Link dialogue.

Finally, paste the copied links URL.

You could select a New Window for a document to open in.

Linking your new page to the sites menu

For your new page to be found by someone visiting the website, it either needs to be listed in the top menu, or have a link on another page.

A link from another page is handled just like the link to a document. Get the URL of the page, e.g. in this example https://shropshiregeology.org.uk/OnnyValley

Then paste that URL into the link you create in the text of another page. The page URL could also be assigned to a button (a module for buttons is available) or even the URL assigned to an image when clicked.

 

The following shows how to link the new page to the menu at the top of the sites web pages.

In the WordPress dashboard, select Appearance > Menus

You will see your page listed by name.

Select it (via the checkbox in front of its name)

The click Add to Menu

The page will be listed by default as the last entry (and therefore will appear on the far right) of the menu.

You can drag these menu entries around to change the display order. Also they may be dropped under another menu entry (note the indentations) to place them in sub menus. Currently the site is configured to support nesting of menus  3 layers deep.

Make sure you SAVE the menu changes.

As stated earlier the name assigned to a page does not have to be the name that appears on the menu.

To change the menu displayed name, click the arrow button by ‘Page’, which opens the dialogue opposite.

Changing the background colour of a page

What you are actually doing here is changing the backgound of a section (div), which if the page only has one section then you are effectively applying it to the whole page.

Access Section Settings

 

 

In the Content tab of Section Settings select Background

I always feel this should be under the Design tab

 

You can then select fill colours and when you click the selected colour rectangle, sliders will appear to enable adjustment of transparency and hue.

The next option in, allows the fill to be a gradient.

When making a background dark, text can be made to contrast with it, by assigning a colour to the text module background and/or in the settings for the text, specify the text to be rendered light as against the default of dark.

 

An image from the media library, or even a video, can be assigned to the background.

 

Each module also has a background property so individual modules, or cells in the row/column grid may be assigned different colours, gradients fills, images or videos.

Extra guidance about uploading images

Images should be in jpg (jpeg) format or png.

In general aim for a size say no wider than about 2000 pixels.
Worpress will create multiple versions of the image to suite mobile, tablet and desktop delivery.

You do not have to worry about the file name of an image being the same as one already in the library as WordPress will add a number to the name to ensure a unique file name. But try an avoid duplicates of the same image as then you are only taking up unnecessary storage space on the server.

Images uploaded to the library should ideally be assigned some Alt (Alternate) text. This text should try and describe the purpose of the image as it wil be accessed by screen reader software which can be used by people with visual impairment.

This text can be created at the time you add an image to the library or you can return later, select the image, then enter/edit the text.

Caption and title text will be displayed in some modules when the user hovers their mouse cursor over the image.

Websites with Alt text added to images are ‘liked’ by search engines and will improve site ranking in Google searches, etc.

 

Note unwanted images can be deleted from the library, but make sure they are not in use on any page first.