Build a Professional WordPress Website using Elementor Pro

Please preview this video so that you download the exercise files along with a detailed training manual document – for printout.

It's important to consider using either two monitors or a laptop & monitor while running video tutorial courses like this.

Understand how to play the Video Tutorials

There is no need to carry out the procedure in this lesson if you already have a website domain name and an associated web hosting company.

There is no need to run this procedure if you have installed WordPress using a web hosting tariff

One of the prerequisites and running this course is that you have a licensed copy of Elementor Pro. This plug-in is required, prior to proceeding with the course.

Run this procedure in order to properly install Elementor Pro on your WordPress site.

There are many WordPress themes to choose from depending on the purpose of your website. You will have selected an appropriate theme for this course.

You have a basic understanding of WordPress and Elementor pro and were they are positioned on the World Wide Web.

You have an understanding of the typical tasks they can be carried out in both WordPress and Elementor. You will also be able to describe different types of web page layouts.

This procedure provides you with a checklist of tasks that you need to carry out every time you generate a new WordPress and Elementor Pro Site.

This procedure provides you with a checklist that you use every time you generate a new webpage or post

In this procedure you have created your first WordPress page

Your home page, also known as your landing page or welcome page is generally the most important page on your website.  Because the first page you created is your home page, this procedure will demonstrate how you inform WordPress under settings.

You will know how to perform a standard 'visual' check on each web page you create so that the layout of each page is presented in an acceptable fashion not only on a standard desktop monitor but also on a tablet monitor and a smart phone screen.

By applying the two tab rule, you will simply avoid congestion by keeping the number of tabs within your browser as a minimum.

You will understand some of the basic terminologies used In Elementor Pro. You will immediately distinguish the difference between a section a column and a widget and where they are used.

You have received your first interaction inserting and editing a basic widget.

Inner sections are used in more complex layouts where you can achieve phenomenal results. An inner section is a section nested within an existing section. By using inner sections you can maintain layout and margin integrity on your page. You will understand where when and how to use an inner section.

Compile a number of complementary and/or monochromatic colours using an online utility - https://color.adobe.com

After selecting the number of Colours from the previous procedure, you will have placed them into global settings within Elementor Pro. They will subsequently be available for use anywhere on your website.

Where and how to set up a global background colour for your webpages

Review all of the header area templates available on Elementor Pro | Select a suitable header area template | Apply the selected header template on your webpage.

Review all of the footer area templates available on Elementor Pro | Select a suitable header area template | Apply the selected header template on your webpage.

Customise your header area template in terms of layout, colours used and widgets used.

Customise your footer area template in terms of layout, colours used and widgets used.

Insert Site Logo in Header Template (Method 1 - Elementor Pro Dashboard)

Insert Site Logo in Header Template using the Image Widget - This is my preferred method

Apply any final touch-ups to your header area in terms of colours margins layout and widgets used

Create all of the remaining pages required for this website.

Create your first new navigational menu system with one pulldown menu option.

Add a new menu label that doesn’t have a webpage using custom links in WordPress

Modify your menu structure in terms of layout, margins, colours & styles

Create a second navigation menu system

Modify your second menu structure in terms of layout, margins, colours & styles

Apply a sticky top to part of the header area so it remains on display after you scroll down your webpage

1. Examine a wide range of Elementor pro page templates that are available.

2. Select a page template for your home page.

Populate Home Page with text content

1. Introduce the Icon text widget

2. Apply the Icon text widget to your home page

1. Text spacing considerations

2. Introduce two HTML tags i.e. the line break tag <br> and the paragraph tag <p>

Apply Global Colors/Colours  to some of the ‘Home Page’ Widgets

Apply More Elementor Page Templates into pages

1. Set up a global widget using the divider widget

2. Set up a global widget using an image widget

3. Apply global widgets to webpages

1. Create a block template

2. Save a Block template

1. Create a second block template

2. Save a second Block template

1. Import a template

1. Create my first-page template

2. Save my first-page template

1. Create my second page template

2. Save my second page template

Save my second New Page Template

1. Apply (insert) my first Block Template into Pages

Apply My Second Block Template into Pages

Apply an Imported Block Template into Pages

Apply (Insert) My Page Templates into Pages

Apply (Insert) My Second Page Templates into more Pages

Touch up and Complete BDS Benefits Page | Review Icon Text Widget | Review Call to Action Widget | Review Button Widget

Touch up and Complete Contact US Page | Examine the Forms Widget

Touch up and Complete Contact Us Page | Examine the Maps Widget

Touch up and Complete FAQ Page | Examine the Toggle Widget

Touch up and Complete BDS Benefits Page | Examine the Call to Action Widget

Touch up and Complete BDS Backup Theory Page

Touch up and Complete Marketing Page | Examine the Table of Contents Widget

Touch up and Complete Customer Relations Page

Creating Text Hyperlinks

Set Global Hyperlink Colors/Colours  from the Elementor Pro Dashboard

Creating Button and other Hyperlinks using the Elementor Pro Dashboard

Make Columns and Sections clickable (Hyperlinks)

Create and Apply Anchor Links (Hyperlinks) within Pages

Create and Apply Anchor Links (Hyperlinks) between Pages

Create and Apply Back to TOP Button

Set up a Folder Structure for Images

Examine Image Characteristics

Using Image Widges

Insert an Image Carousel Widget on the ‘About Us’ Page

Insert and commission the Slides Widget

Insert and commission the Gallery Widget

Where to find Royalty Free Images

Optimising Large images in WordPress

Add a Favicon Image (Site Icon)

Populate all remaining pages with images

Where to find Royalty Free Videos

Add Videos to WebPages using the Video Widget