Powerful Theme Builder
By using the Global Theme Builder, need the Elementor pro version for this feature, users can benefit from a variety of features and options available. But what does this ‘theme builder’ have to do with building a blog?
First, the Global Theme Builder offers an array of templates to choose from, allowing you to quickly select a layout and customize it without having to start from scratch. Additionally, Elementor provides you with access to powerful design tools like color palettes and typography libraries so that you can create a custom look and feel for your blog template. It’s important to note here that wherever you see the word ‘container’ (whether in a screenshot or typed in the article here), you can replace that with ‘sections’ if you are using sections, it’s the exact same process.
Building a Blog Template For Elementor and WordPress
Navigate To Elementor 'Theme Builder'
The method that I’ll go through here is through Elementor (pro) and doesn’t use any other 3rd party plugins for styling. I try and avoid unnecessary plugins if possible, they lead to space being taken up and potential conflicts of future compatibility.
The main choice here is going to be whether or not you want to save time at a later date. You could of course create a regular post inside Elementor/Wordpress but this post focuses more on the template (future reuse of the design).
To Begin, let’s navigate over to the ‘theme builder’ section, go to templates (from inside your wordpress main dashboard, it’s along the left hand side) and then ‘theme builder’ in the new dropdown.
choose template location
After clicking on theme builder here, the new window will open and you’ll see a list of options along the left hand side. These are parts of the website that you can build out with Elementor and its templates.
The next step is to select the portion of the website that you’d like to create a template for (in this case, single post). Clicking the ‘single post’ item from inside the theme builder is different from clicking on ‘create single post’ from the WordPress dashboard side of things. The single post here allows you to set what’s called ‘conditions’ when you are done designing and apply it to a specific blog post category, all blog posts and more.
Add New Single Post Template
After clicking on the ‘single post’ option, click on the button in the top right of the screen, ‘add new.’ A new window will reload and give you three options (to add in blocks, pages or something from my templates).
Now if you want to save time and add in a fully-designed page from list of options (full library comes with Elementor pro), you certainly can but I would mention that there are going to be some future limitations if you go this route.
Why To Avoid Full Pre-made Page Templates
The pages and blocks are designed already with custom text, fonts, color settings and more. While this is a great way to save time and get a page up fast this might not be best because these pre-made designs will almost certainly not match the rest of your site’s fonts and other settings. This can actually be a tedious task if you then have to go back and reverse the settings to default to match your site.
How To Create an Elementor Blog Post Template (from scratch)
So, what we’ll do here is end up closing out of this window and starting from scratch. We’ll just add in a few basics to get you going. The six elements that you’ll need (for this demo) are:
- Post Title
- Excerpt
- Post Content
- Button Element
- 2x Sections (or containers)
creating the first section
What I’ve done to start here is a single column layout and from here I will change two settings. The first setting that I’ll change is the background color, I’ll change it to a blue but feel free to make it whatever color you wish.
To change the background color to blue, go to the style settings and make sure you change the background color where it says ‘color.’ Screenshot attached for the exact settings used. Next, we’re going to change the minimum height of the section/container. The reason for this is to be a bit more responsive and allow the header and post excerpt to be the first thing seen.
What I’ve done to start here is a single column layout and from here I will change two settings. The first I’ll change is the background color, I’ll change it to a blue. It’s important to note here that wherever you see the word ‘container’ (whether in a screenshot or typed in the article here), you can replace that with sections if you are using sections, it’s the exact same process.
To change the background color to blue, go to the style settings and make sure you change the background color where it says ‘color.’ Screenshot attached for the exact settings used. Next, we’re going to change the minimum height of the section/container. The reason for this is to be a bit more responsive and allow the header and post excerpt to be the first thing seen.
changing the minimum height
In the screenshot attached, I’ve gone to the ‘layout’ settings for the section/container and then changed the minimum height to “50 VH.” The VH is a sneaky setting that (in my opinion) makes life SO much easier when working with Elementor. It’s essentially a ‘vertical height’ measurement that will increase or decrease to whatever size screen the user is visiting on. Keep in mind that VH is in percentages so 50 VH means that it will take up 50% of the user’s screen.
All other settings are kept at the default under layout. You can also set this to minimum pixels but I’m biased lately towards percentages.
adding in titles and excerpts
Next what we’ll do is add in 3/4 elements to our post template. These will be the post title, excerpt and a contact button. It’s important that when you search ‘post title’ in the elementor widgets, you are choosing the “Post Title” and not a regular title widget. The post title will be dynamic so you never have to change it within each post. Remember, we’re creating a template to save time later. The post title will automatically be whatever you name your new wordpress posts (after this template is complete of course).
important preview note
If you add in the post title, post excerpt & button and you see content from a previous post (or maybe don’t see anything at all that’s okay! If you see content from another blog post that you’ve previously created (not a template but an actual post inside of WordPress) it’s just the preview settings inside Elementor.
You can change these preview settings by clicking on the gear icon in the bottom left of your screen. This brings up the single post settings where you’ll find two dropdowns underneath ‘preview settings.’ The first option allows you to choose where you want the preview to come from (in this case I’ve chosen post as I have a few blog posts already created).
The second dropdown is where, if you already have a post lined up, you can preview it within the new template. Start by typing in the post name inside the second dropdown and then hit apply and preview when you find it. The post template that you’re creating will automatically refresh with the new preview content.
aligning content to middle of section
If you’ve followed the above steps, you’ll end up with something like the screenshot below. Mine is previewing a blog post that I previously created but if you don’t have any content or posts yet that’s okay! In this case, if you don’t have anything previewing, what you’ll see is essentially a blank page.
For those of you that don’t have any content showing or just blank elements because this is your first blog post, a good way to dobule check that you’re not crazy is to look at the ‘navigator’ sidepanel along the right hand side of the page. You should have a section (or container) which when expanded, click on the dropdown arrow, you will see three elements. Your post title, post excerpt and button in the list.
What we want to do here is to align the content to the middle of the blue section, right now it’s way to far at the top of the page. To do this, click on the section/container (the blue one in this instance) and then navigate to the layout tab.
You’ll find a setting (screenshot attached below) for ‘justify content,’ choose the option that shows the content in the middle of the section (it’s the second from the left). If you’re using sections, this is what the view will look like, it’s the same process just named something different. Instead of ‘justify,’ the setting is called ‘vertical align.’ (not sure why they chose something different for containers vs. sections but oh well.
(instructions for middle-aligning containers)
(instructions for middle-aligning sections
Dont see the sidebar?
If you don’t have the sidebar navigator enabled, click on the 2nd icon from the left (at the bottom left hand side of your screen). The sidebar will pop up and if you want to hide it, just click the icon again.
adding your style
Now that you’ve aligned the content to the middle of the section/container, feel free to change the fonts, colors and button text. For color settings, go to the ‘style’ tab of whatever element you’d like to change.
To change the button text and link, navigate to the button element and then the ‘content’ tab where you can set the text and internal or external link.
adding post content
Now that you’ve added in the dynamic header section that will dynamically change each time you create a new blog post (and don’t forget to add in the excerpt to your blog post each time), let’s focus on the content section of the post.
To do this we’ll first start by adding in another section/container. Just like the last time, hit that plus button icon to add in a new row underneath your top section.
This is the second to last step if you want to launch fast. For the purposes of this tutorial, I’ve changed the background color to red (so that you can visibly see the differences in sections). What I recommend for you here is to keep the background color white or blank (i.e. no need to change any settings here).
Find the ‘post content’ widget and drag and drop it into the newly created section/container. Now since I already have a post written (chosen from the preview section above), there will be content that shows up as soon as I drop the post content widget in.
Don’t panic if you don’t see anything as this is the foundation for all your blog templates. I would never keep this background red but again I just wanted to show the difference in sections. The navigator shows only 4 widgets and 2 containers/sections used. It does not need to be overcomplicated. In future blog posts I’ll add in advanced stylings, sidebars and more but this will be enough to get you going for now (all other questions welcome).
Publishing and Setting Your Blog Post Conditions (Final Step)
The final step here is to set your blog post conditions. Once you are happy with the layout of your new elementor blog template, click on the ‘publish’ button at the bottom left of your screen. A new screen will appear that asks you to add a condition. Go ahead and click on this ‘add condition’ button.
A new dropdown will appear and you can choose which type of content you want to apply this template to. For this tutorial we’ve focused on the blog post layout design but it’s really the same process for any page, category, menu header design — all made possible through the ‘theme builder’ template in Elementor pro.
If you want to set your new blog post template to show on every single blog post that you create in the future, click on the dropdown and then select ‘posts’ from within. Be sure to click ‘save & close’ after selecting your template location. And that’s it, you’ve completed a blog post template from the theme builder!
Setting Elementor Blog Post Excerpts
If you’re looking to set your excerpt for your blog post, this is done on an individual-post basis. To start, navigate to the post name from within the WordPress dashboard.
All Posts –> Individual Name of Post
Important: Here are two ways to edit the individual post excerpt in case you get lost. Once you do find the appropriate placement, I might recommend no more than a short paragraph introducing the post. Remember, it’s a short preview/excerpt (not the whole article).
From Inside WordPress
If you’ve followed the two steps above to navigate your post, from within the WordPress dashboard, click on the post name in blue (do not click on edit with Elementor). You’ll be brought to the WordPress side of the post (non-Elementor). There will be a menu along the right hand side of the screen with many dropdowns and options. In the screenshot attached I’ve highlighted, in green, the excerpt dropdown.
Most likely all of these dropdowns will be expanded but this is where you’ll want to scroll down to.
From Inside an Elementor Blog Post
If you’ve created your blog post inside Elementor and haven’t left this screen yet. Go to post settings by clicking on the gear icon at the very bottom left of your screen. A new settings list will appear that is named ‘post settings.’ You will see the ‘excerpt’ area here where you can insert your text.
