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.

This module is one of the  most powerful features of Neve that 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. 

📝 Note: 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.


🖲️ 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 Custom Layout Module.


🧰 Using the Module

1
Navigate to Appearance > Neve Options > Custom Layouts.
2
Click on the Add New button.
3
From this moment, you need to decide what  type of custom layout you want to create, and depending on what you choose, the settings and locations will be different.


✨ Magic Tags

Magic tags can display dynamic information on certain pages using Custom Layouts. When you navigate to the page where you have made such insertions, the magic tags will be replaced with actual value.

📝 Note: Learn more about Magic Tags in Custom Layouts from this doc.


📍Layout Locations

The Custom Layouts module allows a series of locations and specific settings.

Hooks
Components
Templates

Hooks

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

Everything highlighted with a dashed border is a location where a layout can be displayed. To add Hooks layout, just select the corresponding box and pick a location:

📝Note: Find out more about Custom Layouts' Hooks from this dedicated doc.


Components

The Components tab offers five types of custom layouts, which can be selected from the popup:

  • Individual - such layouts can be displayed inside the header / footer builder as a component, using an Elementor widget specific for this editor, or using a shortcode. 
  • 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.
  • Inside content - this type of layout can be inserted into the page's content, and it can appear after a certain number of blocks of the same type.
  • Sidebar - this custom layout location allows you to interact with the sidebars from Neve, which are available for the blog, WooCommerce, and LIfterLMS pages.

📝Note: Find out more about Custom Layouts' Components from this dedicated doc.


Templates

You can use multiple templates to design the most suitable pages for your website, such as 404 PageSingle Post, Single Page, Search, and Archive. 

These templates can act like time-savers if you want a specific design for your website's content, and you can also restrict them using conditional logic.

📝Note: Find out more about Custom Layouts' Templates from this dedicated doc.


⚙️ 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. 

Below is an example showing a layout only on the blog page using hooks and conditional logic.

The Dynamic Values of Otter can be used for generic layouts, like the header of the products category page, where the category name and description are different from one page to another one:

Dynamic Values in the editor

Advertising Product Category

Books & Magazines Product Category

Conditional Logic

The Custom Layout Module allows for integrations with other plugins as well, creating a more diverse palette to boost your website's utility. These conditions are available for any type of layout 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 appear 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 a 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.

Layout expiration date

This setting allows you to set a custom layout to be displayed until a specific 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 on 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 ensure this works as expected, you can set the timezone in WordPress Settings, see 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


🎥 Video - How to create a Page Header with a sales countdown timer 

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