WordPress: Designing your first web page (part 2 – customisation)

by | May 3, 2021 | WordPress, Tutorial, Web Design, Web Development

Continuing from our first blog on designing your first web page, we now examine how to take the elements from that blog and the customisation of your website.

We will base the first-page design on a website I designed for a charity community centre, www.buffalocommunitycentre.co.uk

This design has a main header image with a right-hand side widget area, and a text area welcoming visitors, with a news/updates section underneath which pulls details from the posts/blog section of WordPress

Header Image

The header image is added from the theme customisation section. From the WordPress dashboard, hover over the appearance section and then click on customise.  

From the theme customisation dashboard, select header media. Within this section, you can change the image and decide on the height of the header image.  

N.B. recommended that you resize your images to suit the size of your header using Photoshop, Paint, or Canva.

Site Identity

This section will help identify the website and has four sections.

Site title: This is the site of the website and will usually be the same as the organisation’s name.

Tagline: You can add a tagline here for your organisation. It’s sometimes good to include keywords within your tagline.

Logo: Your organisation’s logo can be upload here, replacing the text for the site title (although Google will still read the text for the site title). It is recommended that the image is square and a PNG extension.

Favicon: The favicon is the small logo that appears in the URL tab. You can upload and set your favicon here.

Font and Font Sizes

Within this section, you can choose the fonts you wish to use for the main text and headers. There are various fonts available and a link to Google fonts to help you choose the right font to use.

You can also preset the different header sizes (e.g., H1, H2, H3, etc.)

Colours

Choosing the right colours for your website is essential. This area of the customisation section allows you to set the primary colour elements of your background, text, hyperlinks, etc.

Menu’s

The menu for the website can be amended here or from the main WordPress dashboard.  

Click on ‘Menu’ to open up the menu section. From this section, you can click on the menu to amend or create a new menu. It’s essential that the box ‘Primary Menu’ is checked.

You can reorder the menu choices either by ‘click and grab’ or using the reorder button. You can also create second-level menus using ‘click and grab’ and placing the chosen page within another page.

It’s easy to add additional pages by clicking on ‘add items’ and choosing the relevant page from the drop-down menu.

Homepage Settings

To display your website rather than a blog post or page, you will need to check the ‘static page’ option from the Homepage settings and then choose the ‘Home Page’ for your website. Usually, this will be titled ‘Home’.    

Footer, Sidebar, and Widgets

Choosing what you want to add to the footer and sidebar is best controlled from the main WordPress dashboard.

Hover over Appearance from the left-hand side dashboard and click on Widgets.

This will open up the widgets section, where you can add any widgets to the sidebar (if you decide to have one) and your footer.

There are two options when adding a widget: option 1 is to click on the arrow on the widget to open up the drop-down menu and then choose where to add it. The alternative is to ‘click and grab’ the widget and move to the sidebar or footer area.

We will conclude this blog series on creating your first web page in two week, where we will demonstrate how to add a text box, images, and other widgets to your website.

Happy creating 🙂

Optimal and essential WordPress Plugins

Optimal and essential WordPress Plugins

WordPress plugins add functionality and additional features to your website. Continuing from our recent blog post "Proven WordPress Themes" we cover the essential WordPress plugins and those that help optimise your website. We will examine the essential WordPress...

read more
Proven WordPress Themes

Proven WordPress Themes

WordPress themes that we approve for your next website build. Following on from our previous blog on building a WordPress website, we look at the types of WordPress themes you can use. There are a variety of website themes that are great for different styles of...

read more
Website Case Study

Website Case Study

Website Case Study: The Chiropractor Having worked with charities and local businesses it's great to see a client's ideas, branding, and requirements come to fruition. The website case study highlights all this and more. In February 2020, I approached a local...

read more

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