Customizing WordPress Websites with Hooks in Astra Site Builder

Astra be WordPress The widely used lightweight theme, Upgrade Astra Pro After that, you can enhance the customization of your website. Among other things, the Site Builder module provides Hooks Functionality to insert custom content or code at specific locations on the site to create headers, footers, 404 pages, content templates, and other structural modules.

Enabling the Site Builder Module

The following preparations need to be completed before activation:

• mounting Astra thematic
• Install and activate the Astra Pro plug-in
• exist WordPress Go to Astra > Astra Pro Modules in the console to enable the Site Builder module

Once enabled, the Site Builder item will appear in the menu.

Site Builder Module Overview

Site Builder provides several structural editing portals, for example:

• Header
• Footer
• 404 Pages
• Hooks
• Single and Archive templates

New layouts can be created in these areas, as well as previewing and editing existing content. The operation is intuitive and suitable for scenarios where the structure of the site is frequently adjusted.

Two ways to create a Hook layout

Inserted using the code editor

• Open Site Builder
• Go to the Hooks module and click "Create Layout"

• Enable Code Editor

• importation PHP maybe CSS Code, for example:

/* CSS style area */
</style

This approach is suitable for adding structural or functional code, such as inserting the HTML Block or style rules.

Designing Content with the Page Builder

Supports binding to a specified hook location after designing the graphic content using a page builder such as Beaver Builder or Elementor.

Such as designing a promotional banner or subscription form and displaying it below the blog content.

Note: Make sure the builder supports Site Builder Type. If it doesn't load, try refreshing the fixed link settings.

Configuration options for Hooks layout

In the upper right corner of the editing screen, click Astra icon to access the Settings panel to configure the Hook location:

• Placement: select or enter a hook name (e.g. astra_entry_content_after)
• Priority: the smaller the value, the higher the execution order.
• Spacing: set the spacing between the top and bottom of the content

These options help the content to be accurately positioned on the page.

Setting display conditions

Site Builder's Hooks support a variety of display condition controls:

• Display On: Select which pages to display
• Do Not Display On: Set on which pages not to be displayed.
• User Roles: limited access roles (e.g., visitors only)
• Device Visibility: Desktop, Tablet, Mobile can be checked.
• Time period control: can set the start time and end time

Example: Wish to add a promotional message that is displayed throughout the site, but not in the 404 The page shows that it is only available to unlogged-in users

The configuration is as follows:

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

This approach lends itself to controlling the visibility of content on demand.

summarize

leverage Astra Pro The Site Builder module allows you to flexibly insert customized content and manage the structure and layout of your website. Whether it's a code paragraph or a graphic module, you can fulfill your presentation needs without relying on additional plug-ins.Hooks The use of a combination of these helps to maintain the uniformity of the site's content while improving operational efficiency.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off