There are tons of ways to customize your website design with the Zibster builder, and now you can make your pages even more amazing! We’ve added 4 new layouts to the divider block, and once you see them in action, you will fall in love.
Now dividers can do way more than add lines or space between blocks. The new shapes available include slants and “arrows” pointing up and down.
These shapes may look simple... but they can be customized, layered and stacked to make all kinds of awesome transitions and shapes on images, videos, banners and more!
When used creatively, dividers make the magic happen on your website. Here’s the basics of what you need to know to start using dividers like a pro.
Tips to make ultra-cool designs with dividers:
To Overlap... Or Not To Overlap?
Usually builder blocks stack on top of one another like bricks, and dividers can work that way, too – solidly separating the area above from the one below.
But they also have a special power.
Dividers can FLOAT OVER other blocks to cover up a bit of what’s above or below it. That’s how you can get these cool slanted borders – by basically covering up part of another block!
Layering Dividers & Using Combos
If you’re really tricky, you can use more than one divider to make layers of color and interesting shapes.
If you layer 2 dividers that are a little see-through (opacity to less than 100%), the colors will blend!
Similarly, you can put a couple of solid dividers on top of one another to make funky diamonds, triangles, chevrons and more. (See examples below!)
Colors, Backgrounds & Opacity
Each divider layout has two sections – “A” and “B.” The color & opacity of each section can be controlled independently.
If you want a color to be solid, keep the Opacity at 100%. If you want it to be clear, set opacity to 0%. Anything in between will give you a see-through section that is tinted whatever color you give it.
You can even give your divider a background image! (Remember: backgrounds apply to the WHOLE block, and is only visible if a section's opacity is less than 100%.)
Dividers Can Go On Top Of Anything!!!
You can float shapes and colors on top of images, scrolling banners, videos, text blocks, text + image blocks, forms… go nuts!
Dividers follow their own rules, and drift effortlessly on top of your content blocks. You can use this to your advantage to make a ton of eye-catching, creative designs. Give it a try!
Three cool divider designs . . . and how to build them
This is an easy way to use dividers that looks amazing. To create this, a title and list item block are sandwiched between two slanted dividers. These dividers are not overlapping anything at all. The A and B sections are both set to 100% opacity – one half is white, and the other blue.
This gives a gorgeous and elegant "tilted banner" effect, which is lovely... especially when the blue background color continues up and down the page. It makes the white section just pop right out of the page!
This cool "1/3" design is done by overlapping a "Point Up" divider on top the of a Text + Image block above it.
Section "A" (the tan triangle) is at 100% opacity and is the same color as the Text block below, making it look seamless. Section "B" is set to 0% opacity, so it looks clear and only the triangular peak is visible!
REALLY cool effects can be achieved by layering dividers. On this photo we have three dividers in action all at once!
The angled top of the banner is created by using a slanted divider, and overlapping on the image below. One half is set to white at 100% opacity. The other half is at 0% so you can see the image through it.
On the bottom of the image are a left and right slanted divider, both overlapping. Each divider is set to have one clear half, and another that is blue or purple at 50% opacity. The area where they overlap blends the colors together and gives a really cool effect!
And you can make all kinds of
other wacky shapes, too!
We hope you are able to add a lot of creative touches to your designs using these new dividers! We have released two new templates (Angelou and Francesca) that use these dividers to show you what they can do.
Of course, you can add dividers to ANY Zibster template and we are happy to help if you would like to know more or learn how they work. Just call us at 1-844-353-3412 and we will be glad to show you how they work!
What kinds of cool designs can you come up with? The more I learn about dividers, the more excited I get about all of the possibilities to create something new and amazing!