Wpdaily

Daily WordPress News

How to Make Your Divi Call to Action Module Responsive

The Call to Action Module is a native Divi module that helps direct your website viewers to make the right decision on your site. Mobile responsiveness is crucial to making your website accessible to more people. With Divi, it is possible to customize many aspects of both native and third-party modules. Customizing elements such as design, spacing, and responsiveness are some benefits of using Divi to build your next website. In this blog post, we’ll be taking inspiration from the free Divi Charter Boat Layout Pack and walk through creating a responsive Call to Action Module.

 How to Create a Responsive Call to Action Module

Before we begin, we need to install the landing page layout of the Divi Charter Boat Layout Pack. For this tutorial, we will start with a brand new page on our Divi website. Let’s begin!

Installing the Page Template

After creating our new page, we activate the Divi Builder by clicking on the purple Edit with the Divi Builder button in the center of our page.

Edit with the Divi Builder

With the Divi Builder activated, we’re presented with the following page. Select the middle option, Choose a Premade Option to access the Premade Layouts that come with Divi.

Choose a premade layout

Next, we will select the Charter Boat layout from the layout library.

Select Charter Boat layout

Then, we will select the landing page layout. At the bottom of the thumbnail for the layout, select the blue Use This Layout to load this layout into your Divi Builder.

Choose landing page layout to use

As the layout loads, you’ll see a progress bar.

Loading your layout

Once the layout has loaded, save your layout, and let’s get down to business!

Save page layout

Adding the Call to Action Module

We will be creating our responsive Call to Action Module in the following section of the layout:

Section we will be converting to the responsive Call to Action Module

Our responsive Call to Action Module will replace the text and button module in this section. To begin, let’s delete these modules. Hover over each module and select the trash icon to delete each module.

Delete default modules from section

Once those modules are removed, we can begin to make our Call to Action responsive. To begin, we click the gray plus icon to see the library of Divi modules. Next, we click on the Call to Action module.

Add new Call to Action Module to the section

Styling the Call to Action Module

With our Call to Action Module in place, we can now start styling it.

Add Content & URL

First, we add our content for the module. In the Text tab, add your call to action title, button, and body text if necessary. We won’t add body text as we recreating the previous section.

Add text to Call to Action Module

Add Button Link URL

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

Add button link URL to Call to Action Module

Remove Background Color

Next, scroll down to the Background tab. Uncheck the Use Background Color toggle.

Uncheck Use Background Color option

Styling Text

Once we have added our content and removed our background color, we can now move to the Design tab. Click on the Text tab, set the alignment to Right, and set the Text Color to Light.

Set Text Color and Text Alignment

Style Title Text

Next, scroll down to the Title Text tab. We begin to make our responsive Call to Action Module by using and activating the responsive settings for the Title Text Size. We do this by hovering over the option title and clicking on the mobile icon that appears. This will open the settings for you to enter your choice for desktop, tablet, and mobile options.

Use the following settings to style the Title text of the module to match the styling of the layout pack.

Title Text Settings:

  • Title Font: Cinzel
  • Title Text Size:
    • Desktop: 120px
    • Tablet: 75px
    • Mobile: 48px

Styling the Title Text

Design the Call to Action Button

With our Title Text styled, we will now scroll down to the Button tab to begin adding our styles to the button of the Call to Action Module. First, click on the Use Custom Styles for Button. Then, we begin to style our button with the following settings.

Button Design Settings:

  • Use Custom Styles for Button: Yes
  • Button Text Color: #000000
  • Button Background Color: #f9f6f5

Begin setting up the Call to Action Module's button

We continue to scroll down through the Button settings and use the following settings to add additional styling to the button.

Button Settings:

  • Button Border Width: 0px
  • Button Border Radius: 0px
  • Button Font: Poppins

Setting button border and font

Our final style setting for our button will be to add padding all around.

Button Settings:

  • Top and Bottom Padding: 13px
  • Left and Right Padding: 30px

Adding padding to button

Making the Call to Action Module Responsive

Now that we have made the style edits to the module, we can now focus on making the section – and module – truly responsive. To begin, we scroll down to the Sizing tab. We will activate the mobile responsive options for the Max Width option. We will then use the following settings for the desktop, tablet, and mobile.

Max Width Setting:

  • Desktop: 100%
  • Tablet: 55%
  • Mobile: 65%

We also set the Module Alignment to Right across desktop, mobile, and tablet.

Setting max width for mobile responsive

With all these settings in place, save your settings by clicking on the green checkmark icon at the bottom of the module settings modal box.

Making the Call to Action Module Responsive with Body Text

Let’s look at how we can further expand the responsiveness of the Divi Call to Action Module by adding body text.

Adding Body Text

To begin, let’s add some body text to the module.

Making the call to action module responsive with body text

Style Body Text

After we’ve added our body text, let’s begin styling it. First, we move to the Design tab. Next, we click the Body Text tab. After, we use the following settings:

Body Text Settings:

  • Body Font: Poppins
  • Body Text Color: #ffffff

Body text settings

Body Text Settings:

  • Body Size: 16px
  • Body Line Height: 1.6em

Body text settings call to action module

Make Body Text Responsive

Let’s look at what our work looks like on mobile with the body text.

Responsive Call to Action Module with Body Text

Let’s hide the Body Text on mobile to make the view more balanced. To do this, we navigate to the Content tab within the Call to Action Module. Then, you hover over the Body title. Rest your mouse there, and click on the cellphone icon. This will activate the mobile responsive settings for the body text.

Responsive Body Text

We want the tablet and mobile view to hide the body text. We click on the tablet icon and remove the body text to do this. We do the same for the mobile.

Responsive body text for tablet and mobile

We want to keep the full body text within the desktop view.

Change Background for Tablet and Mobile

Let’s take this a step further and modify the background for the mobile view. To do this, we will use an alternative background for mobile on the section. To begin, we enter the section settings. Scrolling down, we click on the Background tab. As we did for the Body Text, we hover over the Background title and click on the mobile icon. We now click on the mobile icon to attach another background image for the mobile view. Afterwards, we click on the Add Background Image icon.

Setting a background image for the mobile view

We select an image from the layout pack that works better for mobile than the photo prior.

Mobile background selection

With this change, we can clearly see the Call to Action on mobile.

In Conclusion

As with all native Divi modules, you can customize many options. From color to spacing, padding to mobile responsiveness, Divi brings you the power to be able to make your website beautiful and accessible to a variety of users of your website. If you’re looking for ideas for your next web design project, you can use Divi Layouts to inspire you. Having responsiveness as part of your website allows people to enjoy your site on mobile, tablet, or desktop. Try this tutorial out today and show us what you come up with in the comments section below.

The post How to Make Your Divi Call to Action Module Responsive appeared first on Elegant Themes Blog.

Source