There are many tools on the Internet these days, which will help you to create a website. But the main problem with all those tools is that you won’t have enough control over your website and it will be challenging to improve it. It will also be expensive in the long run.
But we are going to use a platform which is both very easy to use and also you will have the ability to do everything you like as you go forward. We are planning to use WordPress, which is a software installed on your website.
To be able to use WordPress, you must have a host and a domain where we will talk more about it in the next part.
A domain name is the address of your website where Internet users can access your website. Without a domain, having a website is not possible.
Domains come at different prices and you can buy it from different websites and it starts from $1 up to millions of dollars. Below is the list of websites where you can buy a domain
But for our practice and learning, you don’t need to buy a domain.
A network host is a computer or other device connected to a computer network. A host may work as a server offering information resources, services, and applications to users or other hosts on the net.
Same as domains, many websites provide web hosting, which you can see in the list below.
Some of these hosts are more professional and difficult to work with which I mentioned under each.
Several websites provide FREE domain and hosting, and it is useful to learn and practice WordPress. But it is only helpful for practicing and creating a website using these platforms, which won’t look suitable for customers and users.
So I strongly suggest to use this platform for practice and after that buy a host and domain for professional use.
Click on the image below to visit the platform:
000webhost is an excellent platform that gives you the ability to select a name for your website, install WordPress, and start creating your site. It is very easy to set up your account, and during the next part, you see the steps.
The first step after signing up is to answer some general questions about the purpose of your website.
For example, if your website is just a blog or an online store, but since we are practicing here, it doesn’t matter what you choose, and later, we can change it.
The next question is to bout your knowledge about WordPress.
The next step is to select a name for your website (we can change it later) and a password (this password is just for 000webhost website).
On the next step, you have to select the type of your website, which in our case, you have to select “WordPress“.
Then a pop up will appear, and you must select a username and a password for your WordPress. Pay attention that this account is important, and you must remember it’s details.
After the installation of WordPress was complete, click on the manage website, and you will be redirected to the WordPress admin panel. In general, anytime you want to visit the WordPress admin panel, you just need to add the “admin” term in front of your website URL same as the example below:
The username and password you created during the previous step are useable to login to your WordPress admin panel.
There are several essential sections on WordPress admin panel that you need to learn more about and start to practice. As we go forward, we are going to take a look at parts such as:
So let’s take a look around and learn more about the environment of WordPress.
A WordPress post is what makes up the blog aspect of your site.
WordPress Pages are similar to posts in that they have a title and body text, but they are different because:
Comments provide your website’s visitors a platform to communicate with you and other readers. It allows them to add their input on the topic, ask questions, and provide feedback. They allows for community interaction around your content.
WordPress comes with a comment management system of its own. WordPress posts, pages, and other post types can accept comments. All WordPress themes come equipped with comment layout templates. However, it is up to you to engage users on your website and encourage them to leave comments.
The Appearance Themes Screen allows you to manage your Themes. That means you can install, preview, delete Themes, activate, and update Themes.
A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files. A Theme modifies the way the site is displayed, without modifying the underlying software.
Appearance include several important sections such as:
A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites.
WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. In the WordPress community, there is a saying that goes around: “there’s a plugin for that”. They make it easier for users to add features to their website without knowing a single line of code.
There are important and useful plugins which we will take a look in the plugins section. These plugins will help you to improve your site, rank better in SEO and much more.
This Settings General Screen is the default Screen in the Settings Administration Screen and controls some of the most basic configuration settings for your site: your site’s title and location, who may register an account at your site, and how dates and times are calculated and displayed.
You should know that some of the plugins which are less complicated, appear under the settings section of your WordPress.
In WordPress, a theme is a collection of templates and stylesheets used to define the appearance and display of a WordPress powered website.
They can be changed, managed, and added from the WordPress admin area under Appearance » Themes. There are several free and paid WordPress themes available. WordPress.org has an extensive collection of free ones in their Themes Directory.
Each one comes with a different design, layout, and features. A user needs to choose the one that suits their taste and requirements for their website. Some are designed to serve specific kinds of sites, e.g., WordPress Photography Themes are designed for photographers and photography websites.
I am going to introduce two different WordPress themes, one free and one paid. The reason is that some people don’t have the budget to buy a $70 theme, and some people want their website to be professional.
The free one also do the job, but won’t have all the tools you may need in the long run. The paid one includes a lot of details, plus some popular plugins for WordPress.
Neve is clean and comfortable to use WordPress theme. It is a multi-purpose theme and can be used for both business and creative purposes. Neve is perfect for blogs, startups, small businesses, agencies, firms, e-commerce shops (WooCommerce storefront), as well as personal portfolio sites and most types of projects.
With the one-page layout and attractive interface of the theme, you can give an enticing look to your website. Neve comes fully compatible with the most popular free page builders(Elementor, Brizy, Beaver Builder, Visual Composer, SiteOrigin, Divi), which will help you in creating awesome-looking content quickly. This fully AMP optimized theme will make your website look great on all devices with its fully responsive design.
Optimize is an excellent WordPress theme specifically created for an SEO website, digital marketing agency and social media marketing agency. This is a modernly designed theme that is sure to capture the attention of your visitors.
Optimize comes with a truly vast collection of pages that can be easily customized to fit the needs of companies in the aforementioned fields of business and is fully compatible with the most amazing SEO plugins. All of its elements and features have been carefully created and styled precisely for digital marketing, analytics and SEO needs. Get Optimize today and start expanding your business!
To upload the theme, all you have to do is to go to Appearance > Themes > add new (at the top of the screen) > Upload theme > Choose File, then select the zip file of your WordPress theme.
In this practice, we are going to upload Neve theme and learn everything on that theme since everybody can use it freely.
After the installation is complete, you should see the process done successfully, as shown in the image here.
Then click on activate and after a couple of seconds your theme will be ready to use.
To make sure that your theme is ready to use and active, on the next page (themes), you should see Neve theme status, active as shown in the image.
You can now visit your website and the look has to be different now.
All themes come with a couple of demos ready to use, and you can select the one you like the most, and import it. You must know that, when you import a demo, it will also import all medias such as images with it.
So I do not suggest you import demos since I believe it is better to create your website from scratch.
How to import:
Appearance > Neve Options > See demos > Select the demo you like the most > click on import demo
The very first step after installing any WordPress theme is to check the theme settings (not WordPress settings) and set up everything the way you want it to be.
You will find different options using different themes. Some are more advanced, while some have several essential tools. But in general, the first step you should consider after theme installation is this part.
Now, let’s look at the settings of our theme, Neve, and see what the areas we can edit or improve are.
Before we get to the logo section, there is something important you should know about the images you would like to use for your website. To increase the speed of your website, you must be very careful with the sizes of your pictures.
After you prepare the images you need, you should compress them before uploading them on your website. To do so you can use a very handy FREE tool whose name is Tiny PNG.
TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!
The next important task I wanted to point out is to use the right keywords in the images you use. It will help your website to rank better in SEO (search engines like Google). If you know nothing about SEO, it may sound a bit complicated. Let’s learn more about it in an example.
Let’s say you want to create a blog post about fashion and clothes. The words that will help search engines find your blog post are called keywords. in your post you may want to use keywords like:
Now, when you want to upload an image, rename it and use some of these keywords inside the name as well.
To upload your logo, you have to go :
Appearance > Neve options > Upload logo
On the next page, you will see a panel on the left side of your screen the same as the image here. Even though it was supposed to be just for the logo but we also have the site title as well.
Take a look at the image here and the explanation for each number.
1. Here you can upload a logo for your website which will appear at the top-left side of your website’s header. Simply click on “select logo” and upload the logo I prepared for you or your own design.
2. Here you can write the name of your website, which will appear in search engines and at the top of the browsers usually.
The tagline is just a short description that you can provide in a couple of words.
3. At the bottom of this panel, there is an other Icon you can select, which will appear at the top of the browser before the name of your website/page.
Finally after upload it should look like the images shown below.
In this section, you can change the font style, size, and typography of your website or some specific type of text like headlines.
During the first step, you can select a general font family for your website. My suggestion is to use “Roboto” since it is the font style Google use on their website as well, or if you are familiar with font styles, select the one you believe is suitable.
Under it as you can see there are different headline types and you can make changes for each. Even there is an option for other devices to make sure everything looks excellent and responsive.
The next thing we need to talk about is to create a header for your website. Select header and on the next page you will see a short tutorial how to edit your header.
At the bottom of screen there is a place to add and edit your header as shown in the image.
The number 1 inside the image is what you have as a header right now. Right now we only have a logo and menu which by hovering mouse and dragging, you can move their places or change their sizes.
Number 2 is the top header where you can have a secondary menu or call to action button.
Number 3 is the bottom header where you can also have additional elements as well.
In the image below you can see some of the changes I made just to show you how it may look:
To add new elements to the header, just click on the blue plus sign, and a popup will appear and you can select the elements you like to have.
You can only use each of these elements once. Let’s select a secondary menu for the top right side of your header. When you select the “secondary menu” the settings will appear at the left panel. Here you have the abilities to change the background color, font style and other features.
I suggest not to use the bottom header, only and only if you really need to. The main reason is because, the website’s header will get very thick and on other devices won’t look good and understandable.
If you would like to use html but you have no knowledge, it is still okay. Below I have added two pages which will give your more info regarding this issue. Example:
<p style=”color: red;”>This is just a text</p>
This is just a text
The footer section is almost similar to the header section, so again, select footer, and on the next page, at the bottom of the screen, you will see the footer editor. Now you are able to add the elements you like to the footer, but the items are a bit different from the header section.
Here you have footer one to four and footer menu. The way you should use it is to decide how many columns you would like to have on your footer. For example, if you just want to have 2 columns, then only use footer one and footer two.
Inside each column, you have the ability to add some other items, which are known as widgets. Using them is pretty simple and understandable, but later in the widget section, we will get back to this topic and learn more about it.
Below you can see just an example of what I have made as a simple sample footer with three columns.
As I mentioned before, different WordPress themes have different color settings. As you can see in the image here, the setting is pretty simple.
You can select colors for links, link hover, text color, and background colors. About background color, you should know that the color you select here will be applied on all pages, but if you go to each page and change the background color from there, it will be overridden by the page setting for each page.
To make your work easier, there is a website that helps you to find the colors that are in good harmony with each other.
You can even lock some of the primary colors that you want to have and see which colors will be a great match.
During this part, we will mostly focus on the layout of pages connected to blogs. How the main page (the page that shows your blog posts, not home page) should look like, how each post should look like, would you like to have a sidebar, and much more. Below you can see some of the settings regarding layouts. Editing is very simple and you can decide how better it fits your website.
Here we have 4 main section which are:
The next two sections which you see in the theme settings, which are “Blog layouts” and “Content/Sidebar,” are the same options we talked about in the previous part.
So that was all about the theme settings available here, and as I mentioned before, in other themes you will face with a different types of configurations, it can be more or less, but the whole concept will remain the same. According to the practice we had here together, you can understand how you should set the setting for any theme on your own.
Here we should learn more about a section which we already have been there a couple of times, but didn’t focus on it. Some of the theme settings exist here, plus other important configuration which you may need. So please go to:
Appearance > Customise
As you can see in the image here, there are 11 tabs which some of them we have already seen before. So let’s start from the top:
View PRO Features: The other options provided in the paid version of the theme.
Buttons: This is a new setting that hasn’t talked about it before, but later we are going to learn more about a tool which makes it much easier to work with and create better buttons. We can skip this part as well.
Menus: Here is the part where you can add pages to your menu in the header, or create other menus for other parts such as the top header, footer, and so on.
Widgets: Are elements that you can add to an object like a sidebar. The main place to work with and edit widgets are under appearance > widgets, where we will take a look soon.
Homepage Settings: The important part which I receive many questions from students, that how we can change the homepage to other pages we like. When you select this option, on the next page it will ask you if you want to show the latest post (which I don’t recommend, even you just want to do blogging), or want to show a static page.
Select a static page and then it will ask you to select a page since we haven’t created any page there is just a sample page. Select the sample page and later we will edit that page according to our needs.
Additional CSS: Finally, if you want to add some additional CSS code you can add them here that will affect every part of your website.
It is time to create our first page, but before that, we need to learn about some of the tools that will make your work much easier. When you click on pages from the menu on the left, you see the list of the pages you have, with some additional info and controls.
Click on sample page so we can edit and prepare it for our home page.
As I mentioned above there are several tools you need to learn more about before we create our home page. WordPress by default use a page builder name “Gutenberg” which some people like and use it. But I believe it is a bit hard to understand and use this tool, and it is not just me, you can look at the reviews of this tool yourself in the image below.
It’s up to you if you like to use this tool and by default when you go to edit a page you have to use this tool. But because I want to teach you the easiest and powerful ways, we are going to use other tools here.
So before editing the page, let’s click on plugins from the menu on the left and select add new.
If you don’t know what plugins are, they are mini apps that you can install on your WordPress and use them. The same way you install app on your phone.
Using plugins you can almost do anything you have in your mind very fast and easy.
So when you get to the add plugin page, by default it shows some featured plugins, which one of them is “Classic Editor”. If you don’t see it, search for the same name in the search bar.
As you can see, not only the reviews are good but also over 5 million people are using this plugin. Click on Install and then click on activate. Now go back to pages and select sample page.
Now everything look different. The first thing you see here is the term “Sample Page” writen as you can see in the image below. THat is the name of your page. Under it is the link of your page. Since we selected this page as our home page, you can not change the link address of your page but normally on other pages you can edit it.
Under it you can see the texts that exist and are visible on our home page at the moment.
On the right side of the screen we have several windows that each include some specific information. The first one is the general info about your page.
At the bottom of the right column in edit page you can see a window about feature image. This is the image visible when you share the link of a webpage. If you don’t upload any image, it will use the first image in your page.
As we go forward we will practice over and over all the topics we talk about here, so don’t worry if they seem a bit confusing at the moment. But it is important to practice with me along the way.
Elementor is one of the top editors available for WordPress, extremely easy to work with and available FREE, but some features are paid. Along the course we are going to learn and practice to create pages, posts, custom header and footer with this plugin since it is easy.
To install it, please go back to plugins > add new and search for “Elementor”, or use the link below:
After installation is complete, you will see that the elementor has been added to the column on the left side of the screen. If you go back to the edit page, you will see that a button appeared under the page URL setting.
First of all change the name of your page, to something which is the best fit for your home page, also remove everything written in the text area. From the right window, you can also select “No sidebar” and “Disable title” since we don’t need to have them inside the home page. Click on update and after that, click on the button “edit with elementor”.
On the next page, on the left side of the screen, you will see a window that includes all the elements and settings you need to build your page.
You can drag and drop every element you want from the window to the page. Before learning more about elements, let’s talk about containers which are the location for showing elements.
In the middle of the screen, there is a pink plus sign, and when you click on it, you will see different types of containers where you can show different elements inside each one.
By selecting the structure you like, a container will appear on your screen. Now you can drag and drop the elements you want inside the container.
When you import and element, on the left window, new details will appear which at the top starts with 3 main sections: Content, Style and Advanced. These settings are almost similar for all the elements and by learning one you can get good at all.
Since this topic need tons of information and practice, you can follow my instructions inside the video lecture of the course.
It is very important to make your website responsive to all devices, meaning every element on your website must look right and fine on desktop, laptop, tablet and mobile. As you can see in the first image, there is a setting that let you see how your webpage would look like in different devices. The setting is under the elementor control window at the left side of the screen.
And the way you can edit your elements in different devices is to click on the desktop icon in front of some elements like size and the change the value according to your situation.
Beside functionality which we will learn more about in the website optimization section, it is essential to have good looking designs. That is why in this part I am going to introduce several platforms that will help you in this field.
Some of these tools will inspire you to improve your designs and some other will provide useful materials.
Dribbble is a self-promotion and networking platform for digital designers. It serves as a design portfolio platform, one of the largest platforms for designers to share their work online.
Behance is a social media platform owned by Adobe which aims “to showcase and discover creative work”. Users can sign up to Behance and build profiles consisting of projects.
There are several platforms that will help you to gather all the media you need for your designs. You can use the artwork and images from these websites for free.
Also There is a website that give you the ability to edit and design artworks you need, even if you are not a designer or don’t know how to use complicated designing software.
Use Canva’s drag-and-drop feature and layouts to design, share and print business cards, logos, presentations and …
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free photos.
Free stock photos you can use everywhere. Free for commercial use No attribution required. Enjoy high quality images.
Over 5 millions free vectors, photos and icons. Exclusive graphic resources that you need for your projects.
Click on the button below to download the resources to create the ClickFunnels landing page.
Creating posts on WordPress is exactly similar as creating a page with only some small differences. When you create a new post, before going to elementor editor page, there are some options on the right sidebar.
Categories and tags are mostly useful to search and find the right post. If you are planning to create a lot of posts on different topics, it is very important to add tags and categories. These two options also have other effects. Search engines will recognise them and it will help your posts to rank higher in search engines.
Widgets are an other type of elements you can use to create some specific type of containers such as footer and sidebar. Depending the the type of your theme, you can find other containers as well. In our theme here we only have 5 which are:
On the left side of the screen there are different objects that you can add to each of these containers according to your need and edit them. All you have to do, is to drag and drop them in the container, then each of these elements has their own settings.
There are some plugins that can add widget elements to this list and provide what you need.
Click on the button below to download the resources to create the ClickFunnels landing page.
WordPress plugins are apps that allow you to add new features and functionality to your WordPress website. Exactly the same way as apps do for your smartphone.
Some of these plugins are free and some are paid, and during the course we will practice some of them that are very important and useful.
But first let’s learn more about plugins and how to find which ones are a better choice for our website.
There are several essential points you need to pay attention before installing any plugin on your website. These steps are critical since avoiding them can cause massive problems on your site later.
Always before installing any plugin, take a look at the reviews and make sure it is above 4 star.
The number of active installation should be high, in proportion of reviews. Some plugins have good reviews, but there aren’t many people using it.
Try to use plugins that are regularly getting updated, since in programming world everything changes so fast and there are tons of bugs and errors.
Some plugins are not compatible with the theme you are using and installing them may create issues for your website.
It is time to learn more about some professional and important plugins for your WordPress website. Some of these plugins are free, some are paid, and some are both. I will introduce each of them and show you how to master them.
The old school editor of WordPress which I believe it is more understandable comparing to the new Gutenberg.
A very handy plugin which help you duplicate almost everything, from pages, posts to the smallest stuff on WordPress.
Very powerful and simple page builder plugins for WordPress. You can create advanced pages even though it is not a complicated tool.
Additional cool elements that can become very useful while creating a page, post or header/footer using Elementor plugin.
Elementor Pro include this service which let you create custom header and footer, but if you are using Elementor free, this plugin is good.
This plugin is required if you want to use the previous plugin to create costume header and footer using Elementor page builder.
Use this plugin to increase the loading speed of your website by optimizing, compressing images and cleaning caches.
Increase the speed of loading your website by compressing coding files and images. Some of the services are similar with the previous plugin.
Avery complete and advanced tool that let you do all your email marketing for your business on your own WordPress dashboard.
A very handy and powerful tool that let you improve the setting for page/post to be able to rank higher in search engines.
A very popular plugin for those who want to have products on their websites and sell different types of products.
Using this plugin you can create cool and advanced sliders for different places of your website. Professional easy to work with.
A great free plugin that creates a member signing up system on your website with all required pages and very easy to handle.
Professional plugin for member system but paid. If you have the budget, use this plugin since it is much more complete.