Creating a Custom Blog Post Layout/template

Creating a blog post template/layout is now available using Creativo Elements and Elementor Page Builder.

In the past the blog post layout was predefined in the theme core files, without being able to create your own layouts – unless you were using a child theme and hard coded your own blog post layout/template.

Since version 7.7.4.4 of Creativo and version 1.3 of Creativo Elements, Blog Post layouts can be created in an easy and visual way. Make sure you are using the latest version of the Creativo theme and Creativo Elements plugin. To update Creativo to the latest version see this tutorial, to update the Creativo Elements to the latest version see this tutorial.

Here is a video tutorial on how to create your own custom layout for Blog Posts.

To create a Blog Post template/layout navigate to your WordPress admin dashboard.

Make sure you have at least one Blog post created. See this tutorial on how to create a WordPress Blog Post.

Next navigate to Creativo Elements -> Blog Posts Layouts

Click on Add New button.

In the new window, enter a descriptive title for your Blog Post Layout, e.g: My Post Layout.

Click the Publish button and wait for the Elementor Editor to load.

Once the Elementor Editor has loaded, we can now start building our own layout.

Let’s add a new Section first. Click on the Add New Section button.

Choose a 2 Column layout, since we want to also display a Sidebar.

Drag the Left Column to the right to increase its width, close to around 70%.

Click on the Widget Panel button.

Collapse the Basic widget section and make sure the Creativo Post Layout section is expanded.

Now we can start adding our Blog Post elements.

The available elements for Blog Post layout/template include:

• the Featured Image – this element will output the Featured Image(s) set for your posts. If your post has more than one Featured Image set, it will automatically display a gallery of all the Featured Images.
• the Post Author – this element will only display the name of the author with an optional icon.
• the Post Author Bio – this element will display the Author Image as well as the Biography set under Users -> All Users -> your current user -> Biography area.
• the Post Categories – this element will display the categories where the post is filed in, with an optional icon.
• the Post Comments – this element will display the number of comments of the post, with an optional icon.
• the Post Comment Form – this element will display the Comment Form.
• the Post Content – this element will output the actual content that was created for the post.
• the Post Date – this element will display the date of the post with an optional icon.
• the Post Navigation – this element will display the navigation of the post, Previous and Next options.
• the Related Posts – this element will output the related posts.
• the Post Share – this element will output a selection of social media icons which will allow the visitors to share the post on the corresponding social media platforms.
• the Post Tags – this element will output the tags set for the post.
• the Post Title – this element will output the actual title set for the post.

Let’s create a Blog Post Layout with the following format:

1. Featured Image
2. Post Title
3. Post Date / Post Author / Post Categories / Post Comments
4. Post Content
5. Share Post
6. Tags
7. Author
8. Post Navigation
9. Related Posts
10. Comment Form

Drag the Featured Image and Post Title elements from the Widget Panel on the Left Column.

With the Featured Image element selected, navigate to General -> Image Links to -> choose Original Image.

Next add the Post Date / Post Author / Post Categories / Post Comments.

To make these 4 elements appear on the same line, click on each one of them and under Advanced Tab -> Width -> choose Inline. Also on the Advanced tab -> Margin, uncheck the Link values together option and for the Right field, enter 20 – this will create a 20px margin to the right of the element.

Do this step for all 4 elements (post date, post author, post categories and post comments)

Next add the Post Content element.

To create some spacing between the Post Content and the Post Date / Post Author / Post Categories / Post Comments elements, click on the Post Content element and navigate to the Advanced tab. Uncheck the Link values together option and enter 40 for the Margin top.

After the Post Content, add the Share Post element.

Next add the Tags element, followed by the Author, Post Navigation elements as well as Related Posts and Comment Form.

Each element has its own unique customization options which will allow you to create astonishing layouts by using drag and drop and simple mouse click actions.

Let’s add a sidebar.

Adding a Sidebar to our new Post Layout

Click on the Widget Panel again.

In the search field start typing: Sidebar

Find the Sidebar element and drag it to the right Column.

In the Choose Sidebar -> select the sidebar you want to use. The recommended option is Blog Sidebar but if you created your own custom sidebars, go ahead and use the one you need.

The new Sidebar should appear in place.

We now have our own custom post layout which will be used for our posts.

Hit the Update button located in the bottom left area of your screen. Now the newly created post layout will be used for our posts.

Using Display Settings to choose where the new Post Layout will be used

Click on the Settings cog icon, located in the top left corner of your screen.

Expand the Display Settings section.

Under Display Location, by default the All Posts option will be selected – this means our new post layout will be used for all our posts.

However we might want to create several post layouts and assign them individually.

That’s what the Display Location can do for us: it allows us to specify where the layouts we create will be used.

Available options area:

• All Posts – will use the new post layout for all Posts.
• All Posts in Selected Category – will use the new post layout only for the selected Categories.
• All Posts of Selected Author – will use the new post layout only for the selected Authors.
• Selected Posts Only – will use the new post layout only for the selected Posts.

Play around with the settings and experiment with the Display Locations you want to use. For instance: you may want to use a certain layout for Tech categories and a different layout for Home Design category.