In this article, we will guide you through the process of How to Create a Blog with Elementor and dive deeper into its features and the way you can customize your design to your preferences. To create a blog with Elementor is now easier than ever before.
Before you start the creation process of your WordPress blog, you should first buy a hosting and a domain name from some hosting provider.
Almost every hosting provider offers a quick and easy way to install WordPress, so using the quick install options will enable you to install your WordPress Blog in a matter of a few minutes.
How To Install Elementor To Your Blog
After your WordPress installation is ready you can start to create your blog with Elementor. To do that, you should first go your Dashboard, click on the Plugins tab, then Add New and write down “Elementor” and then download and install the Elementor plugin. We recommend going for the premium version of the plugin because the free one has some limitations when it comes to its features.
How To Set Elementor’s General Options
Once the Elementor plugin is installed you can start building your blog.
For our tutorial, we will go to ELementor, then Settings, and adjust the general settings of the plugin, by changing the content width to 1250px, and also choosing the proper fonts for our website.
How To Create Header and Footer with Elementor
With Elementor you can easily create your header and footer. To do that go to Elementor, then click on My Templates, and then Header / Footer.
As you can see we’ve created a very simple header including logo and navbar and we also did the same to the footer, using the Elementor’s footer builder.
How To Create a Blog Single Post Template With Elementor
To be able to apply a single post template to any of your posts, you should first publish a few blog posts. Then, go to Elementor and click on the My Templates.
Then you should choose “Single” from the menu, as you want to create a template for your single posts and click on the Add new single.
You will be introduced to a template type box, where you can choose the post type and set write a name for your Single Blog Post.
How To Adjust Single Post Template Width
For our tutorial, we are going to use a full-width size for our post template. To do that, go to the settings icon on the bottom left of your Elementor editor, then on the General settings change the page layout to Elementor Full Width. This will give us the full width of the page while keeping the header and the footer.
To proceed with editing our single post template, we need some real content from our posts to be displayed in our newly created page.
To do that, go to the Preview settings on the left sidebar and you will see that it suggests. You can click apply a preview and if you notice that nothing changes, this is because you haven’t added any Elementor’s widgets to the right section of your site.
How To Add Section Background Image With Elementor
Click on the Add new section and then click on the section settings icon in the middle of the section and then on the section styles on the left click on Background, select background type, and set the image to Dynamic.
However, we will need to adjust the section height to be able to see our image properly. To do that go to the Layout tab on the left, go to the Height options and select Min Height from the drop-down menu.
You can set the height to pixels or viewport percentages.
Then, we need to adjust the positioning of the image. To do that click on the upper Style menu, choose a position, and select Top center from the drop-down menu. We will set the Repeat to No-repeat, because we don’t want our image to be shown over and over again, on the size we are going to select Cover and that will enable us to achieve a very fluent and beautifully looking visual effect.
How To Create The Layout For Your Blog
Once you’ve created the beautiful header part for your blog, you need to start building its body. To do that click on the Add New Section and for our purpose, we will choose the three-column layout. You can drag the width of the sections to adjust it the way you want. We are going to make it 20% width for the left, 60% for the middle, and 20% for the right section.
How To Dynamically Add Blog Posts To Your Page
You probably don’t want to have to edit your page every time you add a new blog post, so for that reason, Elementor offers a featured called post title widget. Just click on the widget menu on the left section of the theme element section and look down for the Post.
Drag it in your middle section and it will display your latest posts.
You might notice that its font is quite different than the one that you are using on your entire website. To change it simply go to Style, and change its typography.
If you want to add some spacing between your header and the titles of your blog posts, you need to set some margin to your section.
Click on it and go to its options and from the left section go to Advanced, and set the bottom margin to 80 for example.
Then, we should drag the Post Info element from the left widgets panel and put it below our previous element. You can edit the post info options by adding or deleting elements from it, so you can leave just the date, the year, and the author for example.
You can also edit the text size, font, and color of the post info widget by clicking on Style –>Text and edit them.
Then, after we’ve already prepared our top part of our blog post page we need to add the content to our page. Simply go to the widget section and look for the post content widget.
Drag it to your page and your content will be displayed. If you want to edit the typography of your blog posts, alignment, or colors, you can do that from the left side of the screen, where you can see all of the available options.
How To Add Author To BlogPosts
Since we’ve added the main content of our page to the middle section, we have to add the author to our left widget.
Just drag the author to your first section and you can adjust all of the Elements options again. You can choose whether you want its picture and name to be displayed, its font, link, active button, and many more options.
How To Display Blog Post Category in Elementor
Then let’s say you want to add the name of the category where the blog post is published. To search for the post info element again and then drag it under your author widget.
You can also edit its options and change the metadata information, switching between the type of the widget and setting it to Terms, and the Taxonomy to Categories. We can adjust the style options as well and center the widget and set some border-radius to our element.
How To Add Social Icons in Elementor
To make our blog post page look even more professional, we need to add some social media sharing buttons to it. With Elementor it is a very easy thing to do and all you have to do is to look for the Share Buttons widget and drag and drop it into your page. We will use it in our left section.
You can also edit the way the social buttons appear and style them uniquely, so they perfectly fit your website.
Creating The Right Sidebar of Your Blog
After you’ve created your left and middle section, all you have to do is to create the content for your right sidebar.
The text on the top we’ve created on this page is just a Heading widget set to H3 and in style, we’ve set the color to be blue, and the font to be Montserrat. Then, under that Heading, we’ve dragged an Elementor form widget to create our subscription form. To create some spacing you can drag a spacing widget under the subscription form, to make your sidebar look more professional.
How To Display Posts In Elementor
To get a simple list of posts, you can look for the Posts widget and drag and drop it where you want it to appear. We decided to add the list under the subscription form and adjust its options. You can customize pretty much everything in the widget, for example, the number of the columns, the posts that are going to be shown, the title, headings, metadata, and even more.
Make sure that you scroll down the element options and exclude the Current post because you don’t want your current post to be listed in the right sidebar while your visitors are already reading it.
Finally, you can adjust the styles from the Style tab and adjust columns gap, rows gap, colors, and alignment.
Create a Blog with Elementor – Final Results
Here is the final result of our Blog page that we’ve successfully built with Elementor. Of course, you can also add even more elements and customizations if you want. It is all up to your preferences.
How to Use Elementor Page Builder
Follow the steps below to create a website:
What do you need before starting a website.
Before starting site setup process, we strongly advise that you complete the following preparation steps:
- Have a clear idea for the site's domain name. For example, good tip is to make it short and with focused keywords.
- Make sure to have an active credit or debit card so that you can make online purchases with it.
- Make sure you prepare a computer that has stable internet connection.
Step 1: Purchase a domain name and web hosting type.
Step 2: Install WordPress and an appropriate visual theme for your website.
FAQ’s How to Create a Website
What is a Website?
A website is mainly made from web pages that contain related content all classified by a unique domain name (A domain name is your website name. It is the address where Internet users can access your website). On a website, you can post contrasting content connected with the sphere of your website.
There are different types of websites, which you can find on the networking space like:
Interesting Fact: The first website uploaded on the internet went live on August 6, 1991.
How Much Does It Cost to Create a Website?
To find out how much it will cost to create a website, firstly you need to have a clear idea about the type of your website. What it is going to be: e-commerce, blog, educational, etc.
After choosing the best hosting provider, it's time for the right theme for your site, and the plugins, then you can estimate how much it will cost to start your website.
Have in mind that if there are FREE web hosting and free WordPress themes available out there.
Do I Need Any Programing Knowledge for Creating a Website?
Probably yes. Creating a website is not an easy task, and it is good to have some programming knowledge if you are considering creating one, BUT there are also alternatives that you can use for creating your website without having any programming knowledge.
One very popular alternative that you can use is to install a responsive multi-purpose WordPress theme like Avada and set drag & drop page buider, which will help you to customize your website at ease.
Can I Create a Website for FREE?
Once upon a time, it was said that everything is possible, so creating a website for free is possible, although it's hard to achieve without any expense.
To start your free website creation you need to find a free WordPress theme like Astra and to install it on free hosting service like OOOWebHost. After you have already hosted your website on the internet you need to install free plugins, which is the most difficult part. It is problematic to find reliable free plugins. There are some free available like Yoast SEO that can do pretty nice work, but most reliable plugins like WPRocket, which are required for the success of your website are not free.
How Long Does It Take to Create a Website?
This is a question that concerns everyone who is considering making a website. The truth is that there is no specific answer to this question and everything depends on the height of your goal. If you are thinking off creating a small blog you can make your website in a day. But if you are considering making a big online shop or something similar you will need to spend a lot more time.
Which Are the Best Platforms for Creating a Website?
The easiest way to create a website is to use a CMS(Content Management System) website builder platforms like WordPress or Joomla. The CMS platforms can help you create and customize your website without having much coding knowledge.
The Most Popular CMS Platforms:
What Is HTML? - Quick Tutorial.
HTML is the standard markup language used in the web pages, with which you can create your own website. Using the base of the HTML and CSS(Cascading Style Sheets - another web language with which you can put style over the HTML fundamental) languages can be very helpful for making little customization changes to your website.
HTML Code Examle
HTML Element Example
What Is Web Hosting
A web hosting service is a type of Internet hosting service that allows individuals and organizations to upload their websites on the internet. There are different types of hosting services like:
- Shared Hosting (Server shared between many users)
- Dedicated Hosting (A dedicated server only for you)
- VPS Hosting (Virtual Private Server)
- Cloud Hosting (Hosting services that are provided to customers via multiple connected servers that comprise a cloud)