Creating your first WordPress website

Introduction

Hi, and welcome to my ‘Build Your First WordPress Website’ course. My name is Chris, and I will be guiding you through the process of creating your first WordPress website. I have been building websites since 2001, and in this time I’ve worked with clients from all over the world, and on websites from a wide range of industries. At the end of this course, not only will you have a WordPress website ready for your own purposes, but you’ll also have a new set of skills, and confidence when it comes to creating and maintaining a website of your own.

So what exactly will we learn?

1. We’ll first sign up for a hosting provider. In this course we’ll use Elementor Hosting. This will give us everything we need to build a WordPress website.
2. We will choose an Elementor template kit that will automatically be installed for us. This will provide us with a strong foundation on which to build upon.
3. Then we’ll explore WordPress to familiarize ourselves with its interface and features.
4. After that we’ll take a look at Elementor and learn of the value it provides us when creating WordPress websites.
5. Next we’ll learn how to edit and construct pages.
6. How to apply global styles and fonts.
7. Making edits for multiple screen sizes.
8. We will then edit each page of the imported kit where you will learn many of the basic widgets and functions Elementor provides including text, images, and even contact forms.
9. And in the final steps of building our website, we’ll take a look at the Elementor Theme Builder, to understand how different parts of the website work together. Things you probably heard of like headers and footers.
10. With our website built, we’ll then learn how to connect a custom domain name to our website and publish it for the world to see.

What is…

WordPress

Before I get started with this course, let’s first take a moment to understand exactly what WordPress is…what Elementor is…and how they work together.

WordPress is a content management system (or CMS for short) which allows you to build websites.It uses a template and plugin system which provides you with extensive possibilities and customization options.

WordPress powers a whopping 43% of all websites, and 64% of all CMS websites, so you can rest assured knowing you’ve chosen a reputable option.

Elementor

Elementor is a visual website builder, and extends the functionalities of WordPress to improve the overall experience when building a website. By using Elementor with WordPress, You open yourself up to limitless possibilities.

Besides hosting your WordPress website, Elementor features a live drag & drop editor so that you’re able to create pixel-perfect designs whilst taking advantage of its 100+ widgets…and we’ll explore these in more detail soon, so stick around.

The possibilities with Elementor do not stop here though, it also features many tools to assist you in creating websites which eliminate the need to install additional plugins.

We’re talking about things like:

• Contact forms
• Ecommerce tools
• Marketing tools
• Pre-made designs…or kits as Elementor calls them
• And so much more!

So without further ado, let’s get started and learn how to create our first WordPress website.

Setup Elementor Website Hosting

To get started, I’m going to sign up for an Elementor Hosting account. Doing so will provide me with everything that I need to be able to create my first WordPress website. Not only am I provided with fast, secure web hosting, which includes an SSL certificate for security, daily backups, and VIP support, but it will also automatically install WordPress and Elementor for me.

1. I will first visit the Elementor website by entering elementor.com in the address bar of my browser.
2. Next let’s select the Get Started link
3. Here I can choose what type of website I’d like to create.
   1. I like the look of this wireframe kit so let’s take a look at what’s inside by selecting the Preview Design option.
   2. This kit contains a home page that uses a variety of layouts to highlight the services my company offers.
   3. It also contains an about page
      1. a services page
      2. a blog page
      3. and contact page.

This is a great foundation on which to build my first WordPress website. I will now select the Start with this design option at the top of this page.

Next we will be taken to a screen where we will be presented with the option to choose a site plan. I will select the buy now option.

Here I’ll need to enter a few basic details, like:

• My email address
• Password
• Billing information
• Payment information.

I then will select the Continue link

I can now complete my purchase by selecting the Pay now option. I will then be taken to a confirmation screen where  I will select the Start Creating your Website button. I will first enter a temporary name for the website. Don’t worry we’ll learn how to connect a custom domain name later on. I will verify my temporary domain name choice and select Next when ready. Elementor will then install WordPress and the kit I chose.

While my kit is installed, let’s look at the benefits of using a professionally designed kit from Elementor. First of all, these kits have been designed and built by some of the most talented web creators in the world. Second, new kits are added frequently to ensure they’re always updated with current design trends. Third, they’re a great way to save time. You can lose hours or even days sometimes just trying to decide what style of website you would like to build. Using a kit, you can have a website up and running in a matter of minutes. Like I will do with this wireframe kit.

But hold on, you’re probably wondering what a wireframe kit is, right? Well to put it simply, it is a barebones blueprint for a full website. And while fully designed kits serve a purpose, sometimes it’s a good idea to start with a wireframe kit, as it will provide me with a strong structure to build my own design upon…which is exactly what I am going to do.

OK, it looks like our website is ready, So let’s jump back in and select ‘let’s go’.

The Elementor Dashboard

Before I take a look at my created  website, let’s explore my Elementor account dashboard. I can first see the new website I’ve just created. Any additional website I choose to add in the future, will also appear in this section. Over on the left, I can see the navigation for the main areas of my account. I have options for:

• Subscriptions…
• Teams…
• FAQ & Support…
• Community…
• And to Hire an expert.

In the top right hand corner if I select my name, I will be able to view and edit any of my profile information.

Back to the websites now, if I hover over my website you’ll see I’m presented with several options. The first two options will redirect me to specific areas of the website admin, for now I’ll select ‘Manage this Website’.

The first area is where I can Connect a custom domain name. I’ll come back to this later on in the course.

The next area in the dashboard is the Email Authentication settings. This is setup after the domain name is connected at the final stages before the website is launched. This is important to ensure that your email will be delivered properly.

Next, I have the Site Lock option. This is enabled by default on any  new website. I can set a pin to share with anybody I would like to be able to view the website, as well as disable the site lock when I am ready.

I then see a list of all of the available backups for the website. A new backup is taken daily, and I can also create manual backups if I wish.

Finally, I have debugging and troubleshooting options.

OK, with the Elementor account dashboard fully explored, I will log into my WordPress dashboard and teach you how to use it.

There are two ways to login into the WordPress dashboard. The first was on the ‘websites’ screen we saw previously, or we can use these helpful links displayed at the top of the page. I’ll select ‘Open WP Dashboard’ as I am first going to teach you about WordPress before I dive into Elementor.

The WordPress dashboard.

Before I show you how to navigate your way around, let’s take a quick look at  the website kit that was imported. 

In the top left corner, if I hover over the site name, a new link appears where I can visit my website. To open this in a new tab, I will hold down CMD or CTRL while I click. I am first taken to my home page and as you can see everything looks as expected just like we saw earlier on when we previewed this kit.

There’s also an about page, a services page, and a contact page. And while these pages look a little plain right now, they have provided me with a jump start in building my website and will save me a lot of time.

OK, so I’ve made a pretty solid start. Let’s review what you’ve learnt so far.

• I first set up my Elementor Hosting account. It installed WordPress & Elementor for me, as well as installing my wireframe kit. This saved me a lot of time.
• I then showed you how to navigate around the Elementor account dashboard and explored some of the amazing features built in by default.
• Lastly I logged into my WordPress admin and took a sneak peak at the website so far.

In my next lesson, I am going to show you many of the things that you need to know about WordPress in the beginning.

WordPress Overview

Here I am, once again, back in the WordPress dashboard. In the bottom right hand corner I can see the Elementor help icon. If I ever need to contact a member of the support staff, this is where I’ll do it. At the top of the page I can see the WordPress Toolbar. This provides helpful links to various areas of the website, and will adapt accordingly as well. For example, if I visit the front end of my website, I’ll have more options on this toolbar. Please note this toolbar will only display on the website for a logged in admin user.

Back in the dashboard on the left hand side you’ll see the main menu options. This menu contains many important areas which include:

• Blog posts
• Media files
• Pages of our website
• Elementor settings
• Templates associated with our website
• Appearances
  • Themes
  • Menus
• Plugins
• Users
• Tools
• Settings

For now, we’ll take a look at the most common areas you’re likely to visit frequently.

Pages

The first area we’ll explore is pages, but you may already be wondering…what’s the difference between a page and a post? Well that’s a great question, and one I can answer quickly. Consider pages as your static content that rarely has to be changed. This might be, for instance, your About page, and is regarded as a permanent item. Posts on the other hand are your blog entry articles which are added to regularly. This type of content helps to drive more traffic to your websites via search and social media.

In the WordPress dashboard I will navigate to the Pages menu and select the All Pages option. Here I am presented with a list of all of the pages currently associated with my website. There is a Home page, About page, Services Page, and so on. Hovering over a page title displays several options. I can select the Edit with Elementor link, or select the More options to display a dropdown of other useful functions.

Adding a new page is done in a few simple steps. Select the ‘Add New’ button near the top of the page Give the new page a name… I will name this one Portfolio Then select the Publish button. It will ask me to confirm that I wish to publish the page. I will confirm this action.

It really is as simple as that. There is no need to add any content to this page as I will be covering this in the next steps.

Posts

Now that you know a bit about pages, I will talk more about Posts and the Archive page. From the dashboard menu I will visit the Posts section. Several sample posts were included when we installed the kit as you can see here. Posts have one additional function that Pages do not. Posts may also be assigned to a category. Categories are a way to filter the topic for the posts.

We can change the “Blog” category that was created for us to be relevant to our needs by navigating to the Posts menu of the dashboard and then selecting the Category option.

If I hover over the Blog category I can then select the Quick Edit option. I will then replace “Blog” with “Projects”. It is important to change the Slug as well. This will always be lower case and not using any spaces. Hyphens should be used to separate words in a slug.

How can visitors see my posts? Posts can be accessed in several ways on the website. A link from one of my pages, added to the menu, or by an archive page.

An archive page displays a directory list or grid of all the articles I have created. Oftentimes the archive page is named Blog. In this case I would like to use the Portfolio page I created. This will allow me to show off my recently completed jobs.  Each time I create a new portfolio project I wish to feature, it is automatically added to the archive.

In order for my new Portfolio page to function as an archive, I must assign it in the WordPress dashboard. I do this by first navigating to the Settings menu and then selecting the Reading option.

From the Reading options settings page near the top, I can use the dropdown menu to select my Portfolio page as the Posts page. Then, save it.

I can then return to the Posts menu page and select the View Posts link. When the page loads, I will see the Posts in a grid based layout view. We will learn how to edit this heading a bit later on in the Theme Builder.

Plugins

Next let’s explore what plugins are and find out how they can enhance our website. So what is a WordPress plugin?

Think of plugins as being like the apps on your smartphone. Plugins add new features and functionality…or simply extend the capabilities of existing ones. Let’s take a look at what plugins we currently have on our website. If we head over to the plugins area,  in the dashboard,  we can see the list of installed plugins. If the plugin is light blue, it means this plugin is currently active, whereas any in white are installed, but not activated.

We don’t have many plugins installed, just the following: 

• ‘Activity log’ – Which is a useful plugin to keep track of any changes being made on the website.
• Elementor, and Elementor Pro – These allow us to create beautiful pixel perfect pages… we’ll be taking a deeper look at these very soon….. so stick around.
• And finally we have a plugin called ‘Hello Dolly’. This plugin was actually created by Matt Mullenweg…he’s the guy who created WordPress along with Mike Little. While this plugin can be a lot of fun. It isn’t much use. And as a general rule of thumb, if a plugin isn’t providing you with value, you should remove it from your website.To do so simply select the  ‘delete’ option and confirm.

To add a new plugin, first select the ‘Add New’ button and then… search the WordPress plugin repository to find one that is needed. Let’s now, once again, return to the dashboard.

Themes

In our pursuit to master the basics of WordPress let’s now learn what themes are. So what is a WordPress theme? A WordPress theme is a collection of files that work together to create what I see, and decide how my site behaves.

To locate the Themes in the WordPress dashboard, navigate to the “Appearance” menu, and then select the ‘Themes’ option. Here I will see a list of any themes I currently have installed on my website.

When I signed up for Elementor Hosting and started with a kit, it automatically installed a theme for me called ‘Hello’. The Hello theme was developed and is maintained by Elementor. It is a very lightweight theme (meaning it loads quickly)  and works in harmony with the Elementor Website Builder. There are several other themes installed; Each named for a corresponding year. These themes were created by WordPress themselves. WordPress releases a new default theme most every year that showcases the latest improvements.

If I wanted to switch themes, I would simply select the theme and choose ‘Activate’. If I would like another theme, I can visit the theme repository by selecting ‘Add New’. This is very similar to a plugin.

Menus

Now I’ll show you how the WordPress menu system works. Menus are important as they provide a standardized method for visitors to navigate through the website. They come in all shapes and sizes, and there is no limit to how many menus the website has.

If I take a look at my website one more time, I can see that this one has already been created for me.

But where can I manage and make changes to this menu? Back in the WordPress dashboard, I will head over to the ‘Appearance’ menu and select the ‘Menus’ option. Here I see the menu which was created for me when The kit was imported. Rearranging the menu items is done by selecting them and dragging them to the desired location.

To add a new menu item, I can simply select it from the list here and choose ‘Add to Menu’. I’ll add in my new ‘Portfolio’ page which I created earlier on. Remember to select the save button to publish the changes to the menu. Then if I visit my website I can see the new page has been added to my menu.

Media Library

Next I’ll explore the WordPress media library. To do this, I will navigate to the Media menu in the WordPress dashboard. The Media library is a database for all of the site’s media files. Such as images, videos, and mp3’s. Selecting a media file will open up more details about it.

The Title, Alt Tag, Description, and Captions are all important to search rankings and accessibility.  These should be edited each time media such as an image is uploaded to the library.

It is also important to upload a smaller file size for performance. These can be edited in an external application such as Photoshop, or Canva. 

Our media library is currently made up of placeholder images as we decided to start with a wireframe kit. We’ll be adding some more life and color to this soon, so stick around.

Users

When the website was created in the initial steps, an Admin username was generated. For security reasons this name is long and contains letters and numbers making it more difficult for others to access. I do not want this username to show on my website when visiting the blog posts and other regions. To change this preference I will do so in the Users profile settings.

The Users menu is located in the WordPress dashboard. Here I can select the All Users option. I will then see my username in the list. By hovering over this username I can then select the Edit user option. When the page reloads, I can then see the user preferences. From here I can change the colors of my admin dashboard and other preferences. For now, I only wish to edit the information located in the Name preferences.

The first field is the Username. This cannot be edited as it is important to maintain the connection to the website from the Elementor dashboard. The next fields are my First Name, Last Name, and a Nickname. I will fill these out now. In order to choose what is displayed on my website, I will use the dropdown menu. Here it allows me to choose from variations of my first and last name, or my nickname. I will choose my nickname. I will then save these settings at the bottom of the page by selecting the Update profile button. I will then return to the dashboard.

Settings

The Settings menu is where I can change many of the preferences for my website. I will visit it now in the dashboard menu. In the general settings, I can set things like the time zone and language preferences for my site. There are other options in this menu we will take a closer look at later.

Chapter Review

That sums up everything that you need to know about the basics of WordPress. Let’s review what we learned in this lesson:

• We first learned about the dashboard’s home screen, what the top bar does, how the main menu is structured and how to seek support if we need to.
• We then spent time understanding what pages are, as well as learning how to add new ones.
• We learned about Posts, what an Archive is and how to assign it in our Settings options.
• We explored the Media library to better understand where all of these types of files are stored.
• Then we gained an understanding of what Plugins, Themes and Menus are.
• And finally we learned how to change the admin name that is publicly displayed on the website.

And while we haven’t covered every single area of the WordPress dashboard, what you’ve learned in this lesson provides you with more than enough information to get your website up and running in no time.

As always, I encourage you to explore each and every aspect of the WordPress admin area in your own time to find out more.

In our next lesson we’re going to jump into the Elementor editor and learn everything we need to know about this website builder.

Elementor – Overview & Basics

So… let’s now learn a bit about Elementor and how it is used with WordPress. Elementor provides us with a system to create and maintain any type of website we desire, all without having to write a single line of code. It comes packaged with a whole host of tools and features which will make any web creator’s life much easier. You can learn more about each and every feature on the Elementor website which I’ve linked below.

The Editor

Without further ado, let’s dive into the Elementor editor and begin our learning journey about how Elementor works.

In the WordPress dashboard: I’ll head over to the ‘Pages’ menu, hover over ‘Home’ and select ‘Edit with Elementor’. Just to remind you, Elementor is a visual drag and drop page builder. So what I see is what is displayed on my website. This makes it incredibly time efficient and straightforward to create website pages and also to make additional edits later on down the line.

Let’s take a look at each section in the editor to better understand this. I first have the widgets panel. This is where all of the extremely helpful Elementor widgets are stored. Then I have the canvas area. Everything you see here is editable. Simply select something, make a change…and hey presto! Pretty simple; right!?

Selecting an element within the canvas area will update the widgets panel to display more options with the selected widget…I’ll explore these options in more detail soon. And to get the widgets to show again, I’ll select this icon.

The Navigator

Another useful function with Elementor is the Navigator. I can access this from the bottom of my widget panel by selecting the icon. Once selected, on the right hand side I will see the navigator. This tool is extremely helpful in staying organized as it displays a list of each section and widget being used on the page. I can select items in the list, and it will navigate to that item in the canvas area. Moving elements around is done with ease…as well as renaming them. I can also snap and unsnap it to the side of the screen if I prefer. Let’s close it for now while I continue to explore the Elementor editor.

Support Chat

In the bottom right you’ll see the Support icon which we saw earlier on in the WordPress dashboard. And in the top left corner if I select the burger icon I access additional areas of Elementor, most of which we’ll explore in due course.

Quick Tools

Finally at the bottom of the widget panel:

• I can access the page settings
• Open and close the navigator
• View a history of any changes made to this page
• Open the responsive controls
• Preview the page live in the browser
• And last but not least the update button which I’ll use when I am ready for the web page  to go live. 

Constructing Layouts

So how exactly do I construct layouts in Elementor? With Elementor I build pages using ‘Containers’. A container holds the other elements of your page including widgets and other containers. Containers provide you with greater creative freedom and control over your web design process allowing you to work more efficiently.

Containers

In order to create a new container. I will select the Plus icon located in the canvas area. Elementor provides many preset layout structures. I will choose this simple row layout which displays elements horizontally.

I can edit the Containers height and other layout properties in the widget panel. It’s within these Containers that I will add my widgets… or additional containers to create columns.

I can add as many Containers to a page as I like, and by doing so I’m able to create some truly unique layouts for my website.

Widgets

So how about widgets. What exactly are these and how do they help build websites? In Elementor, widgets are the building blocks for your website. They add functionality to your page, allowing you to do everything from writing text to adding dynamic data.

The most commonly used widgets are:

• The Heading widget
• The Text Editor widget
• The Image widget
• The Button widget

And while these are the widgets you’ll find yourself using most often, you also have nearly 100 other widgets to choose from.

Adding a widget to a page is done by simply dragging it over. Like this Button widget. I will add it to the Container I created. Doing this will also update the widgets panel to display all of the available configuration and styling options for the widget.

Each widget is made up of three areas…

• The Content tab
• The Style tab
• The Advanced tab.

The Content tab is where we configure our widget. In this instance I have the Button widget selected so I am able to configure aspects like:

• The text which is displayed within the button.
• The link which the button navigates to.
• Alignment
• Size
• And more.

Each widget is unique and these configuration options will change accordingly.

Next I have the Style tab which allows us to do just that.

• I can amend typography
• Color
• As well as adding things like borders and spacing.

Then finally I have the Advanced tab. This will likely look very similar for whichever widget you have selected and provides us with an extensive range of options. I can adjust spacing aspects such as padding and margin. Or, apply motion effects; like this subtle fade in. And so much more.

Let’s now remove this Container till later on. By right clicking within the Container, I’ll see a list of helpful options… The one I need here is ‘Delete’. As always, I encourage you to explore each and every configuration setting to better understand the options you have with Elementor.

Chapter Summary

In this lesson I taught you how to edit a page with Elementor. I first explored the Elementor interface to teach you about this website builder and the tools available. You then learned how the layout of a website is constructed with containers. And finally I explained what widgets are, and about the available configuration, styling and advanced options that Elementor provides. In the next lesson you are going to learn the most efficient ways on how to apply styling to the entire website, using global colors and fonts.

Elementor – Design & Styling

Now that you have a better understanding of how the Elementor editor functions, let’s get to work and make some stylistic and content changes to really transform the website.

Site Identity

Name and Tagline

The first thing I am going to do is add my Site title, tagline, and logo to the website. In the editor of the Home page, select the hamburger icon in the top left hand corner and then select the Site Settings. In the ‘Site Identity’ area I am able to specify my site name, tagline, logo, and favicon. Here, I’ll go ahead and edit the site’s name… and the site’s tagline.

Logo and Favicon

When Elementor installed my kit, it conveniently added a placeholder logo for me. Updating the logo is one of my favorite parts when building any website as it instantly allows me to really see the website transforming into the finished product.

Click the plus icon under ‘site logo’  options to open up the WordPress media library. We saw this earlier on and as you can see I can either select an image already in the media library or upload a file from my computer. I’ll upload my company logo; like so, and then enter the ‘Alt Text’.

Be sure to always add the ‘alt text’ when adding any image to your website as this is read by screen readers to assist people who are visually impaired. In the alt text field I will describe whatever the image is, it is as simple as that!

As a good standard practice. You should also edit the title and add a description and caption to images as they are uploaded to the gallery. This improves your site’s search rankings. Doing this as images are uploaded will save you from having to edit dozens of images later on. When complete, select the ‘Insert Media’. Button

I can also add a ‘Site Favicon’ which is the tiny image that appears in the browser tab. I do this the same as before. If I now select the update button, and preview my page, you’ll see the new logo appears in the header section of my website.

Global Styles

You’ll now learn how Elementor manages global styling settings, like colors and fonts. It’s a good idea to configure the global colors and fonts, as it provides a means of updating these aspects across the entire website with just a few clicks…as opposed to manually changing these on a page by page basis.

Global Colors

I will return to the Main Menu Screen of the Site Settings From here I’ll select the ‘Global Colors’ option. By default any Elementor installation will always have these four ‘System Colors’ which define the ‘Primary, Secondary, Body Text, and Accent’. These colors are applied to all widgets so that I have a base to start from. Because I installed a pre-configured kit I also have this range of custom colors as well, all of which have been specially selected to fit in with the feel and tone of the website.

Changing a global color is done by simply selecting it and amending the color picker. I will now change my Accent color. If you watch the button on the home page while I edit the color, you can see, it changes to reflect this. This is because the color of the buttons are configured to display my ‘accent’ color. I like this green color, so let’s stick with it.

I would now like to add a beige color for my pallet. This is done in the Custom Colors by selecting the ‘Add Color’ button naming it then choosing a color. I will now select the Update button to save my changes.

Next, I’d like to assign a global color to the background of the entire website. To do this, I will return to the main Site Settings by selecting the back arrow at the top of the panel. I will now locate the Background options and select it.

Here I can choose a color in the picker or use a global color. I will choose my Global Background kit color. Now all pages will use this as the background color. If I change it in the Global colors it will automatically change here. I can also define a different background color for mobile here if I like. When finished, I’ll select the update button.

Global Fonts

Let’s now learn  about the global fonts for Elementor. I’ll now once again return to the main site settings by pressing the back arrow and choosing the ‘Global fonts’ options. Very similar to the global colors, I have ‘system fonts’ for the ‘Primary, Secondary, Body Text, and Accent’, as well as a range of custom fonts specific to my kit.

Editing a global font is done by selecting the pencil icon which opens up the typography window. For this example I will select the Hero Headline. To change a font family simply select a new one from the drop down.

There are also many other customisation options which I can see here, so be sure to experiment with these options to find the right configuration for your requirements. Each and every setting I apply here can also be overwritten on a manual basis to an individual widget if I ever need to in its style tab. We’ll change our font back to Poppins as this one works really well for the style of website we’re creating. When finished, I’ll select ‘Update’, and head back to the editing screen by selecting the cross icon.

Responsive Editor

Lets’ learn a bit about responsive editing. This means how the site will look on different devices. Once I have edited my page to look great on desktops, I then need to make sure it looks good on phones and tablets. To do this I will use the responsive editing mode from Elementor. The ability to set different values for different devices is one of the key benefits to using Elementor as WordPress itself does not yet offer this functionality.

To enter the responsive editor, I will select the responsive icon located at the bottom of the editor side panel. When I do this, a new bar will appear at the top of my page. From this bar I can select the icons to view what my page will look like on tablets and mobile devices. Let’s view the page in each of these modes. And check each of the sections. It already looks great.

If I need to make a change to an individual widget, I can do so by selecting it, and in the widget panel navigate to the Style tab. Keep in mind. The little device icon located by any field on your widget panel indicates that this is a value that can be changed for each device. Only settings that have this little icon can be changed for responsiveness. I cannot rearrange the widgets as this will affect the other views.

The Publish/Update Button

It is now time to save my work. By selecting the update button, I can save the page and then select the preview to view the live results.

Another option located here is to Save as a Template. This feature is very handy if I create a layout on the page that I would like to use on other pages of my website. It can save a lot of time versus having to start from scratch. Once selected, I can name my template and save it to my library.

Chapter Summary

Wow, I have covered a lot in this chapter. Along the way you learned how the Site settings can be used to set the site name, and tagline. You also learned how to upload your logo to be used in the header and footer of your website, and about the favicon. Next we covered a bit about global fonts and colors. You also learned how to use the responsive editor to make sure our site looks great on all devices. We are now all ready to start editing our site’s content. 

Elementor – Editing the Kit Pages

Home Page

Now that you have a basic understanding of how Elementor works, I can now begin editing the content of the pages that were imported in our kit. Let’s continue with editing the Home page and learn what all the sections are used for.

The sections you see here are all popular layouts that are typically found on a website’s Home page. If my website does not need a particular section that was imported in the kit, I can simply delete it by: selecting the “X” in the blue editing handle, or by selecting it in the navigator window and using the delete key on my keyboard.

Hero

The first section on my home page is called a hero. It typically contains a catchy headline and my company’s tagline. This is also a good place for a contact button. This is known as a call-to-action.

Let’s edit the text of our headline. I can do this by either selecting the pencil icon in the editing handle, and then editing the content in the widget panel or I can also change the text right on the page itself on most widgets by simply selecting the text and typing over it. Which I will do now.

Next, let’s edit the tagline. The tagline also uses the Heading widget and I edit it the same way as I did before.

I will now edit the button. Buttons are used to link visitors to another page on the website. I can link them to a product to make a sale, or in this case, take the visitor to a contact page. By selecting the button, I will then edit the text and link it to the contact page. I do this by entering a few letters of my page name in the field. The contact page will show up in the list below. I can then select it as the link I wish to create.

Now that I have edited the content, let’s change the background image of this container from the placeholder image that was imported to something a bit more fitting. To do this I will click on the editing handle to show the container properties on the side. Next, I will navigate to the Style tab. In the image section, I will assign a new background image by selecting the placeholder image and clicking on the Choose Image option. From here I will drag an image from my local computer to the media library. Once it has finished uploading I will add some Alt Text; and then, select the Insert Media button to add it to my page.

I now find that it is difficult to read the text over top of this background image so I will add a background overlay to improve the readability. To do this I will navigate to the Background Overlay settings. From here I can choose a solid color or gradient that best contrasts my text. I will select a white color. The opacity level can be increased or decreased as needed. Now that I have my Hero section completed let’s move on to the Services section.

Services

The services section is made up of Heading widgets, and four Image box widgets. These should give the visitor a very brief introduction of what you provide to them.

Let’s edit the subheading as I did before by selecting the element and changing the text. Next, I will edit the image boxes. I will select the first one and edit it in the widget panel settings. In the Title & description I will change this title to “New Construction” and add a short description about what I offer.

I will change the image by selecting the placeholder image in the widget panel and clicking the Choose Image button. I’ll pick an image for this service from my local computer. I like this one. Again, I will add the alt text to describe the image. I have now edited the first image box, I will repeat the steps for the remaining three.

We have now completed the Services section of our home page. It is now time to edit the About Us section.

About Us

The About Us section gives the visitor a chance to get to know me a little bit and establish trust. It generally includes a heading, a brief text, and a button to learn more; that is linked to an explanatory page. You should also provide an appropriate image for a visual element. 

Let’s edit this section now. Sometimes I find that it is easier to choose an image first and then come up with a catchy heading afterwards. Let’s do that by selecting the placeholder image and in the widget panel change it as I have done before. I will use an image from my local assets and upload it to my media library. I like this one. Once again, I will add alt tags to describe the image.

I can now edit the Heading with a catchy reference to the image. I do this by once again selecting the heading and editing the text in the widget panel or directly on the page.

Next, I will select the text to open the Text Editor widget’s settings and edit it in the same way as our heading widgets.. The content should be very brief as visitors can get easily overwhelmed.

I will now edit the button and link it to our About page by navigating to the URL field in the widget panel and typing ‘about’ in the field. The proper link will appear below which I can select. The button will now take the visitor to the About page once clicked.

Great, now we are getting somewhere. I am nearly halfway done with editing the Home page and you should be getting used to the way that Headings, text, buttons, and images are edited with Elementor.

Benefits

The next section in my kit is the Benefits section. This section is used to inform the visitor why they should choose me over the competitor.

First I would like to change the background color of this section’s container to my Beige global color for branding and to draw more attention to the visitor. I do this by navigating to the style tab of the container and then in the background property, select my global beige color.

Similar to my Services section, the Benefits section uses four Icon box widgets located inside a child container row. Let’s edit the first one. Select the element and click the pencil icon to edit it.

The Icon box widget contains an Icon, a title, and a description. To choose a different icon, I select the placeholder in the widget panel. At the bottom I have the choice to use one of the hundreds in the icon library, or to upload my own. For this lesson I will use the Elementor icon library. In the library I can scroll to find the icon that best fits my needs. I can also use the search function to narrow the results. I like this one. I will select it in the list, and then click the Insert button. I can give the icon a bit of styling by using the View option and trying the Stacked or Framed options and their Shapes. I prefer the Default view for this website.To adjust the size preferences of the icon box, I will visit the Style tab and edit the size. I will change it to 75PX. Here, I will also change the color to black to match the text.

Back in the Content tab I will then edit the widgets title, and description below the icon. I will first edit the title. If I do not want to have a description displayed, I can simply leave this field blank like so. If I wish to link my icon to another page or place, I can edit the Link field here the same as I did the buttons above. I can also change the position of the icon to the left, top, or right of the text if I wish. For this lesson I will leave it at the top. Now that I have edited my first Icon box, I will quickly do the same for the others. I have now completed the Benefits section. I also taught you how to use the Icon box widget.

Examples

The Examples section in my kit is created using an Image Carousel widget on the left, and a heading with text on the right. Let’s learn how to add images to the slideshow.

I will first select the Image Carousel to edit it. In the widget panel, I can edit the placeholder images by selecting them. A window will open up that allows me to edit my gallery. I will first remove these placeholder images. Then in the add to gallery option, I will drag my local images to the media library. I’ll do this now. I can reorder these by selecting and dragging them.

When I am ready, I will select the blue Insert gallery button. This will return me to the editor window and I can see my new images. From the settings I can change the image size, the number of slides to show, and the navigation preferences.

The Additional Options settings allow me to set the behavior of the carousel. I can have it autoplay, or pause when interacted with, as well as setting the speed and the effects. Congratulations! You have just learned about how to use the Image carousel widget.

I can now edit the heading and text of the section as I have taught you previously. Since this is a great opportunity to direct visitors to the Portfolio page, I will do this by dragging a button from the widget panel and placing it below the text. I can then edit the text and link it to the Portfolio page. But wait, this button does not look like the other buttons on my page, they are all rounded and this one is a rectangle. Don’t worry, Elementor allows you to copy and paste styles of similar widgets. I will select another button on my page and right-click it. I can then select the Copy option.

I will then return to my new button, right-click on it, and select the Paste style option. There you have it. The button now has the same appearance of the other buttons on the page. This completes the Examples section of the Home page. It is now time to move on to the Testimonials section.

Testimonials

The Testimonials section creates a better sense of trust for your visitors. If others have left a great review, this is the place to show it off. Our kit uses a heading, and three Testimonial widgets placed in a child container row and justified with space between to achieve the layout. 

Let’s edit the first Testimonial. In the widget panel for the Testimonial widget, there is a Content section that contains the body of the text. I can replace the filler text here with a review of my own as I will do now. 

This widget also allows me to add a small image of the reviewer, their name, title, and a link. I will add the name now. If I do not wish the images to show, I’ll simply delete the placeholder images and leave them blank. I can then set the position and alignment of the content by using the controls for the best layout. I will leave it as left aligned for now. I will now repeat this process for the other two testimonials. I have now completed the Testimonial section of the Home page.

Before we move on. Here is a great tip I like to use. Since this section is used several times on the website I can save it as a template and then insert it where I need. To save this section as a reusable template I do the following:

1. Select the Testimonials section on the screen or in the Navigator.
2. Right click to open the options.
3. Select the Save as Template option.
4. Name the template in the modal window.
5. Save it
6. Close the modal window.

This is one of the many very helpful and time-saving features of Elementor.

Logos

The next section of my kit is the Logos section. These sections are also used to build trust through endorsements or sponsors. This section uses a heading, text editor, and an Image carousel widget placed in a container column and aligned using the stretch property. It is similar to what was used before in the Examples section. Since this section is not required for my website’s needs, I will remove it by selecting the “X” icon in the editing handle, or by the navigator.

Blog

The next section in this kit is related to the Blog: or in this case, the Portfolio. This section is made up of a Heading widget, a Text editor widget, a Button widget, and a Posts widget. When I create new posts, they will automatically be added to here to allow visitors to see the latest updates from my site.

Let’s change the Heading text from Our Blog, to Recent Projects. I will then edit the description in the text editor.

The button can be linked to our Portfolio page by selecting it and in the widget panel in the Link setting. I can type Portfolio in the field and select the page from the list. I will also change the text of the button to view the portfolio.

Next is the Posts widget. The Posts widget allows me to display a list or grid of your posts anywhere on the website. The number of posts and columns can all be defined in its settings. Since I have not yet edited any of the sample posts already written, or created a new one,  let’s go ahead and leave this widget as it is for now.

Footer Brief

The final section you see on the Home page contains a heading, text, and a button on the left as well as a large placeholder image. This is a part of your kit’s Footer section. It shows up on all the pages of the website. I will teach you how to edit this footer a bit later on.

Responsive View and Publishing

Back at the top of the page, I can now check to make sure my changes still look good on all devices. I do this by selecting the responsive icon at the bottom of the widget panel to enter the responsive editor. I can then see how my design looks on tablet and mobile views.

Great, I only need to make an adjustment on this large heading widget. I will visit the Style Tab in the widget panel. Then in the Typography options I will decrease the size a little bit to correct the wrap. I will now save the page by selecting the Update button.

I can then view it to see what it will look like to visitors. I do this by selecting the burger icon located at the top of the editor panel and then select the View Page link.

Page Summary

Congratulations you have now learned how to edit the Home page and use many of the Elementor widgets. You learned the following basic widgets:

• The Heading widget
• The Text Editor widget
• The Image widget
• The Button widget
• The Image Carousel widget
• The Testimonial widget

With these skills alone, you will be able to create many types of designs for your website later on. I will now return to the dashboard…. and my Pages menu.

About Page

Let’s edit the About page by selecting the Edit with Elementor link. The About page helps my visitors get to know more about me and my company. It is also a good place to include my vision, mission statement, and getting to know the team.

Hero

First I will edit the Hero’s heading by changing it here from Our Mission, to About us by selecting the text and editing it right on the page. Let’s continue by adding a bit of text about my company in the text editor widget. I have already written some content that I will paste here.

I will now edit the background image of the right column. I do this by selecting the editing handle located in the top corner. I’ll then navigate to the Style tab of the widget panel. In the image settings here I see the placeholder image. I can select it and the media library window will open. I then pick an image from my local folder and drag it to the library. I’ll add the alt text, then select the Insert Media button to add it to my page.

Company Vision

The Company Vision section is very similar to the section above, only reversed. I will edit the text editor widget and add my content. Here I’ll edit the background image as I did before. I will find one to use in my local folder. I like this one so I will drag it to my media library, add the alt text, then select the Insert Media button.

Founders

I can now move on and introduce the team. I’ll do this in the Founders section. This section features a heading and three Image Box widgets placed in a child Container row.

To edit the Image boxes, I will select the first one. Here in the settings I’ll replace the placeholder image with an image of a member of the team. I’ll choose the local image from my folders and upload it to the media library, edit its alt tags, and then select the Insert Media button.

I will edit the name of the team member in the Title & Description field. I will also add a short bio about the team member. If I wish to link the team member to their Linkedin profile or another location, I can do so in the Link settings. I will now repeat this for the other team members.

If I need to add additional members, the simplest way is to duplicate the container widget. I can then simply edit the duplicated members with the additional ones I need. 

Quotation

The next section on our page is a quotation. It is used to share a message with your visitors. This could be a quote from yourself, your team, or even a famous quote that is relevant to your company.

The section utilizes the Icon box widget to feature an icon, and a Title and Description for the quote and author’s name. Let’s edit the text now in the widget panel by selecting the widget and replacing it in the settings. I will also edit the author’s name in the description..

Next I will change the background color of the container to add some visual contrast. I will select the container’s editing handle and in its Style Tab, I will now change the Background color to my Beige global color; looks good.

Testimonial

The last section on the page is another Testimonial section. This time Let’s replace it with the one I saved as a template earlier. To do this I:

1. Locate the editing handle of the current Testimonials section.
2. Select the + icon.
3. Select the Folder icon.
4. In the modal window, select the My Templates tab.
5. Locate the Testimonials template and Insert it by selecting the button.

I can then delete the old Testimonial widget by selecting its handle and the X icon.

I have now replaced the section with the edited version and you have learned a valuable new skill. Saving sections as Templates will save you a lot of time later on as you improve. These also serve as a backup in your library.

By selecting the burger icon at the top and then selecting the exit option, let’s return to the dashboard and the Pages menu.

Services Page

I can now edit the Services page with Elementor. The Services page of the website is a good place to provide your visitor with information about what the company provides for them. On the Home page, I edited a Services section and added  very brief descriptions. On this page, I will provide the visitors with more detailed information.

Hero

At the top of my page, I once again have a Hero section. On the left there is a background image that takes the space of a container, in the right container there is the title of the page, and a short description.

First I will edit the background image of the left container by selecting the editing handle located in the top corner. I will then navigate to the Style tab. In the image settings here I see the placeholder image. I can select it and the media library window will open. I then pick an image from my local folder and drag it to the library. I will edit the alt text that describes the image. I then select the Insert Media button to add it to my page.

Since the page title has already been added when I imported the kit, I will not need to edit it. I will add a short description in the Text editor widget.

Services CTAs

The next few sections on the page is where I will provide our visitors with a more detailed description of the services that I offer. They all use Call to Action widgets. The Call to Action Widget is a tool for creating beautiful boxes that combine an image, heading, description text, and a button if needed. This saves you a lot of time over using the separate widgets.

Let’s edit the top one to learn more about how this widget works. I will select the area on my page and then click the pencil icon to show the settings for this widget in my side panel.

The appearance of the Call to Action can be changed by choosing the Skin. I do that in the dropdown field here. By default, the Call to Action widget is using the Classic skin. The classic skin divides the image and content into separate sections. I can choose the position of the image from left, above, or right. I can also have a different position for phones or tablets where it is better to position the image stacked above the text. The other skin available is the Cover option. This option uses the image as a background underneath the text.

I can now replace the placeholder image as I have done previously. I will re-use the images that I uploaded for the services section on my home page.

For the title and description I will once again use the title from the home page. I will expand the amount of text used to describe the services in greater detail for the description. I will now repeat the process for the other services mentioned on the home page.

You should now have a better understanding of the Call to action widget and how it can be a useful and time saving way of creating interactive content on your website. I will now move on to the Frequently asked questions section of the page.

FAQ

The FAQ section is created by using a Heading and two Toggle widgets placed in a child container row. I will first edit the top heading widget.

The Toggle Widget lets you create text boxes that are collapsed, so the visitor only sees the titles of each item. It then expands once it is interacted with. This lets you show your content in a condensed form, so visitors don’t have to scroll through a long page and can sift through the titles easily.

I will edit the first Toggle widget by selecting it. In the widget panel you can see that our imported kit uses four titles. If I select the top one I can then edit the title, and the description.

I can select a custom icon for both the closed and open state from the library or upload my own. However, I like the look of the one that was imported in the kit so let’s leave it. I will now finish the others. I have now taught you about how to use the Toggle widget.

Publishing

I can now check the responsive view of this page for tablet and mobile from the responsive mode editor. It already looks great. I will now publish my changes by selecting the Update button. Let’s exit the editor, by selecting the burger icon and then view our page.

Page Summary

Congratulations you have now learned how to create a Services page. On this page I taught you how to use the Call to action and Toggle widget. Wow, I am almost done editing all the pages that were imported with my kit. Time to head back to the dashboard and the Pages menu.

Contact Page

I will now hover over the Contact page and select the Edit with Elementor link. The Contact page is one of the most important elements of your website. Here is where we can provide our visitors with our location, phone numbers, hours of operation and more.

Hero

The Hero section of this page located at the top features the Heading widget, a divider widget,  and an Icon List widget with a background image. I will first edit the background image by selecting the container. Then in the widget panel style tab select the placeholder image and upload one from my local computer to the library, edit the alt tag, and insert it. I will also need to add a background overlay to make the text easier to read.

The Icon List Widget creates an easy-to-manage list of items. I will edit the phone and email address by selecting it and clicking on the pencil icon in the editing handle. 

In the widget panel I can change the layout to vertical, or horizontal. Below that are two items already created for me; a phone number, and an email address. Let’s edit them now.

By selecting the phone number I can see that it expands to allow for text, and an icon if I wish. I will edit the telephone number that is displayed. 

The Icon list also allows me to link to another page or use the dynamic features in Elementor. By selecting the dynamic Contact URL option already created I can then see the Type is  set to the tel: option. I can edit this to the correct telephone number. When mobile visitors select the link it will then automatically dial the number we provided. 

Next I will repeat these steps for the email address. I’ll first enter my email address that is displayed. And then edit the dynamic link by selecting the Contact URL and then entering the email address again. When the visitor selects the link, it will open up their default mail application on their devices.

Form Basics

The next section contains a Form widget. This is the best way to interact with your visitors as you can filter the information you wish to receive from them. Forms can be as simple as a single field to collect an email address for someone who would like to be added to your mailing list all the way up to very complex forms with dozens of fields and steps. Fortunately the form that has been imported with the kit provides most of the functionality that is generally needed. Let’s edit it now.

In the widget panel I can see many options here. This is because the form can be used in so many different ways. Don’t panic as many of the settings here are optional. I will not be using all of them for this lesson.

The first area we need to look at is the Form Fields section. Here is where we can edit fields and add additional ones. In our imported form we have fields to capture a name, contact information, the type of service the visitor would like, and a message box for them to type the details in.

Lets select the Name field. When I expand this, I can then see its settings. The first setting is the Type. The type setting is used to define the function needed for the field.

The basic types of fields used are:

• Text
• Email
• Tel
• Textarea

There are many more types in the list including selectors like radio buttons, checkbox, and dropdowns. Some of the types help protect you from spam emails such as ReCAPTCHA and Honeypots. These try to keep bots from filling out your forms. The last type is a Step. This is used to visually break a larger form into smaller parts. Our imported form is quite simple so steps are not needed.

The type of field used for the name is a text field. I can edit the Label here. This is generally displayed over the field. I can do this by selecting the toggle located below the form fields.

The next option is the Placeholder. This is displayed inside the field and should be an example of what information you wish the visitor to input. If you wish to make a field required, you can simply toggle the option. This will not allow the form to be sent until the field has been completed. 

Lastly, is the column width function. This is to allow you to place fields side by side such as a first and last name. In our example this is set to 50% to allow for two columns in our form.

The next field in our form is capturing an email address from the visitor. If I expand its properties I can see that the type is set to Email. This requires the visitor to input a valid email format. The phone number field is also used to collect the visitors’ contact information. The type here requires the user to input a valid phone number format. It will only accept numeric values. For the service field we once again use the Text option for the type. This will capture the type of service that our visitor is requesting. Lastly, is the message field. For this type, the Textarea is used. This allows the visitor to input a larger amount of text. In the column width it is set with a 100% value to fill the width of the entire form. I can also change the number of visible rows as desired. I will leave this at four.

I can now take a look at the settings for the submit button. Here the size, width and alignment can be changed to suit the design. In this example, it is set to be centered under the form. If the form uses “steps” the button text can be changed as needed. However, our example will not require these settings to be edited. The text that is displayed on the submit button can be edited here. I can also add an icon to be displayed alongside the text if I wish.

Now that we have all the fields and a submit button it is now time to look at the Actions After Submit settings. This allows you to send the email to one or more recipients, redirect the visitor to a thank you page, or integrate with services such as MailChimp.

I can also use the Submissions feature from Elementor. This feature stores all the emails that are submitted in the database on your site. You can then view, or export them by navigating to your WordPress Dashboard selecting the link here.

The Email settings of the form is where I can edit the recipient of the form, the subject line of the email, and the message. I can additionally define who the message is from and where to send the replies. In the “To” field, I can set the email address that I wish the form to be sent to. When I imported the kit, it automatically used my default email for this value. The subject line is what will appear in the emails I receive. It can be edited to allow me to identify mail that is from my website for example. “You have a new service request.” In the message field the default setting is the shortcode [all-fields]. This will send all the values that the visitor inputted to the form in the body of the email I receive.

Lastly there is the Additional Options settings. This allows you to give your form an ID. The ID can be used for advanced coding options. It is also useful if your website has more than one form so that you can know which form that the visitor used.

Wow, I have now shown you the basics of the Form widget. I will take a deeper dive into the more advanced form features in another tutorial. Please subscribe to keep up with all the helpful tutorials that will empower you to create amazing websites with WordPress using Elementor.

Testimonials

The bottom section of my contact page once again uses the Testimonials. Since I have this section stored in the Templates library, I will again import my completed version and remove this one.

Publishing

I can now check my responsive views to make sure everything looks good. I then Update my changes to the live page. I will exit the editor and take a look.

Chapter Summary

I have now edited all the pages that were imported in my kit. I also taught you how to create a new page, and use the template library to add new content using blocks. During this time you learned how to edit many of the basic widgets you need when creating a website with WordPress and Elementor. You are now well on your way to creating your first website. Next, you’ll learn how to edit and create Posts for the Portfolio.

Elementor – Editing the posts

Earlier I explained what posts were and showed where to find them in the dashboard. I also had a section on the Home page that displayed these posts. Let’s learn how to edit these and create a new one.

In the WordPress dashboard, I will navigate to the Posts section and select the View all option.Here I can see the sample posts that were created for me when I imported the kit. By hovering over the top one, I will then be able to select the Edit option.

Editing Sample Post

Once the page is loaded I can now see the post in the WordPress Block editor. I will now edit the post’s title, excerpt, and featured image in the Posts settings panel.

Titles

For the title, let’s edit this to be a project that was recently completed.. For example: Modern Home Project

Excerpt

The excerpt is important for search engines and visitors to know briefly what the article is about. It should really only be as long as a sentence or two. This can be located in the post settings panel. I will edit this now.

Featured Image

Next I will assign the post a featured image; also found in the post settings panel. This will display in the Hero section of each new post. The featured image is what will also display when your post is shared on most social media. I will choose an image from my local drive and upload it to my media library. After editing the alt tags and description, I will select the Set Featured Image button.

Content

Now that I have edited my Post settings, I can then return to the editor and edit my content. I personally choose to write posts in an external application such as Google docs and then paste them into the editor as I will now do. 

Publishing/Updating

I can then publish the post by selecting the Update button. Then, I will exit the editor, and view my post.

Deleting Posts

I will now delete the remaining sample posts so that I may create new ones from scratch. To do this, I will return to the posts in the dashboard. By using the tick boxes I can select the remaining posts. Then use the bulk actions to delete them.

Adding New Posts

To create a new post, I will select the Add new option.When this is selected it will open the WordPress Editor.

I will first give my Post a Title by selecting the Add title headline and typing the name of my post. I’ll then enter the excerpt in the Post settings panel. I will then upload an image to be my featured image. I can then write about the new project in the editor, or paste in my pre-written content from Google docs. Next I will select the Publish button and confirm that I wish to publish my post. I can then view the post by selecting the link at the bottom. Let’s return to the dashboard.

Chapter Summary

You have now learned how to edit the sample posts that were imported with the kit and add additional ones. This will help you keep your site updated with fresh content and help drive more traffic to your website.

You might be wondering if you can write the posts with the Elementor editor. The answer is absolutely. If you wish to include more complex design and interactive content it is better to edit the posts using Elementor. The choice is up to you. It is important to remember that once you edit the post with Elementor, you should not switch back to the WordPress editor or you will receive errors.

Next, I will show you how to edit the final parts that were imported in our kit. These are edited by using the Theme builder.

Elementor – Theme Builder

Early on in the lesson we learned about WordPress themes and how to add a new theme. Traditionally if you wished to change the look of the theme, you would need to create a child theme and know how to edit code. Fortunately, by using Elementor, you will not need to do this. When the Elementor Theme builder is used, its templates use the same structure and good practices as WordPress. This is a much simpler way to create a custom theme of your very own.

Overview

From the dashboard, let’s take a look at the Theme Builder by going to the Templates menu. From here we can select the Theme Builder. When the page loads, I can see the Site parts listed in the side panel. Let’s learn what each of these are.

The Header – Shows at the top of the website, and usually consists of your company’s logo or name, and a navigation menu. It is also a good place to for a phone number or address so your visitors can quickly find this on every page.

The Footer – Appears at the bottom of the page. It also generally consists of a logo and a directory of pages. It is also a good place to put a copyright and links to legal pages such as a terms of service.

The Single post – Displays the full content of a post once selected in the archive or reached from a link online.

The Single page – Displays the full content of pages on your site. It is not very important on small websites with only a few pages. However it is a huge time saver on larger websites with dozens of pages. It allows you to have a consistent layout for all the pages.

The Posts Archive – Is a list or grid that displays all the posts on your website. If your site uses categories, it will display only the posts that are related to that category. Think of a news site. When you click on sports, you only see articles about sports.

Search results – This is similar to an archive. It will display a list or grid of content that is relevant to a term that is searched for.

Error 404 – Is displayed when a visitor clicks on a link or enters a page name that has been moved or no longer exists. It is a good place to include a search or navigation to get them pointed back in the right direction.

In the main part of my screen, I can see a small preview of the site parts that were imported along with my kit.

Editing the Site Parts

Header

Let’s begin by selecting the Header card in the Theme builder. It will then display my imported kit’s header in a larger preview. In the upper corner, I will select the edit link to open this template in the editor.

Now that I have my Header template open in the editor let’s take a look at the navigator. Here I can see that the header template is made up of two thin container sections. The “Top” container section contains a Heading widget and an Icon list widget. These have been placed in a container row, and justified.

I’ll edit my address by selecting it and putting in the correct one. Next I will edit the phone number in the Icon list widget by selecting it. Then in the widget panel I will edit the number in the icon list. Here I need to change the text displayed in the field. In the Link field, I will select the Contact URL option. This will open its settings. I now need to edit the number here so that it will automatically dial the number for the visitor.

I also would like my Header to use my global Beige color. I will select the Container and in the Style Tab change the background color in the settings.

In the Navigator, I now have the Header container section. This uses the Site Logo widget, and the Nav Menu widget placed in a container row, and once again justified to the edges of the page. I will again change the background color of the container to my global beige in the Style tab. To add a little bit of contrast between my top container and my header I will return to the top container’s style tab and in the background color, I will reduce the opacity level in the color picker to make it appear a bit lighter.

If I select the logo, in the widget panel, it displays the logo we chose earlier. If I need to change this, I can select the Change Site Logo button. It will open the Site Identity settings. I could then select a new logo if I wish. If I need to change the size of my logo, I can do so in the Style tab.

Next, is the Nav Menu widget. In the dropdown I can see that the Primary menu is selected. This menu was created when we imported the kit.  The Nav Menu widget uses the standard WordPress menus I taught you about earlier. I can select the “Menus Screen” link if I need to edit it.

The Nav menu widget has many options for layout, alignment, and styling. Since it was already set up for me when I imported the kit, and completely functional, we will move on to the next part.

If you notice, when scrolling down, the header remains at the top of the page. This is known as a Sticky header. This option is found by selecting the container, and in its Advanced tab, locate the Motion effects option. Here you will find the settings for the Sticky effect. The effect can be turned off and on for different devices. 

Let’s check out responsive views and make sure everything is looking good. I have now finished editing my kits Header. While I can’t cover every option in this tutorial, I encourage you to experiment a little on your own. The possibilities are almost limitless as to what you can design using Elementor. I’ll select the Update button and exit the editor. Once back at the dashboard, I can visit my website to view the changes.

Footer

It is now time to return to the Theme builder from the dashboard and select the Footer site part for editing. The Footer of our kit uses Three container sections.

Hero

The top section is a “Hero” that features a Call-To-Action widget. This is the last opportunity for you to capture a sale, or a contact from your visitors on a page. If you do not wish to have this on every page, it can be deleted by selecting the container and then selecting the “X” in the editing handle.

I will edit this Call to action widget as we have done before by uploading a local image to my media library and then editing its details, replacing the contents text in the title and description, and linking the button to my Contact page.

I would also like to change the Background color of the Call to Actions content. I will do this in the Style tab. By Navigating to the Content style settings I can then scroll down to the Colors setting. Here, I will change the background color to my Global beige. To give the content a little more padding, I will go to the Box style settings. Here I will set the padding to 8% for all sides.

Footer Section

Below my call to action Hero is the “Footer” section. This provides a good place for my company logo, a brief summary, social media icons, a directory of links and contact information. The section layout is made up of four child containers within a parent container.

In the first container there is an image box. It has already been set to use the logo that we assigned in our Site Identity similar to the Header.  I can leave this and simply edit the description text with a short summary of what my company does, or the company motto.

The Social icon widget allows me to choose an icon from the library to display the platforms that I actively use.  My kit already added the icons for Facebook, Instagram, and Twitter. I simply need to edit their links. If I wish to add a new platform, I can select the +ADD ITEM link. It will then allow me to choose a platform’s icon from the library and link it. I can also drag and drop to re-order the social platforms. 

In the next container I have a Heading widget and an Icon list widget. I will edit these with the headings of our services page.

• New Construction
• Remodeling
• Renovations
• Additions

These have already been linked to the proper location when my kit was imported. I will remove the last one as my services section only has four areas.

We now have a container with a Heading and a Nav Menu widget. This is generated from a WordPress menu as it was in the Header template. You can create additional menus in the WordPress menus screen if you would like to have different links in your footer. The primary difference in the menu here is that it is displayed vertically. This can be found in the widget panel in the Layout dropdown. Here, I can change this value to horizontal, vertical, or dropdown. For this example, the vertical option works best.

I also do not want the menu to be displayed as a “hamburger” icon on mobile and tablet devices. This is found in the Mobile Dropdown settings. In the Breakpoint dropdown menu. Here I can choose at which screen size the hamburger menu shows. I will leave this with the value of “None.”

The last container in this section is where we can display the company address and other contact information. It is using a Heading,  Text Editor, and Icon List widget. Lets edit this by first deleting the Text Editor widget. I will add the address Back to the Icon List widget in just a moment. I’ll select the Icon list widget and in the widget panel, Select the phone number and edit both the display, and dynamic options.

Next I’ll select the +ADD ITEM button. In the Text field I will enter my address for the value. I remove the checkmark from the Icon setting by selecting it and clicking on the trash can icon. Finally, I will re-order the address in the list.

Great, the only remaining thing left to do in my footer is to edit the copyright notice in the bottom section. I will select the text, and edit it. In the widget panel, in the Title options, this uses the dynamic options in Elementor to always display the current year. In the advanced settings here, I can edit the before and after text.

I will now visit the Responsive settings to once again make sure everything is correct. It is now time to select the Update button and publish my changes. I can now exit the editor and return to the dashboard. Then view my page to see the changes to the footer.

The Archive

Let’s return to the dashboard. Earlier we created a new page called Portfolio and we assigned it as the posts page in our Reading settings. Once this happens the page becomes an Archive. To edit this Archive I will select it in the Theme builder. I can then select the Edit link option. The template will open in the editor.

This template features a large Hero section with a Heading and a background image.  I will change the Heading from Our Blog to Our Portfolio by selecting it and editing it directly on the page.

I can then select a background image in the Style tab of the Container settings and upload one to the media library from my local drive. I will then add its Alt tags and description. Once again, I need to add a bit of overlay to the background in the overlay settings of the style tab. There, that looks good.

The next section uses an Archive Posts widget. This is slightly different from the Posts widget we used on the Home page. The Archive Posts widget is designed to be used in the Archive or Search results templates in the Theme builder. There are not as many settings as the posts widget has, however I can set the number of columns and layout in the widget panel.

Since it was already configured nicely when our kit was imported. I will leave the setting as they are. I encourage you to experiment with these on your own. I can now publish my Updates to the template and return to the Dashboard.

The Single Post

When a post is visited by the user, it displays the full content of the post along with the featured image and excerpt . This layout is created in the Single Post template of the Theme builder. A really nice layout has already been created for us by the Kit, let’s take a brief look at it by opening it in the Theme builder.

When the page opens in the editor I can see that it shows the last post that I created. However, I do not edit this content in the theme builder, it is just a preview of what the template will look like. When you are designing templates in the Theme builder you do not need to create a template for each post as it will automatically use the information that is created in the WordPress Post. Such as: the title, excerpt, featured image, and the content. In WordPress terms this is referred to as being “dynamic.”

The Hero displays the Featured image, the Title, and the post info such as the author and date it was published. The next section features an Excerpt widget, The Post Content widget, and the Posts navigation widget.

It is Extremely important to always have a Post Content widget in your Single Post and Single Page template. Removing this will cause errors on your site.

The template also features a Social Sharing widget and a Related Posts section.

This template already has all the features and layouts imported in the kit so I will leave it as it came. The possibilities are endless when it comes to the Single Post template. I will teach you more in another course.

Next, I will teach you about another important site part of the Theme Builder; the 404 page template.

What is a 404 page? Visitors will sometimes land on a blank page when navigating your website. This can be because the page was moved or deleted, or they typed a bad page name in their browser.

Creating a template for this page is a good practice. It is an opportunity to help guide the visitor back on the right path. For example a search bar, a directory, or even a grid of posts. This is to keep them engaged and not leave your site.

404 Template

Let’s open the 404 template in the Theme builder. Once again this is found in your WordPress dashboard in the Templates section. I will select the template card, and then select the edit link.

As you can see, The kit was imported with many of the features that make up a good 404 page. I simply need to customize it a bit.

I can start by removing the placeholder background image of the Hero section by selecting the container, and in the widget panel style settings select the placeholder image in the background section, and then use the trash can icon to remove it. 

Let’s add a new widget to this template. From my widgets panel, I will use the search function to find the site map widget and drag it under the text. The Sitemap widget creates a structured, organized, and accessible directory of your website. This provides the user with easy, one-click access to your site’s content. Since our blog portfolio only has a very limited number of categories, let’s remove this query by selecting the X icon. I will select the +ADD ITEM button and in the new item I will set the Source to Posts. This will now display a list of all my created articles in the Portfolio. Next I will change the number of columns to two. This will provide an additional gap between the queries. To reduce the size of the text, I will visit the style tab. From here I will decrease the size of the headings in the Title typography settings. There, that looks much better.

Once again we will replace the Testimonials here from the ones in our Template Library. Then I will select the update button to publish my changes, and return to the dashboard.

Chapter Summary

I have now covered many of the templates that make up the Site Parts in your theme builder. You learned the basics about:

• Headers
• Footers
• Archives
• Single Post
• 404 Template

I will cover all of them again in more depth in an upcoming tutorial. Subscribe to this channel for updates.

Elementor – Popup

Overview

Let’s now talk a bit about popups. Earlier when I visited my site for the first time, a popup window appeared that encouraged me to Join the Newsletter. This was included in our kit and is set to only show one time per visit.

But what is a Popup? Popups are call to action modal windows that appear and overlay the page at a specified moment or under specific triggers and conditions. Popups are designed to focus a user’s attention about a certain feature such as a sale, or a call to action.

Editing the Popup

I can edit the popup by visiting the WordPress dashboard and navigating to the Templates menu. Here I will select the Popups option in the menu. I can then see the Subscriptions popup that was imported in the kits. I will select the Edit with Elementor option.

When the page loads, I will be able to edit this popup. It is very similar to the Hero sections we have edited on our other pages. I will change this heading text to read “Request a Quote” and the text below it.

Next I will edit the form. This will be a much simpler form than the Contact page. In the Form Name field I will change the value to Quote Form. This way I will know that the visitor submitted this request in the popup. Since we are already using the form to capture an email address, let’s add a field for their name. I do this by selecting the +ADD ITEM button. Since the text field is already the default Type, I do not need to edit it.

For the Label field I will enter “Your Name.” I will repeat this for the Placeholder field. I will then toggle the Required option to Yes. Next I will reorder the form fields to display the name above the email by selecting it and dragging it with my mouse to the proper location.

To edit the button text, I will navigate to the Button settings of my form in the widget panel. I can then edit the value of the Submit button.

Lastly I will replace the placeholder image that is the background image of the left container as I have done on other parts of the website in the Style tab settings. I can then select the Update button to publish my changes.

Popup Conditions

Earlier I mentioned that this popup was set to only show up one time. But how? The answer is the Display conditions.

I can access these conditions by selecting the little triangle located beside the Update button. In the menu that appears I will then select the Display Conditions option. The Conditions settings will control the page that the popup will appear on. Here it has been set to display on the front page on the website. I can edit this or add additional pages if I wish.

Next is the Triggers settings. This controls what action the user needs to take in order for the popup to open. In our example, we have set the popup to be triggered when the user scrolls down the page to the 80% point.

Lastly are the Advanced Rules. These are the requirements that need to be met before the popup is opened. This is where we set the popup to only appear one time per visit. 

I encourage you to explore all of these popup settings on your own.  I will do another video tutorial covering these in greater detail. You have now learned about popups and how to edit the imported one. I have now covered all the content that was imported in our kit. I can now move on to the final steps in launching the new website. Let’s continue.

Final steps

Creating a WordPress website using Elementor Hosting is your first step on the road to success. Now it’s time to attach a great name to your beautiful site.

Custom Domain

When I purchased and set up my Elementor Hosting package, I was assigned a temporary domain name. However, I want to use my own domain name. If you have not yet purchased a domain name. You can do so from any of the popular domain providers such as GoDaddy, Namecheap, Bluehost, and many others. Once you have purchased a domain name it can take a few hours before it is ready to use.

Once I have gotten an email from my provider saying that it is ready, I can then return to the my.elementor website’s dashboard and connect it using the walkthrough process. Let me show you how this works.

From my Elementor Hosting Dashboard, I will go to Websites and select the Manage This Website button located in my website’s card to open the site details screen.

From the Manage Domains section, I’ll select the Connect my domain option. When the screen refreshes, it will ask me to enter the name I purchased. I will enter that here and select the Let’s Begin button.

In step two, the system will detect that my domain was purchased at Godaddy. It will then allow me to select the Continue to sign in, or continue manually. I will select the first option since it is the simplest way. Once I select the button a modal window will appear on my screen that will prompt me to first: Sign in to my account. And then… Authorize the connection from Elementor to alter the records. A message will then appear to let me know it was a success. I may then select the close button. Once the window has closed, there is one final step. I need to select the Connect my domain name link. That’s it!

The process is complete. I will once again need to wait for the name to be populated to servers around the globe; that takes a few hours to complete. Elementor will send me an email when the process has been finalized and what the next steps are.

Email Authentication

It is now time to set up the Email authentication so that the forms of my website are sent from the proper domain name.

To do this I will once again return to my Elementor Dashboard and manage my site’s settings. I will select the “authenticate your email” link on the dashboard. Once this is done a page will load with the next steps.

The final step of completing your authentication is done following the onscreen instructions at your account dashboard. During this process, you will:

1. Sign in to your domain registrar.
2. Edit the DNS records with the supplied ones in your Elementor dashboard.
3. Accept the connection.

Afterwards this process can take up to 72 hours on some occasions but usually much faster. Elementor will send you a notification that it is ready. My forms will now send email using the custom domain name.

Site Lock

Once my website is ready with my new name, and the email authentication has been set up, It is now time to allow others to see my site. This is done by turning off the Site Lock feature.

I will navigate to the Site lock settings in my website management screen and then switch the toggle for the Site lock settings to the off position. Next, I will confirm the model message that asks me if I am Ready to go live with your site? My website is now “Live.” I can now begin sharing this website with others.

Chapter Summary

In this final chapter, I connected my own domain name to the website and authenticated my email. I also turned off my Site Lock feature so that I can start showing off my website to others.

Course Summary

This concludes my lesson on how to get started Creating your first WordPress website. We have covered so much. You learned about:

• The Elementor account dashboard
• The WordPress dashboard
• Pages and Posts
• Plugins and themes
• The Elementor Editor
• The basic Elementor widgets
• Editing our kits pages and posts
• Editing our imported site parts with the theme builder
• Connecting our domain
• Authenticating the domain email. 
• And…Making our site live by turning off the site lock

I hope you have learned from this lesson and feel more comfortable with creating websites with WordPress and Elementor. Please subscribe to the channel where I will be sharing more lessons for beginners to create beautiful websites.