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
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.
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.)
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.
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.
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 🙂