WordPress Tutorial ( 2021 – Free Resources )

by | Last updated Mar 7, 2021

This is the complete WordPress tutorial guide! After this WordPress tutorial, you will have enough knowledge of WordPress web design.

You do not need any previous design experience or technical knowledge. We will cover everything and build a website from scratch together.

Before we start, this is only the first version of the website. We will be updating it every week, adding new designs and features.

Whilst doing this tutorial, you can always click the YouTube icon to watch the step on YouTube. Let’s get into it!

Contents show

Step 1: Get Hosting

 What is the best hosting for this wordpress Tutorial?

WordPress Tutorial

After completing this step, you will already have a website live on the internet. Let’s get into the details.

Hosting is the company that will store and keep your website live on the internet.

This is the most important part of this WordPress tutorial because getting this wrong will result in some serious headaches.

If you are just starting out, it’s best you use the best cheap hosting. This is because you want to allocate a bigger portion of your budget to marketing.

If you already have hosting, this website is going to be 100% free! If you don’t, I will show you how you can do it.

For this WordPress tutorial, we are going to be using the best budget hosting. We are using it because of the following reasons.

Best Support✔️
Fast Loading Website✔️
Website Security✔️
More Advanced Features✔️
45 Day Money Back Guarantee✔️

We are affiliates – We hope you love our guides, just so you know, we may get a share of sales or other compensation from the links on this website. This will be at no extra cost to you. Thank you if you use our links, we really appreciate and need your support to keep this site up.

When it comes to choosing the hosting plan, there are only 2 important things, the price and the number of websites you can host.

Never buy hosting for one website! you will always need another one. The difference between these plans is not much.

It would be best to wait and save up for the unlimited websites plan.

I recommend the FastCloud plan for this sole reason. It also comes with more features such as 1-click restore manager, which allows you to backup your website.

Your domain name is the name of your website. If we take googole.com for example. Google is the domain name and .com is the domain extension.

The name of your website could be yourname.com or yourcompany.com.

These are the qualities of a good domain name.

Easy to pronouncepaypal
Easy to remembergoogle
Deep meaningamazon
Shortabc.xyz
Brandableapple

I recommend you keep the domain extension as a .com, this will make it easier to get free traffic from google.

I will explain more in detail as I go deeper with this WordPress tutorial.

The datacenter is the location at which the website files are going to be stored. The closer your website visitor is to your datacenter, the faster the website will load.

You should always choose a datacenter closer to your website users. The datacenter does not have to be close to your location.

Before we jump into the settings, we need to track everything and do it step by step.

We need a checklist, personas, website sketches, colors files and templates.

You will find all of that inside your Adiquer dashboard.

Already have an account? Log in here

Step 2: cPanel Settings

 What are the best cPanel settings for this wordpress Tutorial?

Congratulations! You now have a hosting account. now, before we jump into the WordPress tutorial for web design. We need to set up some settings.

Let us start by logging into the c panel. This is where you can find all of the features that come with your hosting account.

In this WordPress tutorial, we will only cover the crucial things such as domain email and SSL certificates for website security.

After logging into the cPanel you will need to create a business email. The business email can be yourname@yourdomain.com. This is better than Gmail emails for branding.

The next step is to create an SSL certificate, this will make your website secure for your visitors.

If you have any questions, you can always contact support.

Step 3: Install WordPress

 How to install wordpress using this wordpress Tutorial?

It’s time to install WordPress. Now, what is WordPress? WordPress is a content management system.

This means that it helps you upload things on the website without writing any code.

It is the most popular and best content management system, so you do not have to worry about anything.

To install WordPress you need to click install the application in the hosting account just under the Product/service quick action column.

You will now land on a page like the one below.

Click on the WordPress icon to install it. You need to install WordPress in the root domain.

This means you need to leave the directory slot empty. Delete the wp that is inside by default.

Fill in the remaining fields accordingly and click install.

You can now use these links to log into your website. The url t log into your website is yourdomain.com/wp-admin/.

Step 4: WordPress Settings

 What are the best wordpress settings for this wordpress Tutorial?

After logging in to WordPress. There are some basic WordPress settings that we need to complete.

The first setting would be to change your website name and your tagline. Your tagline just explains what your website does in a brief way.

If you sell cookies in Atlanta you can just write, best cookies in Atlanta.

The next step is to change your permalink structure to post name. You can do this by navigating to settings > permalinks.

Make sure anyone can register is ticked in the WordPress general settings.

You can change profile settings such as name and password by clicking the top right corner icon in the WordPress account.

Step 5: Install a Theme

How to install a theme in WordPress using this wordpress Tutorial?

Before we jump into installing a theme, let me explain exactly what it is.

A WordPress theme is a tool used to change the general layout and structure of your website.

It also affects functionality. Some come with a lot of functions but in this WordPress tutorial, we are going to be using the best of them all.

Best amongst free themes of course.

The theme we are going to be using in this WordPress tutorial is called blocky. This is by far the most feature-packed free theme.

To install Blocksy Navigate to appearance then to themes. Search fr blocksy and install. After doing that, you are done.

Step 6: Create a user Persona

 How to make a user persona for a wordpress website 

This part might not seem important but is crucial to this WordPress tutorial.

A persona is an ideal fictional user you would like to visit your website. This is the user we are making the website for. Not for you.

In the user persona, you need to write down specific trends that are likely to be found in your users.

This can be age, gender, status, and even salary. This just helps you understand whom you are making this website for.

You can download the general version of the persona by logging into your account here.

Step 7: Wireframing

How to wireframe a wordpres website using this wordpress tutorial

We know that you want to design now. It is however better to start by drawing a basic version of your website on a piece of paper.

You do not need to use some expensive software to do this. This basic version of your website should not include colors or any images.

For the project we are working on today, you can download the project wireframe in your dashboard.

Step 8: Choosing Colors

How to choose colors for your wordpress website using a color picker

Colors are important for branding. Believe me, they can be a serious problem. The most important thing is to choose a consistent color scheme.

So how do you do that? The first advice I would give you is to not make your own colors. It is always better to use a premade color scheme, at least for the first website.

If you want premade color schemes you can make them at coolors.com, this is by far the best color scheme generator.

All you need to do is to click generate colors then press the spacebar until you find a color scheme that you would like to use for your project.

After you choose your color scheme, you can upload it under your profile in your Adiquer account.

Step 9: Chrome Extensions

What are the best chrome extensions to speed up this wordpress tutorial?

Chrome extensions, without them, designing would be torture. From time to time you need to check on other websites using chrome extensions.

These chrome extensions can range from telling you what colors a specific website is using to how much traffic that website is getting.

The first and most crucial chrome extension is called colorzilla. This extension is used to check the color code of anything on any page. You can find this chrome extension on the web-store.

The next extension is called whatfont, this extension is used to check the font of any text on any page.

I hope these 2 extensions can help you through this WordPress tutorial design much much faster!

Step 10: Create Logo

How to create a logo for a wordpress website  using this wordpress tutorial?

Now that we have taken the first step to brand through choosing colors, we can now make a logo. We will be making this Logo using a free tool called, Logomkr.

It’s completely free! A lot comes into making a Logo, Assuming that this is your first website, I would recommend that you make a simple one that you do not have to pay for.

Your logo should have 2 versions, the White version, and the colored version. The logo itself should have an icon and some text which is usually the name of the website.

You also need to export the colored version icon independently as we are also going to be using that separately. Use the left sidebar to add elements.

Use the top search bar to add icons. To adjust the colors you need to use the right sidebar. Click the bottom right corner icon to save your logo.

Click the icon at the top right corner to save your logo.

Step 11: Create Pages

How to create pages in wordpress using this wordpress tutorial

Having fun yet? Let’s jump to create some pages. We already have a list of all the pages we are going to be using from the wireframe.

So this should be an easy one. Hover over pages and then click create new. Make to publish these pages with the page template as element full width.

For now, I don’t want you to worry about the pages being empty, I just want you to publish them and then we can move on to the next step of this WordPress tutorial.

Step 12: Create Menu

How to create a menu in wordpress using this wordpress tutorial

The menu is simply the navigation text on top of the website in the header section. We want to add a list of the important pages.

Not all the pages, please! To make a menu you need to navigate to the appearance and click menus.

We are going to be making menus for different parts of our website. The header menu and the footer menus. You can even make one for your topbar if you want.

Just make sure to click save after you are done.

Step 13: Create Top Bar

How to create a top bar in wordpress using this wordpress tutorial

Design Data

Main Section

  • lLayout

Left: Html Element

Right: Socials Element

  • Design

Html Font Size: 15px

Socials icon color: #ffffff

Html text color: #ffffff

 

  • Advanced

Row min Height: 40px

Background: #1b81e7

Bottom Border: 1px

Border Color: #ccd3e8

Ok, Enough functionality features, let us get into the design! It’s always better to design the website from top to bottom.

Before you start this WordPress tutorial step, you want to make sure that u have every resource ready. This will save you a lot of time.

To edit the top bar go to customize > header > top bar then hover over the top bar and click top row!

We want to add 2 elements into this top row, which are Html to the left and then social to the right. Your right!

To edit those elements all you need to do is to double-click the three dots after hovering on them.

Step 14: Header Design

How to make a header in wordpress using this wordpress tutorial

Design Data

Main Section

  • lLayout

Left: Logo

Right: Button

Right: Menu 1

  • Design

Logo Height; 70px

Menu item spacing: 13px

Menu Font: 18px semi bold

Default colors: #ffffff

Hover Colors: #f77f24

  • Advanced

Row Min Height: 90px

Row Background: #1b81e7

To design the header click on the main row, add three elements, these are logo, menu, and button.

To design these elements you need to click on the three dots after hovering on them.

To Edit the design of the header you can select the design option on the left sidebar.

There you can change the background of the header.

If you color the header, do not forget to change the colors of the elements in it as well.

Step 15: Footer Design

How to make a website footer in WordPress using this WordPress tutorial

Design Data

Top Row

  • lLayout

Element: Socials

  • Design

Icon Color: #1b81e7

Icon Hover: #f77f24

Icon Size: 30px

Icon spacing: 30px

Alignment: center

  • Advanced

Row Background Color: #e0e7f5

Columns: 1

Vertical Alignment: center

Middle Row

  • lLayout

Elements: Widgets 1 -4

  • Design

Text Color: #ffffff

Widgets Title Font: 18px

  • Advanced

Columns: 4

Row Background: #1b81e7

Bottom Row

  • lContent

Elements: Copyright

  • Design

Text Color: #ffffff

Text Hover: #f77f24

Font size: 15px

  • Advanced

Columns: 1

Row Background Color: #1b81e7

The footer is the bottom part of the website. We want to include our footer menu and contact details in there.

To design the footer menu you will need to navigate to customize > footer. On the top row, you need to add the copyright element.

Add footer widget area 1 to 4 in the main row. Add the social on the top row. To edit these you can always click the three dots after hovering on the rows.

In this WordPress tutorial, we put the footer menus in widget 1 to 4. To put these menus you need to navigate to appearance > widgets.

Drag the options from the left to the widget areas to the right side.

Step 16: Plugins

What is a wordpress plugin and how to install a wordpress a  wordpress plugin

What are plugins? I am going to imagine that you have a phone. Without certain apps, you cannot video call on that phone.

To add more functionality you need to add an app. After that, you will have that feature. This is exactly what plugins do.

They add extra functionality to your website. This can range from complicated functionality features to simple things such as icons in your menu.

In this WordPress tutorial, we are going to be using some basic plugins. We will be adding more in updated versions of this WordPress tutorial.

Step 17: Elementor Basics

What is elementor and how to use elementor to design a wordpress website?

The first plugin we are going to be using is called Elementor. Elementor is a visual page builder. This means that you can use it to build full pages without writing a single line of code.

This is truly game changing and after this WordPress tutorial, you will know everything about it. We however have to explain certain terms.

Rows – These are not on the sidebar but at the bottom of every page being edited with Elementor. These rows can be divided into columns. To add these rows you need to just click whichever one you want at the bottom.

Modules – These are the elements you can drag and drop in Elementor. They are all located at the left side of the page builder. These modules are not only limited to what Elementor provides. A lot more companies have gathered to provide more modules and these are called third part Elementor plugins.

Border – This is the line that surrounds the module, column, or row. It can be invisible if the size is 0px.

Padding – Padding is the space inside the module, column, or column surrounding the content. If we were to add the text module. The space around the text but between the text and the

Margin – Margin is the space outside the module, column or row.

Pixels – This is the unit of size measurement in web design. Similar to centimeters in length.

Step 18: Homepage Design

How to make a homepage in wordpress using this wordpress tutorial

Micro Steps Data

Before Design Settings

  • Set the static pages

1) Go to Reading settings

2) Your homepage displays: Static page

3) Set the homepage

4) Set the blog page

  • Add colors to Elementor

1) Load elementor on any page

2) Click site settings

3) Click global Colors

4) Add your colors

** Get Project Colors Under the colors tab on your adiquer dashboard**

Let’s get into the fun part of this WordPress tutorial. The Homepage is by far the most important page. We are going to be using Elementor to build the homepage.

To get all the resources I used to build this homepage, you can find them under file in your Adiquer dashboard.

Micro Steps Data

Main Row & Column

  • Layout

1) Add 1 column main row

2) Main column min height 540px

  • Design

3) Put background image

4) Make backgroud image center center

  • oAdding modules

5) Add inner section modules

Inner Column Row

  • Layout

1) Make left column 65%

  • oAdding modules

2) Add the heading module

3) Add the Text Editor module

4) Add the HTML module

Headng Module

  • lContent

1) Add Content

2) Size: XXL

3) Alignment: center

  • Design

4) Font Color: #ffffff

5) Font size: 60px

6) Text shadow: Activate

Text Editor Module

  • lContent

1) Add Content

  • Design

2)  Alignment: center

3) Font Color: #ffffff

4) Font size: 30px

5) Text shadow: Activate

6) Font Family: Caveat Brush

** The HTML Module should be covered in the next section**

The first section of the homepage is the top banner section. This section is one main column. It consists of the inner section module with 2 columns.

We then put 2 heading text modules to the left column and an opt-in form. The opt-in form is made with Getresponse. Then the video will explain more in detail.

Micro Steps Data
  • GetResponse Navigation to Forms

1) Login to GetResponse
2) Click create forms under quick actions
3) Select Newsletter Under Form Types
4) Click Square under Form Format
5) Select Real estate Pro as the Template

  • lChoosing and Editing Template

6) Delete Discover your next cozy home Text ( Click bin icon)
7) Go to style Tab
8) Delete the background Image
9) Make background Colorless
10) Delete the name field
11) Delete the surname fields
12) Drag and drop the name fields

  • Designing the Form Appearance

13) Adjust the form size
14) Double click on the button background
15) Change the hover and initial color
16) Change the button font to Raleway
17) Click the publish button

  • ~Final Touches

18) Copy the JavaScript code
19) Paste the code in the html code
20) Click publish in elementor

Micro Steps Data

Main Row & Column

  • Layout

1) Add 1 column main row

  • Design

2) Change the background to blue #2687e8

  • Advanced Settings

3) Change top padding to 10px

4) Change bottom padding to 10px

  • oAdding modules

5) Add The icon list module

Icon List Module

  • lContent

1) Change style to inline

2) Icon 1: Smile beam

3) Icon 2: Handshake

4) Icon 3: Tachometer Alt

5) Put in the text content

  • Design

6) Change Alignment to center

7) Change space between to 50px

8) Add a divider

9) Divider Weight 3px

10) Divider color white #ffffff

11) Change the icon size to 30px

12) Change the icon color to white #ffffff

13) Change the text size to 30px

14) Change the text Colors to white #ffffff

The second column is the achievements column. This is where you want to put in what you have been able to achieve so far.

These could be detailed numbers but I would prefer it to be simple text such as happy customers. To make this section we used the icon list module.

Micro Steps Data: Section Template

Main Row & Column

  • Layout

1) Add 1 column main row

  • Design

2) Change bottom padding to 100px

3) Chamge the top padding to 100px

  • oAdding modules

5) Add 4  inner section modules ( for real , 4! )

1st Inner Section Module

1) Duplicate  column 1

  • oAdding modules

2) Add the divider module

Divider Module

  • lContent

1) Add icon element

  • Design

2) Change divider weight to 2px

3) Change divider color dark blue #2a3392

4) Change icon color dark blue #2a3392

2nd Inner Section Module

1) Duplicate column 1

  • oAdding modules

2) Add the heading module

Headng Module

  • lContent

1) Alignment: center

3rd Inner Section Module

1) Duplicate  column 1

  • Layout

2) column 1: 20%

3) Column 2 60%

  • oAdding modules

2) Add the text editor module

Text Editor Module

  • Design

2)  Alignment: center

3) Font Color: #b5b5b5

4rth Inner Section Module

1) Duplicate  column 1

  • ~Final Touches

Save entire section as a template ( name: Repeat Section )

We cannot build everything from scratch every time. We need to use templates. In this part of the WordPress tutorial you will learn how to create your own templates.

Then I will also show you how to use them.

Micro Steps Data: What we offer

Starter Steps

1) Add the template ( name: Repeat Section )

2) Change divider icons to lightbulb

3) Change the heading text : What we offer

4) Change the text editor text

4th inner section module

  • Advanced

1) Chage Bottom padding 25px

2) Change top padding 25px

4th inner Section module column 1

  • oAdding modules

1) Add the icon box module

  • Design

2) Add border solid

3) border width 2px

4) border color #5b5b5b

5) border radius 10px

  • Advanced

6) Increase the margin to 10px all round

Icon Box Module

  • lContent

1) Change the view to framed

  • Design

2) Primary Color: White #ffffff

3) Secondary color : any accent color eg, #7078CF

4) Change the description color #b5b5b5

  • Advanced

5) Change bottom padding to 25px

6) Change the top padding to 25px

  • ~Final Touches

1) Delete the 2 empty columns

2) Duplicate column 1 , * 2 times *

3) Chnage column 1 icon to cogs

4) Change column 2 icon to Gem

5) Change colum 3 icon to Pencile Ruler

6) Change Column 1 Icon Color to #7078CF

7) Change Column 2 Icon Color to  #BE6DC9

8) Change Column 3 Icon Color to #FFFFFF

The third column is the services column. It consists of one main row. Inside the main row is 4 inner section modules, each divided into 3 parts.

In this section we are listing down our top services but not all of them. You can list all the services on the services page.

Micro Steps Data

Starter Steps

1) Add the template ( name: Repeat Section )

2) Change main section background color #E0E7F5

3) Add top shape divider : Waves

4) Top shape divider height 50px

5) Add bottom shape divider : Waves

6) Bottom shape divider  height: 50px

7) Change border icon to Life Ring

8) Change heading text

9) Delete 3rd inner section module 

** Note: The previously 4rth inner section module is now the new 3rd inner section module**

3rd inner section

1) Column 1: 50%

2) Column 2: 10%

3) Column 3: 40%

3rd inner section: Column 1

  • oAdding modules

1) Add text ditor module

2) Add icon list module

3) Add button module

Icon list module

  • lContent

1) Delete 2 icons

2) Choose Check Circle icon

  • Design

3) Icon size: 30px

4) Text Font size: 22px

  • Advanced

5) top padding: 10px

6) Bottom padding: 10px

  • ~Final Touches

7) Icon 1 color #7078CF

8) icon 2 color #BE6DC9

9) icon 3 color  #E3733A

10) Fill in the content accordingly

Button Module

  • lContent

1) Add Content

2) Add Link

  • Design

3) Change Background Color #2A3392

3rd inner section: Column 3

  • oAdding modules

1) Add image module

  • Design

2) Background Color: #2A3392

Image Module

  • lContent

1) add image

  • Advanced

2) Position: Absolute

3) Horizontal Orientation: Right

4) Horizontal offset: 40px

5) Vertical Offset: 60px

Micro Steps Data

Starter steps

1) Add template : Icons Section

2) Change divider icon

3) Change heading text

4) Create 5th inner section module

5) Drag the icon modules from the 4th inner section into 5th inner section

6) Delete 4th inner section

**note: The 5th inner section is now the new 4th inner section**

4th inner section module

  • Advanced

1) Bottom padding 30px

2) Top padding 30px

4th inner section module column 1

  • Design

1) Add  border: solid

2) Right width: 2px

4th inner section module column 2

  • Design

1) Add  border: solid

2) Right width: 2px

  • ~Final Touches

1) Icon 1: Hourglass

2) Icon 2: Comments

3) Icon 3: Chart Line

The why choose us section is a modified replica of the services section. The modification is that there are no borders surrounding the modules.

In this section, you want to put in details about why you are the best for this Job.

Micro Steps Data

Starter Steps

1) Add the contact form 7 plugin

2) Add essential Addons for elementor Plugin

3) Add the Repeat Section Template

4) Change main section background color #E0E7F5

5) Change the Divider icon ( name : Edit )

6) Change heading Text

7) Delete 3rd inner section

**note: The old 4th inner section is now the new 3rd inner section**

3rd inner section module

1) Make column 1 25%

2) Make column 2 50%

3) Make column 3 25%

3rd inner section column 2

  • oAdding modules

1) Add contact form 7 mdule into column 2

  • Design

2) Background color: white

3) Border: solid

4) Border width: 3px

5) Box shadow: active

  • Advanced

6) Padding: 20px all round

Contact Form Module

  • lContent

1) Select Form : Contat form 1

  • Design

2)  Input Background Color: #E0E7F5

3) Input padding: 10px

4) Submit buttong: Full width

5) Submit button color: #2A3392

  • ~Final Touches

1) Add 30px top padding on the main section

2) Go to contact forms

3) Click Edit on  contact form 1

4) Delete the subject field

5) create services checkboxes

6) Rename contact form 1 to Get a quote

7) Create new Contact form nd name it contact

** Save the Get  A Quote Section as  a Template**

Step 19: Contact Page

How to make a contact page in wordpress using this worpress tutorial

Micro Steps Data

Create Top Page Section Template

1) Add Repeat Section Template

Main Section

  • Design

1) Change Bakground Color

  • Advanced

2) Chnage padding-top 50px

3) Change padding Top 50px

  • oAdding modules

4) Delete 4th Inner section

Text Editor Module

  • Design

1) Font Color: #2A3392

  • ~Final Touches

1) Save section as Template : Pages Top Section

Micro Steps Data

Starter steps

1) Add Pages Top Section Template

2) Change the divider icon to: comments

3) Change Heading Text

4) Change the text Editor Text

Micro Steps Data

Starter Steps

1) Make sure the contact form 2 is available

2) Add 1 column main row

Main Row

1) Make column 1 50%

2) Make column 2 50%

  • oAdding modules

3) add inner section module

  • Advanced

4) add 100px top padding

5) Add 100px bottom padding

Inner section column 1

  • oAdding modules

1) Add heading module

2) Add text editor module

3) Add Icon list module

Icon Module

  • lContent

1) Delete 2 icons

  • Design

2) Icon size: 30px

3) Text Font size: 22px

  • Advanced

4) top padding: 10px

5) Bottom padding: 10px

  • ~Final Touches

6) Duplicate the icon module 2 times

7) Icon 1: Envelope

8) Icon 2: Phone Alt

9) Icon 3: Map marker alt

Inner section column 2

  • oAdding modules

1) Add contact form 7 module

  • Design

2 Border: solid

3) Border width: 3px

4) Box shadow: active

Contact Form Module

  • lContent

1) Select Form : Contat form 2

  • Design

2)  Input Background Color: #E0E7F5

3) Input padding: 10px

4) Submit buttong: Full width

5) Submit button color: #2A3392

The contact page is made using a simple plugin called contact form 7. On this page, we want to show all the details about how the user can contact us.

This is more professional than communicating through social media platforms.

This section was made using the heading modules on the left column and the shortcode module on the right column. To set up this page, you will need to follow the video WordPress tutorial.

Step 20: Services Page

How to make a services page in wordpress using this wordpress tutorial

Micro Steps Data

Starter steps

1) Add Pages Top Section Template

2) Change the divider icon to: medal

3) Change Heading Text

4)  Change Text editor text

Micro Steps Data

Starter steps

1) Add Pages Top Section Template

2) Delete the 1st inner section module

3) Delete the 2nd inner section module

4) Delete the 3rd inner section module

Micro Steps Data

Starter steps

1) Add Get A Quote Template

2) Change the main section background to white

The services page is made up of the homepage services section and the request a quote section. The only difference is that you want to put in all the services you offer. The top of the page is a simple border and header.

Step 21: About Page

How to make an about page in wordpress using this wordpress tutorial

Micro Steps Data

Starter steps

1) Add Pages Top Section Template

2) Change the divider icon to: info circle

3) Change Heading Text

4) Chamnge the text Editor text

Micro Steps Data

Starter Steps

1) Add Repeat Section template

2) Change the divider Icon: Users

3) Change the heading text

4) Delete the 3 inner section module

** Note: The 4th inner section is now the new 3rd inner section**

3rd Inner section module column 1

  • oAdding modules

1) Add image module

2) Add the heading module

3) Add 2nd Heading Module

4) Add the Text Editor module

  • Design

5) Border type: None

6) Border Radius: 5px

7) Box Shadow : Activate

  • Design

8) margin: 10 all around

9) Padding: 10 all around

1st Heading Module

  • lContent

1) Alignment: center

2nd Heading Module

  • lContent

1) Alignment: center

  • Design

2) Font Color: #BE6DC9

3) Font Size: 20px

Text Editor Module

  • lContent

1) Add Content

  • ~Final Touches

1) Delete column 2

2) Delete column 3

3) Duplicate column 1,  3 times

4) Replace the images and text for every section

** Make sure you use images of equal height*

The about us page consists of meet the team section.

This is one of the very important parts of this WordPress tutorial because it allows the user to get to know you and your team.

Meet the team section is made using one main row and one inner row divided into 3 columns. In these columns there is an image, heading and text editor module in that order.

We then style the sections by putting some padding and box shadow.

Step 22: Newsletter Page

How to make a newsletter page in wordpress using this wordpress tutorial

Micro Steps Data

Starter steps

1) Add Pages Top Section Template

2) Change the divider icon to: envelope

3) Change Heading Text

4) Change the text Editor Text

Micro Steps Data

Starter Steps

1) Add 1 column main row

Main Row Section

  • oAdding modules

1) Add inner section module

  • Advanced

2) Add 150px bottom Padding

3) Add 150px top padding

Inner Section Module

1) Duplicate column 1

  • ~Final Touches

2) Make column 1:  20%

3) Make column 2:  60%

4) Make column 3:  20%

Inner section Module Column 2

  • oAdding modules

1) Add HTML module

  • Design

2) Add Border Solid

3) Border Width 3px

4) Border Radius: 10px

5) Box Shadow: Activate

HTML module

  • lContent

1) Add the code from getresponse forms

The newsletter page is made using the HTML code module. You need to paste in the HTML code we made in Getresponse.

You can now put some padding and border around that section.

Step 23: Blog Posts

How to make a blog posts page in wordpress using this wordpress tutorial

Micro Steps Data

Sterter Steps

1) Add Repeat Section Template

2) Change the divider icon to: Copy

3) Change Heading Text

4) Delete 3rd inner section

** Note: The 4th inner section is now the new 3rd inner section**

3rd Inner section

1) Delete column 2 and 3

  • oAdding modules

2) Add the post grid module

Post Grid Module

  • lContent

1) Posts Per Page: 3

Blog posts are different from pages. Blog posts all have a general layout. The only difference would be the content on them.

To create a blog post you need to click on the dashboard then hover over posts and then click add new. To put them on your home page, you need to use the post grid module.

Step 24: Mobile Friendly

How to make a wordpress website mobile friendly using elementor 

Micro Steps Data

Customize > Core > Additional CSS

  • Copy and paste the code

div#offcanvas {
z-index: 1000000000000;
}

You are almost done with your site and this WordPress tutorial. However, we need to make this website mobile-friendly.

Currently, how the website looks on the desktop and on mobile is completely different. To fix this, for each and every section we created we need to adjust it for mobile by changing the responsive mode to mobile.

After taking this step we can then start changing the font and everything else to match our mobile needs. This can go as far as changing the background images for mobile-only.

ADIQUER

Learn how to make free websites in WordPress for free through free HD courses.

Full HD Step By Step Free Courses

All Tutorial Resources

Custom Website Templates

Color Palette Storage

Tutorial Step By Step Checklists

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest