How to add the Perfect Vertical Divider in Weebly?
Adding a vertical divider for your Weebly site that will automatically adapt to height of the content used beside it, and of which you can choose the thickness and the color, wouldn't that be awesome? Well YES we can!
Using an image as a divider is a relatively 'easy' solution, but the big problem is, that images are not that easily manipulated via CSS as let's say any html element of who's properties can be modified on the go. So instead of an image which was an easy solution, why not go with an even easier solution that will give us plenty of room to play with.
You can download all of the examples here:
Using an image as a divider is a relatively 'easy' solution, but the big problem is, that images are not that easily manipulated via CSS as let's say any html element of who's properties can be modified on the go. So instead of an image which was an easy solution, why not go with an even easier solution that will give us plenty of room to play with.
You can download all of the examples here:
All of the html will go in an EMBED CODE element from Weebly and the CSS inside your stylesheet.
Let's have a look at the codes, our basic html:
<td class="ver_divider"></td>
This Embed code element will go either at the bottom of the column, if we want to have a divider on at the right side, or at the top of a column if we want to have a divider on the left side. I personally prefer to add it at the bottom since it won't disturb the layout inside your editor when using the columns, even though it wouldn't effect your layout in the published version.
Now we have to add some code in our CSS:
(to access your CSS: -Click on the DESIGN tab in your upper menu and, then inside the left column click on Edit HTML/CSS, you are now inside the Weebly code editor, by clicking on the left under Css on main-style.css, your stylesheet will appear on the right, in this document we will scroll all the way down to the bottom and paste in the following codes)
DEFAULT CSS:
.ver_divider{
width: 1px!Important;
margin: 0!Important;
padding: 0!important;
background: #ddd;
}
IMPORTANT! When later adding extra styles as shown below, the above CSS (default) codes must be included at all times.
So what we have done by inserting this code is adding a new 'column' in our column wrapper (a new table cell) and gave it the class ver_divider, we now added this selector inside of our CSS and applied some styles, it will be a 1px thin divider of a light grey color.
Unfortunately even when applying styles to this class, your divider won't be visible in the drag and drop editor, although it will be in the live/published version. This would make it rather difficult for us to know exactly where we have been adding those vertical dividers, a solution to this little problem is by adding an extra div inside our table cell so we can add some properties to it, like this we can easily spot it back in our editor, our code looks now like this,
html code for the embed code element looks as follow:
Unfortunately even when applying styles to this class, your divider won't be visible in the drag and drop editor, although it will be in the live/published version. This would make it rather difficult for us to know exactly where we have been adding those vertical dividers, a solution to this little problem is by adding an extra div inside our table cell so we can add some properties to it, like this we can easily spot it back in our editor, our code looks now like this,
html code for the embed code element looks as follow:
<td class="ver_divider">
<div class="div_vertical"></div>
</td>
Now we will have to add some properties for that div making it appear in our editor, we do so by adding the class in our CSS: 'div_vertical',
so back to our CSS and insert it at the bottom.
DEFAULT CSS:
so back to our CSS and insert it at the bottom.
DEFAULT CSS:
.div_vertical{
display: none;
}
#icontent .div_vertical{
display: block;
}
#icontent .div_vertical:before{
content:'vertical divider';
display: block;
text-transform: uppercase !important;
text-align: center !important;
font-size: 12px !important;
font-family: "Open Sans",Helvetica,Arial,Verdana,sans-serif;
line-height: 20px;
background: #4b5155 !important;
border: 1px solid #2e2f33 !important;
-webkit-border-radius: 3px !important;
border-radius: 3px !important;
-webkit-box-shadow: inset 0 0 2px rgba(255,255,255,0.2) !important;
box-shadow: inset 0 0 2px rgba(255,255,255,0.2) !important;
color: #fff;
text-shadow: 0 -1px 3px rgba(0,0,0,0.7);
border: 1px solid #202427 !important;
color: #fff !important;
}
IMPORTANT! When later adding extra styles as shown below, the above CSS (default) codes must be included at all times.
After Saving we can go back to our editor, and now our vertical divider becomes visible, although it doesn't seem that vertical to me, much rather horizontal I would say,
Screenshot editor:
Screenshot editor:
but fortunately ...
the actual result on our live site will look like this:
the actual result on our live site will look like this:
|
COLUMN 1
COLUMN 1 COLUMN 1 COLUMN 1 |
COLUMN 2
COLUMN 2 COLUMN 2 COLUMN 2 |
Admitting it looks a little weird to have a 'horizontal' divider in your editor that will show up as a 'vertical' divider in your live version, but for now this is the best option available in our opinion.
You can easily add different dividers on the same page with all different properties, below you can find some examples and their codes:
Vertical Divider 1
A simple red divider, or any other color that fits your theme.
Note how the divider adapts to the height of the column, since the second / middle column is the longest (in content) all dividers added inside the column will adapt to that height.
Note how the divider adapts to the height of the column, since the second / middle column is the longest (in content) all dividers added inside the column will adapt to that height.
|
COLUMN 1
COLUMN 1 COLUMN 1 COLUMN 1 |
COLUMN 1
COLUMN 1 COLUMN 1 COLUMN 1 COLUMN 1 COLUMN 1 |
COLUMN 1
COLUMN 1 |
HTML for your EMBED CODE element:
<td class="ver_divider example1">
<div class="div_vertical"></div>
</td>
CSS codes to add in your stylesheet: (note that the default CSS as shown above must always be included)
.ver_divider.example1{
background: #e96153;
}
Vertical Divider 2
Divider with some more width please
|
COLUMN 1
COLUMN 1 COLUMN 1 COLUMN 1 COLUMN 1 |
COLUMN 2
COLUMN 2 COLUMN 2 COLUMN 2 COLUMN 2 |
COLUMN 3
COLUMN 3 COLUMN 3 COLUMN 3 COLUMN 3 |
COLUMN 4
COLUMN 4 COLUMN 4 COLUMN 4 COLUMN 4 |
HTML for your EMBED CODE element:
<td class="ver_divider example2">
<div class="div_vertical"></div>
</td>
CSS codes to add in your stylesheet: (note that the default CSS as shown above must always be included)
.ver_divider.example2{
width: 5px!important;
}
We can modify the thickness by changing the px value of the width, additionally you can also change the background color by adding the background property with the color you like, now it is inheriting the default color which was set to light grey (#dddddd), if you want to generate RGB or HEX colors, you can use our Color Finder Page and it will generate it for you.
Remember to include the embed code element at the bottom for each column you want to have a vertical divider on, a screenshot from the editor of the above example looks as follow:
(note that the last column doesn't contain a divider because we don't need to end our column at the right with another divider.)
Remember to include the embed code element at the bottom for each column you want to have a vertical divider on, a screenshot from the editor of the above example looks as follow:
(note that the last column doesn't contain a divider because we don't need to end our column at the right with another divider.)
Vertical Divider 3
A bordered divider without a background color:
|
COLUMN 1
COLUMN 1 COLUMN 1 COLUMN 1 COLUMN 1 |
COLUMN 2
COLUMN 2 COLUMN 2 COLUMN 2 COLUMN 2 |
HTML for your EMBED CODE element:
<td class="ver_divider example3">
<div class="div_vertical"></div>
</td>
CSS codes to add in your stylesheet: (note that the default CSS as shown above must always be included)
.ver_divider.example3{
width: 5px!important;
background: none;
border: 1px solid #ddd;
}
Note that also here the width can be adjusted and even a background color can be applied as well as the thickness of the border and its color.
Vertical Divider 4
A gradient divider generated on the following amazing site: (http://www.colorzilla.com/gradient-editor/)
|
COLUMN 1
COLUMN 1 COLUMN 1 COLUMN 1 COLUMN 1 |
COLUMN 2
COLUMN 2 COLUMN 2 COLUMN 2 COLUMN 2 |
HTML for your EMBED CODE element:
<td class="ver_divider example4">
<div class="div_vertical"></div>
</td>
CSS codes to add in your stylesheet: (note that the default CSS as shown above must always be included)
.ver_divider.example4{
width: 8px!important;
background: -moz-linear-gradient(top, rgba(100,199,171,0) 0%, rgba(86,180,199,1) 53%, rgba(74,163,223,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(100,199,171,0)), color-stop(53%,rgba(86,180,199,1)), color-stop(100%,rgba(74,163,223,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(100,199,171,0) 0%,rgba(86,180,199,1) 53%,rgba(74,163,223,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(100,199,171,0) 0%,rgba(86,180,199,1) 53%,rgba(74,163,223,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(100,199,171,0) 0%,rgba(86,180,199,1) 53%,rgba(74,163,223,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(100,199,171,0) 0%,rgba(86,180,199,1) 53%,rgba(74,163,223,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064c7ab', endColorstr='#004aa3df',GradientType=0 ); /* IE6-9 */
}
Vertical Divider 5
Extra style by using pseudo classes
|
COLUMN 1
COLUMN 1 COLUMN 1 COLUMN 1 COLUMN 1 |
COLUMN 2
COLUMN 2 COLUMN 2 COLUMN 2 COLUMN 2 |
COLUMN 3
COLUMN 3 COLUMN 3 COLUMN 3 COLUMN 3 |
HTML for your EMBED CODE element:
<td class="ver_divider example5">
<div class="div_vertical"></div>
</td>
CSS codes to add in your stylesheet: (note that the default CSS as shown above must always be included)
.ver_divider.example5{
position: relative;
width: 0px!Important;
border-right: 1px solid #ddd;
}
.ver_divider.example5:before{
content:'';
width: 10px;
height: 10px;
border-radius: 20px;
background: #ddd;
position: absolute;
top:0;
margin-left: -5px;
}
.ver_divider.example5:after{
content:'';
width: 10px;
height: 10px;
border-radius: 20px;
background: #ddd;
position: absolute;
bottom:0;
margin-left: -5px;
}
Vertical Divider 6
Playing some more with the pseudo selectors and adding an image on top.
|
COLUMN 1
COLUMN 1 COLUMN 1 COLUMN 1 COLUMN 1 |
COLUMN 2
COLUMN 2 COLUMN 2 COLUMN 2 COLUMN 2 |
HTML for your EMBED CODE element:
<td class="ver_divider example6">
<div class="div_vertical"></div>
</td>
CSS codes to add in your stylesheet: (note that the default CSS as shown above must always be included)
.ver_divider.example6{
position: relative;
width: 0px!Important;
border-right: 1px dashed #ddd;
}
.ver_divider.example6:before{
content:'';
width: 30px;
height: 29px;
background: url(logo-pseudo.png);
position: absolute;
top:0px;
margin-left: -15px;
}
.ver_divider.example6:after{
content:'';
width: 8px;
height: 8px;
background: #fff;
border: 1px solid #32bdc7;
position: absolute;
bottom:0;
margin-left: -4px;
}
Note that for the :before selector we added a background image, this image can be uploaded to your Weebly files and then added inside the CSS, we also specified the exact width and height our image has, and to center the image we give it a negative margin-left which is half the value of the total width of your image.
The divider itself this time is dashed instead of solid.
The divider itself this time is dashed instead of solid.
Vertical Divider 7
Sometimes the more simple we keep it the better it looks.
This is a double lined divider example.
This is a double lined divider example.
|
COLUMN 1
COLUMN 1 COLUMN 1 COLUMN 1 COLUMN 1 |
COLUMN 2
COLUMN 2 COLUMN 2 COLUMN 2 COLUMN 2 |
COLUMN 3
COLUMN 3 COLUMN 3 COLUMN 3 COLUMN 3 |
COLUMN 4
COLUMN 4 COLUMN 4 COLUMN 4 COLUMN 4 |
HTML for your EMBED CODE element:
<td class="ver_divider example7">
<div class="div_vertical"></div>
</td>
CSS codes to add in your stylesheet: (note that the default CSS as shown above must always be included)
.ver_divider.example7{
width: 3px!Important;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
background: none;
}
With these seven examples of vertical dividers we sure get to understand and master the divider by now, there are endless possibilities and there will surely by some that will match your Weebly theme, in colors as well as in style.
If you have any questions or suggestions regarding the vertical dividers, please add them to the blogpost:
If you have any questions or suggestions regarding the vertical dividers, please add them to the blogpost:
