blog posts

hosting image

Part five: Website Customization

This entry is part [part not set] of 10 in the series How To Build Your Own Simple Website Series.

We are now at the final stage of our journey, that is the part where we actually edit our website to suit our needs. In part four of the series we learnt how to install and activate our themes of choice as well as add and activate our plugins. I hope we were able to choose our themes and activate them and also activate all the required plugins.

Before we start editing our simple website make sure you have the following at hand:

1. Logo

2. Content – (Any information you want on your website eg About us, services, images)

3. Website Colors

4. Contact Details

Once you have confirmed that you have all the materials needed, the next step will be to login into your WordPress dashboard like we covered in part 3 of the series.

Please keep in mind that the theme we will be using in this lesson is called Neve and the page builder is Elementor. There are many other themes and each may differ slightly. There are also other page builders like Beaver, Gutenberg and WPBakery to mention a few. It’s therefore, important that you do a bit of research about the page builder you are going to use(ie if you are using a different one from the one that will be demonstrated in this lesson, ie Elementor). Without further ado, let us start constructing our website. We will break down this tutorial into two major parts namely ‘Theme customization’ and ‘Adding Content to Pages’

Theme Customization

We will be customizing our WordPress theme using the theme customizer, which is a built-in tool that allows you to change the look and feel of your theme without having to edit any code. The theme customizer allows us to set things like the colors and font for our website. Kindly note that the items on the theme customizer dashboard may also differ from theme to theme, make sure that you explore and learn what each does.

Here are some specific steps on how to customize a WordPress theme using the theme customizer:

1.Go to Appearance > Customize in your WordPress dashboard.

2. The theme customizer will open. Here, you can change the look and feel of your theme by adjusting the settings.

3. To change the colors, go to Colors and Background. Here you can set colors for your background ,links and other parts of your website. It is advisable that you use your brand colors.

4. To change the header of your site, go to the Header tab. This will allow you to upload your logo and change the header background color and many other options.

5. To customize your site’s footer, go to the Footer tab. This is where you can change your footer color and copyright, unfortunately Neve does not allow us to change the copyright since we are using the free version.

6. To change your fonts, you can use the typography tab.

When you’re finished making changes, click Publish to save your changes. You can then exit by clicking the ‘x’ and this will take you back to your WordPress dashboard where you can start editing your website pages.

Adding Content to Pages 

In this lesson we will be editing the page templates that we imported in part four of our series. However with some themes you may need to create new pages altogether. It is advisable that you choose a theme that comes with ready made templates as it is easier to edit an existing page than creating one from scratch.

Adding content to existing pages

To add website content to the page templates in WordPress, you need to follow these steps:

1.Navigate to the WordPress dashboard and click on Pages. Here you will see all the pages you imported. You will need to rename the pages accordingly.

2. Hover your cursor on the page title and click on ‘edit’. This is the option that we will use to edit the page’s title and permalink. We will be using the ‘Home’ page to demonstrate – kindly note that you do not need to update the permalink for the home page. However for the rest of the pages you need to update the permalinks.

3. After changing the page title click on ‘Update’

4. After updating click on ‘Edit with Elementor’, this will take us to Elementor’s dashboard where we can then edit our page(screenshot shown below).

Elementor Dashboard

Once you have opened your page editor you can make all the adjustments that you want to your page. You can create new sections or delete some that you do not need. You can also change font colors, size or even change the section’s background color. For Elementor you will find different interesting elements to use on your website on the panel on your your left. To use these elements you just drag and drop into the section that you want.

Kindly note that to edit the already existing content, you need to click on it and then you can edit the content on the left panel. Example below:

Do not forget to update your changes by clicking on ‘Update’ once you are done. As soon as you click on update your changes will be visible on the live page. You can learn more on how to use Elementor by exploring their tutorials.

Creating New Pages

In the event that you need to create new pages of your own in WordPress, please follow these steps:

1. Navigate to the WordPress dashboard and click on Pages.

2. Click on Add New.This will take you to a page like the one shown below.

3. Enter a title for your page and then click on “Edit with Elementor’ if you are using Elementor. This will allow you to start adding your content using elementor (screenshot shown below). Remember to draft the structure of your new page somewhere so that it becomes easier to add the necessary sections.

You can add sections, text, images, videos, and other media to your page. For example, to add a banner at the top of your page you can do the following:

a) Click on the plus sign (+) then select the structure for the section ( screenshot shown below), in this case I am choosing one column which is the first option.

b) Since this is the page’s banner, set the content to full width and then height to min height and set the height of choice as shown in the image below.

c) The next step will be to go to the ‘style’ tab so we can set our background image. Here you need to click on the brush icon to set an image. Then click on the plus sign and this will take you to the media library where you can pick your image or upload it if you have not uploaded it already. After selecting your image, click on ‘Select’. After selecting your image, your page should look like the one below:

Adding a banner to your website

d) To add text to your banner, click on the plus sign that is in the middle of the image and then drag and drop the ‘Heading’ block from the left panel. If you want to use the text block after the heading you can also drag and drop it under the heading. To change the font size and color of your text you use the ‘style’ tab. You can also choose your text alignment, in this example I have set my text in the center (screenshot below)

Website Banner

Now our simple banner is ready, you can go ahead and add other section of choice. Remember to do so you click on the plus sign and choose the structure you want for your section and then drag and drop blocks or elements onto your website page and edit. Alternatively, you can also use the pre-made templates by going to the folder icon and picking the template of choice.

4. When you are finished, click on Publish.

Your page will now be live on your website. You can link it to you menu by navigating to Appearance > Menus. Do not forget to save changes after adding your page. Since some themes do not come with a ready made menu, you can create yours by going to Appearance > Menus and then entering the menu name and set it to primary menu (image below) and then clicking on ‘Create Menu’. You can then pick the pages and add them to the menu and save changes. You can also reorder your menu by dragging the menu items to the desired position and then saving the changes.

There are some helpful tips for adding website content to your pages in WordPress and these are as follows:

  • Use headings and subheadings to organize your content. This will make it easier for readers to scan your page and find the information they are looking for.
  • Use images and videos to break up your text and make your page more visually appealing. Images and videos can also help to illustrate your points and make your content more engaging.
  • Use keywords throughout your content to help people find your page in search engines. When you use keywords, you are telling search engines what your page is about. This will help your page to rank higher in search results when people search for those keywords.
  • Proofread your content carefully before publishing it. This will help to ensure that your content is free of errors and that it is easy to read and understand.

We are now done with our series on ‘How to make your own simple websites’. Now you have your online office that is open 24/7, Congratulations! 🙂. You can now drive traffic to your new website by linking it to your various social media pages.

Do not forget to show us your beautiful websites by sharing your links in the comment section below.

Series NavigationPart one: Getting Started >>

1 Comments

  • test comment

Comments are closed.