How To Create A Blog Page With Elementor Widget

For free Elementor user’s, it’s easy to create a blog page with elementor using Master Addons blog widget. You can customize your blog page in various ways. You will get multiple blog variations in some premium WordPress Theme. If you are a pro user of Elementor then there is an element named “posts” widget.

For a professional blogger main blog page structure means a lot. Not only for blogger but also most of the website needs a blog page to publish their updates and news. Blog is the most necessary part of any type of business owner. It helps to reach more audience and explain in detail about your services.

I am going to explain how to create a blog page with elementor pro and using Master Addons free version. First, let me explain about the post’s element from Elementor Pro and then will explain Master Addons. I will show you how to add some specific blog posts or latest blog posts as carousel in the homepage like many professional websites. At the end of this post, you will get a comparison between these two elements.

Note: Two videos are added inside this post. Creating a Blog Page using Elementor Pro and Create a blog page with elementor using Master Addons. Scroll down to check the video and comparison between Post's vs Blog widget.

Create a blog page with Elementor Pro widget

If you have Elementor Pro installed in your WordPress website, you will see pro elements like the following screenshot. Just drag the “Post’s” element inside your page section.

Create Blog page with Elementor Pro Posts Widget

By default, you will see 3 column style having 6 posts. It’s the default classic skin. There are two more skin available named cards, and full content. You can select min 1 column to max 6 columns and input an unlimited number inside the posts per page option.

Select the proper image position (select none if you don’t want to showcase the featured image), size, ratio for the featured image.

Define the HTML title tag, Excerpt length, Metadata, and Customize Read more text. That’s all you will get inside the layout tab.

Elementor Pro Posts default layout

Within the content tab, there are two more options available. Query, and Pagination – query helps to select the post type and filter which posts exactly you want to showcase within your blog page. Set which type of pagination you prefer for the blog post page. Three different types of pagination available, Numbers, Previous/Next, and Numbers + Previous/Next.

Query and Pagination from Elementor Pro Blog post widget

Now it’s time to check the style system of Post’s Element. Within the style tab, there are four options available Layout, Box, Image, and content. Change columns and Rows gap, Alignment from the layout option. The box option stands for border and padding. Wisely choose the border color and radius for better presentation. From the image option, you can define the border-radius for the featured image and set spacing too. The content is the last option of style. This option will help you to change the typography, color, spacing for title, meta, excerpt, and read more text.

Elementor Pro posts element style

Create a blog page with Elementor using Master Addons Plugin

Make sure you have installed Master Addons plugin on your website to work with “Ma Blog” element for creating a blog page. Take a look at the following screenshot and you will see the blog element and download the free version from Master Addons WordPress page.

Master Addons blog element to create a blog page

Just drag the blog element and you will see something like the following shoots. By default the blog layout is classic, Blog type is grid layout, and the number of columns is four.

Default blog layout of Master Addons

Blog Style you can create: There is a total of 7 unique variations available for Grid, Card, and List layout. In total, you can create 21 different variations of your blog page except masonry style. You can arrange this layout by playing with Blog layout, Blog type, and Cards Layout. Take a look at the following gif screenshot to get a perfect sense of variation. Check the demo from the following links.

Blog style variation by Master Addons

More General Display Options: There are post order system, Column selection, Post format icon, Post meta separator system, Title HTML tag selector, Post type selection, Raw & column spacing, Content alignment, Posts per page, and pagination enable button. Not only change the variation by one click but also you can creatively customize your blog page using all of these options.

Thumbnail Settings: Enable or disable the post’s thumb image and select the perfect image size using size and fit option. You can mention custom height for your featured image too. From thumbnail position, select where you want to place the thumb image in your blog page. The amazing system is hover animation, Color Effect, and Thumbnail shape. Here you will get 26 amazing hover animation effects, 16 color effects, and 5 different shapes.

Enjoy the following gif image. I have applied Hover animation – Hang, Color effect – Flushing, and Thumbnail Shape – Gradient Bordered.

Thumbnail Settings & Blog post Effects

 

Posts Settings: Control your meta info, excerpt length, Read more text, Show content or Excerpt from this panel. In the following screenshot, I have enabled post title, author avatar, post author name, date, categories, and comment number. Also set 13 as excerpt content length.

Posts settings of Master Addons Plugin

 

Advanced Settings: Exclude specific posts from your blog page. Filter by tag, author and offset post count available inside advanced settings. Some bloggers prefer to open their blog post in a new tab, you can do it from this advanced settings too.

Advanced Settings of Master Blog Widget

Carousel: Sometimes you may need to use this carousel system for the blog post. Within this blog element, you can enable a carousel, set autoplay, and change navigation system (Dots or Arrows). I have seen a lot of websites where people showcase the latest post inside homepage using a carousel. You can use this system to place your latest update on the homepage. Also, you can filter some specific posts using Advanced settings and place the carousel blog post system anywhere. If you don’t put a featured image in a blog post then it will be empty in the blog post carousel like the following gif image.

Carousel option for blog page

[Note: Make sure you have enabled “Load Font Awesome 4 Support” from Elementor Settings. Otherwise, the arrow icon in carousel will not work.]

Load Font Awesome 4 Support in Elementor Settings

Style blog page: In style there is nothing complex. Using this style options, change thumb image overlay color, CSS filters. For title and meta you will get color, Typography, and hover color option. When you navigate content option in style you will see text color, content background color, typography, box background color, box shadow, padding, and content margin option. For the pagination, the typography is available at first. Then there is an option to select normal and hover option. Just customize both option’s color, border, padding wisely to get an amazing output.

Master Addons Blog Style Options

Elementor Pro Post’s VS Master Addons Blog Element

I have compared the general options which are essential to create a proper blog page for any type of website. For example, variation, thumb style, pagination, carousel. Let’s wrap this up and check the following point. Just hover over each text and you will see details via tooltip.

Elementor Pro Post's Element

Free Master Addons Blog Element

Now Choice is yours. Do you prefer to go with the pro version of elementor or at first you want to try master addons plugin to test your blog page layout? Of course, my recommendation will be checking the free version first. You will get some other content elements that will help you to create a blog page with elementor properly. Feel free to comment here or contact us if you face any problem while using Master Addons blog element on your website.

Master Addons Demos

Heading

Animated Headlines
Dual Heading
Gradient Headline

Image

Image Hover Effects
Image Hotspot
Filterable Image Gallery
Image Comparison
Gallery Slider
Advanced Image

Content

Advanced Accordion
Tabs
Toggle Content
Team Member
Team Slider
Infobox
Flipbox
Blog
Timeline
Business Hours
Pricing Table
Restrict Content
Dynamic Table

Special Elements

Call to Action
Tooltip
Progress Bar
Progress Bars
Creative Button
Creative Links
News Ticker
Table of Contents
Current Time
Domain Search
Nav Menu
Search
Blockquote
Counter Up
Countdown Timer

Extensions

Particles
Animated Gradient BG
Reading Progress Bar
Background Slider
Custom CSS
Custom JS
Positioning
Container Extras
Mega Menu
Entrance Animation
Transforms
Rellax
Reveal
Header,Footer,Comment
Display Conditions
Dynamic Tags
Floating Effects
Custom Breakpoints
Post/Page Duplicator
Wrapper Link

Contact Form

Contact Form 7
Ninja Form
WP Forms
Gravity Forms
Caldera Forms
weForms