With this feature, you can design a layout in one place and display it on multiple pages/posts. This is useful for displaying the same information on different posts/pages to attract users. You can use this for CTAs, attractive sales offers, special discounts, important information, and so on.

You can completely customize the layout and easily put it on any page/post at the selected location.

Let’s see how this option works. Before we start, make sure to have the Astra Pro plugin is activated.

Add Inside Post/Page Content Layout

Step 1 – In the dashboard, visit Appearance > Astra Options and activate the Custom Layouts module;

Step 2 – Next, navigate to Dashboard > Appearance > Custom Layouts and click on the “Add New” button;

Step 3 – You will see the Custom Layout Type selection pop-up. Here, select the “Inside Post/Page Content” option.

Step 4 – Now, you can design a layout that you want to display on Gutenberg pages/posts. Further, you can design it with the Block Editor, Elementor, or Beaver Builder.

Inside Pages/Posts Layout Options

If you click on the Astra icon in the top right corner, you will open the Custom Layouts Setting panel. Further down, you will find the overview of the Inside Pages/Posts Layout Type options.

Location Settings

You will observe two options under Location on the post/page

1. After a certain number of blocks – This option will allow you to display your custom layout after the selected number of blocks on the Gutenberg page/post. Further, you also get an option to enter – Block Number. Here you can set the number of blocks after which your custom layout can display.

2. Before certain number of Heading blocks – This option will allow you to display your custom layout before the selected number of Heading blocks on the page/post. Note that only native Gutenberg heading blocks and heading added with the UAG plugin will be considered. Further, you also get an option to enter – Heading Block Number. Here you can set the number of Heading blocks before which your custom layout can display.

To illustrate, you can check the example below:

Display And User Role Settings

Next, you can set exact pages/posts where you want your inside pages/posts content to be used. Thus, you need to adjust Display and User Rule Settings.

To do this, click on the “Display On” option dropdown and select the required display locations. In addition, you can exclude some locations using the “Do Not Display On” option.

If you wish to restrict this custom layout visibility to some user roles only, you can do so with the User Roles option.

Responsive Visibility

This option lets you choose a device to display the custom layout. Just tick the checkbox for required devices – Desktop, Tablet, and Mobile.

Time Duration Settings

You can set a start time and end time for layout visibility. Set a date and time duration for the layout.

The layout will be visible for the selected duration.

Done!

Display and User Role Settings

To access display settings, follow these simple steps:

Step 1 – Start editing your Custom Layout;

Step 2 – Click on the Astra icon in the top right corner to open the Custom Layout Settings panel;

Step 3 – Next, click on “Display and User Role Settings“. Now, you can edit display settings in the popup.

Display Settings

With display settings, you can achieve great flexibility in displaying your custom content throughout your website.

You can start with the “Display On” option. Here, you can select specific locations or locations where your custom layout will be displayed. Thus, you can select an entire website, a group of pages or posts, or a specific target.

In addition, you can combine this with the “Do Not Display On” option. Hence, you can add exclusion rules and remove your Custom Layout on some locations while still visible on all others.

Further, you can limit Custom Layouts to be displayed only for specific types of users with the “User Roles” option. In other words, you can show different layouts depending on whether users are logged in or not. Also, you can show different content or hide some content depending on the user roles assigned.

Finally, these can also be combined with the rest of the visibility settings:

• Responsive Visibility – You can choose on which devices you want to display your layouts. This will imporve your website’s repsonsivness;
• Time Duration – You can select start and the end date for the period during which you want your custom layout to be visible. You can use this option perfectly for different notifications or seasonal content.

Displaying Locations

Below, we listed locations available for the “Display On” and “Do Not Display On” options, with their descriptions:

Basic

• Entire Website: Your laouts will show on all pages, post, CPTs, singulars, archives, search, 404;
• All Singulars: You can limit the layout to all single posts/pages;
• All Archives: Also, you can decide to use your layout specificaly for your achives – Monthly, Category, Tag, Author, Search.

Special Pages

• 404 Page: On the page shown when a page doesn’t exist on your site.
• Search Page: On the page that displays search results.
• Blog / Posts Page: On the Blog Archive Page, which is set as the Posts page and lists all blogs on your site.
• Front Page: On the page that is set as a Home page.
• Date Archive: On the Archive page for date, where posts are filtered based on date.
• Author Archive: On the Archive page for the author. Posts by a particular author will be listed here.

Posts

• All Posts: On all blog posts (Single Post)
• All Posts Archive: On all posts archive pages (for example, all posts published by the same author)
• All Categories Archive: On all post category archive pages
• All Tags Archive: On all post tag archives

Pages

• All Pages: On all pages

Specific Target

• Specific Pages / Posts / Taxonomies, etc.: Only on a specific places (for example only one post or page)

WPML and Custom Layouts

Firstly, you need to add WPML to your Astra website and turn it multilingual. In addition, if you need help doing this, you can check this article.

Secondly, we need to make sure that the option to translate the Custom Layout with WPML is active. Follow the steps below to activate this option:

Step 1 – Login to your website and navigate to Dashboard > WPML > Settings;

Step 2 – Nest, scroll down to reach the “Post Types Translation” section;

Step 3 – In the end, select Custom Layouts (astra-advanced-hook)  to be Translatable. Here you have options to show items only if there is the translation available in the selected language or to show content in the default language (fallback option). Choose the option which suits you better and click on the “Save” button to apply changes.

This will enable all Custom Layouts to be translated with WPML. You will find the translation options in your Custom Layouts list.

Translating Custom Layouts

Now that this option is activated, let’s show you how to translate your Custom Layouts:

Step 1 – Navigate to Dashboard > Appearance > Astra Options > Custom Layouts and check the column next to the custom layouts titles in the list. You will notice the WPML language options for each layout. Layouts are set to your default language, and the column contains flags of the other languages available.

Step 2 – To create a version of the custom layout in another language, just click on the “+” icon in the desired language column. This will open an Advanced Translation Editor that will allow line-by-line translation.

By default, the editor will display content in “dual” mode, showing the original content on one side and translation fields on the other side. 

We decided to add a French version of the layout in our example:

Step 3 – To translate a line of the content, you need to click on the matching translation field for each line and provide the translation. Once you added all translations, click on “Complete” to create the translated page.

Managing Translations

Keep in mind that you will not be able to click the “Complete” button until you provided all translations. If you need to pause translating, just click on the “Back to list” button. This will save you current progress and take you back to the custom layouts list. To mark the translation in progress, you will notice that the “+” icon changed to the “cogs” icon. You can resume translating the layout any time you want by clicking this icon.

Once you complete your translation and click the “Complete” button, the translated version of your custom layout will be automatically added and linked with the original. In the layouts list, you will see that existing translated versions are represented by a “pencil” icon instead of a “+” icon to mark that the translation exists.

When it comes to the layout content, your designs will be automatically copied, and original content will be replaced with the translated content:

Great, you just created your Custom Layout translation. You can repeat these steps for any layout you want to translate.

If you are using Custom Layout module available with Astra Pro. And all the layouts show 404 error when you try to edit it. Please flush the WordPress permalinks.

How to flush the WordPress permalinks?

When a new post type is registered they need to be flushed.

• Navigate to Settings > Permalinks from the WordPress dashboard.
• Click “Save Changes”.

In case you still face the issue, clear cache of your browser, as sometimes the browser renders the older version of a page that it had saved in memory.

Related Docs –

• How to Refresh / Flush WordPress Permalinks?

This is a premium feature available with the Astra Pro Addon plugin. To use these pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Selecting a Header layout will replace the current site header with custom layout content. In this case, any settings from the customizer will not be applied to a custom header.

You can design headers with any page builder and set them on the entire site or a particular page/post with display rules.

Header Layout Options

If you click on the Astra icon in the top right corner, you will open the Custom Layouts Setting panel. Further down, you will find the overview of the Header Layout Type options.

Sticky Settings

• Stick– You can choose your custom header to be sticky or not.
• Shrink– If you set the header to stick on the top of the page, you can decide whether it should shrink or not. Enabling shrink effect will remove all top and bottom space from the header.
• Stick On– You can choose to stick header on Desktop and/or mobile.

Display and User Role Settings

You can choose your custom header to display on the entire website or specific pages/posts with the Display On option. You can even exclude a particular page/post by adding them to the Exclusion Rule.

You can decide a user role for which custom header should be visible. For excluded users, the header set with customizer options will be visible.

For example:
If you want to display a custom header on the Entire Website except for the 404 page for all Logged In users, you need to set the following options-

• Display On: Entire Website
• Do Not Display On: 404 Page
• User Roles: Logged In

Responsive Visibility

This option lets you choose a device to display the custom layout. Just tick the checkbox for required devices – Desktop, Tablet, and Mobile.

Time Duration

You can set a start time and end time for layout visibility. Set a date and time duration for the layout.

The layout will be visible for the selected duration.

Once the time duration ends, the custom layout set as the header will be disabled. Thus the header designed with Astra customizer will be automatically displayed further on. 

This is a premium feature available with the Astra Pro Addon plugin. To use these pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Selecting a Footer layout will replace the current site footer with custom layout content. In this case, any settings from the customizer will not be applied to a custom footer.

You can design footer with any page builder and set them on the entire site or a particular page/post with display rules.

Footer Layout Options

If you click on the Astra icon in the top right corner, you will open the Custom Layouts Setting panel. Further down, you will find the overview of the Footer Layout Type options.

Sticky Settings

• Stick – You can choose your custom footer to be sticky or not.
• Stick On – When Stick is enabled, you can choose to stick footer on Desktop and/or mobile.

Sticky Footer option is useful when your content is less, and it cannot cover page length. In this case, the sticky footer will stick to the bottom of the page, no matter your content length.

Display and User Role Settings

You can choose your custom footer to display on the entire website or specific pages/posts with the Display On option. You can even exclude a particular page/post by adding them to the Exclusion Rule.
You can decide a user role for which custom footer should be visible. For excluded users, the footer set with customizer options will be visible.

For example:
If you want to display a custom footer on the Entire Website except for the 404 page for all Logged In users, you need to set the following options-

• Display On: Entire Website
• Do Not Display On: 404 Page
• User Roles: Logged In

Responsive Visibility

This option lets you choose a device to display the custom layout. Just tick the checkbox for required devices – Desktop, Tablet, and Mobile.

Time Duration

You can set a start time and end time for layout visibility. Set a date and time duration for the layout.

The layout will be visible for the selected duration.

Once the time duration ends, the custom layout set as the footer will be disabled. Thus the footer designed with Astra customizer will be automatically displayed further on. 

In additions, Custom Layouts require both the Astra theme and Astra Pro Addon installed and activated on your website. Further, before proceeding, you can check out the Custom Layout module overview first.

Add Hooks Layout

Step 1 – In the dashboard, visit Appearance > Astra Options and activate the Custom Layouts module;

Step 2 – Next, navigate to Dashboard > Appearance > Custom Layouts and click on the “Add New” button;

Step 3 – You will see the Custom Layout Type selection pop-up. Here, select the “Hooks” option.

Next, you can add a custom code. To do this, you can click the “Enable Code Editor” button.

Adding Custom Code? You Got a Code Editor!

This option enables the code editor which is helpful to add custom code.

While adding your code, please make sure to include opening statements of the code which pasting your code. Some examples are below:

<?php
/* Add Your PHP Code here. */
?>

<style type="text/css">
/* Add Your CSS Code Here. */
</style>

You can use Page Builder as well

You can create a layout with page builder too, and add it to any action hook. For example, you can design a call to action with page builder; or newsletter subscription form and display inject it automatically below the content of all blog posts.

Pro Tips:

1. For Beaver Builder: Make sure your page builder is enabled for the “Custom Layouts” post type. For example, Beaver Builder has a setting for that.
2. For Elementor: Make sure your page builder is enabled for the “Custom Layouts” post type.
3. If you’re having trouble loading the page builder for any Custom Post Type such as this, please flush your permalink settings and try again.

Inside Hooks Layout Options

If you click on the Astra icon in the top right corner, you will open the Custom Layouts Setting panel. Further down, you will find the overview of the Hooks layout type options.

After selecting “Hooks” dropdown from Custom Layout, you get the following options:

• Action: Action is basically a location where your code or custom content will be injected. To see all actions Astra offers and their locations, please visit this page.
• Priority: If there are multiple items added for a particular action, priority decides which item gets executed first. Lower the number, higher the priority.
• Spacing: If you need to add some padding above / below the custom content, use this option.

Display And User Role Settings

Next, you can set exact pages/posts where you want your hooks layout to be used. Thus, you need to adjust Display and User Rule Settings.

You can choose your custom layout to display on the entire website or on specific pages/posts with Display On option. In addition, you can exclude some locations using the “Do Not Display On” option .

Furthermore, you can disable your added hooks layout only for some user roles. You can do this with the User Roles option.

For example:
If you want to inject a call to action on Entire Website; Except on 404 page; For Logged Out users, you need to set the following options –

• Display On: Entire Website
• Do Not Display On: 404 Page
• User Roles: Logged Out

Responsive Visibility

This option lets you choose a device where you wish to display the custom layout. Just tick the checkbox for required devices – Desktop, Tablet, and Mobile.

Time Duration

You can set a start time and end time for layout visibility. Set a date and time duration for the layout.

Layout will be active for selected duration.

This is a premium feature available with the Astra Pro Addon plugin. To use these pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Selecting a layout for the 404 page will replace the default 404 page content with your custom content.

You can design a 404 page with any page builder.

404 Page Layout Options

If you click on the Astra icon in the top right corner, you will open the Custom Layouts Setting panel. Further down, you will find the overview of the 404 Page Layout Type options.

404 Page Display Settings

• Disable Primary Header
• Disable Footer Bar

Display and User Role Settings

You can decide to display your custom layout set as a 404 page only for specific user roles. You can add more than one user role with the “Add User Role” button.

Responsive Visibility

This option lets you choose a device where you wish to display this custom layout. Just tick the checkbox for required devices – Desktop, Tablet, and Mobile.

Time Duration

You can set a start time and end time for layout visibility. Set a date and time duration for the layout.

The layout will be visible for the selected duration.

This is a premium feature available with the Astra Pro Addon plugin. To use these pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Custom Layouts is a very powerful module offered in Astra Pro. With this module, you can create a totally custom header, footer, 404 pages as well as custom content or code on various hook locations.

Quick Steps on How to Create Custom Layouts Using the Custom Layout Module
Step 1: Make sure you have the Astra Pro Addon plugin installed and activated. How to Install Astra Pro Addon plugin?
Step 2: Activate the Custom Layouts module from the Astra Options under the WordPress Dashboard > Appearance > Astra Options
Step 3: Visit customizer [ Appearance > Astra Options > Custom Layouts ] to edit Custom Layouts settings

How To Add A Custom Layout?

After activating a module, you will also find the Settings option. Further, clicking on this option will take you to Dashboard > Appearance > Custom Layouts. Here, you can add new custom layouts or edit the existing ones:

When you click on “Add New”, you will see the popup where you can select the layout type you wish to create:

Next, you can manage Custom Layouts using options located in the right side menu:

In addition, you can change your layout type using the “Layout” dropdown. Accordingly, other options will adjust to your selection. 

Since Astra Pro version 3.6.4 the Custom Layout Settings are located in a separate Gutenberg sidebar panel. Thus, if you don’t see the Custom Layout settings, you can access the panel by clicking the Astra icon (top right corner) as shown below:

Manage Custom Layouts

Custom Layouts come with some great options that allow you to, for example, make a custom sticky header. Also, you could add a custom code to almost any place in your website using Hooks, and many more. 

Though each custom layout type has some specific options available, these are some common settings available for all layouts:

• Display and User Role Settings:
  • Display On – select the locations where you want to display your custom layouts.
  • Add Exclusion – select the locations which you want to exclude from a display rule.
  • User Roles – choose which user roles should be seeing your custom layout
• Responsive Visibility: Choose whether to show your custom layouts on all devices or choose individually: desktop, tablet, or mobile.
• Time Duration Settings: Set the layout start time and the end time. This will make your layout visible only for that choosen period.

In addition, since Astra Pro version 3.6.4 you can choose to enable or disable specific custom layouts added to your website:

For more information on each custom layout type, please check the dedicated articles on the links below:

• Header
• Footer
• 404 Page
• Hooks
• Inside Post/Page Content