Creating a Responsive Divi Call to Action Module

developershohelDecember 18, 20230194 views

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.

As the layout starts loading, a progress bar will be visible.

Once the layout has finished loading, save your layout, and let’s start working!

Incorporating the Call to Action Module

In the next segment of the layout, we will craft our adaptable Call to Action Module.

This adaptable Call to Action Module will take the place of the text and button module in this segment. To commence, erase these modules. Hover over each module and then click on the trash icon to remove them.

Once those modules are eliminated, we can commence making the Call to Action responsive. To start off, click the gray plus icon to access the Divi modules library. Then, select the Call to Action module.

Customizing the Call to Action Module

Now that the Call to Action Module is in position, we can commence styling it.

Include Content & URL

First, input the content for the module. In the Text tab, insert your call to action title, button, and body text if necessary. We won’t add body text as we replicate the preceding segment.

Add Button Link URL

Then, scroll down to the Link tab. Input the URL for the page to which you’d like to link your Call to Action Module button.

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: