Header Info

The Header Info widget helps you display key contact details like location, phone, or email elegantly in your website header using Elementor. It supports multiple design styles, icon display, dividers, and fully customizable content.

⚙️ How to Enable the Widget

1. Go to Topper Pack → Widgets in your WordPress dashboard.
2. Locate the Heder Info widget from the list.
3. Toggle the switch to Enable.

➤ Step 1: Add the Widget

Drag and drop the Header Info widget (marked with the TP badge) from the Elementor widget panel into your header section.

➤ Step 2: Choose Info Style

• Navigate to the Content → Header Info panel.
• Use the Info Styles dropdown to choose from:
  • Style One
  • Style Two
  • Style Three
  • Style Four
  • Style Five
  • Style Six
    (Each style comes with different alignments and icon-label combinations.)

➤ Step 3: Enable Divider (Optional)

• Use the Divider option to toggle a vertical or horizontal separator line between items.

➤ Step 4: Add Info Items

• Under the Info List, click + Add Item.
• For each item:
  • Info: Enter your content (e.g., “55 Main Street, 2nd Block, USA”).
  • Label: Give it a label like “Location” or “Email.”
  • Icon: Choose an icon (e.g., map pin, envelope).
  • WYSIWYG Editor: Add formatted content (including links or HTML).

➤ Step 5: Style the Widget

Go to the Style tab:

• Adjust padding, margin, and spacing.
• Control icon size, color, and spacing.
• Customize typography and label colors.
• Add hover effects and background styles.

🧪 Use Case Example

For a business website, use the Header Info widget in your header to show:

• 📍 Location: “55 Main Street, New York”
• 📞 Phone: “+1 234 567 890”
• ✉️ Email: “info@yourdomain.com”