The Weebly template that I am using is Unite. One of the features of this theme are that there are only 2 choices of colors for buttons - grey and black, which does not make the call to action very visible. Prompted by Neil Patel's recent post "How to Create the Perfect Call to Action" I utilised one of the best features of free Weebly websites the ability to add custom HTML / CSS to the website to change the Donate buttons from Black to Yellow! Here's how to change the color of your buttons: Step 1: Go to Themes Step 2: Click on Edit HTML / CSS at the bottom of the page Step 3: Search for Styles, and main.less. If your theme does not have a main.less file, you might want to try UI-kits.less. I haven't tried looking through every single theme for where the button sits, but look in the Styles folder, and check each one by searching for Button. Step 4. Use the Search function and search for "Button" or scroll down till you see /* Button */. That's where all the button styling sits. Step 4: Change the background from black (#000000) to yellow (#fbb730). Change the border color to whatever color you want your border to be. I like my buttons borderless so I use the same yellow (#fbb730) Step 5: Change the color (font color) from white (#ffffff) to black (#000000) Step 6: To change the color of the button when you hover over it, look for the word button and hover (.wsite-button:hover or .wsitebutton-highlight:hover) and change the colour there! Button Styling CSSCode Editor
Button Hover CSSCoincidence? Maybe. Correlation does not mean causation. But whether it was the change in colour of CTA or not, learning from @neilpatel and @shayhowe led to a jump in the number of donations and my projected completion date has been brought forward by 5 days! Good thing I learnt some HTML / CSS from Shay Howe earlier this year (one of the best sites to learn) Only $325 left to go!
Comments
|
Categories
All
DEBORAH KAYThis is a simple blog to track my fundraising activities and to keep family, friends and supporters updated on my progress. Archives |