--- title: Preheader Help Guide --- [Skip to content](https://www.synghub.com/preheader-help-guide#main-content) [![Synghub-logo](https://www.synghub.com/hs-fs/hubfs/Final-logo.png?width=180&height=68&name=Final-logo.png)](https://www.synghub.com/?hsLang=en) ✕ - [Home](https://www.synghub.com/?hsLang=en) - Products - - Mega Menu - [Mega Menu Demo](https://www.synghub.com/mega-menu-module) - [Mega Menu Help Guide](https://www.synghub.com/mega-menu-help-guide) - Filterable Portfolio Gallery - [Filterable Portfolio Gallery Demo](https://www.synghub.com/filterable-portfolio-gallery-module) - [Filterable Portfolio Gallery Help Guide](https://www.synghub.com/filterable-portfolio-gallery-help-guide) - Multi-Purpose Hero Banner - [Multi-Purpose Hero Banner Demo](https://www.synghub.com/multi-purpose-hero-banner) - [Multi-Purpose Hero Banner Help Guide](https://www.synghub.com/multi-purpose-hero-banner-help-guide) - Multi-Purpose Content Cards - [Multi-Purpose Content Cards Demo](https://www.synghub.com/multipurpose-content-cards) - [Multi-Purpose Content Cards Help Guide](https://www.synghub.com/multi-purpose-content-cards-help-guide) - Enterprise Global Footer - [Enterprise Global Footer Demo](https://www.synghub.com/enterprise-global-footer) - [Enterprise Global Footer Help Guide](https://www.synghub.com/enterprise-global-footer-help-guide) - Mega MenuNavigation made powerful - Filterable Portfolio GalleryShowcase your work - Multi-Purpose Hero BannerCaptivate at first sight - Multi-Purpose Content CardsFlexible card layouts - Enterprise Global FooterFlexible card layouts - PreheaderTop bar notifications & alerts - Pricing Plans ComparisonCompare tiers & features - Team CardsShowcase your crew - ![Mega Menu Demo](https://syngrid.com/wp-content/uploads/2026/02/mega-menu-thump-1-1.webp) Mega Menu Demo Live interactive preview of the Mega Menu component with all features and animations enabled. [Explore More](https://www.synghub.com/mega-menu-module?hsLang=en) - ![Mega Menu Help Guide](https://syngrid.com/wp-content/uploads/2026/02/mega-menu-thump-1-1.webp) Mega Menu Help Guide Step-by-step documentation to set up, customize, and integrate the Mega Menu into your project. [Explore More](https://www.synghub.com/mega-menu-help-guide?hsLang=en) - ![Portfolio Gallery Demo](https://syngrid.com/wp-content/uploads/2026/02/Filterable-Portfolio-Gallery-4.webp) Filterable Portfolio Gallery Interactive gallery demo with category filters, smooth transitions, and responsive grid layout. [Explore More](https://www.synghub.com/filterable-portfolio-gallery-module?hsLang=en) - ![Portfolio Gallery Help Guide](https://syngrid.com/wp-content/uploads/2026/02/Filterable-Portfolio-Gallery-4.webp) Filterable Portfolio Gallery Help Guide Complete guide on how to install, configure filters, add items, and style the portfolio gallery. [Explore More](https://www.synghub.com/filterable-portfolio-gallery-help-guide?hsLang=en) - ![Hero Banner Demo](https://syngrid.com/wp-content/uploads/2026/02/thumbbb-1.webp) Multi-Purpose Hero Banner Eye-catching hero section demo with dynamic text, CTA buttons, and full-width background options. [Explore More](https://www.synghub.com/multi-purpose-hero-banner?hsLang=en) - ![Hero Banner Help Guide](https://syngrid.com/wp-content/uploads/2026/02/thumbbb-1.webp) Multi-Purpose Hero Banner Help Guide Full documentation covering layout variants, animation settings, and content customization options. [Explore More](https://www.synghub.com/multi-purpose-hero-banner-help-guide?hsLang=en) - ![Content Cards Demo](https://syngrid.com/wp-content/uploads/2026/02/mega-menu-thump-1-1.webp) Multi-Purpose Content Cards Versatile card components for products, team members, blog posts, and more with multiple style variants. [Explore More](https://www.synghub.com/multipurpose-content-cards?hsLang=en) - ![Content Cards Guide](https://syngrid.com/wp-content/uploads/2026/02/mega-menu-thump-1-1.webp) Multi-Purpose Content Cards Help Guide Complete documentation for implementing and customizing content cards for your specific use case. [Explore More](https://www.synghub.com/multi-purpose-content-cards-help-guide?hsLang=en) - ![Enterprise Footer Demo](https://www.synghub.com/hubfs/480x360x1.png) Enterprise Global Footer The Enterprise Global Footer is a powerful and highly flexible HubSpot module designed to create fully dynamic. [Explore More](https://www.synghub.com/enterprise-global-footer?hsLang=en) - ![Footer Help Guide](https://www.synghub.com/hubfs/480x360x1.png) Enterprise Global Footer Help Guide The Enterprise Global Footer is a flexible and scalable HubSpot module designed layouts. [Explore More](https://www.synghub.com/enterprise-global-footer-help-guide?hsLang=en) - ![Preheader demo](https://www.synghub.com/hubfs/480x360x1-1.png) Smart Preheader Bar Customizable announcement bar, promo alerts, and global notifications with close button & CTA. [Explore More](https://www.synghub.com/preheader?hsLang=en) - ![Preheader guide](https://www.synghub.com/hubfs/480x360x1-1.png) Preheader Help Guide Step-by-step documentation: multiple styles, positioning, dismiss behavior, and analytics. [Explore More](https://www.synghub.com/preheader-help-guide) - ![Preheader demo](https://www.synghub.com/hubfs/SyngHub-Pricing-Plans-Comparison-Table.webp) Pricing Comparison Table Fully responsive comparison matrix with feature highlights, annual billing toggle, and interactive rows. [Try Demo](https://www.synghub.com/pricing-plans-and-comparison-table?hsLang=en) - ![Pricing guide](https://www.synghub.com/hubfs/SyngHub-Pricing-Plans-Comparison-Table.webp) Pricing Help Guide Setup dynamic pricing tables, custom badges, tooltips, and integrate with subscription logic. [Documentation](https://www.synghub.com/pricing-plans-and-comparison-table-help-guide?hsLang=en) - ![Preheader demo](https://www.synghub.com/hubfs/480x-1.webp) Team Cards Grid Modern team member showcase with avatars, social links, hover effects, and responsive layout. [Meet the team](https://www.synghub.com/team-card?hsLang=en) - ![Team card guide](https://www.synghub.com/hubfs/480x-1.webp) Team Cards Help Guide Customize card styles, integrate dynamic data, add filters and team categories easily. [View guide](https://www.synghub.com/team-card-help-guide?hsLang=en) - [Contact](https://www.synghub.com/contact?hsLang=en) **[Get Modules](https://ecosystem.hubspot.com/marketplace/modules?eco_providers=Syngrid%20Technologies)** # SyngHub Preheader The **SyngHub Multi-Purpose Hero Banner** is a flexible HubSpot module designed to create high-impact hero sections across any website. It offers **five powerful layout variations** **Static, Parallax, Video, Slider, and Split**—allowing marketers and developers to visually tailor the hero experience based on content and campaign needs. [Get Module](https://ecosystem.hubspot.com/marketplace/modules/preheader-module-by-syngrid-technologies) ![Group 1848](https://www.synghub.com/hubfs/Group%201848.png "Group 1848") ### [Overview](https://www.synghub.com/preheader-help-guide#Overview) → ### [Contact Information Display](https://www.synghub.com/preheader-help-guide#Contact-Information-Display) → ### [Branding Support](https://www.synghub.com/preheader-help-guide#Branding-Support) → ### [Navigation Integration](https://www.synghub.com/preheader-help-guide#Navigation-Integration) → ### [Social Media Integration](https://www.synghub.com/preheader-help-guide#Social-Media-Integration) → ### [Call-to-Action (CTA) Support](https://www.synghub.com/preheader-help-guide#Call-to-Action-(CTA)-Support) → ### [Display Toggle Options](https://www.synghub.com/preheader-help-guide#Display-Toggle-Options) → ### [Style Customization](https://www.synghub.com/preheader-help-guide#Style-Customization) → [![1160x1](https://www.synghub.com/hubfs/1160x1.png "1160x1")](https://www.synghub.com/preheader-help-guide#overview) #### Overview The module offers 10 predefined layout variations, allowing you to display contact information, branding elements, navigation menus, social media icons, and CTA buttons. This flexibility helps adapt the preheader to different website needs while maintaining a clean and consistent design.  [![help-document-03](https://www.synghub.com/hubfs/help-document-03.jpg "help-document-03")](https://www.synghub.com/preheader-help-guide#Contact-Information-Display) #### Contact Information Display   Easily showcase phone number, email address, and business location. These elements help users quickly access important contact details.  ![help-document-01](https://www.synghub.com/hubfs/help-document-01.jpg "help-document-01") #### Branding Support   The module allows you to display your company logo or welcome message, helping reinforce brand identity across your website.  ![help-document-05](https://www.synghub.com/hubfs/help-document-05.jpg "help-document-05") #### Navigation Integration     Selected layouts support menu integration, enabling quick access to key pages directly from the preheader.  ![help-document-06](https://www.synghub.com/hubfs/help-document-06.jpg "help-document-06") #### Social Media Integration     Add social media icons with links to improve user engagement and connect visitors with your brand across platforms.  ![help-document-02](https://www.synghub.com/hubfs/help-document-02.jpg "help-document-02") #### Call-to-Action (CTA) Support      Include action buttons like “Contact Us” to drive user interaction and improve conversion opportunities.  ![help-document-04](https://www.synghub.com/hubfs/help-document-04.jpg "help-document-04") #### Display Toggle Options      Each element comes with enable/disable controls, giving you full flexibility to customize what appears in the preheader.  ![help-document-07](https://www.synghub.com/hubfs/help-document-07.jpg "help-document-07") ####  Style Customization       Easily customize styles across all layout variations. Adjust colors, spacing, and elements to match your brand. Ensure a consistent and visually appealing preheader design.  ![Icon (1)](https://www.synghub.com/hs-fs/hubfs/Icon%20(1).png?width=153&height=152&name=Icon%20(1).png) ### [Expert Assistance](https://wa.me/+6582067456) Get direct support from our experienced support team ![Icon (2)](https://www.synghub.com/hs-fs/hubfs/Icon%20(2).png?width=153&height=152&name=Icon%20(2).png) ### [Demo Link](https://www.synghub.com/preheader?hsLang=en)  Explore a live demo to experience the product in action.  # SyngHub Preheader  A flexible preheader module with 10 layout variations to display contact info, branding, navigation, social icons, and CTA buttons. Fields adapt based on the selected layout for easy customization.  [Get Module](https://ecosystem.hubspot.com/marketplace/modules/preheader-module-by-syngrid-technologies) ![Group 33835-1](https://www.synghub.com/hubfs/Group%2033835-1.png "Group 33835-1") ![box](https://www.synghub.com/hs-fs/hubfs/box.png?width=177&height=191&name=box.png) Let's Discuss Your Ideas! ![Object-4 1](https://www.synghub.com/hubfs/Object-4%201.png "Object-4 1") [![Final-PNG-Logo (1) 2](https://www.synghub.com/hs-fs/hubfs/Final-PNG-Logo%20(1)%202.png?width=210&height=84&name=Final-PNG-Logo%20(1)%202.png)](https://www.synghub.com/?hsLang=en) SyngHub is a HubSpot-focused product line by Syngrid Technologies, built to simplify and accelerate website development on HubSpot CMS. #### QUICK LINKS - [Home](https://www.synghub.com/?hsLang=en) - [About](https://www.synghub.com/?hsLang=en) - [Services](https://www.synghub.com/?hsLang=en) - [Products](https://www.synghub.com/?hsLang=en) - [Contact Us](https://www.synghub.com/?hsLang=en) #### CONTACT US Singapore ![Isolation_Mode](https://www.synghub.com/hs-fs/hubfs/Isolation_Mode.png?width=32&height=32&name=Isolation_Mode.png) +65 8206 7456 ![Telephone](https://www.synghub.com/hubfs/Telephone.svg) +65 6508 5166 ![Isolation_Mode](https://www.synghub.com/hs-fs/hubfs/Icon%20(3).png?width=32&height=32&name=Icon%20(3).png) sales@syngrid.com ![Isolation_Mode](https://www.synghub.com/hs-fs/hubfs/Isolation_Mode%20(2).png?width=32&height=32&name=Isolation_Mode%20(2).png) Punggol Digital District, Tower 82 Punggol Way, #07-25 Singapore – 829910 India ![Isolation_Mode](https://www.synghub.com/hs-fs/hubfs/Isolation_Mode.png?width=32&height=32&name=Isolation_Mode.png) +91 89250 31568 ![Isolation_Mode](https://www.synghub.com/hs-fs/hubfs/Icon%20(3).png?width=32&height=32&name=Icon%20(3).png) sales@syngrid.com ![Isolation_Mode](https://www.synghub.com/hs-fs/hubfs/Isolation_Mode%20(2).png?width=32&height=32&name=Isolation_Mode%20(2).png) TBI@TCE, Thiruparankundaram, Madurai – 625 015 Copyright © 2026.  SyngHub (Powered by Syngrid Technologies)