wordpress

Hestia & Elementor: How To Edit Or Recreate Hestia With A Page-builder

Rate this post



When using the Hestia theme (Download Hestia: on your WordPress website, you can edit the content on the front page with a page builder like Elementor only if the About section is enabled.

Get Elementor:

More of that, if using the Pro version of the theme
(Download Hestia PRO:
you can clone the entire page with the same page-builder, section by section.

1. Clone Hestia PRO by using shortcodes in ELEMENTOR ? 0:46

The easiest way to clone the entire front page with Elementor is to use these shortcodes. You can easily copy and paste them from the documentation which you can access in the description box below.

Hestia PRO documentation:

First, create a new page with the Page Builder Full-Width layout and click on Edit with Elementor. This will open Elementor’s editor area.

Click on Add new section and select the full-width layout.

In the newly added section add a new Shortcode widget.
Here you need to enter one of the shortcodes we have for each section.

Use the contact section on an individual contact page, for example, the team section on the about us page and so on. You can use them as many times as you want.

For extra CSS tweaks, to have all the sections full width, with no paddings you need to make some small changes in Elementor for each section and column.

So, go to the Layout tab over here and set the Content Width to full, then head over to the Advanced tab and set the Margin and Padding to zero for the column Element Style. Do this for each section or just simply duplicate the first one and then change the shortcode within.

2. Headings & Subheadings ? 2:16

To add headings, you can use Elementor’s Heading widget with h2 and h5 heading types, or to have the exact same look as the original, as fast as possible, you can also paste the following code in the “HTML Editor” widget.

In the CSS Classes field of the widget’s Advanced settings, put this class.

To change the content in these sections you still need to go back to the customizer.

If you are willing to work hard and create a page from scratch using Elementor, you can clone the entire page starting with the big title section.

3. Clone the Big Title section with Elementor ? 2:50

I will give you some basic instructions for this section, then you can use your own imagination if you carefully follow what I do, to clone Hestia, section by section.

Let’s add a new page and edit that page with Elementor.
Click yes on this pop-up and then make sure the peg builder full-width layout is selected over here.

Add a new section with a single column and set its height to a minimum of 80%. Head over to the style tab and upload an image as the background of this section. The background overlay should be black with some opacity you can adjust over here.

Next, search for the heading element and drag it over to the middle of the section, align the text to the middle of your screen and change its color to white.

Add the inner section element below the heading and drag over a button. Align the button to the right, duplicate it, drag over the copy into the right column and align the button to the left this time.

One more thing left for this section is the subtitle which you can easily make by duplicating the title and adjusting its size, like so. Easy, right?

I think you already know what’s next and you have all the clues on how to clone the services section, the about us section and so on. If so, I invite you to give it a try. If you have questions, leave a comment below along with a link to your live website. I will be happy to see it.

Make sure your theme is up to date and follow us here on YouTube to find out more about WordPress. See you in the next video.

Website →
WordPress Articles →
Facebook →

ThemeIsle is the go-to source for the High-Quality WordPress Themes (both free & premium), and plugins every website owner needs. We’re passioned about all things WordPress, but we’re not afraid to tackle other web related subjects. Our goal is to give those websites easy-to-use themes and designs that can be managed by everyone.

source

Mazi

Mazi has nine years of web development experience with the past five years spent honing his skills with WordPress plugins and themes. He's an expert in WooCommerce and is the author of the Simple Sales Tax plugin, a popular sales tax compliance solution for WooCommerce. Brett understands the importance of excellent communication, prides himself on producing high-quality code, and is comfortable working solo or as part of a team.

Leave a Reply

Your email address will not be published.

Check Also
Close
Back to top button