Custom Layouts Module Documentation

📝 Note: The Custom Layouts module is part of Neve Pro which you can get from here. If you would like to learn more about the Neve Pro Addon, take a look at Neve Pro Addon's full documentation.

In this article the following subjects will be presented:


🖲️Activating the module

1
Install the Neve PRO plugin, using these instructions.
2
Navigate to Appearance > Neve Options > Neve Pro.
3
Take a look at the modules and enable the Header Booster Module.


🧰 Using the Module

This module allows sections to be created as new posts and display them based on the hooks(locations) declared in the theme, for example, the header of the following blog page which isn't available by default with the theme options. 

A custom layout can be edited with the WordPress editor, Elementor, or Beaver Builder. For a better experience with the WordPress editor, we encourage you to install Otter Blocks.

To have a better overview of the locations where such a layout can be displayed, while navigating through your website logged in to the Dashboard, you can click the show hooks button within the top admin bar. 

Everything highlighted with a dashed red border is a location where a layout can be displayed.

Layouts can be managed in Dashboard > Appearance > Custom Layouts.

Click Add new then choose the editor you want to use for the current layout. It is also possible to add HTML/PHP code instead of creating a regular post.

📝Note: When using the custom code editor you can add whatever code you would add in a .php file. The code that you write is your responsibility as we don’t filter or check it before. Any syntax error would result in a “fatal error”. To fix it, log in on your server via FTP and delete/edit the content of the wp-uploads/neve-theme/neve-custom-script-<id>.php file. The <id> is the current post id. If you don't know the id of the post that generated the error, you will need to check all the files in the wp-uploads/neve-theme/ directory.


📍Layout Locations

The Custom Layouts module allows a series of locations, along with specific settings.

Layouts Library
Layout Settings

Layouts Library

The following locations are available:

Individual - such layouts can be displayed inside the header/footer builder as a component(example here), by using an Elementor widget specific for this editor (screenshot), or by using a shortcode, example below.

Choose Individual in the layout settings, copy the shortcode with the icon next to it and paste it into a shortcode block/widget with the desired editor and page.

Header - by choosing this location the theme header will be replaced with the current layout.

Footer - by choosing this location the theme footer will be replaced with the current layout.

Hooks - choose a hook from the existing ones by using the Show hooks button to check them. It's also possible to use a custom hook and manually write them, for example, a WooCommerce one(an example in this chapter).

404 Page - Display the current layout instead of the default 404 page of the theme, for example below.


Default 404 page of the theme


Custom 404 page using Elementor template

Inside content - this type of layout can be inserted in the content of the page, and it can appear after a certain number of blocks of the same type. For example, a subscribe section can be rendered after N blocks, or after N heading blocks.

📝 Note: For the case of the blocks, please note that only main level blocks are counted. This means blocks that contain other blocks in their structure, like the Columns one from WordPress, or the Section block of the Otter plugin, and other blocks similar to those two.

For the case of the headings, it counts any heading from H1 to H6, including the post title, an example below.

Layout Settings

After adding the desired content and eventually choosing the layout location, more specific conditions can be added regarding the type of page where to show it. Such conditions are available for the following locations: Header, Footer, Hooks. 

Below is an example of how to show a layout only on the blog page, by using hooks and conditional logic.

Once a condition is set, magic tags are available.

Magic tags depend on the condition set and can be used for generic layouts, like the header of the products category page, where the category name and description are different from a page to another one, example below.


Open image in new tab

Layout expiration date

This setting allows you to set a custom layout to be displayed until a certain date and time. Once you set an expiration date for the layout means after that date, it won't be displayed anymore, however, it's still available in the Dashboard of your website.

📝 Note: The timezone used for the expiration date is based on the user who edited the custom layout in the website Dashboard, it won't apply differently for each website visitor based on their timezone. To make sure this works as expected, you can set the timezone in WordPress Settings, the screenshot below.


🗂Useful Resources

Using a custom Hook

When setting a layout to be displayed at a hook ( a location defined in the theme or in WordPress ) it is also possible to use a custom one and manually write it, instead of the pre-defined ones shown in the drop-down choice.

Below is an example with a hook available on the My Account page ( part of the WooCommerce plugin ).


Choose hooks


Choose a custom hook


Define the custom hook

Conditional Logic

The Custom Layout Module allows for integrations with other plugins as well, for creating a more diverse palette to boost your website's utility. These conditions are available for any type of layout that you use ( Header, Footer, Hooks, etc. ).

📝 Note: In order to use all these conditions on your website, you must install the presented plugins, otherwise those will not be accessible.

WooCommerce conditions - related to e-commerce accessibility:
  • Product Purchase - custom layout will be displayed if the user has purchased / has not purchased certain products that appears on the third column. 
    • 📝Note: The product will be a multi-select list of all the available products.

  • Product Category Purchase - custom layout will be displayed if the user has purchased / has not purchased products from certain categories that you add on the third column. 
    • 📝Note: The category will be a multi-select list with all the available product categories.

  • Product Added to Cart - custom layout will be displayed if the user has in cart / not in cart certain products from the third column. 
    • 📝Note: The product will be a multi-select list of all the available products.

  • Product Category Added to Cart - custom layout will be displayed if the user has in cart / not in cart products from certain categories from the third column. 
    • 📝Note: The category will be a multi-select list with all available product categories.

Lifter LMS conditions - related to learning and memberships accessibility:
  • Quiz Status - custom layout will be displayed if the user has passed / failed certain quizzes. 
    • 📝Note: The Quiz will be a multi-select list with all the available quizzes.

  • Memberships - custom layout will be displayed if the user has membership / does not have membership.
    • 📝Note: The Membership will be a multi-select list with all the available memberships.

  • Course Status - custom layout will be displayed if the user has completed / not completed certain courses.
    • 📝Note: The Course will be a multi-select list with all the available courses.

LearnDash conditions - related to learning and groups accessibility:
  • Quiz Status - custom layout will be displayed if the user has passed / failed certain quizzes. 
    • 📝Note: The Quiz will be a multi-select list with all the available quizzes.
  • Groups - custom layout will be displayed if the user has a group / does not have a group.
    • 📝Note: The Group will be a multi-select list with all the available groups.
  • Course Status -  custom layout will be displayed if the user has completed / not completed certain courses.
    • 📝Note: The Course will be a multi-select list with all the available courses.
Translation plugins ( Polylang and WPML ) conditions - related to the language accessibility:
  • Current Language - custom layout will be displayed if the current language is equal to / not equal to certain languages. 
    • 📝Note: The Language will be a multi-select list with all the available languages.

There are some dedicated docs about creating unique Page Header using the Custom Layouts module for:

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