Download 5 FREE CTA Sections with Overlapping Elements for Divi

Posted on January 23, 2019 by in Divi Resources | 18 comments

Download 5 FREE CTA Sections with Overlapping Elements for Divi

Using overlaps in your design can really add an extra dimension to the website you’re building. We’re already used to the bottom-to-top and right-to-left overlaps, which we frequently use in layout packs and Divi design tutorials. But, you can also build unique overlaps without taking the bottom-to-top and right-to-left hierarchy into consideration.

Further down the post, you’ll be able to download 5 unique CTA overlap sections that push forward the CTA you hover, no matter how it is positioned in the section. We’ve also made sure the designs look good across all devices, which helps keep the user experience on point. You can download these 5 CTA sections with overlapping elements for free and use them on any kind of website you build without any restrictions. Enjoy!

Preview

Let’s take a look at the result on different screen sizes. You’ll find a static and hover preview for each one of the 5 CTA overlap sections.

CTA Overlap Section #1

Static

overlap sections

Hover

overlap sections

CTA Overlap Section #2

Static

overlap sections

Hover

overlap sections

CTA Overlap Section #3

Static

overlap sections

Hover

overlap sections

CTA Overlap Section #4

Static

overlap sections

Hover

overlap sections

CTA Overlap Section #5

Static

overlap sections

Hover

Download the Unique CTA Overlap Sections for FREE

Subscribe To Our Youtube Channel

To lay your hands on the unique CTA overlap sections, you will first need to download them using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday and Friday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Upload the Unique CTA Overlap Sections to Your Divi Website

Unzip Folder

Once you’ve downloaded the JSON files in the previous part of this post, you can go ahead and locate the zipped folder in your download folder. Once you do, unzip the folder to access the different JSON files that are available. You’ll find a different JSON file for each one of the sections and a full page layout that includes all the section in one layout. The section files and full page layout are also included in an all file that’ll help you import everything to your Divi Library at once.

  • 1-divi-cta-overlap-section.json
  • 2-divi-cta-overlap-section.json
  • 3-divi-cta-overlap-section.json
  • 4-divi-cta-overlap-section.json
  • 5-divi-cta-overlap-section.json
  • divi-cta-overlap-sections-all.json
  • divi-cta-overlap-sections-full-layout.json

overlap sections

overlap sections

Go to Your Divi Library

Once you have all the JSON files you need close by, go to your WordPress website > Divi > Divi Library.

overlap sections

Upload the All JSON File

Continue by clicking on Import & Export to import the ‘divi-cta-overlap-sections-all.json‘ file you can find in the folder you’ve downloaded at the beginning of this post. Once you’ve uploaded the JSON file, all the CTA overlap sections and the full page layout will be added to your Divi Library.

overlap sections

overlap sections

overlap sections

Add New Page

To add these designs to your website, add a new page, give your page a title, publish the page and switch over to Visual Builder.

overlap sections

Start Building From Scratch

To add one specific overlap section to your page, go ahead and click on the blue button which says ‘Start Building’. You can also open an existing page and add the section within your a page design you’re working on right away.

overlap sections

Upload Sections from Section Library

Then, click on the icon that allows you to add a new section. Instead of adding a new section, however, switch over to the Add From Library tab and select the section of your choice.

overlap sections

Or Upload Entire Layout Containing Sections

Want to see what the overlap section layouts look like first? Click on the purple button which says ‘Browse Layouts’ and navigate to Your Saved Layouts. There, you’ll find the page JSON file which you can upload.

overlap sections

overlap sections

Final Thoughts

The 5 different CTA overlap sections we’ve provided you within this post will undeniably help you add extra dimension to any website you’re building. We hope this download post inspires you to create your own kind of unique overlaps as well. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

Premade Layouts

Check Out These Related Posts

18 Comments

  1. This is GREAT! Thank you for offering sections as downloads.

    • You’re welcome, Chris. Glad you like them! 🙂

  2. Great! Thank you Donjete Vuniqi!

  3. this kind of stuff is great! more of this please 🙂

  4. when clicking or hovering over a CTA/Blurb, it should be visible as a whole, i dont think thats happening as of now, am i missing something here? nice effort though, thnks.

  5. Hey Donjete,
    Always love your work and creativity. Additionally, thanks heaps for the downloadable files.

    Cheers
    James

  6. merci de proposer le téléchargement, c’est intéressant d’avoir la marche à suivre pour faire les chose, mais on a pas toujours le temps de le faire, le temps c’est de l’argent!

  7. Is this work with Extra as well? I have some spacing issues and it doesn’t look good at all. any ideas why this will happen?

  8. Thank you very much, Donjete!

  9. Interesting. Where are you controlling the z-index please?

    • Examples 1, 2, 3 & 4 are built using a one-column row only. The last module in the column is the one positioned on top of the design. Switch over to wireframe mode and you’ll see what I’m talking about!

      • Hello
        It’s a very nice effect i’d like to use it in a 2 column row but
        I don’t understand how the z-index is applying.

        Thanks

  10. Great! Thank you for introducing new resources.

  11. This kind of stuff is great! Thank you for offering sections as downloads.

Join To Download Today

Pin It on Pinterest