Creating Custom Page Headers with Site Builder

The Site Builder allows you to create custom page headers that replace the default theme page header across your website. You can design unique page headers using Gutenberg blocks or Elementor and control exactly where they appear.

Accessing Site Builder

Navigate to your WordPress dashboard and go to DigiFusion > Site Builder. This will take you to the Site Builder management area where you can create and manage all your custom elements.

Creating a New Page Header

Click Add New to create a new builder element. In the builder settings sidebar on the right, you’ll find the configuration options for your page header.

Setting the Builder Type

In the Builder Settings panel, locate the Builder Type dropdown and select Page Header. This tells the system that you’re creating a custom page header element.

Configuring Display Rules

The Display Rules section controls where your custom page header will appear on your website.

Display On Entire Site: Select this option if you want the page header to appear on all pages across your website.

Display On Specific Pages: Choose this option to target specific pages, post types, or sections of your site.

Include Rules

Add include rules to specify where the page header should appear:

  • Entire Site: Shows on all pages
  • Homepage: Displays only on the front page
  • All Posts: Shows on all blog posts
  • All Pages: Displays on all static pages
  • Specific Post: Target a single post by ID
  • Specific Page: Target a single page by ID
  • Post Categories: Show on posts within specific categories
  • Page Templates: Display on pages using specific templates
  • Archive Pages: Show on category, tag, or date archives

Exclude Rules

Add exclude rules to prevent the page header from appearing in certain locations, even if they match your include rules.

Designing Your Page Header Content

With Gutenberg editor, add any blocks you need for your page header design. Common elements include:

  • Heading blocks for page titles
  • Image blocks for background graphics
  • Custom HTML for advanced layouts
  • DigiBlocks elements for enhanced functionality

If you’re using Elementor, click Edit with Elementor to open the visual builder and design your page header using Elementor widgets and sections.

Previewing Your Page Header

After creating your page header, you can preview how it looks by visiting any page where your display rules apply. The custom page header will replace the default theme page header.

To make changes, return to DigiFusion > Site Builder, find your page header in the list, and click Edit to modify the design or display rules.

Publishing and Activation

Your page header becomes active immediately when you publish the builder element. Make sure to set the post status to Published for the page header to appear on your website.

If you have multiple page headers with overlapping display rules, the system will use the most recently created one. To avoid conflicts, ensure your display rules are specific and don’t overlap unintentionally.