--- title: Modules --- [![TECHLARO-full-logo](https://www.techclaro.in/hs-fs/hubfs/Techclaro-logo/TECHLARO-full-logo.png?width=333&height=200&name=TECHLARO-full-logo.png "TECHLARO-full-logo")](http://techclaro.com/) # **Documentation for HubSpot Modules** **This documentation pertains to the HubSpot modules crafted by** If you cannot locate the answer to your question, feel free to reach out to us via email at  ## **Module Set up** Setting up the a module in HubSpot is easy and straightforward. All you have to do is perform a simple drag and drop. Now let’s go through the setup steps: #### How to use a module: - Log in to your HubSpot account and navigate to the “Marketing” tab. ![m1](https://www.techclaro.in/hs-fs/hubfs/module-documentation/m1.png?width=700&height=55&name=m1.png) - Navigate to the "Website" option in the dropdown menu, and choose "Website Pages" or "landing Pages" from the expanded menu. ![Asset Marketplace Listings HubSpot 2023-11-29 at 2.47.55 PM](https://www.techclaro.in/hs-fs/hubfs/module-documentation/Asset%20Marketplace%20Listings%20HubSpot%202023-11-29%20at%202.47.55%20PM.jpg?width=238&height=286&name=Asset%20Marketplace%20Listings%20HubSpot%202023-11-29%20at%202.47.55%20PM.jpg) - Select the template from the particular theme you need and create your web page as usual. Under the module selection menu, search for the module you need by entering the module name and then select the module. - Now, effortlessly select any module, drag it, and drop it wherever you desire on your page. You will observe a new module appearing on the page. #### HubSpot Drag-and-Drop Areas! When utilizing a HubSpot theme featuring drag-and-drop areas, you have the option to configure the section housing your module to be full-width with no spacing. This ensures that your module occupies the entire width of the page.   - When you click on the Section, it should open up a toolbar in your sidebar that has options to adjust the section's alignment and spacing: - Click on the icon 'Pencil' to start edit Section and Columns. - Set Content alignment to Full Width and all paddings equal to 0px. - Set left and right paddings equal to 0px for each column in the row.   ![Screenshot 2023-11-29 at 3.18.52 PM](https://www.techclaro.in/hs-fs/hubfs/module-documentation/Screenshot%202023-11-29%20at%203.18.52%20PM.png?width=302&height=551&name=Screenshot%202023-11-29%20at%203.18.52%20PM.png)   If there is still space between your module and the page, check the Contents tab in your sidebar to confirm whether your module is placed under a column. Ensure that the left and right padding and margins there are set to 0. NOTE: Certain themes may not provide an option to eliminate the space between columns. To address this, activate the toggle \[Module settings \> Styles tab \> Remove gap between columns\] for each module in the row. #### How to customize the module The HubSpot module typically consists of two tabs: the Content tab and the Style tab. - Navigate to the "Content" section to modify the content you wish to showcase in your module sections. Effortlessly customize and revise the "Title," "Heading," and "Description" etc. - Navigate to the Style tab, where you'll find background options for various elements, font settings (including mobile spacing adjustments), and additional customization choices. These options will help tailor your module section to be distinct and aligned with your brand style. ![style](https://www.techclaro.in/hs-fs/hubfs/module-documentation/style.png?width=276&height=364&name=style.png) ![style](https://www.techclaro.in/hs-fs/hubfs/module-documentation/style.png?width=270&height=356&name=style.png)       #### Contact / How can I get support ##### **Support:** If you encounter any difficulties, have questions, or wish to provide feedback, please don't hesitate to reach out to me at @ [hubspot@techclaro.com](mailto:hubspot@techclaro.com)   ##### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com) If you have specific requirements for a custom HubSpot module or need a personalized HubSpot CMS or CRM setup, feel free to reach out to us. - [Back to top](https://www.techclaro.in/module-documentation#item_1) - [Page progress bar](https://www.techclaro.in/module-documentation#item_2) - [Banner Slider](https://www.techclaro.in/module-documentation#item_3) - [Accordion Tabs](https://www.techclaro.in/module-documentation#item_4) - [Client reviews](https://www.techclaro.in/module-documentation#item_5) - [Expand and Collapse](https://www.techclaro.in/module-documentation#item_6) - [Popup video](https://www.techclaro.in/module-documentation#item_7) - [Flash Message](https://www.techclaro.in/module-documentation#item_8) - [Simple blog listing](https://www.techclaro.in/module-documentation#item_9) - [Blog posts layout](https://www.techclaro.in/module-documentation#item_10) - [Testimonial with rating](https://www.techclaro.in/module-documentation#item_11) - [Logo Carousel](https://www.techclaro.in/module-documentation#item_12) - [Location Map](https://www.techclaro.in/module-documentation#item_13) - [Typewriter banner](https://www.techclaro.in/module-documentation#item_14) - [Announcement bar](https://www.techclaro.in/module-documentation#item_15) - [Image slider](https://www.techclaro.in/module-documentation#item_16) - [Breadcrumbs](https://www.techclaro.in/module-documentation#item_17) - [Features Listing](https://www.techclaro.in/module-documentation#item_18) - [Image Slider](https://www.techclaro.in/module-documentation#item_19) - [Countdown Timer](https://www.techclaro.in/module-documentation#item_20) - [Center Mode Slider](https://www.techclaro.in/module-documentation#item_21) - Select ![drop-down-img](https://www.techclaro.in/hubfs/raw_assets/public/Clarohub/images/module-icons/right-arrow.svg) - [Back to top](https://www.techclaro.in/module-documentation#item_1) - [Page progress bar](https://www.techclaro.in/module-documentation#item_2) - [Banner Slider](https://www.techclaro.in/module-documentation#item_3) - [Accordion Tabs](https://www.techclaro.in/module-documentation#item_4) - [Client reviews](https://www.techclaro.in/module-documentation#item_5) - [Expand and Collapse](https://www.techclaro.in/module-documentation#item_6) - [Popup video](https://www.techclaro.in/module-documentation#item_7) - [Flash Message](https://www.techclaro.in/module-documentation#item_8) - [Simple blog listing](https://www.techclaro.in/module-documentation#item_9) - [Blog posts layout](https://www.techclaro.in/module-documentation#item_10) - [Testimonial with rating](https://www.techclaro.in/module-documentation#item_11) - [Logo Carousel](https://www.techclaro.in/module-documentation#item_12) - [Location Map](https://www.techclaro.in/module-documentation#item_13) - [Typewriter banner](https://www.techclaro.in/module-documentation#item_14) - [Announcement bar](https://www.techclaro.in/module-documentation#item_15) - [Image slider](https://www.techclaro.in/module-documentation#item_16) - [Breadcrumbs](https://www.techclaro.in/module-documentation#item_17) - [Features Listing](https://www.techclaro.in/module-documentation#item_18) - [Image Slider](https://www.techclaro.in/module-documentation#item_19) - [Countdown Timer](https://www.techclaro.in/module-documentation#item_20) - [Center Mode Slider](https://www.techclaro.in/module-documentation#item_21) ###### DOCUMENTATIONS ## **Modules** The module is a key component in HubSpot Themes, allowing seamless addition or removal through a drag-and-drop builder. Customization is made easy with a variety of options provided within the module. The extensive range of available options ensures flexibility in tailoring your content. During the page creation process, you can find Theme modules in designated areas. These modules play a crucial role in shaping your page. Explore numerous modules designed for creating your website in HubSpot, compatible with any Theme. Enhance your website's functionality and design with these versatile modules. ## **Back to top** **Introduction:** The Scroll Back to Top module is designed to enhance user experience by providing a quick and easy way for visitors to navigate back to the top of the page. **Installation:** 1. Visit the HubSpot Marketplace. 2. Search for "Scroll Back to Top" module. 3. Click "Install" to add the module to your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Customize the module settings as needed, including appearance and behavior. **Customization Options:** - **Style:** Choose from different styles to match your website's design. - **Position:** Set the position of the scroll button on the page. ![b-2-t](https://www.techclaro.in/hs-fs/hubfs/module-documentation/b-2-t.png?width=1160&height=516&name=b-2-t.png) #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com) **Note:** Ensure that the module is placed within the desired section of your page for optimal functionality. ## **Page Progress Bar** **Introduction:** The Page Progress Bar module is designed to enhance user engagement by displaying a visual indicator of the progress as visitors scroll through your webpage. **Installation:** 1. Navigate to the HubSpot Marketplace. 2. Search for the "Page Progress Bar" module. 3. Click "Install" to add the module to your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Customize the module settings to align with your website's design and requirements. **Customization Options:** - **Style:** Choose from various styles to match your website's aesthetic. - **Position:** Set the location of the progress bar on the page. - **Color:** Customize the color scheme to complement your branding (gradient option available). - **Height:** Adjust the height of the progress bar for optimal visibility.   ![p-b](https://www.techclaro.in/hs-fs/hubfs/module-documentation/p-b.png?width=1105&height=407&name=p-b.png)   #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com)   **Note:** Ensure that the module is appropriately placed to provide accurate progress tracking as users scroll through your content. ## Banner Slider **Introduction:** The Banner Slider module is a versatile solution for adding visually appealing image sliders to your HubSpot website. With easy customization options and responsive design, it enhances the visual appeal of your web pages. ![Banner-module](https://www.techclaro.in/hs-fs/hubfs/module-documentation/Banner-module.png?width=3584&height=1480&name=Banner-module.png) **Installation** 1. Visit the HubSpot Marketplace. 2. Search for the Banner Slider module. 3. Click "Install" to add the module to your HubSpot account. **Usage** 1. **Add Banner Slider to a Page:** - Edit the page where you want to display the banner slider. - Add the Banner Slider module to the desired location. 2. **Customization:** - Upload banner images and add captions. - Adjust slider speed and transition effects. - Multiple slider effects - Include an overlay option for the banner based on the images and text color utilized. - Add unlimited number of images. - Slider speed adjustable option. - Arrows and dot color adjustable, with on/off option. - Scroll / Fade adjustable option   ![b-s-1](https://www.techclaro.in/hs-fs/hubfs/module-documentation/b-s-1.png?width=2116&height=926&name=b-s-1.png)   ![b-s-2](https://www.techclaro.in/hs-fs/hubfs/module-documentation/b-s-2.png?width=1700&height=750&name=b-s-2.png)   #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com)   **Note:** Ensure that the module is appropriately placed to provide accurate progress tracking as users scroll through your content.   ## Accordion Tabs **Introduction:** The Accordion Tabs with Top Tab module is a visually appealing and functional content display tool for HubSpot, designed to combine images and accordion functionality within a structured layout. It features a prominent top tab for navigation, with content displayed in a split layout: an image on the left and an accordion on the right. Perfect for storytelling, product showcases, and detailed explanations.    ![accordion tabs](https://www.techclaro.in/hs-fs/hubfs/module-documentation/accordion%20tabs.png?width=2244&height=1402&name=accordion%20tabs.png)   **Installation:** 1. Visit the HubSpot Marketplace. 2. Search for "Accordion Tabs" module. 3. Click "Install" to add the module to your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Customize the module settings as needed, including appearance and behavior. **Customization Options:** - **Style:** Choose from various styles to match your website's aesthetic. - **Color:** Customize the color od the default icons to your branding. - **Accordion:** Unlimited accordions with images can be added. - **Tab Visibility:** Tab option can be shown or hidden as needed. - **Button as option:**  CTA button be applied to each individual accordion item as an option, we can add or remove button based on the requirment. - Bottom button also can be added as an option, we can add or remove it. - **Tab Limit:** Unlimited tabs can be added based on the accordion contents. ![new](https://www.techclaro.in/hs-fs/hubfs/module-documentation/new.png?width=1412&height=662&name=new.png) ![Screenshot 2026-02-16 at 10.32.34 PM](https://www.techclaro.in/hs-fs/hubfs/module-documentation/Screenshot%202026-02-16%20at%2010.32.34%20PM.png?width=592&height=417&name=Screenshot%202026-02-16%20at%2010.32.34%20PM.png)   #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com)   ## Client reviews slider Dynamic Impressions: Unleash the Potential of the Client Reviews Slider Module **Introduction:** Introducing the Client Reviews Slider Module—a dynamic and visually captivating way to showcase the positive experiences of your satisfied clients. This module seamlessly integrates into your HubSpot website, creating an engaging slider that effortlessly highlights glowing testimonials, ratings, and success stories. Capture the attention of your audience with a sleek and interactive display, allowing visitors to easily navigate through a carousel of client feedback. Elevate your brand's credibility and build trust with this modern and user-friendly Client Reviews Slider Module. Transform your website into a powerful tool for showcasing the positive impact your products or services have had on your valued clients.   ![cr-1](https://www.techclaro.in/hs-fs/hubfs/module-documentation/cr-1.png?width=2308&height=1446&name=cr-1.png)   **Installation:** 1. Visit the HubSpot Marketplace. 2. Search for "Client reviews" module. 3. Click "Install" to add the module to your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Customize the layout, color scheme, and typography to match your website's design. 4. Add testimonials with corresponding ratings through the module's intuitive interface. **Customization Options:** - **Style:** Choose from various styles to match your website's aesthetic. - **Testimonial Content:** Add the testimonials shared by clients/users. - **Rating Input:** Add rating star form 1 to 5 - **Color:** Customize the color scheme to complement your branding (gradient background option available). - Client/user Headshot, name, description change option. - Quote icon on/off and color change option - Unlimited number of testimonial can be added. - Module background gradient color/ background image update option available. - Module header change/hide option - Quote icon on/off and color change option - **Rating Input:** Add rating star form **1 to 5** - Rating star color change option   ![cr-7](https://www.techclaro.in/hs-fs/hubfs/module-documentation/cr-7.png?width=1370&height=702&name=cr-7.png)   ![cr-4](https://www.techclaro.in/hs-fs/hubfs/module-documentation/cr-4.png?width=1292&height=1172&name=cr-4.png) ![cr-5-1](https://www.techclaro.in/hs-fs/hubfs/module-documentation/cr-5-1.png?width=1764&height=926&name=cr-5-1.png)   #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com)   **Note:** Ensure that the module is appropriately placed to provide accurate progress tracking as users scroll through your content. ## Expand and Collapse **Introduction:** The Expand and Collapse Accordion module provides an intuitive way to create accordion-style sections on your HubSpot website. With additional features for background image and color customization, this module allows you to create visually engaging and dynamic content sections.   ![accordion](https://www.techclaro.in/hs-fs/hubfs/module-documentation/accordion.png?width=2056&height=1524&name=accordion.png)   **Installation:** 1. Visit the HubSpot Marketplace. 2. Search for "Expand and Collapse" module. 3. Click "Install" to seamlessly integrate the module into your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Customize the layout, color scheme, and typography to match your website's design. 4. Upload background images or choose colors for each accordion section. **Customization Options:** - **Style:** Choose from various styles to match your website's aesthetic. - Locate the "Title" and "Content" fields in the accordion section settings. - Input the desired title and content for each section. - Find the "Icon Color" option in the settings. - Select a color or enter a custom color code to change the icon color. - **Background Color:** Module background gradient color/ background image update option available. - Module header change/hide option   ![e-m1](https://www.techclaro.in/hs-fs/hubfs/module-documentation/e-m1.png?width=1670&height=904&name=e-m1.png)   ![e-m2](https://www.techclaro.in/hs-fs/hubfs/module-documentation/e-m2.png?width=1710&height=666&name=e-m2.png)   #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com)   **Note:** Ensure that the module is appropriately placed to provide accurate progress tracking as users scroll through your content. ## Popup video **Introduction:** The Popup Video module enhances user engagement by providing a visually appealing way to showcase videos in a popup format on your HubSpot website. With additional features for background image and color customization, this module allows you to create an immersive video experience.   ![vb](https://www.techclaro.in/hs-fs/hubfs/module-documentation/vb.png?width=1888&height=776&name=vb.png)   ![v-b2](https://www.techclaro.in/hs-fs/hubfs/module-documentation/v-b2.png?width=2398&height=856&name=v-b2.png)   **Installation:** 1. Visit the HubSpot Marketplace. 2. Search for "Popup video" module. 3. Click "Install" to seamlessly integrate the module into your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Showcase videos in a popup format to capture user attention. 4. Enhance the multimedia experience on your website. 5. Choose from a variety of options to align with your website's design. 6. Support for YouTube, Vimeo, and MP4 video sources. 7. Provide flexibility in choosing the platform that best suits your content. 8. Easily configure the video popup settings. 9. Upload a background image or choose a background color. **Customization Options:** - **Style:** Choose from various styles to match your website's aesthetic. - Locate the "Title" and "Content" fields in the accordion section settings. - Input the desired title and content for each section. - Find the "Icon Color" option in the settings. - Select a color or enter a custom color code to change the icon color. - **Background:** Module background gradient color/ background image update option available. - Module header change/hide option - **Parallax background** option available   ## Usage 1. **Add Popup Video to a Page:** - Edit the page where you want to showcase a video. - Add the Popup Video module to the desired location. 2. **Customization:** - Easily configure the video popup settings. - Upload a background image or choose a background color. ### Configuration Options 1\. **Video Source** **Description:** Select the source of the video you want to showcase in the popup. 1. Navigate to the video source settings. 2. Choose between YouTube, Vimeo, or MP4 as your video source. 3. Enter the video URL or upload an MP4 file accordingly.   2\. **Background Image** **Description:** Customize the background of the video popup with an image. 1. Find the "Background Image" option in the module settings. 2. Upload your desired background image or choose from the available options.   3\. **Color Options** **Description:** Choose and customize colors for the background of the video popup. 1. Navigate to the color options section in the module settings. 2. Select a color palette or enter custom color codes. 3. Apply the chosen colors to the background of the video popup.   ![Screenshot 2023-12-04 at 10.23.26 PM](https://www.techclaro.in/hs-fs/hubfs/module-documentation/Screenshot%202023-12-04%20at%2010.23.26%20PM.png?width=1706&height=686&name=Screenshot%202023-12-04%20at%2010.23.26%20PM.png) ![Screenshot 2023-12-04 at 10.23.36 PM](https://www.techclaro.in/hs-fs/hubfs/module-documentation/Screenshot%202023-12-04%20at%2010.23.36%20PM.png?width=1702&height=542&name=Screenshot%202023-12-04%20at%2010.23.36%20PM.png)   #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com)   **Note:** Ensure that the module is appropriately placed to provide accurate progress tracking as users scroll through your content. ## Flash Message **Introduction:** The Flash Message module is a customizable solution for displaying highlighted messages with icons on HubSpot websites. It offers various options for customization, including font size, animation speed, multiple background choices, and the ability to fix the message to the top of the page. **Installation:** 1. Visit the HubSpot Marketplace. 2. Search for "Flash Message" module. 3. Click "Install" to add the module to your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Customize the module settings as needed, including appearance and behavior. **Customization Options:** - **Style:** Choose from various styles to match your website's aesthetic. - **Position:** Set the location of the progress bar on the page. - **Color:** Customize the color scheme to complement your branding (gradient option available). - **Font Size:** Option to change the font size - **Animation Speed:** Option to adjust the scroll speed - **Positioning**: Toggle the option to fix the message to the top.   ![f-m-d](https://www.techclaro.in/hs-fs/hubfs/module-documentation/f-m-d.png?width=2018&height=876&name=f-m-d.png)   #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com)   ## Simple blog listing Transform Your Blog Experience: Introducing Our Dynamic Post Showcase for free ![sbp-2](https://www.techclaro.in/hs-fs/hubfs/module-documentation/sbp-2.png?width=989&height=658&name=sbp-2.png) **Introduction:** Enhance your website's capabilities using our versatile Free 'Simple blog listing' module. This powerful tool enables you to effortlessly display your blog posts in an engaging fashion.    **Installation:** 1. Visit the HubSpot Marketplace. 2. Search for "Simple blog listing" module. 3. Click "Install" to add the module to your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Customize the layout, color scheme, and typography to match your website's design. 4. Select the blog based on **Recent Posts, Popular Posts.** 5. Set the post layout as boxed or full width based on the option provided. **Customization Options:** - **How posts show up** You can pull in recent posts, popular posts, or posts that share a specific tag. You choose which blog to use and how many posts appear in the row (two or three side by side on larger screens). - **Look and layout** You can match your site's style: colors, gradients, or a background image. If you use a background image, you can add a tint or overlay so text stays readable. You can also limit how wide the module sits on the page and adjust spacing on desktop and mobile so it doesn’t feel cramped or too airy. - **Images** You set how tall the featured image area is on each card. If a post doesn’t have a featured image, you can set a default picture so cards always look complete. - **Text and readability** You can shorten long titles or descriptions by limiting how many words show. You can change the “Read more” wording. Colors are adjustable for headlines, tag labels, excerpt text, author and date, and both the Read more button and the optional bottom button. - **Author and date** You can turn author and/or publish date on or off, change short labels like “By” / “On”, choose how the date looks (e.g. US vs EU style), optionally show the author’s photo, and put author and date on one line if you prefer. - **Module title** You can show or hide the heading at the top (e.g. "Featured posts") and edit that text. - **Bottom button** ("go to the blog") You can add an optional button at the bottom—on or off. When it's on, you set where it goes (usually your main blog page) and the button label. - **Even card heights** There’s an option to make cards in the same row the same height so the layout looks neat when titles and excerpts differ in length. - **Fine-tuning the excerpt area** If you want a minimum amount of space for the excerpt on desktop (for a uniform look), that's optional; spacing before the Read more button can also be adjusted. On phones and narrow screens, the layout is tuned so the excerpt doesn't leave a big empty gap above the button. ![sbp-5](https://www.techclaro.in/hs-fs/hubfs/module-documentation/sbp-5.png?width=1146&height=740&name=sbp-5.png) ![Screenshot 2026-04-19 at 12.22.04 PM](https://www.techclaro.in/hs-fs/hubfs/module-documentation/Screenshot%202026-04-19%20at%2012.22.04%20PM.png?width=1298&height=688&name=Screenshot%202026-04-19%20at%2012.22.04%20PM.png) ![Screenshot 2026-04-19 at 12.22.28 PM](https://www.techclaro.in/hs-fs/hubfs/module-documentation/Screenshot%202026-04-19%20at%2012.22.28%20PM.png?width=1366&height=896&name=Screenshot%202026-04-19%20at%2012.22.28%20PM.png)   #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com) If you're satisfied with the module, we'd greatly appreciate it if you could take a moment to share your feedback in a review. Your insights are invaluable to us and can help others make informed decisions. Thank you for your time and support!   **Note:** Ensure that the module is appropriately placed to provide accurate progress tracking as users scroll through your content. ## Blog posts layout Transform Your Blog Experience: Introducing Our Dynamic Post Showcase **Introduction:** Enhance your website's capabilities using our versatile 'Blog posts layout' module. This powerful tool enables you to effortlessly display your blog posts in an engaging fashion.    **Installation:** 1. Visit the HubSpot Marketplace. 2. Search for "Blog posts layout" module. 3. Click "Install" to add the module to your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Customize the layout, color scheme, and typography to match your website's design. 4. Select the blog based on **Recent Posts, Popular Posts, Featured Tag** 5. Set the post layout as boxed or full width based on the option provided. 6. Option to hide/show blog post tags. **Customization Options:** - **Style:** Choose from various styles to match your website's aesthetic. - background color or image option with overlay color over the image change option. - **Layout option:** We have **2 layout** options available. - **Color:** Customize the color scheme to complement your branding (gradient background option available). - Module background gradient color/ background image update option available. - Module header change/hide option - Bottom Navigation option to navigate to the blog main page. we can on/off the CTA - We have option to select **Recent Posts, Popular Posts, Featured Tag**   ![bl-1](https://www.techclaro.in/hs-fs/hubfs/module-documentation/bl-1.png?width=1636&height=746&name=bl-1.png)   ![bl-2](https://www.techclaro.in/hs-fs/hubfs/module-documentation/bl-2.png?width=1664&height=834&name=bl-2.png)   #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com)   **Note:** Ensure that the module is appropriately placed to provide accurate progress tracking as users scroll through your content. ## Testimonial with rating **Introduction:** The Testimonial with Rating module is designed to showcase user testimonials along with a rating system on your HubSpot website. It allows you to highlight positive feedback from your customers, providing a dynamic and engaging way to build trust.   ![t-s](https://www.techclaro.in/hs-fs/hubfs/module-documentation/t-s.png?width=2244&height=1348&name=t-s.png)   **Installation:** 1. Visit the HubSpot Marketplace. 2. Search for "Testimonial with rating" module. 3. Click "Install" to add the module to your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Customize the layout, color scheme, and typography to match your website's design. 4. Add testimonials with corresponding ratings through the module's intuitive interface. **Customization Options:** - **Style:** Choose from various styles to match your website's aesthetic. - **Testimonial Content:** Add the testimonials shared by clients/users. - **Rating Input:** Add rating star form 1 to 5 - **Color:** Customize the color scheme to complement your branding (gradient background option available). - Client/user logo on/off and change option. - Client/user Headshot, name, description change option. - Quote icon on/off and color change option - Unlimited number of testimonial can be added. - Module background gradient color/ background image update option available. - Module header change/hide option   ![t-s-r](https://www.techclaro.in/hs-fs/hubfs/module-documentation/t-s-r.png?width=968&height=1834&name=t-s-r.png)   ![tr-1](https://www.techclaro.in/hs-fs/hubfs/module-documentation/tr-1.png?width=1684&height=564&name=tr-1.png) ![tr-2](https://www.techclaro.in/hs-fs/hubfs/module-documentation/tr-2.png?width=1636&height=610&name=tr-2.png)   #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com)   **Note:** Ensure that the module is appropriately placed to provide accurate progress tracking as users scroll through your content. ## Logo Slider for HubSpot Marketplace Seeking a way to display client logos on your HubSpot website for free? Discover the distinctive appeal of this logo slider, celebrated for its simplicity and effectiveness. A Logo Carousel is a tool that displays client logos in a sliding format. It's an easy way to showcase partnerships or client testimonials on your website.   **Introduction:** Enhance your website's visual appeal and showcase your partners, clients, or sponsors seamlessly with our Logo Slider module for HubSpot. Elevate your brand's credibility and build trust by displaying a dynamic carousel of logos in a sleek and professional manner.   ![lc-2](https://www.techclaro.in/hs-fs/hubfs/module-documentation/lc-2.png?width=822&height=318&name=lc-2.png) ![lc-3](https://www.techclaro.in/hs-fs/hubfs/module-documentation/lc-3.png?width=825&height=322&name=lc-3.png) ![lc-1](https://www.techclaro.in/hs-fs/hubfs/module-documentation/lc-1.png?width=816&height=384&name=lc-1.png)   **Installation:** 1. Visit the HubSpot Marketplace. 2. Search for "**Logo Carousel**" module. 3. Click "Install" to add the module to your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Customize the layout, color scheme, and typography to match your website's design. 4. Add unlimited logos with link using module's intuitive interface. **Customization Options:** - **Style:** Choose from various styles to match your website's aesthetic. - **Logo:** Unlimited logos can be added. - **Rating Input:** Add rating star form 1 to 5 - **Colors:** Customize the color scheme to complement your branding (gradient background option available). - Single logo link add/change option. - Module background gradient color/ background image update option available. - Module header change/hide option - Slider arrow/dot icon on/off and color change option. - Multiple row's can be added - Option to update the number of logos can be visible on load. - Whether it's a desktop or mobile, logos always shine. - Slider can be optimised using multiple steps. - Trust in its seamless performance within the HubSpot environment.   ![ls1](https://www.techclaro.in/hs-fs/hubfs/module-documentation/ls1.png?width=1702&height=736&name=ls1.png)   ![ls](https://www.techclaro.in/hs-fs/hubfs/module-documentation/ls.png?width=298&height=528&name=ls.png) ![ls2](https://www.techclaro.in/hs-fs/hubfs/module-documentation/ls2.png?width=877&height=536&name=ls2.png)   #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com)   **Note:** Ensure that the module is appropriately placed to provide accurate progress tracking as users scroll through your content. ## Location Map for HubSpot Marketplace The "**Location Map** " is a user-friendly digital map that allows seamless navigation with an address input feature. It offers customization options for visual elements, aligning with branding, and boasts a responsive design for optimal viewing on various devices.   **Introduction:** The "Location Map with Address Box, Custom Options, and Responsive Design" is a feature-rich digital map designed for enhanced user interaction. With a built-in address box, users can input specific locations for easy navigation. The customization options enable businesses to tailor the map's appearance, aligning it with their brand aesthetics. Moreover, the responsive design ensures a seamless and engaging experience across different devices, accommodating users on desktops, tablets, and smartphones. This versatile mapping solution combines functionality and visual appeal, making it an ideal tool for businesses, events, or services aiming to provide an interactive and personalized location-finding experience.   ![lm](https://www.techclaro.in/hs-fs/hubfs/module-documentation/lm.png?width=1182&height=455&name=lm.png) **Installation:** 1. Visit the HubSpot Marketplace. 2. Search for "**Location Map**" module. 3. Click "Install" to add the module to your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Customize the layout, color scheme, and typography to match your website's design. 4. Add Map iframe code with address locations. **Customization Options:** - **Style:** Choose from various styles to match your website's aesthetic. - **Iframe:** You can get the iframe of your location from the map directly and add it to the location field. - **Address:** Customise the address section with multiple details - **Colors:** Customize the color scheme to complement your branding (gradient background option available). - Full width map option. - Address box on/off option. - Option to change map color to Grey - Address box background gradient color change option. - Module header change/hide option. - Iframe height adjust option. - Map overlay layer can be added. - Whether it's a desktop or mobile, Location map always shine. - Trust in its seamless performance within the HubSpot environment.   ![lm-1](https://www.techclaro.in/hs-fs/hubfs/module-documentation/lm-1.png?width=847&height=698&name=lm-1.png)   ![lm-2](https://www.techclaro.in/hs-fs/hubfs/module-documentation/lm-2.png?width=754&height=526&name=lm-2.png)   #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com)   **Note:** Ensure that the module is appropriately placed to provide accurate progress tracking as users scroll through your content. ## **Typewriter banner** for HubSpot Marketplace Introducing the "**Typewriter Banner**" HubSpot module - an innovative tool to effortlessly infuse dynamism into your website banners. Elevate your brand presence with captivating, real-time text animations. Easy to integrate, highly customizable, and designed to make your content truly memorable. Upgrade your storytelling game with Typewriter JS Banner and leave a lasting impression on your audience.   **Introduction:** Elevate your website's visual appeal with the Typewriter JS Banner module. Craft compelling and dynamic banners that captivate your audience's attention. The Typewriter JS effect brings a touch of nostalgia and modern creativity to your content, giving your messages a unique and engaging twist.   ![twb2](https://www.techclaro.in/hs-fs/hubfs/module-documentation/twb2.png?width=1091&height=433&name=twb2.png) **Installation:** 1. Visit the HubSpot Marketplace. 2. Search for "**Typewriter banner**" module. 3. Click "Install" to add the module to your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Customize the layout, color scheme, and typography to match your website's design. 4. Customise the banner header texts and background image you need **Customization Options:** - **Style:** Choose from various styles to match your website's aesthetic. - **Dynamic Text Animation**: Effortlessly create banners with text that comes to life, as if typed in real-time. - **Colors:** Customize the header colors accordingly. - **Customization Options:** Tailor the speed, font, and styling to match your brand's aesthetic seamlessly. - **Responsive Design**: Ensures a consistent and stunning experience across all devices. - **Easy Integration:** Simply drop the module into your HubSpot template and start captivating your audience immediately. - Parallax background option - Banner overlay color layer can be added and adjusrted. - Whether it's a desktop or mobile, Location map always shine. - Trust in its seamless performance within the HubSpot environment. **Ideal Use Cases:** - **Homepage Banners:** Grab attention with eye-catching introductory messages. - **Product Highlights:** Showcase key product features in a memorable way. - **Event Announcements:** Make event details memorable with animated announcements.   ![tbw6](https://www.techclaro.in/hs-fs/hubfs/module-documentation/tbw6.png?width=1141&height=588&name=tbw6.png) ![tbw7](https://www.techclaro.in/hs-fs/hubfs/module-documentation/tbw7.png?width=1138&height=499&name=tbw7.png)   **Why Choose Typewriter Banner?** The Typewriter JS Banner module is not just a visual enhancement but a storytelling tool. Craft narratives, highlight key messages, and create a memorable user experience that leaves a lasting impression on your visitors. Elevate your website aesthetics today with Typewriter JS Banner! **Get started and make your content stand out!**   #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com)   **Note:** Ensure that the module is appropriately placed to provide accurate progress tracking as users scroll through your content. ## Announcement bar **Introduction:** Elevate your website's engagement and conversion rates with the Announcement Bar with CTA Module, exclusively designed for HubSpot users. Seamlessly integrated into HubSpot's CMS platform, this module empowers you to create eye-catching announcement bars with compelling calls-to-action (CTAs) to effectively communicate with your audience and drive desired actions.   ![ab1](https://www.techclaro.in/hs-fs/hubfs/module-documentation/ab1.png?width=3584&height=222&name=ab1.png)   **Installation:** 1. Visit the HubSpot Marketplace. 2. Search for "Announcement bar" module. 3. Click "Install" to add the module to your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Customize the module settings as needed, including appearance and behavior. **Customization Options:** - **Style:** Choose from various styles to match your website's aesthetic. - **Load banner only once:** Option to load banner only once. - **Color:** Customize the color scheme to complement your branding (gradient option available). - **Font styles:** Option to change the font size and color. - CTA hide/show option. - **Close** **button** to close the annoncement bar - **Close button style:** Option to adjust the close button styles   ![ab](https://www.techclaro.in/hs-fs/hubfs/module-documentation/ab.png?width=1548&height=974&name=ab.png)   #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com)   ## Image slider **Introduction:** Enhance your website's visual appeal with our fully responsive Image Slider HubSpot module. Ideal for showcasing images on any device, this slider offers seamless functionality and customization. **![1](https://www.techclaro.in/hs-fs/hubfs/module-documentation/1.png?width=3576&height=1398&name=1.png)** **Installation:** 1. Visit the HubSpot Marketplace. 2. Search for "Image slider" module. 3. Click "Install" to add the module to your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Customize the module settings as needed, including appearance and behavior. **Customization Options:** - **Style:** Choose from various styles to match your website's aesthetic. - **Color:** Customize the color scheme to complement your branding. - **Module header** hide/show option. - **Option to adjust**  Slider column count - **Option to** popup images as gallery. ![md](https://www.techclaro.in/hs-fs/hubfs/module-documentation/md.png?width=892&height=440&name=md.png) #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com)   ## Breadcrumbs **Introduction:** Transform your website into a visual masterpiece with the Breadcrumbs. This dynamic and highly customisable module enables you to display page links in a modern layout, ensuring a stunning and engaging presentation of your visual content.  ![Screenshot 2024-08-09 at 5.39.39 PM](https://www.techclaro.in/hs-fs/hubfs/module-documentation/Screenshot%202024-08-09%20at%205.39.39%20PM.png?width=946&height=136&name=Screenshot%202024-08-09%20at%205.39.39%20PM.png) ![Screenshot 2024-08-09 at 5.40.10 PM](https://www.techclaro.in/hs-fs/hubfs/module-documentation/Screenshot%202024-08-09%20at%205.40.10%20PM.png?width=950&height=112&name=Screenshot%202024-08-09%20at%205.40.10%20PM.png) **Installation:** 1. Visit the HubSpot Marketplace. 2. Search for "Breadcrumbs" module. 3. Click "Install" to add the module to your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Customize the module settings as needed, including appearance and behavior. **Customization Options:** - **Style:** Choose from various styles to match your website's aesthetic. - **Color:** Customize the color scheme to complement your branding. - **Option to adjust**  Breadcrumbscount ![bd](https://www.techclaro.in/hs-fs/hubfs/module-documentation/bd.png?width=1470&height=792&name=bd.png)   #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com)   ## Features Listing **Introduction:** Transform your website into a visual masterpiece with the Features Listing module. This dynamic and highly customizable module enables you to list features in a modern, listing style grid layout, ensuring a stunning and engaging presentation of your visual content.  ![Screenshot 2024-08-12 at 3.23.22 PM](https://www.techclaro.in/hs-fs/hubfs/module-documentation/Screenshot%202024-08-12%20at%203.23.22%20PM.png?width=2506&height=942&name=Screenshot%202024-08-12%20at%203.23.22%20PM.png) ![Screenshot 2024-08-12 at 3.26.08 PM](https://www.techclaro.in/hs-fs/hubfs/module-documentation/Screenshot%202024-08-12%20at%203.26.08%20PM.png?width=2472&height=1028&name=Screenshot%202024-08-12%20at%203.26.08%20PM.png) **Installation:** 1. Visit the HubSpot Marketplace. 2. Search for "Features Listing" module. 3. Click "Install" to add the module to your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Customize the module settings as needed, including appearance and behavior. **Customization Options:** - **Style:** Choose from various styles to match your website's aesthetic. - **Color:** Customize the color od the default icons to your branding. - Unlimited listing can be added - Columns can be set to 1, 2, 3 cols. - Header aligment update option - Option to add both icon image and icon ![fl-doc](https://www.techclaro.in/hs-fs/hubfs/module-documentation/fl-doc.png?width=1308&height=706&name=fl-doc.png)   #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com)   ## Image Slider **Introduction:** Enhance your website's visual appeal with our fully responsive Image Slider HubSpot module. Ideal for showcasing images on any device, this slider offers seamless functionality and customization.    ![1](https://www.techclaro.in/hs-fs/hubfs/module-documentation/1.png?width=3576&height=1398&name=1.png)   **Installation:** 1. Visit the HubSpot Marketplace. 2. Search for "Image Slider" module. 3. Click "Install" to add the module to your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Customize the module settings as needed, including appearance and behavior. **Customization Options:** - **Style:** Choose from various styles to match your website's aesthetic. - **Color:** Customize the color od the default icons to your branding. - Unlimited images can be added - Option to show slider image in popup - Hide/show option for module header   ![md](https://www.techclaro.in/hs-fs/hubfs/module-documentation/md.png?width=892&height=440&name=md.png) #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com)   ## Countdown Timer **Introduction:** The **Countdown Timer** module is a powerful tool designed to enhance your marketing campaigns by adding urgency and visual appeal. Whether you're promoting a limited-time sale, launching a product, or counting down to an event, this module helps capture attention and encourage action. With a high level of customization, you can match the timer's design seamlessly with your brand. From background images to custom colors, social links, and expiration text, this module gives you complete control—without needing a developer. ![ct1](https://www.techclaro.in/hs-fs/hubfs/module-documentation/ct1.png?width=1050&height=314&name=ct1.png) ![ct2](https://www.techclaro.in/hs-fs/hubfs/module-documentation/ct2.png?width=1066&height=306&name=ct2.png)   **Installation:** 1. Visit the HubSpot Marketplace. 2. Search for "Countdown Timer" module. 3. Click "Install" to add the module to your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Customize the module settings as needed, including appearance and behavior. **Customization Options** - **Style Variants**: Select from different layout styles to best fit your campaign’s design and messaging. - **Background Options**: Use a background image or gradient color, with full control over overlay color and opacity for optimal visual appeal. - **Color Customization**: Adjust all colors—including timer digits, text, buttons, and overlays—to perfectly align with your brand’s color palette. - **Header Visibility**: Easily show or hide the top and bottom header sections to keep the design clean or add extra information as needed. - **Event Date & Time**: Set any date and time for the countdown to target, ideal for events, launches, or deadlines. - **Social Links**: Add links to any social media platform, with the ability to customize icons and colors for branding consistency. - **Button Customization**: Add a call-to-action button with editable text, link, background color, hover effects, and padding options. - **Expiration Message**: Create a custom message to display after the countdown ends, keeping your messaging relevant post-deadline. - **Responsive Design Control**: Adjust spacing, font sizes, and element visibility for mobile, tablet, and desktop views. ![CT-01](https://www.techclaro.in/hs-fs/hubfs/module-documentation/CT-01.png?width=990&height=480&name=CT-01.png) ![CT-02](https://www.techclaro.in/hs-fs/hubfs/module-documentation/CT-02.png?width=1456&height=728&name=CT-02.png) #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com)   ## Center Mode Slider **Introduction:** The**Center Mode Slider** module is a powerful tool designed to enhance your marketing campaigns by adding urgency and visual appeal. Whether you're promoting a limited-time sale, launching a product, or counting down to an event, this module helps capture attention and encourage action. With a high level of customization, you can match the timer's design seamlessly with your brand. This module gives you complete control—without needing a developer. ![cms2](https://www.techclaro.in/hs-fs/hubfs/cms2.png?width=2342&height=1526&name=cms2.png) ![cms](https://www.techclaro.in/hs-fs/hubfs/module-documentation/cms.png?width=2880&height=1402&name=cms.png) **Installation:** 1. Visit the HubSpot Marketplace. 2. Search for "Center Mode Slider" module. 3. Click "Install" to add the module to your HubSpot account. **Usage:** 1. After installation, locate the module in your HubSpot dashboard. 2. Add the module to your desired page or template using the drag-and-drop builder. 3. Customize the module settings as needed, including appearance and behavior. **Customization Options** - **Center-focused carousel layout** — active slide centered with adjustable side-slide opacity (30–100%) for a focal "spotlight" effect. - **Responsive by default** — 1 / 2 / 3 / 4 slides per view across mobile, tablet, desktop, and large screens (auto-handled breakpoints). - Infinite loop with smooth swipe, drag, and keyboard-friendly navigation. - **Customizable navigation** — toggle arrow controls and dot pagination independently; recolor arrows, inactive dots, and active dots with opacity support. - **Per-slide content control** — each slide supports an image, a tag label (with custom background color), and a rich-text description that appears only on the active slide. - Up to unlimited slides (default seeded with 7 example slides for instant preview). - **Theme-aware color inheritanc**e — every color field inherits from theme.primary\_color / theme.secondary\_color, so the slider automatically matches your brand without manual tweaks. - **Flexible background options** — solid color, gradient, or background image, plus an optional gradient overlay with adjustable opacity (perfect for dark-mode hero sections). - **Optional module header** — toggle a rich-text title block above the slider with separate title and accent (span highlight) colors. - **Adjustable slide styling** — corner radius (0–48px), image area height (280–900px), and space between slides (0–120px). - **Independent desktop & mobile spacing controls** (padding top/bottom/left/right). - **Self-contained & marketplace-ready** — scoped CSS, deferred JS, no jQuery conflicts (only loaded if the site doesn't already include it), and uses Swiper from a public CDN. - **Accessibility-minded** — semantic markup with aria-labels on navigation buttons. - **Editor-friendly** — clearly grouped Style tab (Spacing, Background, Overlay, Navigation, Slides, Caption, Tag, Header) so content creators always know where to click. ![cmss](https://www.techclaro.in/hs-fs/hubfs/module-documentation/cmss.png?width=1398&height=558&name=cmss.png)   **Ideal Use Cases** - Product showcases & feature galleries - Portfolio / case-study highlights - Testimonials with imagery - Team / speaker grids - Service overviews - Event or campaign galleries #### **Support:** If you encounter any issues or have questions, reach out to our support team at [hubspot@techclaro.com](mailto:hubspot@techclaro.com).   #### **Feedback:** We value your feedback! If you have suggestions or encounter issues, please let us know at [developer@techclaro.com](mailto:developer@techclaro.com)   ![up-arrow](https://43811456.fs1.hubspotusercontent-na1.net/hubfs/43811456/Icons/up-arrow.svg) [![TECHLARO-Straight logo-white](https://www.techclaro.in/hs-fs/hubfs/Techclaro-logo/TECHLARO-Straight%20logo-white.png?width=333&height=200&name=TECHLARO-Straight%20logo-white.png "TECHLARO-Straight logo-white")](http://techclaro.com/) [Follow us on Facebook](https://www.facebook.com) [Follow us on LinkedIn](https://www.linkedin.com) [Follow us on Twitter](https://www.twitter.com) [Follow us on Instagram](https://www.instagram.com) © 2026 All rights reserved.