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.