Custom Layouts in Hestia Pro

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 be also used as a global header/footer.

Table of content

  1. How to create a new layout
  2. Where to show it
  3. How to hide a custom layout

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 do you want it to be displayed.

By creating a new layout and choose 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 add the desire conditional logic - more details in this section.


Default Header


Custom Header

By creating a new layout and choose 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 add the desire conditional logic - more details in this section.


Default Page Header


Custom Page Header

By creating a new layout and choose 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 add the desire 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 choose 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 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 on.

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.

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