Using Theme Builder

Overview

The Theme Builder allows you to create custom templates using Elementor or Gutenberg, and assign them to different areas of your website (pages, posts, archives, etc.).

To create a new template, go to Theme Builder → Add New.

Common Template Settings

These settings are available for all template types:

Name Define a recognizable name for your template (used in the templates list).
Item Status Enable or disable the template without deleting it.
Display On Choose where the template will be applied:
Hide On Exclude the template from specific locations.

Template Types

Create custom headers for your website.

It is recommended to try the default header first (Theme Options → Header) as it is lightweight, mobile-optimized, and highly customizable.

Settings:

Keep Theme Default Display the default header alongside the custom one
Show Below Default Header If enabled, the custom header appears below the default header
Fixed Position on Scroll Makes the header sticky while scrolling

Settings:

Keep Theme Default Display the default footer together with the custom one
Fixed Position on Scroll Fix the footer at the bottom of the page (useful for reveal effects)

Create advanced dropdown menus.

Settings:

Dropdown Width: Full Width, Container, Custom

How to assign a Mega Menu:

Go to Appearance → Menus
Open Screen Options (top right)
Enable Theme Builder
Select your Mega Menu from the Theme Builder section
Add it to your menu

You can rename the menu label at any time from the menu editor.

Block

A reusable custom block that can be displayed anywhere on your website.

Usage options:

Custom (shortcode) → place it manually using a shortcode
Or choose a predefined hook location

For more details, refer to the Block Hooks documentation.

Create unlimited popups with flexible targeting and advanced trigger options, allowing you to display the right content at the right time.

Popups can be designed using Elementor or Gutenberg, just like other Theme Builder templates.

Before designing your popup content, make sure to configure its settings. Alongside layout options such as width, height, and position, the Display Settings control how and when the popup appears.

Display Rules: Define where the popup will be shown: Entire website, Specific pages or posts
Display Triggers: Choose what action opens the popup. At least one trigger must be enabled. You can combine multiple triggers for more advanced behavior.
Show up to X Times: Limit how often a user sees the popup. For example: Set to 5 times Reset every 30 days This means the popup will appear a maximum of 5 times per user, even if they close it. After 30 days, the counter resets and the popup can be shown again.

Triggering a Popup from a Button or Widget

You can connect any clickable Elementor widget to a popup using the On Element Click trigger with a custom CSS class or ID.

Steps

Edit the desired widget in Elementor
Go to the Advanced tab
Add a custom CSS Class (or ID) to the widget
Edit your popup template
Set Display Trigger to On Element Click
Enter the same CSS class (or ID) in the trigger field

You can also combine multiple selectors if needed.

Tip

To trigger a popup from the header Call To Action button, use the following CSS selector:

.uicore-cta-wrapper .uicore-btn

Page Title

Create custom page title sections.

It is recommended to try the default page title first (Theme Options → Page Title) as it is more lightweight and performant.

Settings:

Keep Theme Default Display the default page title along with the custom one
Show Above Default Page Title Position the custom title above the default
Fixed Position on Scroll Keep the page title fixed at the top during scroll

Single

Create custom templates for individual posts, pages, or products.

Make sure to configure Display Rules correctly, as incorrect settings can override the entire website.

Common use cases:

Custom Blog Post Template

Display rule: All Blog Posts
Use dynamic widgets such as: Post Title Post Meta Post Content

Custom Product Template

Display rule: Products
Use WooCommerce-specific widgets such as: Product Price Product Gallery Product Data

Theme Builder

Overview

Common Template Settings

Template Types

Header

Footer

Mega Menu

Block

Page Title

Single

Archive