Whether you want to add a custom header, footer, or any section with specific content, Hooks provides the flexibility to add your creativity to your website.
With Site Builder, a module available with Astra Pro, you can insert custom code or content using Astra hooks. This article will show you how to set up the Hooks Site Builder.
In addition, Site Builder require both the Astra theme and Astra Pro Addon installed and activated on your website. Further, before proceeding, you can check out the Site Builder module overview first.
How to Add Hooks Using Code Editor
You can follow the below steps to add hooks using Site Builder.
In the dashboard, click on Astra and scroll down to Astra Pro Modules, and activate the Site Builder module;
Once you switch on the Site Builder toggle, then you can see the Site Builder under Astra in the wordpress dashboard.
After clicking on the Site Builder, you can explore the revamped Site Builder through the All Layouts Section.
Here, you can create / view / edit different parts of your site like Header / Footer / 404 Pages / Hooks / Single & Archive templates and much more.
You can create new sections, and individual layout previews for specific elements like Header, Footer, and 404 sections. These previews provide a visual glimpse of how your layout might appear on the frontend, enhancing your editing experience.
Additionally, you can view all your existing layouts in one place easily. By default if no Layouts are present on your site, it will show the Layouts which you can create. By Hovering on the Layout Card, you will see the option to “Preview” which will take you to that Website Part Section or you can “Edit” which will take you to the Layout Editor.
You can modify their existing Layouts, by visiting the Website Parts from the Sidebar. For example, you can visit the Header Section (this will take you to the Header Website Part) where you can view the Preview of the Existing Layouts on the Site.
Let us consider, if you want to create a different hooks layout. Now, hover on the Hooks and click “Create Layout”.
Next, you can add a custom code. To do this, you can click the “Enable Code Editor” button. 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>
How to Add Hooks using Page Builder
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 a page builder; or a newsletter subscription form and display it automatically below the content of all blog posts.
Pro Tips:
- For Beaver Builder: Make sure your page builder is enabled for the “Site Builder” post type. For example, Beaver Builder has a setting for that.
- For Elementor: Make sure your page builder is enabled for the “Site Builder” post type.
- 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.
What are the Hooks Layout Options
If you click on the Astra icon in the top right corner, you will open the Site Builder Setting panel. Further down, you will find the overview of the Hooks layout type options.
After selecting the “Hooks” dropdown from Site Builder, you get the following options:
- Placement: From the dropdown, choose the custom hook option and enter the custom hook name.
- Priority: If there are multiple items added for a particular action, priority decides which item gets executed first. The lower the number, the higher the priority.
- Spacing: If you need to add some padding above/below the custom content, use this option.
Next, you can set the exact pages/posts where you want your hooks layout to be used. Thus, you need to adjust Display and User Conditions.
You can choose your Site Builder to display on the entire website or on specific pages/posts with the 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 the 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
Device Visibility lets you choose a device where you wish to display the Site Builder. Just tick the checkbox for required devices – Desktop, Tablet, and Mobile.
Additionally, 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 active for the selected duration.
Thus, the hooks layout allows you to maintain a uniform look and feel across your website while still allowing flexibility for content customization.
We hope this article has been helpful. If you have any questions, please feel free to leave a comment below.
