Customizing your website design has never been more exciting! With new divider layout options, you can elevate your pages with fresh and dynamic designs. These enhancements offer creative ways to separate and transition content, moving far beyond traditional lines and spacing.
New Divider Layouts
The latest update introduces 38 unique layouts that include dynamic shapes like slants, waves, and decorative elements such as diamonds, circles, and hearts. These dividers are versatile and designed to complement a wide range of styles, whether you're aiming for a clean and modern look or a more artistic flair.
Some standout options include:
- Slants: Add angled transitions for a sleek, modern effect.
- Points: Direct attention with up or down arrow-shaped dividers.
- Waves: Introduce a flowing, artistic feel between sections.
- Decorative Lines: Incorporate elements like diamonds, double circles, or hearts for added charm.
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.
Customization Features
Each divider layout is fully customizable to fit your design vision. Here’s how you can make the most of the new features:
Thickness and Length
- Adjust thickness levels from ultra-thin to thick for a bold or subtle effect.
- For line dividers, choose lengths from short to fully flushed for more precise control.
Overlap Settings
- Choose how dividers interact with adjacent blocks: overlap the block above, the block below, or sit neatly between them.
- Overlapping options are especially impactful for slants and point dividers, enabling dynamic, layered designs.
Styling and Colors
- Customize the opacity and color of each section in the divider. For a tinted effect, set opacity to less than 100%.
- Add background images for added depth and texture, creating a unique look that complements your content.
Tips to make ultra-cool designs with dividers:
To Overlap... or Not to Overlap?
Dividers can act as clean separators or float over other blocks for creative transitions. Overlapping creates striking designs like slanted borders or arrow accents that integrate seamlessly with your content.
Layering Dividers
Layer multiple dividers for added visual interest:
- Use translucent colors to blend and create gradients.
- Stack solid dividers to form geometric shapes like diamonds, triangles, or chevrons.
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!!!
Seriously.
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!
These updates make it easy to craft unique and engaging designs. Whether you’re using simple slants or intricate decorative layouts, dividers are a powerful tool for enhancing your website’s flow and visual appeal.
You can add dividers to ANY PhotoBiz template and we are happy to help if you would like to know more or learn how they work. Just call us at 1-866-463-7620 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!
0 Comments