The Divi Call to Action Module is a native Divi module that assists in directing your site visitors to take the correct action on your site. Mobile adaptability is vital for making your website reachable to a larger audience. With Divi, it is achievable to personalize numerous aspects of both native and third-party modules. Personalizing elements such as design, spacing, and adaptability are some advantages of utilizing Divi to construct your next website.
In this article, we will draw inspiration from the free Divi Charter Boat Layout Pack and guide you through the process of crafting an adaptive Divi Call to Action Module.
 How to Create a Responsive Divi Call to Action Module
Before commencing, we must integrate the landing page format of the Divi Charter Boat Layout Pack. For this guide, we will initiate a fresh page on our Divi website. Let’s get started!
Installing the Page Template
Upon creating our new page, we enable the Divi Builder by tapping the purple Edit with the Divi Builder button in the middle of our page.
Once the Divi Builder is activated, we are presented with the following page. Choose the middle option, Choose a Premade Option to gain access to the Premade Layouts that are included with Divi.
Subsequently, we will pick the Charter Boat layout from the layout library.
Afterward, we will select the landing page format. At the base of the layout’s thumbnail, click the blue Use This Layout to load this layout into your Divi Builder.
Incorporating the Call to Action Module
Customizing the Call to Action Module
Include Content & URL
Add Button Link URL
Erasing Background Color
 Then, proceed with descending to the Background section. Select the Use Background Color toggle.
Designing Text
Now that content has been added and the background color removed, navigate to the Design section. Activate the Text tab, adjust the alignment to Right, and toggle the Text Color to Light.
Articulate Title Text
 Subsequently, scroll to the Title Text section. Commence crafting the responsive Call to Action Module by employing and enabling the responsive settings for the Title Text Size. Do this by hovering over the option title and tapping on the mobile icon that materializes. This will unveil the settings for entering your preferences for desktop, tablet, and mobile options.
Utilize the ensuing settings to fashion the Title text of the module to match the design of the layout pack.
Title Text Settings:
- Title Font:Â Cinzel
- Title Text Size:
- Desktop:Â 120px
- Tablet:Â 75px
- Mobile:Â 48px
Developing the Call to Action Button
Having styled the Title Text, proceed to the Button section to commence the process of adding styles to the button of the Call to Action Module. Firstly, select the Use Custom Styles for Button. Then, initiate the styling of the button with the subsequent settings.
Button Design Settings:
- Use Custom Styles for Button:Â Yes
- Button Text Color:Â #000000
- Button Background Color:Â #f9f6f5
Proceed to scroll through the Button settings and employ the subsequent settings to append additional styling to the button.
Button Settings:
- Button Border Width:Â 0px
- Button Border Radius:Â 0px
- Button Font:Â Poppins
To complete the button styling, include padding all around.
Button Settings:
- Top and Bottom Padding:Â 13px
- Left and Right Padding:Â 30px
Creating a Responsive Design for the Call to Action Module
Once the module’s style edits are complete, focus on achieving true responsiveness for the section – and module. Start by scrolling down to the Sizing tab and activating the mobile responsive options for the Max Width setting. The following settings will be used for the desktop, tablet, and mobile:
Max Width Setting:
- Desktop:Â 100%
- Tablet:Â 55%
- Mobile:Â 65%
Additionally, align the module to the right across desktop, mobile, and tablet screens.
Upon completing these settings, save them by clicking on the green checkmark icon at the bottom of the module settings box.
Creating Responsive Design for the Call to Action Module with Body Text
Explore the expansion of the Divi Call to Action Module’s responsiveness by introducing body text.
Incorporating Body Text
Start by including some body text within the module.
Styling the Body Text
Once the body text has been added, proceed to the Design tab and access the Body Text section. Then, apply the following settings:
Body Text Settings:
- Body Font:Â Poppins
- Body Text Color:Â #ffffff
Body Text Settings:
- Body Size:Â 16px
- Body Line Height:Â 1.6em
Ensuring Body Text Responsiveness
Review the appearance of the work on mobile with the included body text.
To improve the balance of the view, hide the Body Text on mobile screens. Navigate to the Content tab within the Call to Action Module, hover over the Body title, and click on the cellphone icon to activate the mobile responsive settings for the body text.
To hide the body text on tablet and mobile view, we will need to eliminate it by selecting the tablet icon. The same process applies to the mobile view as well.
It is essential to maintain the entire body text within the desktop view.
Adjusting Background for Tablet and Mobile
To further customize the background for the mobile view, we can use an alternative background for the section. Access the section settings and navigate to the Background tab. Similarly to the procedure for the Body Text, hover over the Background title and select the mobile icon. Now choose a different background image for the mobile view and click on the Add Background Image button.
Select an image from the layout pack that is better suited for the mobile view than the previous one.
This adjustment allows for a clear Call to Action on mobile devices.
Conclusion
Similar to all native Divi modules, there are numerous customization options available. From color to spacing, padding to mobile adaptability, Divi empowers you to create visually appealing and accessible websites for various users. If you seek inspiration for your next web design project, you can utilize Divi Layouts. Ensuring responsiveness for your website enables users to enjoy your site on various devices. Give this tutorial a try today and share your creations with us in the comments below.
You also learn more about Divi:
