How to recreate Hestia PRO frontpage in Elementor with shortcodes

If you are using Hestia PRO and want to add new sections on the front page, you're in the right place.

You first need to install  Elementor Page Builder. Using this page builder, you'll first recreate the current front page. To do that you can use the following shortcodes for each section:

  • Slider: [hestia_slider]
  • Features: [hestia_features]
  • Shop: [hestia_shop]
  • Portfolio: [hestia_portfolio]
  • Team: [hestia_team]
  • Pricing: [hestia_pricing]
  • Testimonials: [hestia_testimonials]
  • Subscribe: [hestia_subscribe]
  • Blog: [hestia_blog]
  • Ribbon: [hestia_ribbon]
  • Contact: [hestia_contact]
  • Clients Bar: [hestia_clients_bar]

Above shortcodes can be used with other builders also such as Divi Builder.  How to create a landing page with Divi builder and Hestia.

Next, we'll show you the step by step process you need to follow.

1. Create a new page with the Template: Page Builder Full Width and click on Edit with Elementor. This will open Elementor's editor area.

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

3. In the newly added section add a new Shortcode widget.

4. Here you need to enter one of the shortcodes we have for each front page section. This is how you can recreate Hestia PRO's custom frontpage in Elementor.

5. 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 like in the pictures below.

6.For this example, we'll also add an extra section, with a google map. For this, we'll use the Google Maps Plugin by Intergeo. After installing the plugin, you need to add a new map, and this way you will have a shortcode that you can use in the same way you used the shortcodes for the front page sections.

This is the final result. You can download the template from here. To find out how you import this template, check this doc.

Add Headings and Sub Headings:

To add headings, you can use Elementor's Heading widget with h2 and h5 heading types. or to have the exact same look, you can also paste the following code in "HTML Editor" widget:

<div class="row">
	<div class="col-md-8 col-md-offset-2 hestia-features-title-area">
		<h2 class="hestia-title">Why our product is the best</h2>
		<h5 class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h5>
	</div>
</div>

In the CSS Classes field of the widget's Advanced settings, put this class:

	home hestia-features row

Here's a screenshot of how both the way looks:

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.