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 CSS
Button Hover CSS
Coincidence? 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!
I took out the forum page as there was no engagement, but thought I would add it back in so that people can see the functionality that Weebly sites offer. It's a simple forum, but a functional one. Not many other website builders allows you to add a forum. Squarespace allows a thirdparty embed called Mutt which Weebly also allows but the review of Mutt on Weebly have not been great.
You can see the forum page here: http://debbiediscovers.weebly.com/forum
There is also the option to add a pinboard style calendar. This is a paid option (with a 2 week free trial). I am unlikely to continue with the trial but it's here if you want to check out it's functionality. You can change the view to a monthly view or an agenda view.
Weebly also provides a free option to add a simple Campaign Survey with a number of pre-determined options (e.g. age, income, education, satisfaction, etc). FEEL FREE TO SUBMIT YOUR RESPONSES TO MY CAMPAIGN SURVEY!!
The first thing I noticed was that the new Weebly editor does not add proper open graph data. So when shared on Facebook, the image shown was a segment of my debbiediscovers logo
So in order to improve shareability of this site: I had to add open graph meta tags into the header portion of each page:
<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Webpage">
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="DebbieDiscovers Needs Your Help">
<meta itemprop="description" content="Let's build a school together with Pencils of Promise">
<meta itemprop="image" content="http://i.imgur.com/CCwSAX5.jpg">
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@debbiediscovers">
<meta name="twitter:title" content="DebbieDiscovers Needs Your Help">
<meta name="twitter:description" content="Let's build a school together with Pencils of Promise">
<meta name="twitter:creator" content="@debbiediscovers">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="http://i.imgur.com/nz9InSi.jpg">
<!-- Open Graph Data for Facebook -->
<meta property="og:url" content="http://www.debbiediscovers.weebly.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="DebbieDiscovers Needs Your Help" />
<meta property="og:description" content="Let's build a school together with Pencils of Promise: This is a dedicated fundraising site for friends and family to learn more about Debbie's campaign to build a
school together in Laos with Pencils of Promise." />
<meta property="og:image" content="http://i.imgur.com/CCwSAX5.jpg" />
Note: Add this to each individual page under Pages, SEO Settings and Header Code (and not the overall Settings page).
How to Add Open Graph Meta Tags to your Weebly Site
1. At the top of the Weebly editor, click on Pages.
2. Go to the Page that you want to add the meta-tags to. Click on the three dots on the extreme left of the page.
3. Once you're on the page, look for SEO Settings.
4. When you're on SEO Settings, scroll all the way down to the bottom until you see Headers.
5. Add to the Header Code by modifying the meta-tags I listed above.
If you're using Twitter, change the relevant information to link to your Twitter account, and your Twitter website card. You can check that Twitter is reading your meta-tags correctly by using this validator: https://cards-dev.twitter.com/validator.
If you're using Facebook, you'll want to modify the open graph meta-tags. You can check what Facebook is grabbing from your site by using their debugger tool: https://developers.facebook.com/tools/debug/
Note: I used Imgur to generate a shareable link to my open graph images. The ideal size for a Facebook open graph image is 1200 by 630 pixels. The ideal size for a Twitter website card is 800by 418 pixels.
Hope that helps! Let me know in the comments if it did, or if you have any questions!
This is a simple blog to track my fundraising activities and to keep family, friends and supporters updated on my progress.