Top 5 Weebly Hacks

I figured these out so you don’t have to.

My very first website was and it looked okay, though a bit too out-of-the-box.

I began to customize it and after 4 months of trial and error, these are the top tricks I would recommend to you.

A recent screenshot of my customized Weebly website

SEO Hack #1

Create H1 headers on top of each page

By default, when you drag a header box onto your webpage, you are actually creating an H2 header. It is important to differentiate between the two for SEO purposes. Search engines do their best to mimic a real browser and so will look at your headers to identify what the webpage is about. Your H1 comes first, then H2, H3 and so on until H6.

To create your H1 headers, simply choose the Embed Code block and drag it to the top of your page.

Then type in:

<h1>Your header here</h1>

You could leave it like that, but most likely your font will look a bit funny. The way to fix your font is by adjusting the basic code for your site. To do that follow this process:

Code Editor in Weebly
  1. While in the Site Editor, click on the Theme tab.
  2. In the left pane, click on Edit HTML/CSS. (Don’t worry, everything you do here is reversible by selecting your theme again.)
  3. In that same left pane, you should by default be in the section called “Assets” and the subsection “main_style.css”. If not, click on it!
  4. At the top of your page is a bunch of code. Scroll down that code to the section called “General Styling and Structure”. It’s beneath “Resets” and “Fonts”.
  5. Scroll down further to the pink text that says “h2”.
  6. Press “Enter” on your keyboard 3 times to make room for the code in your next step.
  7. Copy and paste the text below to create a more appropriate font for your h1 headers:

h1 {
 font-size: 2.3em;
 margin: 0 auto 1em;
 line-height: 1.25;
 font-weight: 400;
 color: #000000;

8. Then click Save in the top right of your screen.

SEO Hack #2

Increase site speed and enhance SEO by resizing images

I have a DSLR camera and an iPhone 6. Basically, my pictures are really big. That can sometimes be good if I intend to crop them, but usually it’s problematic for site speed.

Resizing your images in Weebly doesn’t cut the down the size of the file you originally uploaded. So it’s advantageous to resize them before uploading them.

Before deciding on a standard size for all of my images, I looked at the main_style.css code (mentioned above) and found that my site will never be larger than 1,100 px (pixels) wide. If we look at the size of an iPhone picture, we find they are 3,264 by 2,448 pixels. Essentially, iPhone pictures are 3 times the size of my website.

It is also worth mentioning that images from these devices are created with 300 pixels per inch (ppi). That means for every inch, 300 little dots of color spread across your picture. That’s really high resolution and is only necessary if you are printing. Because you are probably only using your images for the web, your image resolution should be at 72 ppi.

For the average person your basic photo editor will do the job. If you are a Mac user, use Preview and if you are a Windows user, use Irfanview. Using the photo editor of your choice, reduce the resolution to 72 ppi and resize your images to be no wider than 1,100 px.

Now when you upload your images to Weebly, they will they load faster for you and for your viewers as well. As a bonus, Google may reward you with a slightly higher rank in their results.

SEO Hack #3

Custom buttons for your call to action (CTA)

Get A Free Estimate is my Call to Action

A common feature for the modern website is having a visible, attractive Call to Action or CTA. A call to action is the text or image that prompts your viewer to do something, such as “Contact Us Now” or “Subscribe to Mailing List”.

I found that by default, Weebly’s buttons are bland and lame. So I customized mine. Doing so requires a tiny bit of adjusting to the code in your site:

  1. While in the Site Editor, click on the Theme tab.
  2. In the left pane, click on Edit HTML/CSS. (Don’t worry, anything you do here is reversible, just by selecting your theme again.)
  3. In that same left pane, you should by default be in the section called “Assets” and the subsection “main_style.css”. If not, click on it!
  4. At the top of your page is a bunch of code. Scroll down to the section called “Buttons”. It is beneath “General Styling” and “Structure”.
  5. Find the section in white entitled .wsite-button, .blog-button {
  6. To change the background color of your button, find the third item in green called “background”. There you will see a # with 6 letters/numbers after it. This is the hexadecimal system for colors. Simply by going to a hex color picker you can choose a color you like and replace those 6 letters/numbers with the color you like. As soon as you do so, the screen beneath refreshes and shows you what it looks like now.
  7. To change the text color, stay on the section entitled .wsite-button, .blog-button { and find the forth item in green called “color”. Change that hex color to one that contrasts but is complementary to your background.
  8. Finally, to change the mouse-over color of your button, scroll further down to the section in white entitled .wsite-button:hover {
  9. Then I would suggest changing the hex color to one slightly darker than the color you chose in #6 above.
  10. Then click Save in the top right of your screen.

Bonus Button Tip

One last tip for the buttons on your website: not only should your main Call to Action buttons have a brighter, more active color. They should also be larger than the buttons used elsewhere.

To change the button size, go to your Site Editor, choose the Build tab and click on your button. Select “Button Style” and choose the larger button for your main Call to Action and the smaller, more boring button for regular navigation.

SEO Hack #4

Add data to your page when shown in Google

Have you seen some results on Google displaying website data like hours, reviews, showtimes or other cool bits of data usually reserved for the website?

Well, this is all because of the latest bit of SEO called Schema Markup.

Check out the Schema for my website using Google’s Structured Data Testing Tool.

Using Schema, I was able to tell Google my postal address, that this was a website for a local business, the name of my website and mention a review.

There is much more that can be done using Schema and as I am brand new to it, I hope to expand upon the Schema used on my site.

Here is a great article from Kissmetrics’ Neil Patel on how to boost your SEO using Schema.

P.S. Schema does require you use the Embed Code block from Weebly.

SEO Hack #5

Page title and site title

I’ve read many SEO articles throughout the web that emphasized placing your company name at the end of the page title.

Unfortunately, today I discovered that while I was adding my company name to each page title, Weebly was automatically doing it too, giving me an unnecessarily long and redundant page title.

Here is how you can let Weebly take care of it for you:

  1. While in the Site Editor, click on the “Settings” tab.
  2. In the left pane, click on the “General” tab.
  3. Now you will see the section for Page Title.
  4. Enter your company name and select “Show title on the top of your pages”.

Bonus Hack!

Add Social Tracking and Heatmaps with Sumo

When I first started my Weebly website, I really wanted to add clean, professional looking social sharing buttons and heat maps, but didn’t want to spend the $$$.

When I found Sumo I fell in love with their services and though I still use their freemium version, I’ll happily share them with you.

To place your free Sumo code go to:

  1. Your Site Editor and click on the Settings tab.
  2. In the left pane, click on the SEO tab.
  3. Scroll down to the “Header Code” section and paste your code there.
  4. Hit the green Save button on the bottom right and that’s it. Your SumoMe code is active.

P.S. It would be really cool if you would promote this article by clicking the 💚 below. Then you can share these tips with others, and they won’t have to do all the figuring and documenting and stuff.

If you have any questions, comments or feedback, please share them below.