Home > Website Building Tips > How To Build Blog With Elementor

How To Build Blog With Elementor

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.

Start Your Website NOW! Elementor Black Friday Up to 25% OFF!

Create a Blog with Elementor

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

elementor general settings image

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.

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.

elementor header and footer imge

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.

creating header and footer image

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.

creating post template image

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.

add new section image

To proceed with editing our single post template, we need some real content from our posts to be displayed on 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

dynamic image

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.

preview of section background image

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.

adjusting sections for blog elementor image

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 feature 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.

Title Widget
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.

how to add margin to elementor section image

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.

editing post info image

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.

add post content image

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.

adding author to blog posts image

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.

elementor social share image

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.

elementor sidebar image

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

display posts image

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

elementor blog post design image

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.

Also Read
How to Use Elementor Page Builder

How Do I Access Elementor In WordPress

How Do I Use WordPress Elementor Editor

How To Use Elementor Templates in WordPress

What Is Wp Elementor and What It Is Used for?

How To Use Elementor Plugin in WordPress

Start Your Website NOW! Get SiteGround Managed WordPress Web Hosting. Only for 5.99 €/mo!

Follow the steps below to create a website:

1.Domain Name and Web Hosting. 2.Install WordPress and Theme.

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.

1. Open your web browser and type "siteground.com" as shown below. Then click "Web Hosting":

2. Choose the hosting plan you prefer and click "GET PLAN".

3. Type in the website name you wish and click "Proceed".

4. Type in your account information and client information in the appropriate fields.

5. Enter your purchase information and payment details.

6. Review your total, tick the "I confirm" box and then click on "Pay Now" button.

If you have done it successfully, this is what you should see:

1.Domain Name and Web Hosting. 2.Install WordPress and Theme.

Step 2: Install WordPress and an appropriate visual theme for your website.

1. Log in to your account and click the "Websites" tab. Then click the "COMPLETE" button as shown below.

2. Select "Start a New Website" and then select "Wordpress". For an online store, select "WooCommerce"

3. Type your new separate WordPress login e-mail and password and click "CONTINUE"

4. Click on "FINISH" if you don't want to add any offered features.

5. Type "yoursitename.com/wp-admin/" in your browser and log-in using the WordPress e-mail and password you created earlier.

6. On the welcome screen, click on "START NOW".

7. Choose a theme that suits your site type and your preferences and requirements and click "SELECT" as shown.

8. To install the theme, click "CONFIRM" as shown.

9. Add any free optional extras to your WordPress and click "COMPLETE" as shown.

10. When you see the "Your site is ready" screen, click on "GO TO DASHBOARD".

11. Congratulations on your new site! This is your WordPress dashboard! You can use it to customize your site and change media in it. If you want to change the theme again, click "Appearance->Themes" and click the "Add New" button, as shown.

You can preview and switch to another theme by clickig "Preview" and "Install" buttons respectively.

In this FAQ’s we are going to introduce you to the most common and frequently asked questions about websites and their creation. Let’s get started!

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 that, you need to choose:
The Best Hosting Provider.
The Most Suitable Wordpress Theme.
WordPress Website Builders/Plugins

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:

Jimbo, etc.

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

The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
The <br> element means a line passing.

HTML Element Example

<h1> This is Heading </h1>
</br> - Line Passing
<p> This is Paragraph </p>

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)


Leave a Comment

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.