In today’s digital world, giving away free eBooks is a fantastic way to connect with your audience and generate leads! Creating a friendly "Download eBook Now" module makes it super easy for people to access valuable content while helping you capture those important leads.We're excited to help you create your very own custom HubSpot module for downloading eBooks. It’s super simple, and we’ll walk you through each step. Let’s dive in!
⚙️ Key Features at a Glance
✅ 4 layout variations with individual styling controls
✅ Fully responsive design across mobile, tablet, and desktop
✅ Upload your eBook image or icon for visual appeal
✅ Clean code and developer-friendly structure
🧩 4 Ready-to-Use Layouts – Customize Your Way!
Our module offers four fun layout options, each designed to suit different needs, looks, and sections of your page:
1. Two Column
Enjoy a combination of left side content with a CTA and a neat list style.
2. Two Column with Image
Eye-catching left side image paired with engaging right side content that includes a heading and CTA, topped off with a lovely image below.
3. 4 Column Cards
Create a vibrant layout with four cards featuring a stylish design, complete with an eye-catching image on top and a download icon below.
4. Two Column Cards
Two beautifully designed cards with an attractive background! Each card has a left side image and a right side with text and a compelling CTA to grab attention.
Every layout comes with its own style settings, making it super easy for you to personalize:
- Background and text colors
- Padding and spacing
- Button styles
- Typography
- Image alignment and size
No design skills? No worries! Everything is easy to edit right in the HubSpot editor. Have fun customizing!
In the main dashboard, go to the ‘Content’ tab and select either ‘Website’ or ‘Landing Pages,’ depending on where you want to add the section. This lets you choose the right location for managing or updating your content.
Search for "Download eBook Now" and drag and drop the module into the desired location on your page.
Layout ID :
Easily enhance navigation by adding an ID to the target section and using the same ID in an anchor link. This enables a smooth scrolling effect when users click a Call-to-Action (CTA) button, improving the overall user experience.
Layout Options :
For the Banner Pro, select your preferred layout (e.g., Layout 1, Layout 2, Layout 3, Layout 4 ). Easily rearrange event cards within the chosen layout to achieve the perfect content flow and visual arrangement, ensuring a seamless and engaging user experience.
Options :
Heading/Description & CTA Content :
You can modify the heading, description, and CTA with the flexibility to show or hide each element as needed.
Image Column :
You can select and customize the column image according to your preferences, ensuring it aligns perfectly with your design.
Column Content :
In Layout 3, you can add column content with multiple repeatable Card, offering greater flexibility and dynamic layout options to suit your content needs.
Column Content :
In Layout 4, you can add column content with multiple repeatable content card, offering greater flexibility and dynamic layout options to suit your content needs.
Module Setting :
Adjust the margins, padding, background , and container width to achieve your desired look and feel for the module. This flexibility lets you fine-tune the layout and aesthetics, ensuring your design is both visually appealing and user-friendly.
Heading/Description & CTA Setting :
Users can customize spacing and adjust typography for the heading, description, and CTA. This includes modifying color, font size, weight, and line height for both mobile and desktop views—ensuring a personalized, visually cohesive design across all devices.
Left List Content Setting :
In Layouts 1, you can customize the left column list by setting the color, desktop and mobile typography and spacing, allowing it to align seamlessly with your design preferences.
Image Column Setting :
Easily customize the image height for desktop and mobile view, and rounded corners to achieve the perfect look for your design. It's available in layout 1 and 2.
Content Column Setting :
Easily customize the image height for desktop and mobile view, and rounded corners to achieve the perfect look for your design. It's available in layout 3 and 4.
We hope you enjoy using our two column module to create a seamless experience for both your users and your marketing team. At Code Accelerator, we're committed to ensuring your HubSpot experience is exceptional. If you need a custom HubSpot module or require a tailored HubSpot CMS or CRM setup, please don’t hesitate to Contact Us.