WordPress: Designing your first web page (images, text box & widgets)

by | May 19, 2021 | Tutorial, Web Design, Website, WordPress

The last blog in the series looking at designing your first web page on WordPress.

By now you should know the basics of the layout and structure for a web page, and our previous blog looked at the website’s main settings including font sizes and colours, homepage settings, and more.

This blog will look at how to add a text block, images, and some basic widgets.

Adding a Text Block in WordPress

Adding a text block in WordPress is a fairly simple process. We’ll start with the basics of adding a page and then look at adding the text block.

From your main WordPress dashboard, hover over pages and then click on ‘Add New.’

Designing in WordPress:  Adding a block

Your new page will appear. You will need to enter a title for the page. In this example, we are using ‘Sample Page.’

To add a text block click on the + sign on the right-hand side of the page and choose the paragraph option.

The text block will then appear below the title, and you can start typing. If you would like to set different header tags (see our first blog for further information on headers) click anywhere on the text box to open up additional choices.

Clicking on the paragraph sign will then show more options, including various header choices.  

To add additional sections, including more text blocks or image blocks, you will need to hover over the previous block until the + sign appears. Once it appears click on it to open up the different block choices.

Adding an Image Block in WordPress

Follow the same instruction from above to add a block, and if you don’t see the image choice use the search bar to search for ‘image.’

Within the image block, you can then choose to either upload a media file (e.g., JPEG and PNG are the best images to use) or use an image from the current media library.

ALT text for accessibility and SEO

When you access the uploaded file or the media library image make sure you change the text in the section on the right-hand side.

Adding ALT text is great for accessibility and SEO (search engine optimisation). Make sure it describes the image and where possible add in your keywords.

Removing a block

If you change your mind and would like to remove a block, hover over the block and click on the three dots to the right-hand side of the options bar. This will open up a drop-down menu where you will be able to remove the block.

Adding additional Widgets to your page

You can also add widgets to your web page. You can add widgets to the right or left-hand sidebar, dependent on your design. For example, the Buffalo Community Centre has a Facebook feed, map, and additional links in the right-hand sidebar. These are visible on all pages.

As previously explained in our last blog, to add a widget you need to hover over appearance from the main dashboard and then click on ‘widgets.’

From the widgets menu, you can click and drag widgets to the right or left-hand sidebar. 

This link is a great resource for popular widgets that you can add to customize your website.

Most of these will require you to add the relevant plugin to your website.

Note: Read this article on how to add a plugin to your WordPress website.

To find out how to add a Facebook feed similar to the one on the Buffalo Community Centre’s website, please see our video tutorial from our YouTube channel.

For a simple Google map, drop and drag the ‘Maps Widget for Google Maps’ across to the right or left-hand sidebar.

There you go!! There’s a wealth of information to get you started on creating your first web page on Google. 

Hope it helps and happy creating 🙂

Get our hints and tips on web design, SEO, and WordPress plus our exclusive offers straight to your mailbox every fortnight. Sign up for our newsletter today!

As a subscriber you’ll receive regular hints and tips, the opportunity to see our YouTube videos before public release, and any special prmotions and offers.

We promise our subscribers that your details will not be passed on to any third parties and you can unsubscribe anytime.

Elev8 Web Design Subscribe