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.
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
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 Style 01
Alternate Back to Top Button Style 02
Alternate Back to Top Button Style 03
Alternate Back to Top Button Style 04
Alternate Back to Top Button Style 05
Alternate Back to Top Button Style 06
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!
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.
Hello, I want to edit the text on the button from Back To Top, to be more language fitted: Upp igen!
But the examples above did not work, anyone found a solution that worked?
Colorchange done with:
.et_divi_100_custom_back_to_top .et_pb_scroll_top {
background: #104671;
}
Anyone can help me with a code to change the “back to top” text? (I want to translate)
Great plugin! Love it. But have a little different question. If I want to use an image with a link, how can I add some hover effects (something like when you choose lightbox option, but with the image linking to another page)?
Ladies and Gentlemen, THIS IS A FREE BONUS! The Elegant Themes team is giving us a bonus, a +1, extra, mucho gratis, buy one get one free. Although I appreciate the comments and overall sentiments surrounding security and expanded functionality, I am very thankful that I can support my customers with such a powerful platform that ET has given us with Divi STRAIGHT OUT OF THE BOX. OMG the free layouts, the videos, the tutorials, the support for pennies on the dollar of what everyone else charges.
What a comment thread! I think I face-palmed myself five times! Thanks Andy, et al!
Nice touch. Thumbs up!!
Thank you, I love it.
1. is there a way to change the point of appearance?
for example I wish for it to appear sooner while scrolling
2. how do I change colors to receive white arrow in a transparent circle that is a white ring?
3. I found a small problem that the button does not show at all in WP dashboard.->visit site.
It is OK while not connected through the Dashboard or in incognito.
thanks
I love this plugin
However, I can’t make it work !
It on working OK on WP dashboard->appearance->customized but it is not seen on the live site.
I’m working on a divi-child theme
Any help will be appreciated
thanks
Thanks for yet another great plugin to add value to websites. Elegant Themes is the best. Can’t wait until the new Divi is unveiled. Appreciate your team so much!
It break my site and I have to deleted it by FTP ><!
Hi,
It’s not displaying correctly on one of my WordPress sites. Is it not fully compatible with all themes? Where would I get support for that?
Regards,
Hello, once again, great extension! Is there a way to use my own icon or image for the button instead of the one’s given?
This is great, but would be awesome if we could change the text and the color of the button, or even upload an image to replace the default arrow!
These plugin updates are fantastic! and they are FREE! Thanks Elegant!
Alternate Back to Top Button Style 02 and 04 look same? Am i right?
Great stuff as always 🙂
Can I ask, will Divi 3.0 be coming with a Mega Menu like Extra?
I am about to start working on something similar using a well known plugin however could wait if Divi 3.0 will come with this.
Here’s hoping 🙂 Pete
You can already create a mega menu on the Divi theme. =)
Well Pete I am not so sure on it… We will see what shows up in the survey results.
Hi Andy,
Thanks for this extension, I feel good because I have Divi theme.
This is getting better! Thank you! Great pack.
DIVI gets to the top in less than 100 days 😉
You know what would be nice? A way to put “Previous Post” “Next Post” links at the bottom of each post so people can navigate to the next entry without going back to the general blog page. Is that possible?
This I would LOVE! I hate that I have to keep adding the navigation module for every single blog post.
What a frustration again… One spends days and weeks to add some cool functionality to his premium Divi child theme or plugin and the very next day ET releases the same functionality for free… ET is slowly killing the Divi Child Theme and Plugins market, it won’t be a surprize if by the end of the 100-day period all features offered by premium child themes and plugins will be provided by ET for free 🙂
Then the Divi Child Theme and Plugins designers should be more creative and more hard work to win a customers, there always a way to make some bucks..
Divi is already a PAID product. I, for one, am glad that ET is willing to constantly extend the functionality despite your desire to line your pockets with the things they haven’t added – yet.
That’s the risk when you base your business on the back of another product that better and faster than you are.
An option for a color picker in the plugin would have been a cool edition.
I like to change the text of button, How to can I that?
So you want to change the text of the button:
Try this CSS:
.et_divi_100_custom_back_to_top–style-6 .et_pb_scroll_top:before {
content: ‘Up To Top’;
display: inline-block;
color: #FFF;
font-weight: 700;
}
or….
.et_divi_100_custom_back_to_top–style-7 .et_pb_scroll_top:before {
content: ‘Oh website gods please send me back to the top’;
display: block;
color: #FFF;
font-weight: 700;
text-align: center;
}
I Try this , but it doesn’t work at my side.. Any other solutions to change color and text?
I manage to change colour of the button, but can’t change text . Anyone tried to change text and works ?
Thank you
indeed, it doesn’t work.
‘Oh website gods please send me back to the top’
LOL 😀
Hi, does this plugins will work on Extra theme as well?
No this extension will only work with Divi.
How to can I change the text of button? “Back to top”
thanks!
How to change color and text on button?
I would like an easier way to change the color too.
Is this another “won’t work with Extra” type plugin? Just checking. 🙂
How to change color and text on button?
So you want to change the color of the button:
Try out this CSS:
.et_divi_100_custom_back_to_top .et_pb_scroll_top {
background: #699;
box-shadow: 0 2px 4px rgba(108, 46, 185, 0.2);
}
Great, but i miss “SELECT ACCENT COLOR” similar to example Article Card , Hamburger Menu or Login Page 😉
The styles look cool! With a small fiddle with CSS, I’ve changed the background color of the button to that of the main color of the website I’m working on.
With that, do you think you could add a color option for ease? I don’t personally need it, but it would be convenient for others.
The styles look cool! With a small fiddle with CSS, I’ve changed the background color of the button to that of the main color of the website I’m working on.
With that, do you think you could add a color option for ease? I don’t personally need it, but it would be convenient for others.
These are nice, but I can’t figure out how to change color?
Just added this to the custom css on one of my websites and it seems to work.
/* ————–BACK TO TOP BUTTON COLOR———— */
.et_divi_100_custom_back_to_top .et_pb_scroll_top {
background: #077c7b;
}
I just used this in my Divi Theme Options – Custom CSS and it worked:
.et_divi_100_custom_back_to_top .et_pb_scroll_top {
background: #077c7b;
}
Thanks, Michelle to confirm this method works! Well minus me forgetting the curly brace on the end. =)
.et_divi_100_custom_back_to_top .et_pb_scroll_top {
background: #706C61;
}
How to modify the color
To change the background color, I added this CSS to the Custom CSS panel in Divi Theme Options:
.et_divi_100_custom_back_to_top .et_pb_scroll_top {
background: #082947 !important;
}
Thx, U R great!
Greetings from Vienna.
Thanks Katie!
Many thanks for that 🙂
thanks katie
Thank you Katie.
I think that this option should be included with the extension (even via custom CSS, but into the same extension).
Thanks! This is really helpful. I didn’t like the purple.
While I LOVE what you guys are doing with the Divi100 this I feel the need to voice my concern about these plugins again.
By not having these easily updatable through the WP admin in my opinion you’re opening up Divi users to possible unnecessary security risks in the future.
What if a security issue is found 6 months from now? Do you really expect users to keep an eye on the git to check for updates?
Others have asked about this as well and I don’t recall it being addressed at all.
I’m sorry to be negative about this as it’s awesome that you’re giving away all these goodies. I just feel it’s not worth the risk (to me at least) to install these plugins. 🙁
Wait? Are you all saying these plugins are potentially dangerous?
Really?
Sorry, but that’s NOT something that should be promoted as a value-added giveaway.
And there’s been only one response in the bowels of one of these comment threads?
I’m really uncomfortable about this.
Is no one but the few of you worried about this?
Plus one on this.
I hate to be negative about a company trying hard to offer a great product but wait . . . what just happened?
What’s the point of buying into a framework then find out you have to become a coder?
The number of times I have read people had bought into Divi to remove the hassle, and then this happens?
I can’t believe it but ‘Until today I thought these plugins would be updatable via WP dashboard, I just found out they won’t.’
Is it the pressure of coming up with a 100 freebie-a-day promotions and also working on Divi 3.0?
In which case maybe stop firing out these if they are going to be a real chore for us to keep on top of?
People will not trust them and all you hard work will be for nothing too.
Does ‘free’ mean an awful lot of work for us in the future or a lot of pain when they glitch?
Woh!
If there were ever a vulnerability found in our products, these free extensions included, you can be sure that we would notify all of our customers and provide clear update instructions. They simply live on github, as many free and open source projects do.
Is it possible that the need for all these plugins won’t be necessary once D3 comes out as they will be built in?…
Is it possible that the need for all these plugins won’t be necessary once D3 comes out as they will be built in?…
Is it possible to create a Divi Plugin Updater to update plugins to the latest version in the repository? Otherwise, it would have been great if these were all in one Divi100 plugin that we downloaded on day 1 that gets daily updates for the 100 days, adding new panels for each new feature. Then we could select/deselect the ones we want and don’t want, and keep all our customizations in tact.
Hi Nick,
I agree with Ron. I am one of these customers that are not capable of updating from github, so I’m worried… and sad because I think I won’t use all this beautiful extensions.
Thanks for the response Nick.
While your explanation sounds reasonable at first glance have you considered…..
What if some of your “customers” miss/overlook/delete without reading/etc the notification?
What if some of your “customers” aren’t capable (as in simply don’t know how and can’t afford the time to figure it out) of updating from git?
What happens to “customers” that choose to stop being customers but still have these freebies installed?
A WordPress/Divi plugin is not merely a “free and open source project”. It’s something that you’re providing to your “customers” for free that could potentially expose them to risks.
Most WordPress plugins do NOT “live on github” and most WordPress plugins are easily updatable through the admin or other means.
Justify it however you want but the truth remains that this is not a risk that I (or a lot of other people that are actually aware of it) want to take. Remember, not everyone that uses your stuff is all that savvy when it comes to these issues.
I totally agree with Ron. As much as I appreciate the effort coming from ET I am very concerned as well. Until today I thought these plugins would be updatable via WP dashboard, I just found out they won’t. I am also worried that when the Divi countdown will be over we will end up with far too many plugins. Of course not every plugin should be enabled but what if I’d like to make use of all the add-ons ? Wouldn’t the site be bloated with plugings? Furthermore we’d all have to stay on top of the updates (for clients or personal projects). Don’t mean to be negative,I’m just very concerned.
@Nick – You sure went quiet in a hurry. Care to share with the rest of the class?
I didn’t think about this potentiel issue, but you’re right, sadly. I guess I’ll see these plugins to see only what can Divi do then. Thanks for bringing to us this risk.
Hi Ron,
I’m facing the same problem. The temporary solution I ‘found’ was to add links to the Git’s in a separate favorites folder. Had to, because the Article Cards extention currently has issues. So I’m checking the releases every few days.
For your convenience:
https://github.com/andyhqtran/Divi-100-Back-To-Top
https://github.com/andyhqtran/Divi-100-Login-Page/
https://github.com/andyhqtran/Divi-100-Hamburger-Menu/
https://github.com/andyhqtran/Divi-100-Article-Card/
Hope they will adhere to your request though.
Glad it works for you Verdi. Thanks for the links.
I just don’t have the time or desire to stay on top of this stuff and I can’t risk it.
Then again I’m not truly a dev (I have a full-time employer and some side projects that I work on but the biggest part of my focus is marketing).
Use free Divi plugins and risk my career or don’t use them and sleep at night.
I bet you know the answer…… 🙂
Hi Ron,
It was addressed by Nick in one of the responses on an old Divi 100 post…very easy to miss.
There is no intention for automatic updates sadly as they plugins are “proof of concept” to developers for what can be done with Divi now and in the future.
Sadly it means for me, that I won’t be implementing these plugins on client sites due to the nature of both manual upgrading and no efficient method to stay on top of update notices/bug tracking.
On the plus side, I can use them on my own site.
ET has their own update mechanism in place for Divi and other plugins.
There’s no acceptable reason why any plugin they release as part of Divi 100 doesn’t use the same mechanism for updates.
They are taking a very odd position on this.
Thanks for the heads up Simon. Crap! I’m in the same boat – no employer, in my case, or side-projects for these.
I don’t trust myself enough even to use them on something of my own (unless there was at least a way of being notified via email if there was a security update). Not just typo updates and such. Git’s just not my thing anyways.
Mystery solved…..thanks. 🙂
Thanks for this nice add on
Nice! Very nice! But how can I change language? I tried with Loco Translate but nothing… Thanks.
Nice little add on for your site
Thanks Andy, very nice!
Feedback: The github link is not working (feel free to delete this from my comment when fixed)
Suggestion: Please consider an extension that gives more options to the menu’s in Divi (maybe adding the Menu options from “Extra”, the one with the pictures and recent posts)
Thanks for the heads up Verdi. I’ll get this fixed as soon as possible.
You’re most welcome. This should be the correct link:
https://github.com/andyhqtran/Divi-100-Back-To-Top
Also, any thoughts on my suggestion?
Yep, that’s the correct link. The post has been updated but caching might delay the links from working for a little bit.
Your suggestion is a good one!