WPDesigns Site Logo

Adding Pages & Content to WordPress

Adding Pages & Content to WordPress
Share This Post

Adding Content & Editing Pages

Being able to edit and add content safely by yourself is a key reason I have written this WordPress Website Guide.  Adding and updating content is a big part of running a website (for many businesses) whether it is updating the home page hero image or pushing the latest promotion to your visitors. Keeping your website looking current and matching your business is the best practice for your business both physically and virtually.

Table of Contents

Adding a New Page

Add New Pages

Before making any changes backup your website. 

In order to add a page, you must be on the WordPress Dashboard. Look to the left to find the “Pages” menu tab and hover over it. You can then move down and select “Add New Page”.

On the new page creation screen, you can add your page title and then either create the page with the Gutenburg block editor or you can use Elementor. The Gutenburg block editor works well and is fairly simple to use, Elementor is more complex but can produce a much better end result.  You can find instructions on adding widgets, editing widgets in sections below.

Adding Page Title

Edit a Page

Edit With Elementor

There are several ways to be able to edit the pages on your website but the most simple way is to be on the WordPress Dashboard and select “Pages” from the left-hand navigation bar, then hover over the page you would like to see. From here you will see the option “Edit with Elementor” and you can click that to open your page in edit mode.

Once content or an edit has been made you will need to check how it looks on all the devices, desktop, tablet and mobile using the screen button located 4th from the left next to the publish button in the bottom left.

Responsive mode

Text

Being able to update your text to keep your website up to date and relevant is important and easy once you know how.

Editing Text

Edit text widget

With the page editor open click on the text you wish to edit and look to the left.

By clicking on it you will open up a box on the left of the screen and you can make your changes in there. You can edit directly on the page but I find that sometimes there are issues that arise with formatting doing it this way.

Once you have made your changes you can update the page.

Add text here

Adding Content

To add content to your site follow the steps given in section “Edit a Page” to access the page you would like to add content to.

Widget Selection
Add widget
  1. You can add a hyperlink in your website content text to go to another page or website. 
  2. Click the text section you’d like to add the hyperlink.
  3. Highlight the text through the box on the left-hand side.
  4. Click the link button above the text box which resembles a paper clip.
  5. Search for a page on your site or enter an external URL. If linking to another site be sure to add HTTPS:// or HTTP:// depending.
  6. Once done, you can direct the link to open a new page through the hyperlink by clicking the cog icon next to the text input box and selecting “Open in a new tab”.
If you would like more information on hyperlinks in Elementor you can read our full guide.
Insert Hyperlink
Insert Hyperlink

Optimising Your Image

Before adding the image to your website I would highly suggest following these 4 steps below to make sure your image is the correct image file format and compressed. We have written about optimising your images in greater detail in our post on image optimisation.

  1. Make sure your image is the correct file format for the type of image you will be using. You can learn more about website file formats in this linked post.
  2. The selected image is not too big or small for the size it will be displayed at.
  3. Compress the image using a website such as Optimizilla to reduce the file size and maintain a fast loading page.
  4. You can now upload the image to your site. For a more in-depth look at how to follow these steps see our guide on WordPress image optimisation.

Editing an Image Widget

Note: If the image is set as a background image then different steps need to be taken – see next section.

Edit Image Widget

Editing the Elementor image widget is a fairly simple process. Click on the image itself or the blue pen in the top right corner to open the image editor. With the editor open click the image box and open the media library.

With the media library open you can click and select the image you want to add and then click “Insert Image”.  This will insert your chosen image into the widget.

Background Select Image Button

Editing a Background Image

To edit a background image you will need to hover over the section you wish to change. As you hold your mouse over it, look at the top that section for a button – depending on the type of section you have chosen to edit will dictate the button that appears, for columns, it will be the black button (as pictures) and for an entire section, it will be a blue button with 6 dots in rows of three in the centre of a selection of 3 buttons. Depending on which you have you either click the black button or the middle icon that looks like 6 dots and it will open up the section panel.

Edit Background
Edit background button and image

From here navigate yourself to the style tab and then background should be the first option on the list. You will have the option to add an image file from your media library, a solid colour, a colour gradient, a video file or slide show.
Once you have selected your image, video etc you will have another set of options with which you will be able to adjust how the image repeats itself, how it is stretched to cover the background, the fixation and the positioning of the image. Be aware these will need to be set for each of the views – desktop, mobile and tablet.

Search
Recommended Hosting
Upgrade to Pro
Recent Posts
Brand Strategy 101
Brand Strategy 101

In today’s business world, building a successful brand is paramount to long-term success. A robust brand strategy allows you to differentiate yourself from competitors and

Read More »
Josh
Josh

Josh is passionate about technology, web design, and SEO. Along with this is a keen skier and cyclist. Having spent years developing websites for clients, he enjoys writing and sharing knowledge online.

Contact
Want us to get Creative?

We would love to hear from you!

Josh Cut Out colour white

Josh

Typically replies in minutes

Hi there 👋,

Feel free to message me if you have any questions.