Custom Layouts in Hestia Pro

📝 Note: Custom Layouts are available in Hestia Pro, which you can get from here.

The Custom Layouts module within Hestia Pro allows you to create a section, that can be edited with the WordPress editor or Elementor and display it on the desired place of the website based on the hooks available in the theme. Such a layout can also be used as a global header/footer.

🧰 How to create a new layout

After installing and activating the Hestia Pro theme, navigate from your Dashboard to Appearance > Custom Layouts, and create a new one.

You can now edit it as any other post, with the desired editor.

📍 Where to show it

From the layout settings, you can choose where you want it to be displayed.

Header

By creating a new layout and choosing the Header location, it is possible to replace the default header of the theme on all pages.

Header Location

Below are images of how the theme header will be replaced with a custom one. It is also possible to have a custom header based on the page type. This can be achieved by choosing the Header location and adding the desired conditional logic - more details in this section.

Default Header

Custom Header

Page Header

By creating a new layout and choosing the Page Header location, it is possible to replace the default page header of the theme on all pages.

Page Header Location

Below are images of how the default page header will be replaced with a custom one. It is also possible to have a custom header based on the page type. This can be achieved by choosing the Page Header location and adding the desired conditional logic - more details in this section.

Default Page Header

Custom Page Header

Footer

By creating a new layout and choosing the Footer location, it is possible to replace the default footer of the theme on all pages.

Footer Location

Below are images of how the default footer will be replaced with a custom one. It is also possible to have a custom footer based on the page type. This can be achieved by choosing the Footer location and adding the desired conditional logic - more details in this section.

Default Footer

Custom Footer

404 Page

This module allows you to change the default 404 Page of the theme. This can be achieved by creating a new layout with your own version of this page and choosing the 404 Page location in the Layout Settings. Below is a screenshot of how this page looks like by default.

404 Page Location

404 Default Page

Hooks

The hooks are in various locations registered in the theme. You can check them on each page by using the Show Hooks button available in the admin navbar.

Those can be very helpful for adding a custom section between the ones available on the front page.

Below is an example of adding a custom section after the features section.

Conditional Display

Now that you have decided on a place on the page for the Custom Layouts, it's time to select  on each page you want the Custom Layout to be displayed.

📝 Note: By default, if nothing is selected the Custom Layout will apply on all pages of the site.

But if you want more control, you can add specific rules, that you can combine in order to achieve what you need.

Let's look at a few examples. These are just some cases, you can play with them by adding AND or OR rules.

a) Will apply only on WooCommerce's Shop page

b) Will apply only on the Blog page

c) Will apply on all Products' single pages

d) Will apply on all pages that have the Page Builder Full Width template and only for the admin user.

💡 How to hide a custom layout

In order to hide a custom layout click on Quick Edit and save it as a draft.

🎥 Video - How to Add a Section to Hestia's Front Page