How to customize the Horizontal Divider Element in Weebly

by - Categories: Uncategorized

I’m sure you’ve used Weebly’s horizontal divider already, which is a basic Weebly element where you can drag and drop on to your content area.

While it is great from a functionality perspective in dividing your content within your website, from a design perspective it could be a disaster!

What if the color of the divider does not suit your design color scheme? Weebly allows you to adjust the width of the divider, and that’s it.

In our latest video tutorial, we’ll show you how to insert some very simple CSS codes so you can customize the color of your dividers, as well as the thickness.

This way, you can adjust the colors to suit your overall color scheme and also have the divider be thicker or thinner – however you want to customize them.

There are all sorts of ways to customize your website and this is one of the simpler ways.

Next Weebly Tutorial Lesson:

Our next tutorial will be sent to you in about 3 days, and we’re going to show you how to install a Comment box platform in your Weebly website using Disqus (which is our favourite comment box widget). We use these comment boxes all the time to answer questions from our visitors.

This is a very powerful (and free) tool to help you increase engagement with your website visitors – not to mention when visitors see comments being left on your website, it automatically provides “social proof” to your website. See you next week!

PS: If you are still considering using our premium templates and add-on’s to make your website look better and more professional, but you have questions, feel free to contact us and ask away!  

Don’t think you have the ability to have a killer design for your website?  Well, check out what other Weebly users have been able to do in our Showcase Section.  You don’t have to be a rocket designer to do this.  Our premium templates will do most of the heavy living!

 Click here to see some of our designs.

Jeremy

Did you Like the Tutorial?  

If so, Like us on Facebook, Google+ and Subscribe to our YouTube Channel below!


Subscribe YouTUbe

About divtag

DivTag Templates is created by Connie and Jeremy Wong. We provide you with designer Weebly themes to rock your Weebly website!

Your website will Look Better, Your visitors will Stay Longer. Minutes to Setup, Extensive Support - Ninja Coding Skills NOT Required!

4 Responses

  1. Sandra says:

    I love this tip, however, I do not know code and I can’t copy and paste your code to my notebook and I sure don’t know where to get the brackets or how much space to use. So, for now, I can’t use this.
    Also, do you have any videos on how to make the spacing between elements less. There is so much wasted space in Weebly!
    Thanks.

    • Hi Sandra,

      The bracket should be on your keyboard, typically located to the right of the “p” key.

      We don’t have any tutorials on how to reduce spacing between elements. But you can try to control that a bit using the default Weebly configuration tools. They usually allow you to add / reduce spacing for some of their elements.

  2. John Ray says:

    Hello,
    I wonder whether I can have different colours for every divider that I add on our website?

    Many thanks,
    John Ray

  3. Linda says:

    Get tip – thank you so much I never realised I could click on the divider to change the spacing!