The ColorMag Header Builder lets you create a fully customized header for your ColorMag WordPress theme using a drag-and-drop interface. You can add, remove, and rearrange header elements such as your logo, navigation menus, search icon, social icons, buttons, and widgets, all without writing any code.
Step 1: Open the Header Builder #
Go to Appearance → Customize → Header in your WordPress dashboard.
The Header Builder is built into the ColorMag WordPress theme, so the visual builder interface loads directly in the Customizer without any setup step.
Step 2: Understand the Header Layout #
The Header Builder divides your header into three rows:
| Row | Typically used for |
|---|---|
| Top Row | Secondary menus, contact details, social icons, announcements |
| Main Row | Site logo, primary navigation menu, search icon |
| Bottom Row | Additional menus, widgets, custom content |
- Top Row – ideal for secondary menus, contact information, social icons, or announcements
- Main Row – typically holds your site logo, primary navigation menu, and search icon
- Bottom Row – useful for additional menus, widgets, or custom content
Each row has a drag-and-drop area where you can place header elements in your preferred layout.
You can add the following elements to any row:
- Site Logo
- Site Title & Tagline
- Primary Menu
- Secondary Menu
- Search
- Button
- Social Icons
- Date
- Random Post
- News Ticker
- Widgets
- Custom HTML
Note: Some elements are only available in ColorMag Pro. If an element isn’t showing up for you, check whether it’s Pro-only before assuming something is broken.
Step 3: Add and Arrange Elements #
- In the Header Builder, drag an element from the available list into the Top Row, Main Row, or Bottom Row.
- Click on the element once it’s added to open its individual settings — this is where you can typically adjust things like alignment, visibility (desktop/mobile), spacing, and color, depending on the element.
- Repeat for each element you want to include in your header.
To reorder elements, drag them to a new position — either within the same row or into a different row. The live preview updates instantly, so you can see exactly how your header will look before you publish anything.
Step 4: Preview Your Header on Different Devices #
Your header can look different on desktop, tablet, and mobile, so it’s worth checking all three before publishing
- Use the responsive preview controls at the bottom of the Customizer to switch between Desktop, Tablet, and Mobile views.
- Review your layout on each view and adjust element settings if anything looks cramped or out of place — for example, some elements can be hidden on mobile if they take up too much space.
Step 5: Publish Your Changes #
Once you’re happy with your header layout and settings, click Publish.
Changes you make in the Customizer are only visible to you in the live preview — visitors won’t see the new header on your live site until you click Publish.
