Custom Back To Top Icon
Loes Knetsch ©
The default Back Top Top button is so boring. But hey, we can do something about that! You can change the Back to Top button into any icon you want.
You can use any icon for your Back To Top button, I give you a couple you can use right away, but you can also create one yourself if you like. You can find great icons on Icon8.com
How To Create A Back To Top Icon?
- Go to Icons8.com and find a great icon
- Choose for a size of 96 – 128
- Upload the image to Pixlr.com/editor
- Resize the image to 100px
- Go to edit & free transformation, shift the image if needed
- Add text
When the text needs to be added to an angle, then you can create the text on a transparent background, that goes as follow
- Create new image on Pixlr.com/editor Size 70px by 50px, choose transparent
- Write your text
- Open your icon image from your computer
- Add the text as a layer
- Shift it into position by using free transformation
- Save image
You may use these 2
When you have created your smashing Back to the Top icon, you can upload this icon to your website media library and fill in the alt text. If you don’t fill in the alt text, the HTML widget will give an error, that the alt text is missing.It's not rocket science to get to the top (of your blog) 🙂 Click To Tweet
Time for the Back to Top code
The code is added into a custom HTML widget
- Paste below code on a test post
- Select the part paste here your image URL
- Add media, choose your icon (with alt text)
- Copy the code
- Paste it into the sidebar or full-width footer widget area
- You now have an awesome Go to Top button
Back to Top Code
<a style=”display: scroll; position: fixed; bottom: 5px; right: 5px;” href=”#”><img src=”paste here your image URL” /></a>
You had already a Back to Top default button?
So, now there are 2 buttons displayed? Your awesome new icon and the boring Back to Top text button. Here is how you deactivate this boring button on your WordPress dashboard.
You can easily disable your Back to the Top default button in your CCsettings.
- Go to dashboard
- CC settings
- Advanced settings
- Un-check the box “enable scroll to top button”
Best website education online
Learn all you need to know about website development, design, affiliate marketing, SEO (Search Engine Optimization) and more…
Other interesting posts