Elementor Tutorial: Building an Acabado Style Homepage

by Josh Koop | Last Updated: October 27, 2020
As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete disclaimer information for more details.

For many people who are looking to add in specific features to the homepage they are limited as they are mostly hacky theme edits which have to be redone on each theme update. My goal over the next week is to build in replacements for the pages which will allow you to use Elementor with Acabado to make tweaks in the way the homepage presents information.

This will be a series though where I will be rebuilding the pages and providing the templates to allow anyone to download and install them. Of note the homepage requires Elementor Pro due to the posts widget not being available in the free version.

If you are interested in using this template please help me out by clicking on this link when you purchase Elementor Pro as it is my affiliate link and helps me out with this time I spend not working on my own niche sites.

For those who already own Elementor Pro please download the template(s) here and install, set this page as your static homepage in the reading settings and you will be ready to customize it right away.

How To Use This Template

The template is built with a lean towards the traditional Acabado homepage and was built because there was a want and need from the community to be able to replace the homepage with a more functional homepage.

The template uses the standard Acabado header and footer so it is only a main content replace of the homepage, this made it easier to let anyone load it and start making changes immediately.

Please note that you now load the ability to change things from the [ Acabado Homepage ] area in the Acabado Settings. This is because that will only update that original homepage which you can always switch to by putting the homepage back to the [ home ] slug page.

Importing A Template

You will need to create a page in your website and name it [ Elementor Home ] for example, though you can name it anything but [ home ] as you want the slug to be different. Once created you will want to [ Edit with Elementor ].

You will want to click on the folder icon in the middle of the edit page which is templates.

Click the Folder To Add Template
Click the Folder To Add Template

Then you will want to click on the upward arrow in the top right for upload a template (from the download above)

Then you will want to select the file you downloaded from above. Once you complete the import you will see it in the list similar to below:

Click Insert

You will want to click that [ Insert ] button to add it to the page.

Click [ Yes ] to the import warning as it will overwrite everything on the page.

You are now ready to proceed to the below to understand the elements built in the template.

The Sections Of the Elementor Homepage

Well what looks like a page when rendered to the website visitors is really multiple elements all mixed together and ordered so they present a set of aligned content for the user.

I broke this up into 4 primary sections to mimic the standard Acabado theme homepage: The hero section, the featured tiles section, the recent posts section, and the sidebar section. In addition since this is an Elementor page you can always re-organize these elements or add new ones.

The Hero Element

With the hero section in Elementor you will need to edit the page to make your changes but this allows much more flexibility as your image no longer is stuck being 1200×400. Elementor allows for much more customization while maintaining the original look and feel.

New Elementor-Based Homepage for Acabado
New Elementor-Based Homepage for Acabado

As you can see from the Image you have a heading for your call to action button which are both fully able to be edited to your needs on your website. If you don’t want it on your site you can just as easily delete the added section and go without!

This was more a element I set in place to allow you to add should you choose as most of the Acabado sites I see don’t utilize this often, if it would help to have a template with each mix pre-filled in with demo content please just comment below and I will work to fix this and upload additional templates.

These are spots for Featured Tiles to be built
These are spots for Featured Tiles to be built

I didn’t build it out as the space will stay empty if they aren’t filled in and was more a placeholder should someone choose they wanted to add in a featured tile array, Elementor can do up to 5 columns so this is something which will depend on each unique site need.

The Recent Posts and Sidebar Elements

These share a split column element on the template as this is what allows for a 70/30 split of space in the same row, then for the recent posts section Elementor (Free) doesn’t have the posts element which had me stuck until I added Elementor Pro.

Yes I do know there is a large and vast array of “free” plugins which may have posts options in them but I use only the best supported plugins to maintain site security and if you intend for this to be a business then the investment in Elementor Pro is a very justified expense.

The Element which contains the Posts and Sidebar

As you can see the build was intentional to maintain the exact look and feel of Acabado but to allow for some freedom in modifying, shifting, and adding more content into the layout.

For Example If you wanted to add on a contact form you could do it just below the hero, in the featured tiles or below them, after the posts or into the sidebar with ease.

This flexibility will help you to have a better control on your homepage while giving you the things people have wanted to add.

The Bottom Element (Free Space)

As with all Elementor pages you are free to add onto the page and make it as long as you want, I would think if you were to run WooCommerce on your Acabado site (see this post for how) you could show most popular products sold.

If you aren’t running a store it could be a place for you to put an email subscription call to action, or a Instagram feed, or maybe a YouTube welcome video.

The Downsides?

Anytime you run a pagebuilder like Elementor you will get speed hits, since that is a core selling point to Acabado this could be a negative for you depending on your overall belief that PageSpeed scores actually impact your rankings, though this has been shown to be false in almost all testing done by SEOs.

Raising Scores and Performance

If you are in Project 24 and are signed up with Ezoic at our low barrier of entry at the 1k-2k pageviews then you have access to the Site Speed Accelerator. For members of Project 24 this tool is FREE, if not signed up click here to join as the cost for the course is a huge savings versus $30 a month.

This would allow the site speed accelerator to help manage the caching and would get your pagespeed into the 80-90s range while giving you the flexibility on the front end.

If not a member and not interested in the freebies and benefits then you can go with my primary favorite caching plugin WP Rocket. I like WP Rocket as it is simple to setup and they respond to support questions and issues very fast.

Final Thoughts

This was a concept and a thought that I will probably turn into a video to help people understand how the page works and how they can change or manage the elements.

I would love to hear in the comments what you think about this and if it could be helpful to you and if there was parts you would like to see specifically.

The next page I will be rebuilding is the static (blog) page from the same reading area in the settings. After this I plan to build out an About Me template which helps everyone fill in the about needs for their site.

After this I will move into a resources page or maybe a landing page, I would love to hear in the comments what people are most interested in!

I love technology, I have plenty of technical side experience but never really thought of blogging as a way to earn an income. With everything that has gone on in the last couple years and the instability of the job markets I started to learn how to blog and build affiliate niche sites to add more income channels to give me the chance to break free from the financial chains that bind me and find real freedom!