How to add pages and images in WordPress

You want a website for your business. You chose a domain name, picked a WordPress theme, and you’re ready to create a beautiful website. Luckily, WordPress has tons of handy tools to help you build the website of your dreams. So, where do you start? In this blog, we’ll teach you how to add a page and fill it with content. So keep reading!

Gutenberg Block Editor

Before we dive into the backend of your website, let’s look at what you’re working with. When you’re working on a page in WordPress, you are working with the Gutenberg Block Editor. This is useful information, because if you ever need to look up tips or tricks, that’s what you need to type into the search bar.

How to add a page in WordPress

First things first: get into the backend of your website. To do this, type in the URL of your website, add /wp-admin in the search bar, and log in. If you see the page as shown in the image below, you’re good to go!

Now, look at the black sidebar on the left. You’ll see the word ‘Pages’. If you hover above ‘Pages’, you’ll get a little menu. Choose the second option: ‘Add New’.

Ta-da! You added a new page. Now comes the fun part: filling it in and making it into a beautiful page.

Title of your page

The first thing you see when you add a new page is the text ‘Add title’. This is where you can add the title of the page. If this is your ‘About’ page, you could name it ‘About me’. We recommend not making your page titles too long. They should be clear and concise. Let your visitors know in just a few words what they can expect to find on this page.

Slug and description of your page

Slugs aren’t just found in the garden. They are also an essential part of websites! The slug is part of the URL. It identifies a particular page on your website. For example, if you are on the Bluehost website and click on the header ‘Domains’, the URL will read: bluehost.com/domains. What comes after the slash, is the slug! It can also be multiple words, such as /content-ideas-for-your-website.

We recommend that you don’t make your slug too long. If you want, you can edit your slug when you’re creating or editing a page. You will find this information on the right. It’s under the header ‘Permalink’.

How to make a page your homepage

A homepage is often the first page your audience sees when they go to your website. You could call it the front page. To set up your homepage, go to ‘Settings’. You will find this in the menu on the left in your dashboard. Hover over ‘Settings’ until you see the menu, then click on ‘Reading’.

When you look at the Reading Settings page, you will see ‘Your homepage displays’. Select ‘A static page’.

Now it’s time to select your homepage. There is a drop-down menu next to ‘Homepage’. Here, you can choose which page you would like to select as your homepage.

After you select the correct page, don’t forget to save the changes! Now, this page will show up as your new homepage.

Fill a page on WordPress

Congratulations! You now know how to add a page and make it your homepage. You’ve taken the first step to creating a beautiful website for your business. Next up: filling your website with content. The WordPress Block Editor has many useful features, otherwise known as ‘blocks’. They’re very easy to use! We’ll show you.

Let’s go back to the empty page you created. There are two ways to access the blocks. The easiest is to click the big plus in the upper left corner of your screen.

This will open up a menu, showing all the available blocks you can use on your page. We recommend you scroll through the options and try out a few. After all, unless you hit ‘publish’, your page isn’t live yet!

In this blog, we’ll focus on the most commonly used blocks.

Heading

In the block menu, you’ll find ‘Heading’ under the Text category. Headings are a great way to section off your page. They introduce a new (sub) topic or category, and make your page more organized.

When you click on ‘Heading’, it will give you space to type in your text. You can bolden or italicize the text, using the little menu that shows up above the header.

Headings are a great way for people to make sense of your website. However, there are a few good practices when it comes to headings, to make sure that everyone can enjoy your website.

Accessibility

There are multiple heading options. When you click on the block ‘Heading’, the default is H2. But there is also H3, H4, H5, and even H6!

The different headings vary in sizes, but that’s not all. They also vary in importance. The most important heading is H2. Use this if you want to introduce a new topic or category. H3 is used for a subcategory related to H2. If you want to add a subcategory within H3, you use H4. And so on. In conclusion: the numbers are used to indicate if it’s a new topic or a related topic.

It’s important that you use headings in the right order. Otherwise, people with visual impairments who use screen readers will not understand your website.

Change the size of your heading

What if you want to start a new category, but you don’t like how big H2 is? No worries! You can easily fix that. On the right of your screen, you have a little menu with two categories: ‘Page’ and ‘Block’. Choose ‘Block’.

Great! If you have selected the Heading section that you want to change, you should see the following:

Now, go to ‘Typography’. Here, you can change the font size. It should say ‘default’, but you can easily change that to another size! As you can see on the image above, it ranges from small (1) to large (4).

Paragraph

In the Gutenberg Block Editor, a paragraph is where you write most of your content. Adding a paragraph is really easy. When you press enter, it will automatically add another paragraph to your page. You can immediately start writing!

As soon as you write the first letter, a little menu will pop up. This allows you to bolden, italicize or add a link to your text.

Quote

Adding a quote to your page can be a great way of adding credibility. You could quote a review someone else left of your service or product. People love to read reviews! But it’s also a handy tool to highlight something you said in your ‘About’ page. You can find ‘Quote’ in the ‘Text’ category.

How to create a call-to-action button

Let’s look at something a little different: adding a call-to-action button. First of all, what is it? It’s a button that asks people to do something, for example buy it now! When people click on the button, they will be directed to a page of your choosing. It’s really useful for guiding people where you want them to go. In addition, a button can make it easier for people to quickly find what they’re looking for.

First, open the Block menu. You can use the search bar to look for ‘Buttons’, or you can scroll down to the ‘Design’ category and click on the ‘Buttons’ option there.

Now, you have an empty button with no text that doesn’t lead people anywhere. Let’s change that! When you click on the empty button, you can write the text that you want to appear on the button.

Next, you want to give the button a link. Click on the button you just added. A little menu will show up. Click on the link icon, then add the link you want this button to lead to. And voilà! The button works.

What if you want to change the color? Simple. Click on the three dots in the pop up menu, then choose ‘Show more settings’. You will see a menu on the right with lots of options, including color. Here, you can change the color of the text and the button itself (background). 

How to add an image in WordPress

You want people to stay engaged when they visit your website. That’s why it is a good idea to include images on your page. Most people are very visually oriented, so adding relevant images will back up your message. Not to mention, it’s a great way to show off your products!

So, how do you add an image in WordPress? Click the big plus in the upper left corner of your screen. Scroll down to the category ‘Media’, then click on ‘Image’.

You’ll see a big blue button with the word ‘upload’. Here, you can upload whatever image you want to include on the page.

If you want to change the placement of the image, click on the ‘Change alignment’ icon. 

You can always click on the three dots and select ‘Show more settings’. Click through the multiple options and see what looks best.

Alt text

Before we explain how to add alt text, it’s good to know what alt text is and why it’s important to add to your images. Alt text explains what an image looks like. It doesn’t have to be long. For example, a dog runs through a field with a large stick in its mouth is enough.

For people with visual impairments, this explanation is really important, because screen readers read the alt text out loud. By including a good alt text, you improve the accessibility of your website. Now everyone will be able to enjoy your website!

But it’s not just screen readers that read alt text. Search engines like Google also use this information to understand the context of an image. Which in turn could help your page to rank better on Google!

How to add alt text to your images in WordPress

You added an image to your page. When you select the image, you should see a menu pop up. Click on the three dots, then choose ‘Show more settings’. This will open up a new menu on the right.

Underneath the drop-down menu ‘Image settings’, you will find alt text.

How to add an image with text

There are two ways to do this. The first: follow the steps as shown above in ‘How to add an image’. When you add an image to your page, you will see a little text below your image saying ‘add caption’. You can add the title of the image or credits to the photographer/illustrator here.

The second step: use another block. If you search through the ‘Media’ category, you will see the option ‘Media & Text’.

When you add this, you will get a prompt to upload an image on the left and an empty text box on the right.

If you want the image on the right instead, simply click on the block and select a different placement in the pop-up menu.

Endless possibilities in WordPress

Congratulations! You created your first page and took the first steps to filling it in. In this blog, we showed you but a few possibilities. There are many more blocks available for you to use. Click through the options and see which you like best. If you want more information on how to write amazing content for your website, then read our 6 writing tips. Good luck!

Devin Sears
Devin Sears | Field Marketing Manager

Leave a comment

Your email address will not be published. Required fields are marked*