How to Create a Sticky Email Optin in Divi That Draws Attention

Posted on September 29, 2020 by in Divi Resources | 4 comments

How to Create a Sticky Email Optin in Divi That Draws Attention

Divi’s sticky position options allow you to make any element on your page sticky. This allows you to fix elements on the page at certain intervals as the user scrolls down the page so they stay visible longer. And for you bloggers out there, it makes a lot of sense to add a sticky email opt-in to your post template for a subtly, yet effective, to keep that important form at the forefront.

In this tutorial, we are going to show you how to add a sticky email opt-in to your Divi blog post template that draws more attention and, hopefully, grabs more leads. We’ll even show you how to add a popup hover effect to the sticky email opt-in as well!

Let’s get started!

Sneak Peek

Here is a quick look at the design we’ll build in this tutorial.

Download the Sticky Email Optin Post Template for FREE

To lay your hands on the designs from this tutorial, you will first need to download it 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! 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.

How to Upload The Post Template with the Sticky Email Optin to Your Site

To upload the template, navigate to the Divi Theme Builder in the backend of your WordPress website.

blog post template for Divi's Business Consultant Layout Pack

Then, in the top right corner, you’ll see an icon with two arrows. Click on the icon.

blog post template for Divi's Business Consultant Layout Pack

Navigate to the import tab, upload the JSON file which you were able to download in this post, and click on ‘Import Divi Theme Builder Templates’.

blog post template for Divi's Business Consultant Layout Pack

Once you’ve uploaded the file, you’ll notice a new template with a new body area that has been assigned to All Posts. Save the Divi Theme Builder changes as soon as you want the template to be activated.

divi Business Consultant blog post template

Let’s get to the tutorial, shall we?

Part 1: Import the Premade Blog Post Template

For this tutorial we are going to use the blog post template for Divi’s Business Consultant Layout Pack which you can download from this blog post.

Once you download the zip file, you will need to unzip it and import the file to the Divi Theme Builder.

Here’s how to do it…

  1. navigate to Divi > Theme Builder.
  2. Click the portability icon at the top right.
  3. Select the import tab in the portability popup.
  4. Choose the json file from the file you downloaded.
  5. Click the Import button.

sticky email optin

Part 2: Adding the Sticky Email Optin to the Template

Once the JSON file has been imported, click the edit icon to edit the custom body template layout.

sticky email optin

At the bottom of the post template layout, you will find the section with the email opt-in form we will be using for our sticky email opt-in.

sticky email optin

For this example, we want the sticky position of the email opt-in to a section so that the user will not see the email opt-in until they scroll to the section with the sticky email opt-in.  However, because the email opt-in is in its own section, the email opt-in will not have enough room to move. Therefore we need to bring it into the section above which contains the comment section so that the email opt-in will hover over that section before coming to rest in its original place.

Add New Row in Section Above

To do this, create a new one-column row directly under the row containing the comments module.

sticky email optin

Add Row Styling

Then open the settings of the new row and add a background color as follows:

  • Background Color: #282828

sticky email optin

Under the design tab, update the following size and spacing of the row:

  • Width: 100%
  • Max Width: 100%
  • Margin: 15vw top
  • Padding: 0px top, 0px bottom

sticky email optin

Move Email Opt-in to New Row

Once the row styling is in place, move the email opt-in in the bottom section into the new row you just created.

sticky email optin

Delete the bottom section (we don’t need it anymore).

Update Email Opt-in with Sticky Position

Then open the settings for the email opt-in now inside the new row and update the stick position options as follows:

  • Sticky Position: Stick to Bottom
  • Top Sticky Limit: Section

sticky email optin

This will cause the email opt-in to stick at the bottom of the browser window when scrolling through the section before coming to rest in its parent row.

Update Email Opt-in Styling

Under the design tab, update the layout of the email opt-in as follows:

  • Layout: Body On Top, Form on Bottom

sticky email optin

Then update the following styling:

  • Title Text Size: 32px
  • Max Width: 600px
  • Module Alignment: Center

sticky email optin

Then set the animation style to none.

sticky email optin

Result

At this point, we can check out the result by viewing a post in another browser window.

Adding Sticky Position Styling

When the email opt-in is in the sticky position, we can add specific styling to the module that will only apply to the sticky state. This allows us to add different color schemes to offset the white background to make it stand out a bit more.

To add a different background color for the sticky state, open the email opt-in settings and select the thumbnail icon (sticky icon) next to the background option. Then click the sticky tab and add the following background color:

  • Background Color (sticky): #282828

sticky email optin

Continue this same process to add sticky styling to the following options under the design tab:

  • Title Text Color (sticky): #ffffff
  • Body Text Color (sticky): #ffffff
  • Max Width (sticky): 500px
  • Padding (sticky): 18px top, 30px bottom, 30px left, 30px right

sticky email optin

Result

Now let’s check out the result on a live post.

Add Hover Popup Effect to Sticky Email Opt-in

To add a hover popup effect on the sticky email opt-in, open the email opt-in settings, and update the stick transform translate as follows:

  • Transform Translate Y Axis (sticky): 85%

This will bring the email opt-in downward (outside of the viewport) by 85% of its own height, exposing just enough of the email optin so that the user can hover over the title.

sticky email optin

Then add a hover state to the transform option so that the transform translate position is back to its original position on hover:

  • Transform Translate Y Axis (hover): 0%

sticky email optin

Result

Here is the final result.

Final Results

Here are the three versions of our sticky header that we built.

Final Thoughts

Thankfully, Divi makes adding sticky email opt-ins to your site easy. This frees up more time for tweaking the design of your sticky element for more unique ways to display your form. Hopefully, this technique serves you well in upcoming blog projects.

I look forward to hearing from you in the comments.

Cheers!

Premade Layouts

Check Out These Related Posts

Divi Plugin Highlight: Divi MadMenu

Divi Plugin Highlight: Divi MadMenu

Posted on October 17, 2020 by in Divi Resources

Divi Madmenu is a third-party plugin for Divi that adds new menu features to the Divi Theme Builder. Add buttons, a Woocommerce shopping cart, search option, and adjust the placement of each element. Design independent menus for desktop, tablet, and phones, and set the breakpoints. Set the header...

View Full Post

4 Comments

  1. This looks really amazing and attractive. Thanks for sharing this article.

  2. Is there a way to trigger the email module using a call to action button?

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest