Elementor Page Layouts

Posted onby admin

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.

How to Save, Import, & Export Templates from the Elementor Template Library Last updated on January 26, 2021 Elementor Template Library gives you access to hundreds of designer-made Page layouts and Blocks, all with premium high-end stock images, which you can use freely on your site.

Plugin Installation

Do you want to build your page layout on WordPress in the easiest possible way? Try the FREE Elementor Page Builder for WordPressFollow us on Facebook: https. Create headers using pre-defined layouts or the Header Builder. Choose from 16 pre-defined header layouts or use the Header Builder plugin to make any header you want. You can create different menus for each page. You can also select a custom menu just for mobile devices.

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

Plugin Features

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

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

Configure Basic Settings

You can manage

  1. 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.
  2. Next, choose the post type from available option.
  3. Select the preffered catregory from drop down option to display category wise post.
  4. Then choose the number of post that you want to display at a time on your site.
  5. Slide show/hide option to display content.
  6. Then choose the content type from drop down option.
  7. Manage the content length.
  8. Enter the button lable text on the box.

Configure Query Settings

  1. display your posts in descending, ascending manner w.r.t to post date, title and id.
  2. Click on show/hide option to display meta date such as date, author, and category.
  3. Click on show/hide option to display category count.
  4. Selelct the number of category count that you want to display at a time on your site.
  5. Click on show/hide option to display tags count.
  6. Then manage the number of tags count that you want to display at a time on your site.
  7. Click on show/hide option to display numbers of comments.
  8. 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.

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

Configure Advanced

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

Style Setting

Configure Layouts Settings

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

  1. Select a suitable layout from available option under the List Layout Variations.
  2. Click on the show/hide option to display post fromat icon, and post meta before icon respectively.
  3. Again, click on the show/hide option to display read more button icon.
  4. Manage number of block colum to add from drop down option.
  5. 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.

  1. Click on the enable/disable button to obtain default settings from plugin tyography.
  2. Next choose Block Title tab to customize the typography.
  3. Font Family- set block title font family from available google fonts option.
  4. Font Weight- set font weight of block title from drop down option.
  5. Font Size- Set block title font size in the box.
  6. Font Style- choose any one font style from normal, italic or oblique options.
  7. Text Transformation- Select lowercase, uppercase or capitalize the text transformation.
  8. Text Decoration- Select block title text decoration.
  9. Font Color- set title font color.
  10. Border Color- set block title boder color.
  11. 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.

Elementor

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

Elementor Page Layouts

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.

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

Configure Query Settings

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

Configure Fallback Image

  1. Choose the image from the media library/ Upload the image and display the thumbnail image.

Configure Style Settings

Elementor Page Templates Plugin

From the Style Section, you can manage the Style Setting, Element Sorting and Typography Section.

  1. Choose the Align Option from the avaliable drop-down option.
  2. Similarly, choose the Grid Layout Variations from the avaliable drop-down option.
  3. Click on show/hide option to display Post format icon, Post meta before icon, and Read more button icon.
  4. Choose the Block Column from the avaliable drop-down option.
  5. Click on show/hide option to allow margin between each post.

Configure Element Sorting

  1. You can sort the avaliable elements: Thumnnail, Title, Meta,Content,and Button as you want and display in the page.

Configure Typography Section

  1. Click on show/hide option to Inherit default from plugin typography.

FAQs

1. Is Blog Post Layouts Compatible with Guteberg Editor?

Yes, Blog Post Layouts is fully compatible with Guteberg editor. In fact this plugin is compatible latest WordPress version along with major plugins and themes available in WordPress.

2. Can I manage my content length on blog page?

Yes, this plugin lets you controll content length on blog posts and pages.

3. Can I use Blog Post layout with Elementor Page Editor?

Absolutely, Blog Post Layouts is fully integrated with Elementor Page Editor. You can use this plugin with elementor to design your website with out any problem.

4. Do Blog Post Layouts has any typography option?

Yes, this plugin comes with a highly flexible and customizable typography option. It allows you to

Once again, thank you so much for installing the Blog Post Layouts Plugin. We have designed and developed the most impressive post-layout designs for Gutenberg and Elementor ! If you have any confusions, please free to ask us any questions related to this plugin.

The major reason that has made WordPress the number 1 web development platform in the world is its minimal dependence on coding. It does not matter if you are not a certified programmer, you can still build a website with the help of readymade themes. These pre-fabricated templates have all the necessary pages and features and can be modified extensively. However, there are situations when you require a unique looking appearance for a post or page. In such circumstances, you will have to use coding to get the desired result. Here we are discussing how you can build custom WordPress layouts with Elementor, which is a page building tool. This handy solution will enable you to build a personalized layout without needing to write any code.

What Is Elementor?

Elementor is a block-based page building tool that is available in the form of a plugin. It contains a wide range of pre-built page/ post templates and modules for different content types. You can choose an element and simply drag and drop it on your editing screen. Then you can alter the modules according to your wishes to generate your personalized design. The plugin is available to users since pre-Gutenberg days when the open-source platform did not have a block-based editing tool. It is one of the most popular products in its domain and a prime example of the user-friendly character of WordPress plugin development.

How To Build A Custom Layout With Elementor?

Here is a basic tutorial for beginners to use this convenient tool to create a custom layout.

1. Install The Elementor Pro Plugin

Elementor comes in two versions, a free plugin and a premium variant called the Elementor Pro. We are using the paid alternative as it has the features we need to fulfill our purpose. You will have to purchase the product by visiting its developer website. You will be provided the plugin in the form of a zip file. Log in to your admin dashboard and go to Plugins > Add New. Hit the Upload Plugin tab and then select the zip file. Once the installation is complete, do not forget to activate the tool.

2. Configure The Plugin Settings

After activation, a new option called Elementor will be added to your control panel menu. Locate this option and go to Settings. Here you will see that by default, the tool is enabled for your posts and pages. In case, your interface contains any custom post types, then the plugin can be used with them also by simply checking the relevant boxes. You can also other users to have access to the builder by configuring the settings. Once you have defined all the conditions, move to the next step.

3. Create A New Page Or Post

In order to learn how to build custom WordPress layouts with Elementor, you will have to first create a page or post. In the image given here, we have created a new page by visiting Pages > Add New. You will see an “Edit with Elementor” button right on top of the editing area. Hitting it will launch the builder where you can make all the modifications.

Elementor Page Layouts

4. Select A Template

On the next screen, you will see two options. You can select the “+” icon to create a completely new design. If you choose the other icon as shown in the image given here, then you will be displayed all the pre-built layout options that the plugin contains.

Choosing a readymade template will save you the hassle of creating a design from scratch. You can select a ready-to-use item that will only need to be modified according to your requirements. Hit the Insert link on the design that you want to use for your layout.

5. Modify The Layout

Selecting a template will load it in the editor. When you click on an element of the layout, the corresponding modification settings will be displayed in the left-hand panel.

In order to use Elementor, you will have to understand the hierarchy of sections, columns, and widgets. Sections are similar to blocks and you can add them to your layout. All sections are composed of multiple columns each of which house widgets. You will Section handles on all the elements. You can click on it to define the column structure.

Right-clicking the handle will help you access more options that can be used to edit or delete the section.

Elementor Page Layouts

Hover the cursor over the corner of the section to view the column handle. You can either drag the mouse to define the column width or use the options in the control panel on the left to achieve the same result.

You can add a widget to a column by simply dragging the item and dropping it at the desired location.

This way you can add sliders, images, headings, galleries and numerous other elements to your layout.

6. Save And Publish Your Template

Elementor Page Layout Inspiration

Once you are satisfied with your changes, you can click the eye icon to preview the layout. Then you can hit the Publish button to make your page go live.

Elementor Page Layout


You can also save your custom template for using it again in the future. Simply click the arrow next to the Publish/Update button and choose the “Save as Template” option.

Conclusion

Free Elementor Template Library

You can now easily generate a custom layout with the powerful Elementor page builder plugin. However, the vast range of features in the tool can overwhelm some people. Such users can contact WordPress theme customization experts at HireWPGeeks. The professionals will help them get the desired look with all the requisite features. Raise an inquiry through the contact form, e-mail or listed phone number to get in touch with the experts now.