Free Divi Extension: Alternate Back To Top Button Styles & Animations

WordPress Development for Intermediate Users: Custom Post Types and Taxonomies
June 28, 2016
Giveaway: Win a Free Copy of WPForms – WordPress Form Plugin
June 29, 2016
Show all

Welcome to Day 29 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


If your website has long pages of text that require a lot of scrolling, it can be quite a nuisance for a user having to scroll all the way back up to the top of the page. To solve this issue, we’re giving away a free extension that allows you to add a ‘back to top’ button to your website.

Downloading & Using the Alternate Back to Top Button Styles & Animations Extension

To use the extension, download the plugin using the link below. In your WordPress admin, go to Plugins > Add New. Click “upload plugin” and choose the file from your downloads folder.

Once you’ve uploaded it, go to Divi 100 > Back to Top. Here you can choose how the button looks from one of eight styles. To activate it, go to Divi > Theme Options and select “enable”.

When a user scrolls so far down the page, the button will appear and, when clicked, will return them to the top of the page.

Download The Divi Custom Plugin Extension

All photos courtesy of the generous authors on Unsplash.com via the Unsplash License. Divi Extensions are released under the GPL, which means you can use them for free in both personal and commercial projects! By using ElegantThemes.com and our products you agree to our Terms of Service.

Alternate Back to Top Styles

The styles showcased below are available in today’s plugin as an alternative to the standard back to top button that comes with Divi, which you can activate by going to Divi > Theme Options > General Settings and choosing “enable”.

alternate-back-to-top-button-styles-animations-style-1

Alternate Back to Top Button Style 01

alternate-back-to-top-button-styles-animations-style-2

Alternate Back to Top Button Style 02

alternate-back-to-top-button-styles-animations-style-3

Alternate Back to Top Button Style 03

alternate-back-to-top-button-styles-animations-style-4

Alternate Back to Top Button Style 04

alternate-back-to-top-button-styles-animations-style-5

Alternate Back to Top Button Style 05

alternate-back-to-top-button-styles-animations-style-6

Alternate Back to Top Button Style 06

alternate-back-to-top-button-styles-animations-style-7

Alternate Back to Top Button Style 07

Plugin Updates & Bug Reporting

As will be the case with all of our Divi 100 extensions, bug reporting and updates have been made available via their respective github repositories. This is the best place for both us and you to track bugs, make fixes, and download new releases. You’re even able to clone, fork, or otherwise edit the code to your heart’s content.

We hope you have enjoyed this Divi 100 freebie and we look forward to providing new layout packs, extensions, code snippets, and Divi tutorials every week for the remainder of the series.

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Visit The Repository

divi-2-6-logo

Divi 100 Day 29

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}.divi-repo-link {text-align: center; font-size: 16px; border-radius: 4px; padding: 15px; color: #fff; display: block; margin: 10px 0 10px; background-color: #454545;font-weight: bold;}

The post Free Divi Extension: Alternate Back To Top Button Styles & Animations appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar