How to Create a Vertical Divider in Weebly
by divtag - Categories: Uncategorized
Hello there,
Jeremy from DivTag Templates here. We recently posted up a new video tutorial on YouTube about this little trick that a lot of Weebly users are curious about.
You see, one of the key tools / elements that is missing in Weebly is the ability to insert a vertical divider. Weebly has a horizontal divider element, but I know a lot of you (us included) would love to be able to insert dividers between columns.
We found a way to do it using Weebly’s tools and just wanted to share this with you. If you already figure it out before, that’s awesome! If not, I hope you’ll find this helpful. It’s super easy.
Next Weebly Tutorial Lesson:
In our next tutorial tomorrow, we’ll show you how to extract your Weebly website and insert it into a different host! Not saying that you need to do it (since Weebly is pretty dang awesome)… but it’s just good to know how to do that… just more flexibility, agree?
PS: Do you have any questions for us on how to use our premium templates and add-on’s to transform your web design? Feel free to contact us and ask away! We’re here to be helpful. Using our premium templates can literally turn an average website into a much more professional looking one as if you hired someone to custom build a website for you.
Don’t believe us? Check out our showcased websites which are built by Weebly users just like yourself!
Jeremy
Did you Like the Tutorial?
If so, Like us on Facebook, Google+ and Subscribe to our YouTube Channel below!
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!
Thank you, I really needed that.
Genius! Could never have thought of this myself… Subscribing now!
Where does the image of the divider bar come from, where is it downloaded from so as to upload it on to the site?
Hi Jimmy,
The bar is just an image file. So you can use almost any image editor and create a bar, which is almost just like a line. You can control the thickness of the line in the image editor so suit your own needs.
It would be helpful to have the tutorials in written form as well as the video. I like to copy & paste into a Word doc to refer to on the fly. Don’t always have time to sit and watch a video when I can quickly scan to the point I need and keep working. Video for learning, but written for quick reference.
Great information,
One thing you can do to make things look more consistent is to look at the images included with your template and modify one of the images to create the line. There may already even be a horizontal line created for you. Just save it, modify it and follow the instructions in this tut.
My problem is once I have created the 2px line in photoshop and saved it as PNG (or it brings over a white background if jpeg) then my line is actually a part of an image that will not extend like yours without making it thicker and thus a blurry mess. How do you export from photoshop so you just have the line and not the entire image (or transparent background you were creating it on) from photoshop?
I’m new here and am glade I’ve found this site. I’m see all the possibilities that I can do and grow from. I do have a question, can navigation bars be moved in templates. Say from the top to below the header, if so how is that done.
Thanks Kenneth
You can, but you would have to modify the codes to the template (which you do have access to through Weebly Editor). It’s a complex change if you are not proficient with codes, or you could always hire a coder to help you out with that.