How to recreate Hestia PRO frontpage using page builders with shortcodes

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

Recreating the front page sections is not a difficult process, the main accent falls on the shortcodes used by Hestia PRO:

• 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]

This article will present to you how can you achieve such a front-page, using different page builders:

WordPress Editor

The WordPress default editor is Gutenberg, which allows you to do a lot of things without any other installation. 

📝 Note: In order to have access to a wide palette of blocks, you should install the Otter Blocks plugin.

1

Navigate to Dashboard > Pages and create a new one.

2

Once you have done that, it will automatically open the Gutenberg editor. Start by adding a title.

3

Click on the ➕ button to add a new block and insert a Section block.

4

Make sure you select the full-width layout for each section that you add.

5

Skip the layout that the section block offers you and add a Shortcode block.

6

Now that the shortcode block has been added, all you have to do is to insert Hestia PRO's shortcodes one by one, in different blocks, to recreate the front page.

💡Result

Add Headings and Sub Headings:

To add headings, you can use the Advanced Heading block, with h2 and h5 heading types:

To have the exact same look you have to follow these steps:

1

Click on the ➕ button and add a Section Block.

2

Inside the Section block, add a Custom HTML block and paste this code:

<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>

3

Click on the Section block to open its settings, go to the Advanced settings, and paste this class:

	home hestia-features row

💡Result

Elementor Page Builder

You first need to install  Elementor Page Builder. Using this page builder, you'll first recreate the current front page. 

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.

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.

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.

💡Result

Add Headings and Sub Headings:

1

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>

2

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:

📝 Note: The same approach can be used for the any page builder as well. Check this doc for further details about Hestia's compatibilities.