--- title: How do I edit the Back To Top Preset? description: Learn how to edit the Back to Top preset to change its icon, position, and style. --- [Skip to content](https://success.ministrydesigns.help/how-do-i-edit-the-back-to-top-preset#main-content) English Show submenu for translations [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) [![MD Logo 1\_Black-2](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-2.png?width=200&height=73&name=MD%20Logo%201_Black-2.png)](https://ministrydesigns.com/) Open main navigation Close main navigation - English Show submenu for translations - [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) How can we help you? - There are no suggestions because the search field is empty. 1. [Ministry Designs Success Hub](https://success.ministrydesigns.help/) 2. [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega) 3. [Design](https://success.ministrydesigns.help/sites-formerly-omega#design) # How do I edit the Back To Top Preset? ## Style the Back to Top button 1\. The [Back to Top widget](https://success.ministrydesigns.help/how-do-i-use-the-settings-general-tab) has one preset. Click Preset 1 Please note that you can customize the Back to Top Preset only if you have selected the custom design in [Settings - General - Back to Top button](https://success.ministrydesigns.help/how-do-i-use-the-settings-general-tab), instead of the default design ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-08/c5b24a5a-7cca-4904-b2b1-61d53732876f/ascreenshot.jpeg?tl_px=0,0&br_px=859,481&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=213,212) 2\. Click on the pencil icon to select a different Font Awesome icon for the Back to Top widget. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-08/8c073ff4-df53-4e95-91d4-39e3e16f9fa1/ascreenshot.jpeg?tl_px=0,271&br_px=859,752&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=66,212) 3\. Specify the position of the **"Back to Top" widget** on the website ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-08/0395f020-f6eb-41cb-97de-969795f22999/ascreenshot.jpeg?tl_px=0,300&br_px=859,781&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=3,212) 4\. You can configure the following values for each device for the Back to Top widget: Icon Size, Width, Height, Horizontal Spacing, and Vertical Spacing. Click a device icon to adjust the settings for that particular device resolution. **Icon Size** - will increase the size of the icon in the Back to Top button **Width** - will set the width of the Back to Top button. The maximum width that can be set is 200 pixels **Height** - will set the height of the Back to Top button. The maximum height that can be set is 200 pixels **Horizontal Spacing** - allows you to set the necessary spacing in front of the Back to Top button. The maximum value that can be set is 200 pixels **Vertical Spacing** - This allows you to set the necessary spacing above the Back to Top button. The maximum value that can be set is 200 pixels. ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-08/1e0a9cff-5f62-4029-a87a-9e4e5eb24167/ascreenshot.jpeg?tl_px=0,219&br_px=859,700&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=30,212) 5\. Specify the border for the Back to Top widget. Set Style, Width, and Corners ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-08/29dfb6d8-fcbb-43ed-8e73-4fedc6ada250/ascreenshot.jpeg?tl_px=0,236&br_px=859,717&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=119,212) 6\. Specify the animation for the Back to Top widget. Animation is a [common feature in most widgets](https://success.ministrydesigns.help/what-are-the-shared-features-in-the-website-builder) ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-08/3757f56b-5535-4031-bc43-4c77dece79da/ascreenshot.jpeg?tl_px=0,191&br_px=859,672&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=107,212) 7\. Use Normal and Hover State buttons to set the color for Normal and Hover states Set the Icon Color, Background Color, and Border Color ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-08/338df1ba-050c-4cdc-8706-f6e922937f2b/ascreenshot.jpeg?tl_px=0,410&br_px=859,891&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=226,212) 8\. Specify the Icon Color, Background Color, and Border Color If you need to set a specific color, use [the Color Picker](https://success.ministrydesigns.help/how-do-i-change-widget-colors) ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-08/d27fd31a-fed4-44c9-81d1-7f455806b439/ascreenshot.jpeg?tl_px=0,464&br_px=859,945&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=92,231) 9\. Click the "Save" button to confirm the changes ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-09-08/839ae120-8789-4be4-ae15-932a5b0bd333/ascreenshot.jpeg?tl_px=0,464&br_px=859,945&force_format=jpeg&q=100&width=860&wat_scale=76&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=183,414) - [Account](https://success.ministrydesigns.help/account) - [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega#main-content) - [Next-Steps Framework](https://success.ministrydesigns.help/sites-formerly-omega#next-steps-framework) - [Video Guides](https://success.ministrydesigns.help/sites-formerly-omega#video-guides) - [Site Builder Profile Settings](https://success.ministrydesigns.help/sites-formerly-omega#site-builder-profile-settings) - [Pages](https://success.ministrydesigns.help/sites-formerly-omega#pages) - [Design](https://success.ministrydesigns.help/sites-formerly-omega#design) - [Media Library](https://success.ministrydesigns.help/sites-formerly-omega#media-library) - [Extensions](https://success.ministrydesigns.help/sites-formerly-omega#extensions) - [Blog](https://success.ministrydesigns.help/sites-formerly-omega#blog) - [Events](https://success.ministrydesigns.help/sites-formerly-omega#events) - [Small Groups](https://success.ministrydesigns.help/sites-formerly-omega#small-groups) - [Sermons](https://success.ministrydesigns.help/sites-formerly-omega#sermons) - [Settings](https://success.ministrydesigns.help/sites-formerly-omega#settings) - [SEO](https://success.ministrydesigns.help/sites-formerly-omega#seo) - [Website Management](https://success.ministrydesigns.help/sites-formerly-omega#website-management) - [FAQ](https://success.ministrydesigns.help/sites-formerly-omega#faq) - [illume for Church Members](https://success.ministrydesigns.help/illume-for-church-members#main-content) - [Signing Up](https://success.ministrydesigns.help/illume-for-church-members#signing-up) - [Giving](https://success.ministrydesigns.help/illume-for-church-members#giving) - [illume for Church Administration](https://success.ministrydesigns.help/illume-for-church-administration#main-content) - [Getting Started](https://success.ministrydesigns.help/illume-for-church-administration#getting-started) - [Managing Your Account](https://success.ministrydesigns.help/illume-for-church-administration#managing-your-account) - [Using People](https://success.ministrydesigns.help/illume-for-church-administration#using-people) - [Using Giving](https://success.ministrydesigns.help/illume-for-church-administration#using-giving) [![MD Logo 1\_Black-3](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-3.png?width=200&height=73&name=MD%20Logo%201_Black-3.png "MD Logo 1_Black-3")](http://ministrydesigns.com) 15 Carlyle St Floor 2, Battle Creek, Mi 49017 [mailto:email@email.com](mailto:email@email.com) Copyright © 2025,