Do you want to create your own WordPress website?
Do you know, you don’t need any coding to make a website?
Yes, you can design your website visually using drag and drop elements.
Just Imagine… all you need to do is drag and drop, and it’s done!
Yup, with the amazing website builder Elementor, it is quite possible to create a website like this,
Out of the thousands of plugins in the WordPress directory, Elementor is the 5th most popular plugin of all time.
That’s because it has made WordPress website creation insanely easy by using simple drag and drop elements.
In this article, we will look at,
But if you want to start with website creation right away, here is a step-by-step procedure on how you can create a website with Elementor,
Elementor is a beginner-friendly drag-and-drop page builder widely used in WordPress websites. It is widely popular due to its visual editor that lets you create dynamic websites quickly.
Elementor is the number one option when it comes to page builders on WordPress, as it provides blocks to design your website the way you want it, including provisions to change the margins and borders.
Here are a couple of reasons why Elementor is really special among all the WordPress plugins,
With that brief introduction to Elementor, let’s start to create a website with Elementor.
We will create a website using Elementor in three simple steps,
The first step in launching your website with Elementor is to get Domain and Hosting for your website. And what better hosting provider to choose than the fastest hosting provider in India?
We are talking about WebSpaceKit, which’s creating a buzz lately in the hosting market. WebSpaceKit provides insane website speed and also comes at affordable pricing. That’s why we have chosen WebSpaceKit to host our WordPress website.
So, let’s go to WebSpaceKit to get Domain and Hosting for our website.
WebSpacekit comes with four different Managed WordPress hosting plans, namely, Starter, Pro, Business, and Geek, with the Starter plan starting at just ₹199/month.
After carefully analysing the four different plans, you can choose the hosting plan of your choice and click Choose.
Once chosen, you will be redirected to the Choose a Domain page.
Here, you can either,
We will choose to register a new domain name. Now, enter the domain name of your choice and click Check. This will check whether the domain name you’ve entered is available or not.
Here, we are going to enter ‘courserazor’ as the domain name for the website.
If the domain name you have chosen is available, you can click on Continue to add the domain name to the cart.
As you can see, the domain name ‘courserazor’ is available and can be used for our website.
Now that we have chosen both Hosting and Domain for our website, it’s time to choose the billing cycle of your plan.
Here, you have the option to choose either 12 months, or 24 months, or 36 months.
The number of months denotes how long you would subscribe to the hosting plan. Notice how the total price depends on the plan length.
So, you can choose one of the three plan lengths and click Continue.
If you are thinking long term, it is recommended to subscribe for 24 months or even 36 months. So, we are going with 24 months for our website.
Once you have selected the billing cycle of your choice, review the domain name and hosting plan you have chosen in the Review & Checkout section.
Once reviewed, scroll down to create your own WebSpaceKit account.
Enter the Billing Details to create an account.
Once you have entered billings details, it’s time to enter Payment Method and Payment Details.
And once it’s done, click Order Now to complete the purchase.
And as the order is confirmed, click Continue to Client Area.
So, we have successfully purchased Domain and Hosting for our website from WebSpaceKit. As you can notice in the dashboard, our domain is shown as ACTIVE.
As it says, the website will now be live on the internet.
Let’s see how it looks, shall we?
All you need to do is enter the website’s address in the browser, and we will have our very own website launched on the Internet.
Now that we have launched our very own WordPress website, it’s time to set up Elementor on the site. But before that, we need to,
And then, Install Elementor.
To make any changes, we first need to log in to our WordPress website and access the WordPress dashboard.
To login, add ‘/login’ before searching with the website URL. This opens up the WordPress login page.
Here, you can enter the credentials to access your WordPress dashboard.
And don’t you worry about those credentials.
WebSpaceKit would have already sent an email including all your hosting account information.
So, you can log in using these credentials and access the WordPress dashboard.
And we are in! WordPress dashboard is like the control station from where you can manage your entire website.
So, it’s time to install a theme.
A theme for a WordPress website acts as a layer that sets the look and feel of your entire website. While you can change your theme at any point in time, it’s always good practice to choose the right theme at the beginning and stick to it.
With thousands of free and paid themes available in WordPress, we need to install a theme that’s compatible with Elementor. And, as Elementor is quite compatible with a lot of themes, you may wonder which one to choose.
To help you with that, we have made a list of Free Elementor Themes that are well compatible with Elementor. We also have a download option to download the particular theme right away.
Of the list, we are going with the Astra theme to create a website with Elementor.
Astra is a popular, lightweight theme that’s widely used by WordPress websites across the world. With customizable features, Astra is the best theme available for beginners to create a website.
Also, Astra is fully compatible with Elementor! This means that using Astra and Elementor together, you can literally design any and every part of your website.
So, let’s go to our Themes page, and select Astra. Click Get Astra.
Now the Astra theme will be downloaded to your system.
Now that we have the theme, it’s time to install it on our website.
From the dashboard, go to Appearance and select Themes.
In the Themes section, click Add New.
Now in the Add Themes section, we can upload the downloaded Astra theme by clicking on Upload Theme.
You can drag and drop the downloaded zip file to upload the Astra theme.
After the Astra theme is uploaded, click Install Now.
Once installed, click Activate to activate the Astra theme on your website.
With the Astra theme activated, our website gets a new look. Do check it by refreshing the site.
With a theme installed, it’s finally time to bring in Elementor!
Just like the Astra theme, let’s download Elementor from the Free Elementor Themes page.
Select Elementor page builder, and click Get Elementor.
The Elementor plugin will be downloaded as a zip file on your system.
With Elementor downloaded on the system, it’s time to install Elementor on the website.
From the WordPress dashboard, go to Plugins, and click Add New.
In the Add Plugins section, click Upload Plugin.
And upload the downloaded Elementor file to the website.
Once the file is uploaded, click Install Now.
Then click Activate Plugin to activate Elementor on the website.
Hurray! We have successfully activated Elementor on the website.
Now it’s time to build your dream website with Elementor!
Using Elementor, we will,
To create a page using Elementor, let’s go to Pages, and click Add New.
Here, you can enter the title of the page. And click Edit with Elementor.
Here, in the Elementor dashboard, you can create a page in two ways,
The best thing about Elementor is that it comes with built-in design templates that get you started in no time.
Click the Library icon to open up the built-in blocks and templates in Elementor.
In the Pages section, select the page template that you would like to have on your website.
Once you are fixed on a particular page template, click Insert.
As you can see, the entire page template will now be inserted into our website.
If you wish to apply the changes to your website, click Publish at the bottom left of the screen.
Now the changes will be reflected on your website.
When we import such default templates, we have sample template content inserted on our website.
So we need to change the default content and insert our own text.
In the same way, we can also change the content for the default button that comes with the template.
We can also change the default images that come with the template we imported onto the website.
Once changes are done, click Update for the changes to reflect on the website.
And refresh your website to look at the changes you have just made.
Now if you want to remove a particular section from the page template you just imported, select that section and click on the x symbol at the top.
Just like removing an existing section from the page, it’s quite easy to add a new section too.
To add a new section, click on the Elementor library button and select Blocks.
Blocks are the separate sections that make an entire page on the website.
You will find the different types of blocks on the Blocks page that you can import on the website.
Say you want to insert a Contact Form Blocks, search for Contact.
With the different types of contact form blocks displayed, select the one you like.
And if you like the block you selected and want to import it to your website, click Insert.
Now that particular section will be inserted into your website.
Like we did before, you can make changes to the default text that comes with the block.
Once done, click Update, and refresh your website for the changes to be reflected.
This is how you can create a page using the ready-made designs that are available within the Elementor library.
Now, what if you want to create a website with Elementor from scratch?
If you prefer to start from scratch, you can use the drag and drop blocks of Elementor to create a page.
To start, click on + New and select Page.
Here, enter the title of your page and click Edit with Elementor.
Inside Elementor, to create a page from scratch, click on the + icon.
This will display the different available layouts you can create for your new page, like a single layout, double-column layout, and so on.
Each structure can be used for different purposes, for example, you can use a triple column layout for a pricing section as shown in the image.
So, select the structure you want on the page.
Once the structure is selected, an empty layout will be created on the page.
To include elements on the layout, click + inside that particular layout.
This will open up the Elements section with different blocks on the right-side panel of Elementor.
With these many blocks available to be included inside the Elements section, let’s start by adding a Heading to our page.
To add a heading, drag the Heading block from the right-side panel of Elementor and drop it in the desired section.
Now that we have got the heading inserted, select it and change the default text that comes with it.
In the same way, you can also enter some text right below the heading.
Drag and drop the Text Editor block instead of the heading block, and change the text according to your needs.
Let’s also add a button right below the text by dragging and dropping a Button block onto the page.
We can change the text that appears on the button too.
This way, we can also add an Image to bring everything together.
Drag and drop the Image button onto the page.
By doing so, a blank image will be inserted on the page.
To add your image in the place of the sample image, click Choose Image on the right-side panel of Elementor.
Here, you can upload a new image of your choice from the system.
With the image in place, we have just created a brand new section of our page from scratch.
In the same way, we can create other sections and create an entirely new page from scratch. Once done, we can hit Publish to make the section live on the website.
Now we know how to create a page using Elementor,
You can either use the ready-made Elementor designs or create a page from scratch using Elementor blocks.
Either way, you would have created an amazing website with Elementor like this,
However, when you open a new window and enter our website URL, it still shows a blank page.
This is because we haven’t set the page we created as the home page. Now, let’s see how to set the Elementor page as the Homepage.
To set the page we created as the home page, go to Dashboard,
And in Settings, select Reading.
This opens up the Reading settings.
Here, in the Your homepage displays section, Your latest posts will be checked by default.
This means that your latest blog posts will be displayed on your homepage. However, we want to set the page we created as our homepage.
To do that, check A static page and then select the page we created as the Homepage.
Now click Save Changes to save the page we created as the homepage.
Click refresh on the website to notice that the homepage has been changed to the page we have just created.
Even though we created pages for the website, we still don’t have a Menu on the website.
It’s because we can’t customize the header section using the general Elementor plugin. Then, how can we add a menu to the website?
A Menu acts as a way to access the pages on the website. It serves as a navigational tool for all the pages available on the website.
As we discussed, the header section, which includes the menu, cannot be customized by the general Elementor plugin. So, we need to use the default WordPress customization area.
To access that, click Customize.
This will open up the WordPress customization area.
Since we need to work on creating a menu, click Menus.
In the Menus section, click Create New Menu to create a menu for the website.
In the next section, give the menu a name, like ‘Main Menu’. This will help us identify this particular menu in case of more menus in the future.
Then, you also need to choose the Menu Location, either Primary or Footer menu.
Primary Menu is the menu that appears at the top in the header section.
So, let’s choose Primary Menu and click Next.
Now it’s time to add items to the menu. Click Add Items.
Here, you can find the pages we have created using Elementor. These pages can be added as items to the menu.
So, from the list of pages, click on those you want to add to the menu.
Click on Add Items again. This will add the items we selected to the menu.
And that is how we can create a Menu on the website.
Just like how we created a menu, we can also change the Logo that’s part of the header section too.
To change the logo, click on the blue icon next to the logo.
And click Select Logo.
Now all you need to do is drag and drop the logo from your system.
And the logo will be changed!
And that is how you can customize the header section of the website, like creating a menu and changing the logo. Once you are satisfied with the changes, click Publish.
If you refresh the website, you can notice that a menu is created and the logo is changed in the header section.
And that is how you can create a website with Elementor!
But wait, we have more for you! (Including a workaround of how to customize the header section using Elementor)
As a bonus part of this article, we will also cover,
While we can edit any section of our website, we can’t customize the header section using the general Elementor plugin. The same applies to the Footer section too.
However, it is quite possible to solve this problem by installing another plugin that works along with the general Elementor plugin. (They even have the same name, sort of!)
So, we can Customize Header & Footer section using Elementor in three steps,
First, let’s install the new plugin, Elementor – Header, Footer & Blocks Template.
Go to Plugins from the dashboard, and click Add New.
In the Add Plugins section, search for the plugin, Elementor – Header, Footer & Blocks Template.
In the search results, select the plugin and click Install Now to install the plugin.
Once installed, click Activate to activate the plugin on the website.
Now we have just installed this plugin that’s going to work along with our general Elementor plugin, and help us customize the header and footer of the website.
With the plugins in space, you first need to Create a Header block.
To do that, go to Appearance and click Header Footer & Blocks.
Then click Add New. This will open up the Add New Header, Footer or Block section.
In this section, first, enter the title of the block. As we are creating a header block, let’s name it Header.
After that, enter the required set of options for the block. This includes,
Once done, click Publish to create the header block.
Now, to customize the header section, click Edit with Elementor.
Now in the Elementor editing section, we can create a custom header just like working on any other section of the page.
In the same way, we can create a footer template and customize it using Elementor.
So that is how you can create custom Header and Footer using the Elementor – Header, Footer & Blocks Template plugin.
We also have a separate video tutorial on the same for you to follow along.
Now, what if you don’t want to create a Header and Footer from scratch?
Well, you can make use of Elementor Pro.
Elementor Pro comes with a built-in set of designs for the header and footer that you can import onto the website.
So, just like creating a page, you can easily create Header and Footer by dragging and dropping the built-in designs that come with Elementor Pro.
To purchase Elementor Pro, click here.
A listing page is where the various products are displayed one after the other based on a particular category. We can create a listing page for products using Elementor in three steps,
Before we get into Elementor to create a separate listing page, we need to have a custom post type created that will make it easy for us to create the listing page.
Once products are created, we can add custom post fields to the created product pages with the Elementor Pro plugin.
This can be done using the simple drag and drop feature that comes with the Elementor plugin.
Once you have added custom fields, we can create the final listing page for all the products.
To create one, we can easily import one of the built-in listing page designs available in the Elementor library. After that, all we need to do is customize the design, which we are quite familiar with at this point!
And then choose where to display the template.
If that sounds a bit overwhelming, we have made a dedicated tutorial on How to Create a Listing Page on the website.
The 404 Not Found page is quite synonymous with all Internet users. While every website experiences it at one time or the other, you can stand out from the crowd by having a custom 404 page.
And it is quite simple to create your own 404 page using Elementor Pro. All you need to do is,
To create a new template, go to Templates, select Theme Builder, and click Add New.
Then you can choose to import a built-in 404 page design or decide to build one from scratch. Either way, it’s quite easy to achieve it with Elementor Pro.
Once done with the design changes, you can click Publish to make the custom 404 page live on the Internet.
A Mega Menu is a large expandable menu where all the products/links will be displayed at one time.
By having a mega menu, your website visitors will be able to look at all the products on your website at once, instead of the traditional drop-down menu.
We can build a Mega menu with Elementor in two simple steps,
First, we need to install a premium plugin, JetMenu. This plugin will help us in creating the Mega menu on the website.
Once installed, all we need to do is assign the Mega menu to one of the already existing items in the menu. Now the selected item will trigger the Mega menu that appears on the website.
After assigning the mega menu to a particular menu item, we can easily customize and design the mega menu within Elementor.
Be it a professional photographer or a photo enthusiast who wants his/her work to be put out professionally, an own photography website is the way to go.
WordPress by itself has made it easy even for non-technical photographers to create their own online portfolio. And WordPress combined with Elementor is a dream come true!
While Elementor is amazing to start with, Elementor Pro takes it up a notch with all its features.
Ideal for photographers, the Elementor Pro version has a Pro gallery with a unique Gallery layout.
With such amazing features, you can create a photography website using this step-by-step procedure,
With photography-specific themes, and plugins like Elementor Pro, it has never been easier to Create your own Photography website.
With the ever-growing number of Internet users, it’s no wonder how important an eCommerce website can be for a business. An eCommerce business opens up the products to a wide variety of audiences across the globe and eventually results in more traffic and revenue.
61% of consumers plan on spending more time online post-pandemic than they did before it.
Source
Elementor seems to understand this better, as they have plenty of options as a page builder in building the eCommerce website.
As we already discussed, whenever you import a starter template onto the website, it comes with the default text and images. With Elementor, you can customize the text, images and create your own eCommerce website, listing out your products.
To get started right away, here is a basic outline of how you can create an eCommerce website using Elementor,
For a much detailed tutorial on how Elementor helps in the process of eCommerce website creation, check our video.
And that is it!
That’s the list of bonuses we thought will help you add the necessary features to the website.
If there is one thing that’s obvious with all the bonus sections, it’s that the Elementor Pro plugin is extremely useful to create professional features on the website.
So, it’s now time to look at the various plans and pricing of the Pro version of Elementor.
Elementor, along with its free version, provides 5 different paid plans, starting from Essential at $49/year for 1 Pro website, up to the most advanced plan Agency at $999/year for 1000 Pro websites, rightly suited for enterprises.
And no matter what paid plan you choose, Elementor provides you with around 100 Basic & Pro widgets.
Pro widgets include professional features like Slides, Flip Box, Testimonial Carousel, etc.
Also, irrespective of the plans, Elementor provides more than 300 built-in templates to build the website.
If that isn’t enough reason to upgrade to an Elementor Pro plan, here are a couple more reasons to get Elementor Pro.
Elementor, with its free version, comes with endless design opportunities across the beginner-friendly visual editor. Though it is ideal for beginner websites, as you scale up, you would need much more widgets and design capabilities to keep up with the competition.
And that’s where Elementor Pro comes in with these amazing features,
With more than 5 million installations, the Elementor Website Builder is one of the most popular choices to build WordPress websites. The idea of creating websites of professional standards only by using drag and drop makes Elementor immensely popular.
If you are a beginner on a budget or a business that needs to get the job done, Elementor will serve the purpose and make it easy for you.
And with Elementor Pro comes some of the unbelievable features that will elevate your website to the next level, making you stand out from the competition.
Install and Make use of this amazing Website Builder Plugin!
Be it an Elementor website, or any other website for that matter, here are a few things you can do to speed up the website,
Absolutely! Elementor is a dream come true for beginners as all you need to do is drag and drop blocks to design the website. One needs no sort of technical knowledge to create a website using Elementor and moreover, it comes packed with amazing features that are more than necessary for a website.
While Elementor in its free version is capable of endless design opportunities, it’s not quite sufficient when your website scales up. While Elementor is great to start with, Elementor Pro comes with professional tools that speed up the workflow of website design.
Check out the amazing features that come along with the Pro version of Elementor.
Yes! Astra is one of the WordPress themes that is entirely compatible with the Elementor website builder plugin. With Astra and Elementor combined, there is literally no limit to the features you can include on the website.
Yes. Most people are sceptical about whether using a page builder will impact the website speed. It’s not true with Elementor. It is one of the best in business that lets you create visually appealing website designs that catch the attention of the viewers.
In fact, such amazing website designs will only increase the organic traffic to your website.
While there are several amazing widgets that come with the Pro version of Elementor, there are three amazing widgets that stand out,
Do you want to learn WordPress to build any kind of website you want? Then this is the only course you need to take.
View CourseSEO isn't as difficult as you might think. Learn how to start growing organic traffic to your website with our easy to follow video .
Watch VideoSign up for our WordPress Course today!
Add a Comment
Leave a Comment