Copyright LCN.

com – all rights reserved

Written by Asbjoern Borgkvist Tranaes, Content Writer at Simply.com.
 Introduction
So… you’ve been checking out WordPress, and you’ve realised it’s not as
simple as you initially thought and hoped it would be.

“But why?” you ask yourself. People have told you how incredibly easy it is to
create an awesome WordPress website - lots of people. “You just click this and
drag that, oh but you will need to install the thingamajig in the doo-dah, but
after that, it’s really easy”.

Well, that’s easy for them to say when you’re still just wondering where you
log in.

We know what you’re going through. Really. We know because we have many
years of experience with WordPress, but we were all new to it once too, so we
know how overwhelming it can be for a beginner to grasp it.

And that’s the reason why we’ve chosen to write this e-book for you.

We can’t promise you that you’ll become an expert straight away – WordPress
takes practice – but we can promise you that we will take you on a step-by-
step journey and teach you in a language that’s easy to understand.

All you’ll need to bring to the table is a genuine desire to learn. If you do that,
we promise you that it’ll be worth it when, at the end of the journey, you’ll be
the proud owner of a beautiful and functional website that you created all by
yourself.

We have written this e-book for novices, but if you know a little something
about WordPress, you might still learn a thing or two.

What will you learn?

We will go through some of the basic WordPress functions. You will learn how
to create content and how to rework the layout on pages. We will also show
you how to best work within a theme and how to add and edit plugins and
widgets.

We will show you all this through examples on an actual WordPress

installation and website. We will create a WordPress website and show you
how, step-by-step. And you can copy exactly what we’re doing, or you can
rejig to suit the design you would like. If you go with your own design, you will
be able to use our examples and instructions as a guide and for support.

So far, so good. Now go make yourself a cup of tea or coffee, or whatever you
find stimulates your concentration and your creativity, get comfortable, and
together we start right at the beginning and go through WordPress one step
at a time.

All there’s left to say now is enjoy!

01
THE FIRST STEPS 8
Overview: WordPress Control Panel 10

Summary of chapter 1 14

02
WHAT KIND OF WEBSITE WILL YOU CREATE? 16

The Website: Creating a digital portfolio 17

Summary of chapter 2 20

03
NOW LET’S GO! 22

Building our framework 23

Content and images 28

Summary of chapter 3 53
04
MAKE YOUR WEBSITE VISUALLY APPEALING 55

Theme: We’re expanding Twenty Twenty-One 56

Customising your menu 58

Header & Footer 66

Overhaul your pages 71

Summary of chapter 4 81

05
A FUNCTIONAL PORTFOLIO 83

Adding functionality 84

How to find and install a theme 97

Summary of chapter 5 101

06
ALL GOOD THINGS MUST COME TO AN END 103
 CHAPTER 1

The very first

steps
Ahh, the joy of anticipation. You know it If it’s your first time trying to get to grips
well. It’s a delicate feeling, one that gives with creating a website, it can be a
you a bit of a buzz. The possibilities daunting task when you first set out.
ahead of you open your eyes like when You have a blank canvas in front of you,
clouds disappear after the storm and all a menu full of possibilities but all
you see are blue skies. Ideas, endless presented to you in foreign terms and
opportunities, exciting prospects. words you’ve never even heard before.

And then you hit that brick wall! That’s where we come in. We want to
help you get started so that joy of
That’s often what happens when you anticipation will be directly translated
have no previous experience with into positive energy, creativity, and not
websites. How do you create a website? least, real results.
What do you need? Who do you ask?
Let’s not wait any longer. Let’s take the
very first steps together.
 What is WordPress?

WordPress is a “Content Management System” – usually just referred to as

CMS - and WordPress is one of the most popular of its kind.

What’s so special about a CMS and WordPress specifically?

A CMS is created to make it easy to build your own website. It is a tool that
helps you manage and create content on your website. You do not have to
code yourself and you do not need deep technical knowledge. Instead, you
use the system’s user interface to create pages, posts, text, and images - the
CMS does the rest.

WordPress is an open-source CMS. This means that everyone can access the
code that underlies WordPress. With a unique, large, and active community,
this means that new themes and plugins (extensions) are constantly being
developed, which you can use - in many cases completely free of charge.

In this guide, we only use free extensions. Therefore, with WordPress, you
have ample opportunity to customise your website just the way you want it.
WordPress may be open-source, but it does not require any coding
knowledge. It is aimed at anyone who wants to make a website. If you have
some knowledge of coding, then you can refine your website further - but this
is not necessary for using WordPress.

Given the many possibilities and the great flexibility in WordPress, there is a
learning curve if you want to get the most out of your WordPress experience.
It can be overwhelming for a beginner, so it’s good that you’ve found your way
to our step-by-step guide!

Let’s take it step-by-step together!

9
 Overview: The WordPress control panel
The first time you log into WordPress you’ll see the page below:

▲ The WordPress control panel

Welcome to The Engine Room

Now you’re in The Engine Room - the control panel of your WordPress
website. You will get the most of this guide if you keep both the control panel
and the website open in two different tabs from now on – this way we can
easily switch between the two.

This is the main page of the WordPress control panel. On the left-hand side,
you see the menu from which you can access the website’s settings,
functions, and content.

10
Review of the control panel menu:
It’s a lot to take in, especially if you’re just starting out with WordPress. No
doubt you will be totally overwhelmed, maybe even feel like just closing the
tabs and giving up on the whole thing but believe us when we say: You’ve got
this!

In this next section, we will outline the functions in the control panel that we
will be working with. We’re sure this will make you feel a little more at ease
and you can always look back at this for clarification if you feel you need to
later.

Posts
In this section, you create blog posts for your website. Later in this guide, we
will show you how to create a blog page where the posts will live.

Pages
In this section, you create your pages – your front page, contact page, content
pages, or blog page. We will teach you how to create a series of pages later.

Media
This is your media library. Here you can upload images and any files you
would like to use on your website, such as images.

We will upload images to the media library later to show you how this is used.
Upload can be done through the control panel directly from a page or post,
either way, the files, and images will be stored in this section to use again and
again.

11
 Appearance

Themes
Under Appearance, there are several subcategories. Themes first, with some
WordPress’ own themes available. The default theme, Twenty Twenty-One, is
listed as “Active”. In this menu, it is possible to search for other themes –
there are thousands to choose from, both free and paid for, and that’s one of
the huge benefits of WordPress.

Customise
The Customise menu gives you access to your website’s theme settings and
where you can create the layout.

Widgets
With widgets, you can add content and functionality to your website. You will
see in this menu that the widgets “Search”, “Recent Posts” and “Recent
Comments” have already been added to your current theme – you can find
these at the bottom of your page. The use of widgets brings many great
options with it, and we will explore this in greater detail later on.

Menus
It needs to be easy for your visitors to navigate your website and this is where
the menu comes in. Typically, the menu is at the top of the page, in what is
called a “Header”. The menu is where you add the pages you create for your
website - we will show you how to make a menu later.

Plugins
In short, plugins are extensions that add functionality to your WordPress
website.

For example, you can find plugins that optimise the speed of your website,
plugins that allow you to create a contact form or a tool for SEO (search
engine optimisation) - and much, much more.

We will work with plugins at various points in this guide, so this is something
you will become familiar with.

Settings

12
The settings section is where you can change the general settings of your
website. You can change anything from the format in which dates are
displayed to the image sizes used in the media library.

13
 Summary of
chapter 1
In this chapter, we created an overview of the WordPress control panel and
made an overall review of important menu items.

Now we are ready for the next step – this is when you’ll need to decide which
website you are going to create, how the structure of the pages will be, and
what content to add.
 CHAPTER 2

What kind of
website will
you create?

So far so good. Now we will go

through the steps that decide what When you create your list, think about
kind of website we are going to make. the structure of your website. What
pages do you need, what content
It’s a good idea to make a little list here should be included, and what
so you have considered things like the functionalities are necessary for you?
purpose and the top goal of your Should we include them?
website before you start creating it.

16
 The website: Creating a digital portfolio
In this guide, we will show you how to make a digital portfolio, the kind of
versatile website that can be used for many different people, clubs, and
businesses.

For this guide and to show you images of what various WordPress functions
look like, we will create a portfolio for a fictional freelance culture and event
planner with a wide range of projects to showcase, one that can be booked
for both lectures and meetings.

Let’s begin. First, we’ll determine the structure of our website.

Site structure and content

Four pages and a blog:

So, what pages do we need on a digital portfolio? We’ll need a homepage.
We’ll also need a page where we can showcase projects and one where we
can introduce ourselves to the outside world. Then, we’ll need to allow visitors
to contact us and book us.

So that’s four pages in total:

1. A homepage.
2. A page to show our work.
3. A page about us.
4. And a contact page that doubles as a booking page.

Our persona likes to reflect on his work and his personal life, the kind of thing
they would do in a blog. So, we’ll add a blog page to this list, and later, we’ll
show you how blog pages act a little differently from other pages in
WordPress.

Once we have created the pages, we create a menu that connects them. Then
our site structure is in place, and we turn our attention to our content.

Now, we add our content:

So, what kind of content should we include on our website?
Yes, we can generally divide our content into two categories: text and images.

17
Text:
We’ll need to write text for the four pages. Our homepage should welcome
visitors to our website. The page where we showcase our work must offer the
visitor to our website a detailed description and images of our projects.

The ‘About Us’ page needs descriptive text about who we are and what we do.
Our ‘Contact’ page needs our contact information and a contact form.

Our blog page doesn’t contain any text, instead, it contains a headline and an
image with a link to each of our blog posts. To fill this page, we’ll need to write
a couple of blog posts.

Images:
Pictures help give our website a visual identity and complement the words on
our pages.

So, what kind of pictures are we looking for? We will need a cover image,
banner images, a website icon (the small image/icon in the browser tab), a
background image, images for our blog posts, and, finally, images that
represent our projects. We will find all these images in the next chapter when
we get our hands on the content.

The last thing we’ll need to consider for the site structure is what
functionalities we’d like on our website. We’ll need to consider our theme as
well as what plugins and widgets we might need.

18
Plugins:
Plugins are one of WordPress’ great strengths as they bring with them a vast
amount of functionality options. In this guide, we try to keep it as simple as
possible.

Theme:
For this guide, we’re using the default theme, Twenty Twenty-One. When we
need to give our website a graphic overhaul, we install a plugin that expands
the theme. It gives us more options to customise the look of our website.

Contact form:
We want to give our visitors the opportunity to contact us and to book a
meeting with us. We could just put our email address and telephone number
on the page, but we want to go that extra mile with a nice form, so we have
found a plugin that helps us set up a contact form.

Social media:
No website would be complete without links to social media channels, and
we’ll use a widget for this. We add the social channels in a widget placed at
the bottom of our page, in what we call a “Footer”.

SEO:
Search engine optimisation, or SEO for short, is very important. Thinking
ahead, we want to create the best conditions for our website to show up high
on the pages of Google’s search engine. And luckily for us, there’s a plugin for
that

Right, that was a bit lengthy, but we felt it was important to go through
plugins, so you understand exactly why they’re so important.

While it’s so tempting to just jump straight to the content, the planning phase
is essential when you want to create a good website. But no more waffling,
we’ll need to start making our website.

19
 Summary of
chapter 2
In this chapter, we’ve clarified what kind of website we want to create - a
digital portfolio.

We’ve decided on the site structure of our website by getting a handle on the
pages we’ll need to create.

We have also considered what content we should include in the form of text
and images.

Finally, we have thought about what functionality we would like on our

website, and this is where we explained a lot about our theme, plugins, and
widgets.
 CHAPTER 3

Now let’s go!

Right, it’s time! Let’s get started with And finally, we will find and add
what we’ve all been looking forward to. images to our media library so we can
Let’s create that website. use them on our pages and posts.

We’ll start by making those pages, then In this chapter, we will not worry so
we’ll create a menu that connects much about the graphic appearance of
them. the website – what we’ll concern
ourselves with mostly, will be showing
Once the framework is in place and we you the ins and outs of basic
start adding content, we’ll start WordPress functions, as well as
working with the WordPress block creating and adding content.
editor, which is the tool we’re going to
use when we add content. In the next chapter, we will provide our
website with a graphic overhaul.
 Building the framework for our website

As we’ve started from scratch with our WordPress website, firstly, we’ll need
to delete the default pages that were added in the install.

From our WordPress control panel, we click on “Pages” in the menu on the
left. Here we see an overview of all the pages that have been created.

We can delete pages individually by clicking on “Trash” below each page. We’ll
need to delete them all, and we do this by putting a tick next to each page, or
by clicking on “title” at the top or bottom.

▲ Deleting the default pages

With the pages marked, we go to the drop-down menu at the bottom, where
it says, “Bulk Actions”, and select “Move to Trash”. Then we click “Apply” on the
right.

Now, we click on “Posts” in the menu on the left and delete the blog post
there.

The last thing we’ll need to do is remove the widgets from our footer. We go
to “Appearance” and there we choose “Widgets”. To the right, we can see the
three widgets in our footer. Click the arrow next to each widget and press

23
delete.

▲ Removing widgets

We now have a blank canvas and we’re ready to build the framework of our
website.

Let’s create the pages:

Starting with our front page, we go to “Pages”, then click on the “add new”
button at the top of the page. WordPress takes us into the new page, and this
is our first meeting with the WordPress block editor where content is edited.
But much more about that a little later! To kick things off with this very first
page, we give our page a title where it says, “Add Headline”.

▲Our first page

24
We’ll name the page “My digital portfolio”.

In the right corner, we have the option to “Save Draft” - this means that the
changes have been saved, but that the page has not been published and is
not visible on our website for any visitors to see. But we want the page to be
visible to our visitors, so we click “Publish”.

Our homepage is now created, and we will need to repeat the process with
the other pages. The headlines we decided on for the other pages were “My
projects”, “About me”, “Contact” and “My blog”.

To get back to the control panel, click on the WordPress icon in the top left
corner. To create the next pages, simply repeat what you did on the first
page.

▲ Our pages
The order that you create the pages in does not matter – the order we want
our pages displayed in, is determined in the Menu option.

Once you’ve created all the pages, check out your live website. You’ll see only
see the default page. This is because we have not yet specified which page
you want to be your homepage and because the pages are not yet linked to a
menu.

So, let’s create the menu.

Create a menu and add pages:

The menu will be in our header at the top of the page. From the control panel,
25
we’ll find “Appearance” and then “Menus”. We’ll keep the name “Primary
menu”, but we’ll remove the default page “Home”. Click on the arrow to the
right in the “Home” box and press “Remove”.

Under “Add menu items” we can see the pages we’ve created. We can select
them all by clicking on the checkbox “Select All”, and then click “Add to menu”.

The pages now appear on the right side. We can use the mouse to drag the
pages around and control their position in the menu. The page at the bottom
becomes the last menu item and vice versa.

▲ We have created our menu structure with all the pages we created. We can arrange the order by
dragging them with the mouse
Finally, select “Save menu” in the right-hand side corner. And that’s it - our
pages have now been added to the menu.

If you go to your live website, you can now see the menu with our pages in
the header. It’s moving fast, our framework is taking shape.

Choose homepage and blog page:

Now, we will need to assign our front page and the page where our blog posts
should display. From the control panel, we go to “Settings” and here we select
“Reading”.

26
The first thing you see here is “your homepage shows”. Right now, the field
“Your latest posts” is checked. Change this to “A static page”.

Now we can choose which page should be our front page and which should
be our posts page. In other words, our blog page.

▲ We have chosen our homepage and our blog page

Click “save changes” at the bottom of the page. When we visit our website, we
automatically enter the front page, and when we create a blog post, it’s added
to our blog page.

From “Settings”, we can also change the page title - the name of our website.
Currently, our page title is “WordPress for Beginners”.

To change the title, click “General” – in this case, we’ll change our page title to
“My Digital Portfolio” and press “save changes”.

27
Our pages are now created and linked in the menu, and we have set our
homepage and blog page.

Give yourself a pat on the back - you’ve gone further than many others who
have tried WordPress.

The time has come to start creating content. We’ll meet our new, and perhaps
best friend, the WordPress block editor

Content

Let’s get started with the creation of content on our pages. We will need to
open our homepage for editing in the block editor.

In the control panel, we locate our pages. Under the homepage title, click edit.
Alternatively, choose “Edit page” from the top bar of the website itself.

The WordPress Block Editor:

We’re finally here… enter The Block Editor.

28
 ▲ Our homepage is open in Block Editor

The WordPress Block Editor is a tool that makes it easy to create content.

Let’s start by finding out why it’s called a block editor. The content of pages
and posts in WordPress is built on a design approach where each section on
the page - a piece of text, an image, a button - is an isolated block.

This is a flexible system that has several benefits to it. It makes it easy to
move blocks around - once a block is created it can be moved to other places
on the page without affecting the other.

There are many different types of blocks in the block editor, and it can seem a
bit overwhelming, but we’ll cover the various kinds as we come across them in
this guide.

The best way to get to know the block editor is to just throw yourself into
using it, so that’s what we’ll do now.

A welcome note:
With the front page open in the block editor, we click on the text: “Start typing
[..]” and this way, we start with our first block element, a text section.

When we click the text, a toolbar appears for the block element. We’ll get very
well acquainted with this as we move on with this guide.

29
 ▲ The tools used in a block element

Welcome to my digital portfolio.

Here, I will show you the projects I have worked on through the
years. I have added a selection of my professional projects, as well
as personal ones.

By clicking ‘Who Am I” in the menu, you can read a little more

about who I am and what I do, both professionally and personally.
You can also book me for an appearance or a chat about a project.

Don’t forget to check out my blog, where I reflect on all things

great and small from all aspects of my life.

Thank you for visiting.

▲ Our welcome note

Have you written your welcome note? Great!

Let’s open the settings for our block item so you can see what it looks like. We
find the settings on the right side of the screen where we can select “Page” or
“Block”. If you do not see them, click the cog in the upper right corner.

▲ The cog opens your site settings

Click on the block section and look in the settings.

30
 ▲ Block settings in a text block
Here, we can change the font size and line spacing as well as the text colour
and the background colour of the block. But we’ll get to all that later.

Before we update and save the greeting, we check a preview of our page and
ensure that everything is as it should be.

A preview:
In the top right-hand corner, we can click on “preview”. Here, we can choose
which format we would like to see a preview of. We can choose Computer,
Tablet or Mobile.

Our text appears fine in all formats. On mobile, the width of the text becomes
smaller, but it retains its formatting.
WordPress makes sure that our website is displayed most optimally.
In the world of websites, this is what we call “responsive design”, which means
that the elements on our website scale and move, depending on how much
space is available on that screen.

Now we’ve made sure that the text appears neat and legible in all formats, so
we click “Update”.

Now it’s time to congratulate ourselves - we’ve written and published our first
piece of content! YAY!

31
Block element: Heading:
We return to the homepage of the block editor to try our hand at a new block
element: a headline.

There are several ways to make a new block - as you get to know WordPress,
you will learn that lots of functions can be done in more than one way.
You can click the plus in the top bar.

You can hold the mouse between two blocks on the side where a “+” appears.
You can click on your last text paragraph and press enter, which automatically
creates a new block, and the plus appears on the right side.

Or you click the plus in the top bar. What we’re looking for in the box that
appears when we press the plus.

▲ The different block types

There are lots of blocks to choose from. The “Headline” element is one of the
first we encounter, but if you’re looking for something you don’t see, you can
always search for it. Try searching for “Headline” - it will appear in the search
field.

32
Now choose “Headline”. If you clicked the plus in the top bar, the block
element appears at the bottom of the page - we will move it in a little while.

Let’s be super original and write “Welcome!” in the headline field.

We can drag the item by holding the mouse over the two rows of dots in the
toolbar or move it up step by step by clicking on the arrows to the right.
When we drag the item, we can see a horizontal blue line on the screen. It
tells us where the item will be inserted when we release the mouse button.

Here, we show what it looks like when you pull the headline:

▲We click and hold the mouse

▲ Note the horizontal blue line showing where to insert the item

▲We add the element at the top of our text block

33
With the heading in the right place, we click “update”. And it’s that easy - we
now have the first version of a homepage we can show off!

With our new knowledge of text sections and headlines, we will try our hand
at a blog post, and then we’ll take a look at the media library so we can start
adding photos.

Sharing our thoughts – creating our first blog

From the control panel, we click “Post”, and then the “Add new” button. We go
directly to the block editor, where we can write a title and our content.

Our blog post is going to be about how easy it is to get started with
WordPress. Feel free to write your own.

We give it the title “WordPress - Even for beginners” and this text:

WordPress is not as complicated as I thought before I started.

With the WordPress block editor, it is really easy to create a blog
like this.

When using a standard WordPress theme like the default

Twenty Twenty One, your website will look professional and
aesthetically pleasing.

WordPress is a great choice of website editor for my digital

portfolio. It’s easy for me to showcase my projects and share my
experiences with others.

I’m looking forward to continuing this journey from WordPress

beginner to expert with you.

▲ Copy for our first blog

34
When we’re happy with our text, all we will need to do is publish it, which
works in the same way as when we publish pages. Once done, it should
automatically end up on our blog page.

Let’s just check that it has. We open the live website and click on “My blog” in
the menu. Here we can see that our post has found its way into our blog
page!
Remember that this happens automatically because we set our page “My
blog” as our post page.

We can see the post displayed with the title we provided, an excerpt of the
text, and a “read more” link.
We can click that to check out the blog post and wouldn’t you know, it looks
like a real blog post – well done us!

To make our post more interesting, we’ll need to find an image that appears
along with the excerpt. To do that, head over to the media library.

The Media Library:

Words are good, but images will catch our eyes in a way that words rarely
can. From the media library, we have access to all the media files we upload
to our website. The media library is not limited to images - media such as text
files and videos are also included here.

We’ll need to find our first picture. But where do we find images that are free
to use?

There are lots of great, free images available, on websites such as

unsplash.com and pexels.com. Once you have created an account, search
around a bit and see if you can find an image that you think fits your post.

If you have some pictures you would like to use, then get loose - it’s good to
brand your website!

In our case, we will choose an image of a PC screen with WordPress on it –

this image fits well with our blog post.

35
 ▲ The image for our blogpost

Adding the image to the image library:

To illustrate how the media library works, we upload the image to the library
itself.

From the control panel, we click on “Media” in the menu. Then we press “Add
new”.

We can drag our image onto the screen or select it through the pathfinder.
We have the folder with our image open, so we choose it with the mouse,
drag it onto the screen, then drop it.

▲ This is what it looks like when we drag and drop our image in the uploader

This process may take a moment depending on the size of the file you’re
adding, but once it’s uploaded, the image appears at the bottom. We can see

36
details about the image by clicking on it, and here, we can give it a title, a
caption, and a description.

We can edit the image by pressing the “Edit image” button below the image
itself. Here, we can scale, crop, flip, and rotate, if the image is not exactly the
way we want it.

You don’t have to worry too much about the image size. Right now, it’s more
about getting an idea of how the media library works.

Adding the image to our blog post:

We open the post in the block editor - in the same way, we did with the front
page.

With the post open, we look at the post’s settings on the right-hand side.
Under “post” we scroll down and find the option “Select featured image”.
Here, we click “Select featured image”. Our media library opens automatically.
Click on your image and click “Select image”. Then, click update on the posts
page.

▲”Select featured image”

On our blog page, we can now see that our image is placed above the excerpt
of our blog post.

37
 ▲ Our post now has a featured image

The image has also been added to the blog post itself.

Now that we’re more familiar with adding text and images, we’re ready to
move on to the next block element, which combines text and images. We will
need to test this on our “My projects” page.

Page: My projects:

Block element: Cover:

We will need to test a block element that combines image and text. This is
called a ‘cover’ and acts as a banner because it can “stretch” horizontally on
the page. In practical terms, it is a block element that we use to introduce our
site – one where we can write text directly on the image.

We’ll need to find a new image. It can be anything that fits the theme of your
portfolio. We choose an ocean and horizon image; it suggests that we are
aiming for the possibilities of the future - and who doesn’t like a picture of
nature?

38
 ▲ Our cover image

We upload the image to our media library exactly as we did in the previous
section, and then we go to the block editor. We open “My Projects” for editing
in the block editor. With the page open in the block editor, we create a new
block element of the type “Cover”.

▲We choose an image for our cover

We click “Media Library” and select the image we have found, which will then
appear on the cover:

39
 ▲ We have an image on our cover

As you can see, it’s possible to write a title on the image. We write a piece of
text that represents our page.

▲ Text section on the cover

Once you have written your text, you can select it and press “B” in the toolbar.
This makes the font bold.

We would like the cover to extend across the page. Fortunately, this is easy to
do, as we can control both the height and width of our cover. We select the
cover itself by clicking anywhere on the image - not the text - to bring up the
toolbar.

40
 ▲ Specific settings for the block element

We’ll focus on two options. We click the second from the left and get several
adjustment options. Well, use the option called “Full width”.

41
 ▲ The cover now stretches horizontally across the screen

The cover now spans across the entire screen horizontally. We click the third
option from the left: “Correct content position”, where we can control the
placement of our text in the cover. We choose to keep the text centered.

We have now adjusted the width and position of the text. We can also adjust
the height of the cover by drawing in the blue line below the cover or below
the cover block settings on the right side.

We find the field: “Dimensions” and set a minimum height of 500 pixels. Then
there is plenty of space between the text and the edges of the cover. The
image is also allowed to appear clearer.

Now, let’s take a closer look at the block settings for the cover. We have some
options to customise it further. Below “Overlays”, we can control the
transparency of the image. We want to make our covers a little lighter, so we
set the transparency to 30%.

Below “Media settings” we make our image a fixed background. We turn it on,
open a preview and scroll down the page. That’s pretty cool, right?

A fixed background adds a simple but aesthetically pleasing and modern

effect.

We now have a nice introduction to our website and it’s time to move on to
the next block element, “Media & Text”. We will need the block element to

42
show and describe our projects.

Block element: Media & Text:

With “My projects” open in the block editor, we create a new block element of
the type “Media & Text”.

▲ Our first ”Media & Text” block element

In the media area on the left, we can insert an image. In the content field on
the right, we can add our text.

Before we decide which projects we would like to show and find associated
images for, we build the page structure for the content.

We insert a total of four block elements of the type “Media & Text”. We will
show two professional projects and two personal projects. We therefore also
insert two block elements of the type “Heading” - one for each section.

We start by inserting the three “Media & Text” block elements we are missing.
We place them below each other. Then, we add two block elements of the
type “Heading” and place them over each section.

43
 ▲ We have created the page structure for the content of our ”My Projects” page

Our projects:
We’ve reviewed a lot of settings and features so far - and as most are likely
brand new to you, you may be a little lightheaded by now. That’s completely
understandable! Let’s take a short break from thinking and instead spend a
little time deciding which projects we would like to show.

Our fictional persona is a culture and event planner, which is why we have
added several (fictional) cultural projects to our website.

We’re assuming you will be adapting the portfolio to suit your own business,
but if you would like to copy ours, that’s okay too.

Our professional projects:

1. A festival supporting new music, literature, and art.
2. A developer and designer “jam session”, where the goal was to write
programs or create applications under the theme “community”.

Our personal projects:

1. A lecture about culture in the digital age.
2. Nature return: A photo project focusing on the role of nature in the digital
world.

If you are adapting the portfolio to yourself, take all the time you need here.

44
Now you have your projects in place, we’ll need to find images that represent
our projects.

Pictures and text for our projects:

Head over to where you found your free images, to find something that suits
your projects. If you need inspiration, you can see the pictures we chose for
ours below.

Once you have uploaded your photos to the media library, open “My projects”
for editing in the block editor. Insert an image for each “Media & Text” item by
pressing the “Media Library” button on the item.

Once you have added the images, you’ll need to write some text for each
project. You can see the description of our projects in the following
illustrations:

▲ Text for our professional projects

45
 ▲ Text for our personal projects

Once the descriptions are in place, we will need to make our projects stand
out more from one another.

This can be done by swapping the placement of images and text in each
element, so we get a kind of zigzag effect as you scroll through the page. This
will help keep your website visitors’ eyes moving across the page and keep
their attention.

Press “Media & Text” element no. 2 to access the toolbar. The block element is
written as “Show media to the left”. We want to swap the image so that it is
displayed on the right. We do this by clicking “Show media to the right”.

46
 ▲ Media & Text adjustment creating a zigzag effect

We’ll do the same on block element no. 4 and voila… each project now stands
out and our site has a clearer visual identity.

47
Page: Who I am & contact:
Open the page so you can edit the block editor. Start by preparing the
content structure of the page by making a cover with a piece of text as a
headline. In this section, write a brief piece of text about yourself.

▲ The cover of our “Who am I & contact” page

The next thing we will need to do is add some background information about
ourselves, and for this, we will test a new block element, columns.

Block element: Columns:

We’ll need to make a new block element on the cover. Find the block element
called “Columns”. Here, we’ll choose how many columns we would like.

We’ll start with 3 columns - this is called a “33/33/33 variation”. We have three
columns with plus-signs between them – this is where we can add block
elements.

We want to make 3 statements in this section, each with a headline. In each

column, we’ll create the headline first, then a plain text section.

▲ Our columns with headlines and text

48
In the image above, you can see that the columns look a bit squashed, and
the text extends a little too far down the page – we will need to create some
‘breathing room’ between them. In the top bar, we’ll click the three horizontal
lines called “outline”.

▲ The setting furthest to the right is “outline”

This opens a hierarchical list, one with all the block elements that are on our
page. We click “Columns” and here the toolbar opens rather than the main
column. We’ll need to change the adjustment from “Wide width” to “Full
width” - just as we did with the cover. We add a heading above the column
and change the text alignment (both on the heading and the text section) to
“Centre text”.

▲ Our finished column with a headline

We are now preparing a section where you can book us for a meeting or a
lecture. In Chapter 5, we’ll install a plugin that helps us create a nice contact
form, however we’ll need a headline and a text section that tells us what you
can book us for.

49
 ▲ In Chapter 5, we install a plugin to create a contact form

The last thing we’ll need to do is make a section with other contact
information. We create a heading and a block element of the kind with three
columns.

Here we should include a physical address, an email address, and a telephone

number.

▲ Our ‘Other contact information

Now we’re nearly done with the content on our pages, just missing a few little
things.

Page: Homepage:
Our homepage needs a cover image. In the block editor, open the homepage
and add a cover and an image. The text can be the title of our website, or
whatever suits your page. In our cover, we reuse the image from the “Who am
I & contact” page.

50
 ccccccccc

▲ The cover image for the homepage

Here we also add a website icon to our website – this is often referred to as a
‘Favicon’. A website icon is an icon that can be seen in the browser tab to the
left of the website title. We open the “Customise” menu” in our theme
settings. We can do this from the control panel under “Appearance”, or by
opening our website and clicking “Customise” in the top bar. Here, we’ll select
the first field called “Site Identity”.

▲ The cover image for the homepage

Here, we’ll click on “Select icon for the website” and select an image from the
media library. With the image selected, we click “Crop image” in the right
corner. WordPress will create a copy of the image for us with the right aspect
ratio.

And that’s it - now we have a website icon in our browser tab.

51
 ▲ Our website icon

Our website is starting to take shape. Our content is in place and now we’ll
need to style our website.

Let’s jump on to the next chapter in our WordPress adventure!

52
 Summary of
chapter 3
In this chapter, we’ve created content for our website. We have worked with
the WordPress block editor, and we have become acquainted with some of
the frequently used block elements: Text sections, headings, images, covers,
media & text, and columns.

We have reviewed various functions and settings for the block editor and the
individual block elements. We have created content for all our pages and
written our first blog post and we’ve learnt what the media library is and how
to upload images to it. Finally, we added a site icon. Now, we are seriously
starting to launch our website into the 21st century!

67
 CHAPTER 4

Make your
website
visually
appealing
Now we have a website full of pages and content - excellent! The content
itself is important, but for it to come into its own, it must be presented in a
visually appealing way. In other words, it is a form of visual narrative that
will stimulate the visitor’s interest in what we’re presenting.

Stylistically, not much is happening on our website now – let’s change that!
 Theme: We are expanding Twenty Twenty-
One

As this is a guide for beginners, it makes sense to continue to work within the
theme we are already using.

Let’s install our first plugin, one that expands our toolbox for the layout of the
website.

Our first plugin:

The plugin we’ll need to install is called “Twentig”. It expands the
customisation options in our theme. So, what does that mean?

The theme, Twenty Twenty-One, limits what we can change in the design
itself, however the “Twentig” plugin gives us more options to change the look
of our website. Among other things, the overall layout can be changed, and
we’ll have more control over colours, text, blog and header & footer - and
more.

Installing Twentig:
The process for installing and activating a plugin in WordPress is very
straightforward. From the control panel, find the menu item “Plugins”.

Click on “Add new” at the top of the page.

▲ We click ”Add new” in the Plugin menu

Type “Twentig” into the search box on the right. The plugin appears as a
result. Click on “More Details” to read more about the plugin.

56
 ▲The Twentig plugin

On our website, we’re using version 1.3 of the Twentig plugin. If you have
a later version, you may notice small differences, however the process
itself should be the same.

When you’re ready, click “Install now”. When you install a plugin, it is not
activated immediately. This is a security measure in case the plugin is not
compatible with another plugin you’re using, or if you would like to check the
plugin before using it.

But we know that this plugin is fine, so it’s safe to click “Activate”.

You should now see ‘Twentig’ in the overview of the plugins used.

▲ Twentig is now on the list of installed plugins in our control panel

And that’s how easy it is to install a plugin!

57
 Customising your menu

Now, you’re ready to style your website – you should start by customising in
the Customise menu. You can open it by either going to your website and
clicking “Customise”, which we find in the top bar or from the control panel
under “Appearance”.

▲ The “Customise” menu. Here we can control a wide range of settings for our website

Find “Twentig Options” at the bottom of the menu - this gives you access to
the new plugin. Start by adding colour to your website!

A world of colours:
In the customise menu, choose “Colours & dark mode”. From here, you can
control the main colours of our website.

58
 ▲ The section of customisation options for colours on our website

To illustrate this function, we’ll temporarily change the background colour.

Click “Select a colour”. A colour picker appears on the screen. We select the
colour black - either in the colour bar at the bottom or by clicking the black
colour in the colour picker.

As soon as we click it, you can see the colour change.

▲ We now have a black background colour on our website

If you’re not happy with a colour you’ve chosen, you can always revert to the
original colour by clicking “Select colour” and then the “Standard” button.

59
Colour scheme with hex codes:
It’s important to be consistent with colours on your website as this helps to
create a visual identity. A good thing to do is create a document with an
overview of the different colours you want to use on your website - a so-called
colour scheme.

The easiest way to name your colours, is by using their “hex codes”, as these
codes can be copied once a colour is chosen.

Below the colour picker, you can see the hex code to the right of the colour. It
starts with the “#” symbol and is followed by a mixture of six numbers and/or
letters. If you click anywhere on the colour picker, you will see that the hex
code changes.

▲ Example of a hex code

Save your hex codes so they are easy to find – this will make the task of
picking the same codes for different areas of your website much easier.

For the background, we’ll use a dark grey colour with the hex code #131F26,
but you can choose any you want. Change the text colour in the field “Text
Colour”.

Now we’ll want to choose a warm text colour that harmonises with the cover
image. We choose an orange-adjusted colour with the hex code #EA9412.
Again, you can adjust the colours to suit your images or your website.

60
 ▲ We have added our background colour and text colour

Now you’ll need to choose the colours in your header - this is below the
heading “Header” in the colour menu.

To visually distinguish our header from the background, we change the

background colour to a regular black or hex code #000000.

“Site Title Colour” is the colour of our page title, and “Link Colour” is the colour
of your menu items. We’ll update the text colour in our header to white.

The item “Link Hover / Active Colour” controls the colour of our links when we
hover the mouse over, and when we have clicked on a link. We use a more
subdued version of our body text colour here with hex code #EA9412.

▲ Our header has now got its colours

61
When you’re happy with the colours, click ‘Publish’. Now you’ll see that the
colours have changed throughout your website.

Font and font size selection:

Currently, your website uses a standard font and font size. Let’s change that.

Find the settings for text under “Fonts” in Twentig Options.

▲ From the Font menu, you can control universal text settings

“Body Font” is the font for the text in the body on the website. We choose to
use the popular font “Lato” – you can choose whichever one tickles your
fancy.

You can choose your font from the dropdown menu. Lato is a soft, warm, and
inviting font, and at the same time professional. It is suitable for many
purposes and can be combined with many other popular fonts.

We set the font size of your body text to 16px and the line-height to 1.5.
We also choose Lato for our headlines. “Headings Font Weight” controls the
“weight” of our font. We will choose “Bold 700”, which is nice and strong for a
headline.
62
“Site Title” controls our page title in our header. We want to make sure that
the page title does not take up too much space, so we’ll set “Site Title Font
Size” to 22px. Under “Primary Menu” we set the font size to 16px.

With colours and text in place, we move on to the overall layout of our
website.

Adjusting your overall layout:

In the Twentig Options, find at the top "Site Layout". There are three options:

• Site Max-Width (px)

• Text Width (px)
• Wide Width (px)

With these settings, you can control the width of your website and its content.
Site Max-Width controls the maximum width of your website in pixels. Right
now, the page fills the entire width of the screen.

Text Width controls the width of our text:

Wide Width controls the width of block elements that are adjusted as “Wide
width”. On your project page, your Text & Media elements are adjusted as
Wide Width.

Set Site Max-Width to 1200px, Text Width to 600px, and Wide Width to
1200px and you will see that on both sides there is a distance between the
header and the width of the content. The width of our text element has also
been reduced.

▲ Change of Site Max-Width. The width of the page is reduced

After changing the Max-Width, a new field appears in the colour settings
called “Inner Background Colour”. This happens because the content layer has
got its width, which separates and exposes the main layer with the grey
63
background colour.

Let us illustrate this by colouring the field “Inner Background Colour”. Go back
to the colour settings in the customise menu and find the new field. Here, you
can just copy the hex code from your current background colour and paste it
in the new field, this changes the colour of the main background to normal.

▲ We have added a black background colour and grey colour to our “inner”
background

Now it’s clear to see the difference between the main background and the
inner background colour.

Adding a background image:

Instead of the black background colour, insert a background image. To do
this, you’ll need to add the image by selecting it in the customise menu
“Background image”. Use the image from the front cover to create a nice
visual effect.

64
 ▲ Settings for the background image

Select “Fill screen”, so the image covers the entire background. Below “Image
Position”, select the circle in the middle - this will centre the background
image.

▲ Our new background image

As you scroll down the page, the background image keeps the same size and
position. This is because you have chosen the “Fill screen” option.

In the following sections, you will get a handle on your header and footer, but
now it’s time to change an overall setting on all our pages – we’ll need to hide
the page titles.

65
Removing the standard page titles:
A standard title for each page was created when we created the pages. They
need to be removed as the pages already have the titles displayed on the
menu and the page covers - they take up a lot of space and remove focus
from the covers.

From the control panel, go to “Pages” in the menu. Select a random page and
choose “quick edit”.

The Twentig plugin helps remove the page title without changing the content.

▲ In “quick edit” it’s quick and easy to change the template to “Twentig - No title”. This removes
the page title

Click on the drop-down menu “Template” on the right, select “Twentig - No

title” and click update. Do the same on all our pages.

The page titles should be gone when we click around our pages

Header & Footer:

Now it’s time to style the header and create a footer. These are two important
elements that are found on most websites.

In the header, you’ll need to swap the page title and the menu.

Make your header “sticky”, which means that it follows down the page when
we scroll. Create a small footer with space for a widget with link icons to our
social media.

66
Styling our headers:
From the customise menu and Twentig Options, find “Header”. Below
“Layout”, you should see “Header Layout”. This is where you can choose
different ways to position the content in the header.

Choose “Centre Stack”, this centres the content, so the site title is at the top
and the menu is below. Set “Header Padding” to Medium so your content gets
some space in between, and in “Menu Item Spacing” below “Menu”, increase
the distance between each item in the header and set this to Medium.

▲ The content in the header is stacked and centered

Tick the field “Sticky Header”.

▲ Attach your header to the top of the page so it goes down the screen when scrolled

The header sits “fixed” at the top of the page and follows when the page
scrolls. Visitors on your website can now easily find the menu at any time.

When you hover the mouse over your menu items, a dotted line appears
below the item. This can be changed in the field “Menu Link Hover / Active
Style”. You can choose whichever one you like best – we’ll choose “None”
because we already use colours to signal the hover style.

When you click on a page other than the homepage, a line appears below the
page title in the header. This can be removed below Twentig Options in
67
“Additional Styling”. Below “Links Style”, choose “Minimal”.

▲ Removing the line below our page title in the header

Creating the footer:

A footer often contains information such as menu items, contact information,
and useful links - especially on websites with many pages.

In our footer, we’re going to insert link icons pointing to social media
channels. It isn’t completely straightforward to change the footer in the theme
– for instance, we can’t edit the content as we do on pages - but Twentig does
make this easier.

We will need to create what’s is called a “reusable block”.

A reusable block for the footer:

Create a reusable block by creating a new page, then open it in the block
editor. Go back to your control panel, choose “Pages” and “Add new”. Name it
something like “Footer”, so it’s easy to recognise.

Now, add your first widget as a block element. Create a new block element
and search for “Social Icons” or select it from the list.

When you click the plus sign, you will see lots of social media icons. Choose
Facebook first. To make the icon visible on your website, you’ll need to tap the
icon and type something in the address field.

68
 ▲ Creating a reusable block. Make sure the icons are visible by adding text in the address field

You can insert a link to your profile or just insert any letter, symbol, or
number for testing purposes. Repeat the process with the social channels you
have.

From the toolbar, change the alignment of the block element to “Centre”. Click
on “size” and select “small”, then click publish, and your reusable block is
ready!

Return to the settings of your Footer in the Customise menu. Below “Footer
Layout”, select “Blocks”. In the drop-down menu “Footer Content”, select your
reusable block with the name “Footer”.

▲ Selecting a new recyclable block for the footer

Your recyclable block is now visible at the bottom of your page.

69
 ▲ The reusable block inserted in the footer

You can make your footer easier to see by changing the background colour. In
Colour Settings, find the footer field and select the background colour want.

▲ Changed background colour in the footer

The background colour in the footer strengthens the visual identity by

framing your content.

With your header and footer in place, move on to your pages. Start with the
page “My projects”.

Overhaul your pages

My projects:
Your projects need to stand out, of course, so with this in mind, you’ll need to
look at two things.

70
First, you’ll need to use the visual function called “overlap” on your media &
text elements – this is where the text “lays” on top of the image.

You’ll need to add a coloured background to your text elements to create a

so-called map layout. Adjust your main headings so they follow a symmetrical
pattern in the same way as the “Media & Text” elements. Change the colour of
the headings to white, then open the page in the block editor and click on the
first media & text element. In the block settings on the right, find “Colour
settings”. We’ve chosen to use a variation of the background colour with hex
code #24343B, but you can choose any colour you like.

In the “Designs” field, we have four options. We’ll select the option “Overlap”.

▲ Text background colour and the setting “Overlap”

Our text now lies on top of the image.

Follow the same procedure with your other media & text elements, making
each project highlighted and more eye-catching.

Secondly, move on to headlines. Click on your first headline – the one we

created is called “My collaborative projects” – and from the toolbar change the
adjustment to “Left style text”. On your second headline, choose “Right style
text” and change the text colour below the block settings.

Who I am & Contact:

On this page, we’ll need to fix two things:

• Create the layout for your column elements with the three points so
that they appear more clearly.
• Create a cover that contains a block element of the type “List” with
your other contact information.
71
Open the page in the block editor and start with our three points. Click on the
column, open the block settings, and find “Twentig settings”. Below the field
“Column’s style”, select “Grey Card” in the drop-down menu.

In the field “Columns stacking”, select “Small screens”. This means that your
columns are stacked on top of each other on small screens.

Now add a background colour to column fields. In the column settings, find
“Colour settings”, and select the same background colour used for your
projects – remember we chose hex code #24343B, so that’s the one we go
with, but you can choose your own.

▲ We have now changed our points to a more eye-catching layout

Now you can change the colour of the headline to white.

Leave the “Book a meeting” section for now – we’ll get to that in the next
chapter.

Now let’s edit your last section with other contact information. Move your text
down into a cover - this time we use this differently.

Block element: List:

Insert a block element of the cover type at the bottom of the page. Instead of
an image, change the background colour in the colour settings of the cover.

We’ve chosen a muted orange/brown colour with the hex code #BE6001 – you
choose whichever you like.

72
Change the cover adjustment in the toolbar to “Full width”. In the cover itself,
insert a block element of the heading type with the title “Other contact
information”.

Now insert a new block element of the list type, which you find by searching
for “List”.

Copy the contact information from your previous section. Below “Designs” in
the list item’s block settings, select “Inner border” to insert horizontal lines
below your list items.

Select the cover itself, then choose “Correct content position” in the toolbar.
Now choose where you want to place the content – we’ll change the position
to “Centered left”.

▲ We’ve inserted our contact information on a cover with a coloured background

Finally, delete the “old” section - the heading and the column of information.
Delete a block by clicking on it, and from the toolbar click on the three dots on
the right and select “Remove block”.

Now, we’ll move on to our blog page.

Ordering your blog:

With Twentig, you can upgrade the look of your “My blog” page, which
contains previews of your blog posts, as well as the posts themselves.

You’ll need to apply a grid system to your blog. With a grid system, you can
easily arrange the preview of your blog posts, which is especially beneficial
73
when the number of posts grows.

Navigate to your blog page and open the customise menu. Below Twentig
Options and click “Blog”.

Below “Blog Layout”, select “Grid”. Now, your blog posts will have moved to
the left of the page. In the next field, “Blog Style”, select “Card with border” -
this frame your posts. In the “Columns” field, select 2 - i.e. that will mean that
we’ll get a series with up to 2 blog posts.

▲ Layout settings for your blog page

Below “Featured Image Placement”, set the position of the selected image to
“Above” to make it appear above the title.

74
 ▲ The blog post preview

Under “Excerpt Length”, select the length of the post excerpt. It’s a bit long as
standard, so set it to 30 (words). In the “Text alignment” field, adjust the text
and title to “Center”.

Styling the blog post:

Now, let’s move from the blog page to the post itself.

Under “Blog” in the customise menu, find the section entitled “Single Post”.
Here, you can change settings for your blog posts. The settings also apply to
your future posts.

To see the changes take effect, click on the blog post so it’s open in another
tab along with the customise menu.

In “Featured Image Layout”, select “Cover”. It works similarly to the cover

elements we’ve worked with previously, where you let the image stretch to
the top of the post.

The following fields control the alignment and font size of the individual post
header. Adjust the heading to “Centre” and set the font size to 56 pixels.

75
 ▲ Layout settings for blog posts

In the field “Post Meta”, you can choose which information you want to show.
We’ll keep the release date in this field.

▲ Title with release date below

Now your blog is ready for new posts!

An additional blog post:

To see the full benefits of the grid system, create an additional blog post.
Once you have created and published the new blog post, it will appear on
your blog page, next to your first blog post.

76
 ▲ A new blog post on the blog page, neat next to our first post

Your blog is now complete and ready.

Onwards and upwards!

The front page is the last section covered in this chapter.

Turn your paragraphs into a group and add a map layout to the text, add links
in your text that lead to your various pages.

Open the front page of the block editor. Each time we click “Enter” when
typing any text, a new block element of the paragraph type is created.

For you to colour the entire background of the text, you’ll need to make your
paragraphs into a group. Do this by dragging the mouse and selecting all the
text. To the left of the toolbar, select “Change type of (number of) blocks”, and
press groups.

77
 ▲ Turning sections into a group

Now all the blocks are gathered in one group. In the group settings on the
right, select the colour of the background.

Inserting links:
Start by linking to your page “My projects”.

You’ll need the URL of the page. An easy way to find our URL is by clicking on
the page you would like to link to. In the browser, copy the URL.

In the block editor, mark the word “projects” in the sentence: “Here I want to
show you the projects [..]”. In the toolbar, click on the link icon:

▲ Insert a URL that you want to link to

78
Insert the link in the address field and press “Enter” to activate it. Now you
can click on the link that takes you to the “My projects” page.

You can also visually separate your link from the body text. Copying the hex
code #EAB15B, then mark the link. In the toolbar, press the small arrow to the
right, select “Text colour” at the bottom, and insert your colour.

▲ Colouring links

Repeat the process, then make links to your pages “Who am I & contact” and
“My Blog”. Note that you should change the text colour on the cover and the
page slightly, as illustrated here:

79
 ▲ The homepage with links to other pages

Your website is now practically unrecognisable compared to when you first

started. You have managed to upgrade the look of your website
tremendously – well done!

Now let’s move on to the last chapter of this guide. Here, we’ll show you how
to add extra functionality to your website and how to install a new theme.

80
 Summary of
chapter 4
In this chapter, we demonstrated how to give your website a visual overhaul.

You installed Twentig - your first plugin – and this gave us new opportunities
to edit the layout of the Twenty Twenty-One theme.

You customised the menu that controls the settings for your theme and
Twentig.

You worked with colours, fonts, background images, and layout.

You styled your header and made a footer with a reusable block, and you
inserted a widget with social icons.

You changed the layout of your blog page to a grid system and added a blog
post. Then, you gave the blog posts a nice cover image, and you created links
in your front page text.
 CHAPTER 5

A functional
portfolio

You’ve come a long way with your In this chapter you will learn about
website and you’re almost at the finish SEO. You will install a plugin that helps
line. you optimise your content and make it
easier to get a good ranking in search
Now you’ll need to add some engines.
functionality. You’ll need to make a
contact form so visitors can book you And, finally, we will show you how to
for meetings or lectures, and for this, find and install a new theme.
you’ll need a plugin.
Armed with all this new knowledge,
In the digital landscape of today, it’s you will know enough to experiment
more important than ever to be visible further, and you can always look back
online. You will get that visibility by in this guide if there are parts that are
making sure your website is found in still unclear.
search engines.
Let’s start the last trip to the finish line!
 Adding functionality

Contact form with WPForms:

You want your visitors to be able to book you for a meeting or a lecture, so
you’ll need to install the WPForms plugin, which makes it easy to create
beautiful and flexible contact forms.

Search for WPForms in plugins, install and activate it. The procedure is the
same as when you installed the plugin for your theme. If you need to have
your memory refreshed, take a look back at the beginning of Chapter 4.

▲ The WPForms plugin

When the plugin is activated, it appears in the top bar of your control panel:

▲ Easily access WPForms from the top bar of your control panel

84
The following illustration shows what the form will look like when finished –
we’re showing you this now, so you know what we are working towards:

▲ This is what your contact form will look like

Here are some ideas of what to include in your contact form:

• A name field
• An email address field
• A drop-down menu with two options: Book a meeting or book a
lecture.
• A text field where the visitor can provide information or requests
• Submit button

Let’s go!

85
Creating your contact form:
With your mouse, hover over WPForms in the top bar and press “Add new”.

▲ The page you see when you click “Add new” in WPForms

On the main page of WPForms, you can choose from a wide range of
templates.

You will need full control over your contact form, so you’ll need to select the
template named “Blank Form” by clicking on “Create Blank Form”.

WPForms is a drag & drop editor. On the left side under “Add fields” we have
the different blocks we can drag in and use for the contact form. In the field
“Field Options” we control settings for the individual blocks.

86
 ▲ The WPForm drag & drop editor

The first block you’ll need is the “Dropdown” block. Pull it onto your “canvas”
on the right. On your contact form, you should now see a title, a drop-down
menu, and a Submit button.

▲ A dropdown menu block

Click on the block you just inserted – this should open “Field Options”. In the
“Label” field - the title, write “Select meeting or lecture”.

“Choices” define the choices that appear when the drop-down menu is
clicked. Write “Book meeting” in the first field, and “Book lecture” in the next.
Remove “Third Choice” by pressing the red circle next to the field.

87
 ▲ Our drop-down menu

Activate the “Required” field at the bottom - this makes the field mandatory to
fill in. On our contact form, you can now see both “Choose meeting or lecture”
and a red star next to it.

In the drop-down menu itself, you can add temporary text that tells the
person filling in the form, what the field is about.

Below Field Options, click on the “Advanced” tab next to “General”. In the field
“Placeholder Text”, write: “Select here...”

▲ Placeholder text

Go back to “Add Fields” and drag the “Single Line Text” block between your
drop-down menu and the submit button. This will be used as the names field.

In the “Label” field, type “Name” and reactivate the “Required” field at the
bottom.

88
 ▲ We have inserted our block: “Single Line Text” into our name field

Now, you’ll need to insert the email field. From “Add Fields”, drag the “Email”
block to sit below the names field.

Here, you don’t need to change the label - the “Required” field is automatically
set.

Go to “Advanced” below “Field Options” and write a placeholder text. You

could choose an example of an email, like “[email protected]”.

▲Email field is added

In the last block, you’ll need to add “Paragraph Text”. Place this below the
email field and change the block label to “Description of your enquiry”. On

89
this, you don’t need to activate “Required” as this will be an optional section of
the form.

As a placeholder text, you could write: “Please provide a brief description

about your enquiry” or similar.

Now, there are only a couple of things left to do. Click the “Submit” button –
this will take you to the general settings for your contact form.

▲ General settings. This is where you name your contact form and make changes to the submit
button

Below “Form Name”, write “Contact form”. That will make it easy to find when
you’ll need to insert it on your page.

Move on to “Confirmations”. Here, you can write a message that appears

when someone has filled out and submitted the contact form. It could be
something like “Thank you for your enquiry. We will respond as soon as
possible.”

Now you’re ready to press “Save” in the top right corner - your contact form is
ready!

90
 ▲ Click “Save” and your contact form is ready for use!

And that’s it for WPForms, all that’s left to do is insert the contact form on
your page.

To insert the contact form, open your “Who am I & Contact” page in the block
editor. Delete the text on the page that tells us that we will use a plugin for a
contact form.

▲ Delete this section block

WPForms acts as a block element, so you can insert it in a cover and apply a
background image to the contact form.

Add a cover image under the body text in the section “Book a meeting or a
lecture”. Select an image from the media library, and instead of writing a title,
click the three dots in the toolbar and select “Remove block”. Click the plus on
the cover and search for “WPForms”.

91
 ▲ Insert a WPForm block element into your cover

In the drop-down menu, click your newly created contact form.

▲ Choosing your Contact Form

And now you have your contact form on your page!

92
▲Your finished contact form

93
 SEO with The SEO Framework
In the digital age of today, it’s important to be visible. Especially on search
engines like Google.

With a simple plugin, you can set your website up for success and you don’t
need to know all the technical details or know about SEO (Search Engine
Optimisation) in depth.

With a little help, this plugin automatically creates the settings for your
website that improve your chances of appearing in search engine results.
Several plugins will do this for you – we’ve chosen the one called “The SEO
Framework”. All you’ll need to do is find, install, and activate it.

▲The Search Engine Optimisation plugin, The SEO Framework

Once installed and activated, the settings for the plugin can be found on the
left side of your control panel - a small magnifying glass with the text SEO.

▲ The SEO Framework plugin

There are many settings in this plugin, but we’ll concentrate on the 3 most
important ones.

Below “Homepage Settings”, you’ll need to add what’s called “Meta title” and
94
“Meta description”. These control what is displayed when your website
appears in search results.

Below Meta Title, we will write: “My Digital Portfolio - see my projects and
contact me”. Here, try to include your most important keyword, as this will
help improve clicks from search results to your website.

▲ Write your Meta Title and Meta Description

Below Meta Description, write: “Welcome to my digital portfolio. You’ll find a

selection of my projects and book me for a meeting or lecture. You can also
read my blog.”

Make sure to stay within the green line, which is the indicator for whether the
section you have written is too long, too short, or just right.

Below “Social Meta Settings”, upload a logo image. This will be displayed if
someone shares one of your pages on a social channel. Here, we’ll choose the
background image from our front page.

95
 ▲ Select an image that appears when your pages are shared

The last thing you’ll need to do in The SEO Framework plugin is in

“Schema.org Settings”. Here, click on the tab “Presence” where you’ll need to
specify that the website represents a single person.

▲ Your website represents a person

Now, click “Save Settings” at the top of the page - and that’s it! There are many
other options you can experiment with, but for now, this is all you’ll need.

96
 Now it’s time to learn how to install a new
theme

How to find and install a theme:

Installing themes is an important part of any WordPress guide. So now, we’re
going to show you how to experiment with themes.

First, you’ll need to find and install a new theme.

You can search for themes in the same way you search for plugins. From
“Appearance” in the control panel, find Themes and then “Add new”.

On the search page, you can filter your results and search for popular or new
themes. If you need to customise, even more, use the “Function filter”.

▲ Different options for filtering your search

It’s a good idea to do a google search or two for WordPress themes. Especially
if you are looking for something specific - a theme that’s well suited to a
portfolio, for instance.

For this guide, we’ve chosen the theme “Astra”, which is a popular and free
theme. You can see a preview and read details about the theme before
installing.

97
 ▲ The theme “Astra”

It’s easy to install a theme – you don’t have to be nervous about something
going wrong, because, like plugins, the theme needs to be activated before
they can be used.

▲ Once you have installed the theme, click “Live Preview”, and see the theme’s customisation
options

Once the theme is installed, it will appear under “Themes”, and you can tap
on the theme to get a “Live Preview”. In the preview, you can try out the
theme’s customisation options.

98
It may look a bit confusing because you already have content on your website
from the Twentig plugin, so for future reference, note that it can be
advantageous to start from scratch when trying out a new theme.

Templates:
Many themes offer templates - also called “Starter sites”. They are often only
available once you have activated your theme.

Templates are ready-made websites that can be imported in their entirety, or

simply by selecting individual pages. Then, you can fill in and edit them as you
like.

▲ Starter templates in the theme “Astra”

There are a few things to consider when importing a template. Firstly, it’s
better to install a theme on a clean WordPress installation, or by using a so-
called “Staging site”, which is a copy of one’s WordPress website.

Secondly, plugins are often included in theme installations, so these are

necessary to import and install. Usually, they will be included in the import of
the theme.

99
The next step in your WordPress journey:
All themes are different and have different settings and functions. The best
thing you can do is try out a bunch of themes until you find one you like.

You will most likely come across tools called Page Builders or Site Builders –
these are easy-to-use drag & drop editors like the WordPress block editor
you’re already familiar with.

Most popular themes, plugins, and site builders have a dedicated website
where you can find help in the form of guides and answers to general
questions. And always remember that Google is your friend – chances are
there is an answer to whatever questions you have there.

But all of this is the next step in your WordPress journey.

100
 Summary of
chapter 5
In this chapter, you have learned how to add functionality to your website.

You’ve installed the plugin WPForms, which helped you create a nice contact
form, and you have made a cover with a background image in which you
inserted your contact form as a block element.

Also, you have set up your website for SEO success with the plugin, The SEO
Framework. In just a few steps, you’ve optimised your website to become
more visible and get a better ranking in search engine results.

Finally, you saw how to search, install, and activate a theme.

 All good things
must come to an
end
You have reached the end of the road There is still lots to learn, but you now
and you have come a long way. know the basics and you’re well equipped
to move forward with your website.
You set out on your WordPress
journey with a blank canvas, and now We wish you all the best and we hope that
you have a finished website. Well this guide has been of help to you.
done!
Thank you for reading.