Select Page

Cool Divi call to actions


Recently while working on a theme, I started thinking how we could make it easier to tell our site visitor which actions we wanted them to take and how we could highlight the important information they might be searching for.

Personally, I’ve always loved the way Divi and most website headers are fixed as you scroll so my idea is creating a fixed section that will stick to the bottom of your screen as you scroll through the page.

Step one editing our section:

So firstly we are going to setup our call to action section so that it is fixed to the bottom of our page all the time as we scroll.

You can place this section anywhere on the page just be sure to give it the CSS class cta-sec and add the following CSS to your stylesheet or Divi custom CSS section.

step two editing our row:

now that you’ve fixed your call to action to the bottom of the page we focus on the row a bit.

First we want to make the row fullwidth.
Secondly, we want to change the gutter width to 2.

finally, we will add a line of CSS for our row to be a little bit slimmer

adding our call to actions:

Now that we’ve got most of our call to actions section is done it time to actually put some call to actions into the sections depending on how many columns layout you selected, insert the Divi button module into each one and link it the important section of your website.
You can style the button through the module settings but for our demo purpose, we used the following the CSS code.

Make sure you are not hiding the footer:

Because we’ve fixed our section to the bottom of the page it is going to hide our copyrights and social media links, so we will add the following CSS to make the footer be on top of our section when we get to the bottom of the page.

Making sure it play nicely on all screens:

We will need to make sure this section looks good on all screen size but personally, I would consider not displaying it mobile devices, you can hide this section from the section settings otherwise we recommend unfixing the section on mobile, here are responsive CSS.

here is all the CSS:

I think this idea is a great way to help visitors to our site find the most important part of your website and to take the action you like them to take. you can see the demo here:

5 Comments

  1. Corey Potter
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    Glad to see you’re writing tutorials again! Love this one, and I’m def. saving to my “divi stuff” Evernote folder 😉

    Reply
    • James Fosker
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon

      Glad you like it Corey, I really loved this idea which is why I couldn’t wait to share with the community. Will definitely be posting a lot more often 🙂

      Reply
  2. Roberto Villela
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    Nice! Exactly what I’m looking for!

    Thanks for sharing James!

    Reply
    • James Fosker
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon

      Glad you like it, would love to see what you do with the idea 🙂

      Reply
  3. Mads Nygaard
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    Cool stuff… I have a problem with this when the Divi setting “boxed layout” is activated though – then the sticky footer aligns too much to the right… any ideas on how to fix that?

    Thanks for putting this out there James! 🙂

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Why use The Divi Framework.


Divi is a leading WordPress theme which powers almost 2 million websites around the world, Divi makes building a website super simple as it has one of the most powerful drag and drop builders for WordPress.

We've been using Divi since December 2013 to help speed up client projects, it has made our workflow 1000% times better and has saved us countless hour everyday.

Divi Stride is a Divi Third Party developer, we spend countless hours building tools and resources for the Divi Community.

We are the creators of Section Style Manager (the 5th Divi Plugin to be released), Divi Commerce & Tighten.

| 10 minutes

Pin It on Pinterest

Share This

Share this post with your friends!

No products in the cart.