--- title: How to use the Hero Banner module description: Learn how to customize the Hero Banner module in the Awwal Blog Theme. Explore various styles, edit text, manage forms, and highlight posts for an engaging website design. image: https://documentation.awwaldesign.com/hubfs/Google%20Drive%20Integration/How%20to%20Change%20the%20Font%20Family%20in%20your%20Templates.jpeg --- [![logo](https://documentation.awwaldesign.com/hs-fs/hubfs/logo.png?width=72&height=44&name=logo.png "logo")](https://awwaldesign.com/) - Listing pages - [Single Column](https://templates.awwaldesign.com/ad-blog-single-column) - [Two Column](https://templates.awwaldesign.com/ad-blog-two-column) - [Three Column](https://templates.awwaldesign.com/ad-blog-three-column) - [Horizontal Style](https://templates.awwaldesign.com/ad-blog-horizontal-style) - [With Sidebar](https://templates.awwaldesign.com/ad-blog-with-sidebar) - [Listing with Simple Hero Option](https://templates.awwaldesign.com/ad-blog-listing-option-two) - [Listing with Popular Post Swiper](https://templates.awwaldesign.com/ad-blog-listing-option-three) - Post pages - [Post page](https://templates.awwaldesign.com/ad-blog-single-column/unlocking-potential-the-power-of-coaching-in-empowering-your-employees) - [Post page with sidebar](https://templates.awwaldesign.com/ad-blog-with-sidebar/office-vs.-home-the-pros-and-cons-of-working-in-different-environments) - [Blog Post Style 2](https://templates.awwaldesign.com/ad-blog-three-column/office-vs.-home-the-pros-and-cons-of-working-in-different-environments) - [Blog Post Style 2 with Sidebar](https://templates.awwaldesign.com/ad-blog-horizontal-style/designing-the-future-innovative-architecture-for-a-changing-world) - System Pages - [404 page](https://3067823.hubspotpreview-na1.com/_hcms/preview/template/multi?domain=undefined&hs_preview_key=olbEMd5l60dX91Y-P7v5Ow&portalId=3067823&tc_deviceCategory=undefined&template_file_path=AD-Theme%2FBlog%20theme%20by%20awwal%20design%2Ftemplates%2Fsystem%2F404.html&updated=1680759056647) - [500 page](https://3067823.hubspotpreview-na1.com/_hcms/preview/template/multi?domain=undefined&hs_preview_key=qpLpaucv8iqgYJwdXcqLjw&portalId=3067823&tc_deviceCategory=undefined&template_file_path=AD-Theme%2FBlog%20theme%20by%20awwal%20design%2Ftemplates%2Fsystem%2F500.html&updated=1680759069742) - [Search result page](https://templates.awwaldesign.com/search-result-page?term=awwal&type=BLOG_POST) - [Email backup unsubscribe page](https://3067823.hubspotpreview-na1.com/_hcms/preview/template/multi?domain=undefined&hs_preview_key=pIHFrQquYtNBHUWLKeqb5A&portalId=3067823&tc_deviceCategory=undefined&template_file_path=AD-Theme%2FAwwal%20Blog%20Theme%2Ftemplates%2Fsystem%2FAwwal%20-%20Email%20backup%20unsubscribe%20page.html&updated=1681624857047) - [Email subscriptions preference page](https://3067823.hubspotpreview-na1.com/_hcms/preview/template/multi?domain=undefined&hs_preview_key=aiSIXOdQbXkWoELSt0VeBQ&portalId=3067823&tc_deviceCategory=undefined&template_file_path=AD-Theme%2FAwwal%20Blog%20Theme%2Ftemplates%2Fsystem%2FAwwal%20-%20Email%20Subscription%20preferences%20page.html&updated=1681624863601) - [Email subscriptions confirmation page](https://3067823.hubspotpreview-na1.com/_hcms/preview/template/multi?domain=undefined&hs_preview_key=968fXOPCZcHe1qDBduJkFA&portalId=3067823&tc_deviceCategory=undefined&template_file_path=AD-Theme%2FAwwal%20Blog%20Theme%2Ftemplates%2Fsystem%2FAwwal%20-%20Subscription%20Confirmation%20Page.html&updated=1681621623610) - [Password prompt page](https://3067823.hubspotpreview-na1.com/_hcms/preview/template/multi?domain=undefined&hs_preview_key=ZIYiQQ87G9MtXBLzMsbB2A&portalId=3067823&tc_deviceCategory=undefined&template_file_path=AD-Theme%2FAwwal%20Blog%20Theme%2Ftemplates%2Fsystem%2FAwwal%20-%20Password%20Prompt%20Page.html&updated=1681624851432) - Landing Pages - [Multi purpose LP](https://templates.awwaldesign.com/ad-multipurpose-landing-page) - [eBook Landing Page](https://templates.awwaldesign.com/ebook-landing-page) - [Minimal eBook Landing Page](https://templates.awwaldesign.com/minimal-ebook-landing-page) - [Thank you page](https://templates.awwaldesign.com/thank-you-page) - [Subscription Page](https://awwaldesign.com/subscribe-to-awwal-blog) - [Documentation](https://documentation.awwaldesign.com/awwal-blog-theme) [Buy Now](https://app.hubspot.com/ecosystem/3067823/marketplace/website/awwal-blog-theme-by-awwal-design) ## What are you looking for? [Back](https://documentation.awwaldesign.com/awwal-blog-theme) # How to use the Hero Banner module Created By Safwan Shaikh Last Modified on: 1 Oct, 2024 Hero Banner in Awwal blog theme comes with amazing features and options. We're constantly updating our temples with the new features so we'll add more hero styles soon. ### Hero Banner's style options Here are the styles you can choose, you can read about all of them in detail below. ![](https://documentation.awwaldesign.com/hubfs/image-png-Apr-11-2023-11-20-21-6168-AM.png)   #### Banner style one ![Hero_Style One](https://documentation.awwaldesign.com/hs-fs/hubfs/Documentation/Awwal%20Blog%20Theme/Hero_Style%20One.png?width=1902&height=737&name=Hero_Style%20One.png) This vibrant hero style comes with a subscription module right at the top so it's easier attract and catch the leads. Instead of the subscription form you can select a different form When you setup the blog at first, this will be your default style but feel free to change it and experiment! ##### 1. Editing texts: You can use the rich text editor to add the title and body copy. ![](https://documentation.awwaldesign.com/hs-fs/hubfs/image-png-Apr-11-2023-11-52-26-0840-AM.png?width=226&height=404&name=image-png-Apr-11-2023-11-52-26-0840-AM.png) ##### 2. Editing form texts: Right below that you have a different rich text editor to add the form's title and description. ![](https://documentation.awwaldesign.com/hubfs/image-png-Apr-11-2023-12-03-04-5871-PM.png) ##### 3. Changing the form See the Subscription form area to choose the form you'd like to show in the right side. ![](https://documentation.awwaldesign.com/hubfs/image-png-Apr-11-2023-12-05-35-4877-PM.png)   --- #### Banner style two ![Hero_Style Two](https://documentation.awwaldesign.com/hs-fs/hubfs/Documentation/Awwal%20Blog%20Theme/Hero_Style%20Two.png?width=1903&height=754&name=Hero_Style%20Two.png) If you're looking for a minimal look this style is for you. ##### Editing texts: You can use the rich text editor to add the title and body copy. ![](https://documentation.awwaldesign.com/hs-fs/hubfs/image-png-Apr-11-2023-11-52-26-0840-AM.png?width=332&height=593&name=image-png-Apr-11-2023-11-52-26-0840-AM.png) > Click the Edit in expanded view button to edit the texts comfortably.   --- #### Banner style three ![Hero_Style Three](https://documentation.awwaldesign.com/hs-fs/hubfs/Documentation/Awwal%20Blog%20Theme/Hero_Style%20Three.png?width=1903&height=1069&name=Hero_Style%20Three.png) If you want to highlight some posts right at the top use this style. You have multiple options to choose what kind of posts you'd like to show there. ##### 1. Popular: You can choose the most popular posts type, It will automatically show the most popular up there. ![](https://documentation.awwaldesign.com/hubfs/image-png-Apr-11-2023-11-37-13-3582-AM.png)   You also have the ability to choose a type frame ![](https://documentation.awwaldesign.com/hubfs/image-png-Apr-11-2023-11-40-09-6045-AM.png)   ##### 2. Recent: Same as popular posts once you select the recent option, it will automatically show the most recent blog posts.   ##### 3. Using Tag: choose this option to highlight post from a certain tag ![](https://documentation.awwaldesign.com/hubfs/image-png-Apr-11-2023-11-47-04-6631-AM.png)   You can choose tag from here ![](https://documentation.awwaldesign.com/hubfs/image-png-Apr-11-2023-11-47-37-2914-AM.png) > Quick Tip: If you want to be really creative. In your blog, create a tag called "Featured" Now add this tag to a selected posts now in the Hero module choose a "Featured" tag to sort posts by. > >   > > You can now manually pick posts to show in the slider.   ### Controlling and changing the Hero Banner's style Switch over to Style tab and you have even more options. - You can choose a different image here - You can choose image alignment options (Cover) - You can change the Overlay color and opacity - You can choose the text color ![](https://documentation.awwaldesign.com/hubfs/image-png-Apr-11-2023-12-15-37-7669-PM.png)   ---   ### Didn’t find what you were looking for? Feel free to reach out and we’ll get back to you! [![awwal-logo-white](https://documentation.awwaldesign.com/hubfs/awwal-logo-white.svg "awwal-logo-white")](https://awwaldesign.com/) Write a brief description of your company or services here. keep it short but make it interesting enough to make user want more. Important Links - Home - Services - About Us - Blog - Contact Us - Get Started [123 456 7890](tel:123%20456%207890) [123 456 7890](tel:123%20456%207890) [123 456 7890](tel:123%20456%207890) Copyright @ 2023. All Right Reserved. Made with love by [Awwal Design](https://awwaldesign.com/) - - - ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Safwan Shaikh", "url" : "https://documentation.awwaldesign.com/awwal-blog-theme/author/safwan-shaikh" }, "dateModified" : "2025-02-16T11:56:10.944Z", "datePublished" : "2023-04-11T11:32:22.000Z", "headline" : "How to use the Hero Banner module", "image" : [ "https://documentation.awwaldesign.com/hubfs/Google%20Drive%20Integration/How%20to%20Change%20the%20Font%20Family%20in%20your%20Templates.jpeg" ], "mainEntityOfPage" : { "@id" : "https://documentation.awwaldesign.com/awwal-blog-theme/how-to-use-the-hero-banner", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://documentation.awwaldesign.com/hubfs/awwal-logo-2.svg" }, "name" : "Awwal Design" } } ```