A call to action (CTA) is a crucial component of digital marketing, and you can spot it across various online platforms like landing pages, blog posts, and mobile apps. The Call to Action Module within Divi simplifies the process of incorporating this vital element into your digital projects. With options to customize the title, body text, and button, you have ample styling choices to ensure your CTA aligns seamlessly with your brand. In this article, we’ll showcase examples of Divi call to action styles, drawing inspiration from three of our complimentary layout packs available with your Divi membership. Let’s delve into the specifics of how to recreate these eye-catching styles!
To begin, we must establish the foundation for our style examples by adding a Regular Section with a single-column row to our page. Within this row, we can insert the Call to Action Module. Now, let’s proceed to customize the module according to our first example, which takes inspiration from the Divi Whiskey Layout Pack.
**1. Setting the Background:**
We’ll kick things off by setting the background. This involves using an image from the layout pack as the base and layering a gradient on top for added visual appeal. Additionally, we’ll introduce generous padding to the section to ensure adequate spacing.
**2. Customizing Content:**
Within the Call to Action Module settings, we’ll input the content components, including the title, button text, body text, and the link URL for the button.
**3. Design Enhancements:**
In terms of design, we’ll set the background color for the module and overlay it with a background pattern for added texture and depth. We’ll then tailor the styles for the title text, body text, and button by adjusting parameters like font, color, size, and padding. Moreover, we can modify the module’s width to 75% and center-align it for aesthetic balance. To give it that extra flair, we can even incorporate custom CSS for further refinement, including fine-tuning the padding to perfection.
**For our second example, inspired by the Divi Bagel Shop Layout Pack:**
**1. Two-Column Layout:**
In this instance, we’ll opt for a two-column row instead of a single column. In the first column, we’ll add a gradient to the section and include an image module. In the second column, we’ll introduce the Call to Action Module and tailor its content and link URL as needed. To showcase the section’s gradient, we’ll disable the module’s background color.
**2. Styling the Module:**
Finally, we’ll focus on styling the Call to Action Module. Depending on your design preferences, you can adjust the module’s design settings to achieve the desired look and feel.
By following these step-by-step instructions, you’ll be able to replicate these Divi call to action styles effortlessly and adapt them to harmonize with your brand identity and design preferences. Elevate your digital marketing efforts with captivating CTAs that leave a lasting impression on your audience.
