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  Neve > Neve Options > Neve Pro.

3

Enable the Custom Layouts Module.

🧰 Using the Module

1

Navigate to Neve > 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.

The magic tags can be used only in the context that they appear in. As you can see below, the {archive_title} tag is available for the Archive Type condition. Hence, for other conditions, you will have other specific magic tags.

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

📥 Templates Cloud Integration

Neve Pro Agency license gives you access to the Templates Cloud Library, which you can use to store custom layouts and import them later when you need. To do this, create the custom layout, click on the Templates Cloud icon, and Save Page to Templates Cloud.

Navigate to  Appearance > Neve Options > My library:

After clicking on Import, you can locate and edit it under Neve > Custom Layout.

📝 Note: Find out more about the Templates Cloud Library from this doc.

📍Layout Locations

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

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 Page, Single 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.

Layout Start date and time

The custom layout can be configured to appear at a particular time and date. To do this, open the Custom Layout tab in the editor, then click on the default date next to Publish, and schedule the appearance of the custom layout:

🗂Useful Resources

Using Neve Patterns

While editing a custom layout, you will get access to the Neve Patterns collection. There are multiple templates for the Archive, with or without a sidebar, one or two columns, and Single Posts, with or without a Cover or Sidebar.

📝 Note: Check more about this feature here.

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