What is the outcome? #
This system shows you how to create a blog post template. The reason we want a blog page template is so that all blog pages look the same and use a similar structure. It ensures that the sidebar, call-to-action buttons, font sizes, image sizes etc are consistent across the blog posts.
Before you start #
In order to carry out this task successfully you must have the following completed:
- Website set up
- Elementor set up
- Create a blog post
Process #
Create A New Blog Post Template #
- From the wordpress dashboard click Templates > Theme Builder
- Once in the theme builder on the left side click Single Post
- Click the Add New button
Design The Blog Post Template #
- When you first create a Single Post page you will be prompted to select a template. Don’t do this.
- Click the X in the corner to close. (If you would like to import a template see below)
- Create a new section with two columns
- Add 30 padding to each coulmn
- Set the columns to a 66% / 33% split
- In left column add:
- Post Title
- Featured Image
- Post Content
- Add a section at the bottom with call to action buttons
- In right column (sidebar) add:
- Posts
- Adjust settings so single card layout.
- Exclude the current post
- Posts
- Check layout on tablet and mobile
Publish The Blog Post Template #
- Click Publish
- Click Add Condition
- Select Posts, All
- Click Save & Close
- Navigate to a post and check it works
Exporting & Importing A Template #
Importing a template can be an efficient way to bypass the blog post design stage of this process. If there is another website or page with a blog layout similar to what you want to use you can export that template and then import it.
- To export a template, log in to the site, navigate to the blog post template and edit with elementor
- At the bottom next to the UPDATE button there is an upward facing arrow, click that, then click Save as Template
- Enter a template name – EG: Blog Post Template
- Press Save
- You will now see a list of all templates, including the new one you created.
- Click the three dots (…) on the right of your newly created template
- Then click Export
- The file will be downloaded to your computer. – file will be called something like (elementor-2238-2023-03-02.json)
- Navigate back to the new blog post template you are creating.
- To import a template you can either do it when the page first loads, or alternatively where you normally add a new section to the page there is a folder icon that says Add Template
- You will see a list of your templates. To import the one you downloaded clcik the circle with an upward arrow at the top right (Import Template)
- It will ask you to import a template into your library.
- Select the .json file
- The new template is now in your list.
- Click Insert.
- Now the template should look the same as the original template.
- Adjust to your liking.