Custom Layouts Module Documentation
Custom Layouts are part of Neve Pro Addon's modules. If you would like to learn more about the Neve Pro Addon, take a look at Neve Pro Addon's full documentation.
Activating the module
To activate the Custom Layouts module, navigate to Appearance > Neve Options > Neve Pro and enable the module.
About this 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.
How to create a layout
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.
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.
404 Page - Display the current layout instead of the default 404 page of the theme, for example below.
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.
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.
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.
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.
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.