Enhancing user navigation is key to improving the overall experience on your website. The Back to Top button is a useful feature that allows visitors to quickly return to the top of the page.
However, its effectiveness can vary depending on the device being used. For a more tailored user experience, you might want to enable or disable this button based on whether the visitor is using a desktop, tablet, or mobile device.
This article will guide you through the steps to configure the Back to Top button for different devices, ensuring optimal functionality and user satisfaction.
Enable the Back to Top button
Go to WordPress Dashboard → Divi Theme → Options General Tab
Enable the Back to Top Button option
Note: The Back to Top button will show on all devices
Customize the Back to Top button to appear only on a specific device
Display the Back to Top button only on Desktop devices
Go to WordPress Dashboard → Divi Theme → Options General Tab → Custom CSS
Add this CSS code:
@media (max-width: 980px) {
.et_pb_scroll_top.et-pb-icon {
display: none!important;
}
}
Display the Back to Top button only on Tablet devices
Go to WordPress Dashboard → Divi Theme → Options General Tab → Custom CSS
Add this CSS code:
@media (min-width: 1024px) {
.et_pb_scroll_top.et-pb-icon {
display: none !important;
}
}
@media (max-width: 980px) {
.et_pb_scroll_top.et-pb-icon {
display: none !important;
}
}
Display the Back to Top button only on Phone devices
Go to WordPress Dashboard → Divi Theme → Options General Tab → Custom CSS
Add this CSS code:
@media (min-width: 768px) {
.et_pb_scroll_top.et-pb-icon {
display: none !important;
}
}
Display the Back to Top button only on Desktop and Tablet devices
Go to WordPress Dashboard → Divi Theme → Options General Tab → Custom CSS
Add this CSS code:
@media (max-width: 768px) {
.et_pb_scroll_top.et-pb-icon {
display: none !important;
}
}
Display the Back to Top button only on Phone and Tablet devices
Go to WordPress Dashboard → Divi Theme → Options General Tab → Custom CSS
Add this CSS code:
@media (min-width: 980px) {
.et_pb_scroll_top.et-pb-icon {
display: none !important;
}
}
Display the Back to Top button only on Phone and Tablet devices
Go to WordPress Dashboard → Divi Theme → Options General Tab → Custom CSS
Add this CSS code:
@media (min-width: 980px) {
.et_pb_scroll_top.et-pb-icon {
display: none !important;
}
}