DiviFlash introduced a back to top button for the Divi website. Here is an overview guide on this-
Navigate to Back to Top
You can navigate to DiviFlash back to top option from two different directions.
- Quick Access – From WordPress Dashboard navigate to DiviFlash> Setting> General Settings> Back to Top button. Click Customize. This will take you to the Back to top option inside the Theme customizer.
- General Access – From WordPress Dashboard navigate to Divi> Theme Customizer> Advanced General Settings> Back to Top Button.
Enable Back to Top
Toggle this ON to enable the “Back To Top” button and get access to all of the customization options.
Content
- Label: Type the text for the button.
- Font Size: Adjust the font size for the button text.
- Label Color: Pick a color for the button text font.
- Label Hover Color: Pick a color for the button text when hovering.
- Media: Choose if you want to use an icon, an image, or none (text only) for the button.
If you choose an icon-
- Select Icon: Choose an icon from Divi’s default icon library.
- Icon Size: Adjust the size of the icon.
- Icon Color: Pick a color for the icon.
- Icon Hover Color: Pick a color for the icon on hover.
If you choose an image-
- Image Uploader: Upload or select an image from the media library.
- Image Size: Set the size of your image for different devices.
If you choose none as media-
- Only text will show if label text is populated already.
Position and Alignment Options
- Position: Choose left or right for the button position on your screen.
- Alignment: Determine the placement of the button text respective to the button icon or image.
- Side Offset: Adjust the distance between the button and the left or right edge of the screen.
- Bottom Offset: Adjust the distance between the button and the bottom edge of the screen.
- Hover Animation: Choose an animation from four different options for the button on hover. For no animation keep it to none.
- Hide on Mobile: Toggle this option to disable the back to top button on mobile devices.
Design
- Background Color: Choose a background color for the button.
- Background Hover Color: Set a different background color for the button on hover.
- Space Between: Adjust the space between the button icon and the button text.
- Margin: Adjust the spacing around the buttons to create a desired distance from other elements.
- Padding: Adjust the internal spacing within the buttons to create room around the content.
- Border Radius: Adjust the sharpness of the button’s borders.
That’s all the settings you get with the DiviFlash Back to Top Button option.
If you need help with existing settings feel free to reach out to our support team.
