How to Use Hooks in Custom Layout Module of Astra Pro?

No results found. Try again with different words?

Search must be at least 3 characters.

Custom Layout – Hooks

Custom Layouts is a module available with Astra Pro. One of the available Layout types are Hooks that allow you to insert custom code or content using Astra hooks. This article will show you how to set up the Hooks custom layouts.

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;

Activate Custom Layouts Module

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

Add New Custom Layout

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

Select the Custom Layout Type

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.

Add Custom Code to Hooks Layout

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

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

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.

Edit Hooks Layout content with Elementor

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.
Enable Custom Layouts in Elementor

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.
Hooks Layout

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.

Custom Layouts Hooks Display

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.

Custom Layouts Hooks Responsive Visibility

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.

Custom Layouts Header Time Duration
Was this article helpful?
Did not find a solution? We are here to help you succeed.

Related Docs

Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.