Blog Post Layout for Gutenberg & Elementor

created: 06/12/2019
latest update: 04/10/2020
by: Codevibrant
codevibrant.com/
email: info@codevibrant.com

Introduction

Blog Post Layouts is a powerful Premium WordPress plugin that lets you modify layouts for your blog posts. It comes with multiple archive layout types: Grid, List and Masonry. There are 5 distinct variations of each type that will suit your website designs preferences and requirements. With this plugin, you can also sort design elements in preferrable layouts to match your taste. You can easily customize typography options for block title, post title, content and others. Plus you can also add custom typography as you prefer.The best part about this plugin is that it lets you re-order your WordPress posts in ascending and descending order based on publish date, title and id. It also gives you control over the number of posts to display in homepage.Blog Post Layouts is totally compatible with Gutenberg and works perfectly with Elementor Page Builder as well. Apart from that, it features custom post type support, set content length, google fonts, category select option and so on.Our documentation gives all the necessary detailed information to get you started. It provides an elaborated overview on plugin features, how to use those features and how to troubleshoot errors.

Plugin Installation

Buy Blog Post Layouts from codecanyon.net and save the downloaded plugin zip file on your hard drive.
Blog Post Layouts plugin in a zip file.
Go to Dashboard >> Appearance >> Plugins >> Add New.
Click on Upload Plugin button at the top and browse the blog-post-layouts.zip file from the extracted/unzipped in your computer file location.
Click on Install and then activate the plugin.
Click on Dashboard >> Blog Post Layouts for further setup.

Compatible with Gutenberg Editor and Elementor PageBuilder.
Archive your default posts.
Supports Custom Post Type.
Multiple archive layout types ( Grid, List and Masonry )
Each layout with 5 different variations
Multiple Archive Columns ( upto 5 columns )
Category Select option - display posts from specific category.
Element Sorting Option in preferrable layout only( Thumbnail, Title, Content, Meta, Button ). Select the element order with your choice and design.
OrderBy and Order Options - display your posts in descending, ascending manner w.r.t to post date, title and id.
Post Count Option - number of posts to display
Set content length option.
Show/Hide option for meta, content.
Show/Hide post margin option.
Show/Hide icon for meta and button.
Color options.
Enable/Disable custom typography option.
Flexible Typography option available for Block title, Post title, Content, Meta, Button
Numerous google font variations.

Gutenberg is a WordPress new default editor that focuses on block-based approach. To get you started with Gutenberg, checkout Gutenberg guide for beginners to be armed to the teeth when you begin.

This plugin is specially designed for WordPress version 5 and above. Hence, if you are using any old version below 5 then please download and activate Gutenberg plugin. You can also update your WordPress site.

Once, you have finished installation and activation of Blog Post Layout Plugin, It's time to create your first template.

Go to WordPress dashboard and click on Blog Post Layout from the panel.
Next, go to dashboard tab. Then scroll down and click on Create first Template.
Click on the plus icon and search blog post layouts block.
You'll see CV grid post layout, CV list post layout and mansonry post layout.
Choose any one prefferd post layout.
Publish the post to save the changes.

Configure Basic Settings

You can manage

First, enter the block title name under the box title. If you add the block title, you can get block title layout and Text Align.
Next, choose the post type from available option.
Select the preffered catregory from drop down option to display category wise post.
Then choose the number of post that you want to display at a time on your site.
Slide show/hide option to display content.
Then choose the content type from drop down option.
Manage the content length.
Enter the button lable text on the box.

Configure Query Settings

display your posts in descending, ascending manner w.r.t to post date, title and id.
Click on show/hide option to display meta date such as date, author, and category.
Click on show/hide option to display category count.
Selelct the number of category count that you want to display at a time on your site.
Click on show/hide option to display tags count.
Then manage the number of tags count that you want to display at a time on your site.
Click on show/hide option to display numbers of comments.
Then, click on Save & Publish button.

Configure Fallback Image

Fallback Image is similar to Features Image. By configuring fallback image feature, you can set a branded image to be used when no other image is found. In case there is neither other image nor fallback image is associated then plugin's default image will be used in place of fallback image.

Click on set fallback image. Then choose a image from media liabrary or upload one from your computer.
Finally click on select.

Configure Advanced

From here, you can customize the layouts and typography by adding additional CSS.

Configure Layouts Settings

This option allows you to choose 5 different layouts and customize it as you see fit.

Select a suitable layout from available option under the List Layout Variations.
Click on the show/hide option to display post fromat icon, and post meta before icon respectively.
Again, click on the show/hide option to display read more button icon.
Manage number of block colum to add from drop down option.
Click on show/hide option to allow a margin(big space) between each single posts.

Configure Element Sorting

Available in Grid & Mansonry Layout only

You can sort element by simply drag and dropping the element in the preffered order .

Configure Typography settings

This option gives you complete controll over customization of typography of your blog posts.

Click on the enable/disable button to obtain default settings from plugin tyography.
Next choose Block Title tab to customize the typography.
Font Family- set block title font family from available google fonts option.
Font Weight- set font weight of block title from drop down option.
Font Size- Set block title font size in the box.
Font Style- choose any one font style from normal, italic or oblique options.
Text Transformation- Select lowercase, uppercase or capitalize the text transformation.
Text Decoration- Select block title text decoration.
Font Color- set title font color.
Border Color- set block title boder color.
Line Height- set block title line height.

Similarly, you can configure the typography of other given component like Post title, Content/ Excerpt, Meta and Button.

Configure Advanced

From here, you can customize the layouts and typography by adding additional CSS.

Blog Post Layouts plugin is compatible with the page builder. So, we recommend to install and activate the Elementor Plugin.

How to use Blog Post layouts using Elementor?

After successfully installation the plugin, you need to create your page. First, Navigate to WordPress Dashboard >> Pages >> Add New. The default page editor form will open then you need to switch to the Elementor page editor using Edit with the Elementor button.

At the left side of the screen - you can see the default elements along with Blog Post Layout Elements. Go to the Blog Post Layouts Elements and Choose the available layout (CV Grid Post Layout, List Post Layout and Masonry Post Layout) and drag in the "Drag widget Here" area.

Now, you can manage the content, style, or use advanced styling options from the left column.

Configure General Settings

From the content section, you can manage the General settings, Query Settings and Fallback Image of the layouts.

First, enter the block title name under the box title.
Next, choose the post type from available option.
Select the preffered catregory from drop down option to display category wise post.
Then choose the number of post that you want to display at a time on your site.
Slide show/hide option to display content.
Then choose the content type from drop down option.
Manage the content length.
Enter the button lable text on the box.