PIT Designs Logo

All the Shape Dividers in Oxygen Builder

I'm the owner and founder of PIT Designs. I love creating digital presence and creative digital solutions for our clients.


Posted 3 years ago on May 27th, 2020. Last modified on June 7th, 2020

Related To:

4 Benefits of Outsourcing Your Payroll

Did you know that you can outsource your payroll? Many business owners are hesitant to outsource this vital task, but doing so has many benefits. Here are four benefits to outsourcing your payroll.

How Can 3D Animated Logos Increase Brand Relevance?

Every company strives to please its consumers. A business uses its resources and strengths to amplify sales, recognition, and growth. […]

Integrating Artificial Intelligence in Mobile Apps Development

Mobile app development is a process of creating mobile apps with the use of computer programming languages, tools and software. […]

Why is PHP Still Important for Web Development?

PHP is one of the most popular programming languages and has been around for over two decades worldwide. PHP has […]

AI vs Machine Learning: What are the Differences?

Within the last decade, the term AI vs machine learning has become buzzwords that are often discussed together, and the […]

A Comprehensive Guide to Creating a Compelling Whiteboard Animation Video

Have you ever seen videos where it appears as though someone is discussing something while writing a story on a […]

8 Reasons Why You Should Hire Remote Workers

As the world moves through its third year of the pandemic, remote working is here to stay as it revolutionises […]

How To Start An Online Business As A Student

Many of you pursuing student life have a high desire to do jobs. In this case, you can’t get enough […]

Shape Dividers in Oxygen builder is the new cool feature added. Shape dividers have become more and more used in modern designs. They are a great way to add interest to the transition between sections page. Rather than straight lines and solid colors. Shape dividers are perfect for adding a subtle transition and elegance to page design.

You can see some of them in action on this page.

At the time of writing, this is still in Alpha release.

In this video, you'll get a glance at what's coming to Oxygen builder, in terms of Shape Divers, (and Undo/Redo, worth checking it out too)

A video explaining the shape dividers in Oxygen builder

List of All the Shape Diviers

As soon as I received the notification for the new alpha release, I went ahead and started playing with the new features. And soon noticed, that I'm clicking on almost all the shapes just to see what's there. And how each one looked. So I thought it would be useful to look at all the shape dividers in Oxygen builder, as one list for reference.

https://pitdesigns.com/ShapeDividers.html

All shapes are generated as default settings, with black color.

Add Custom Shape Dividers

Elijah explained in the video how to add your own custom shape dividers in Oxygen builder. Using websites such as getwaves.io

Note: When you copy your SVG shape code, you will need to edit it before you can use it in Oxygen builder.

First, add the preserveAspectRatio attribute to the SVG code, so it will look like this

<svg preserveAspectRatio="none" >

Secondly, change the Fill of the Path element to currentColor, so your code will look like this

<path fill="currentColor" >

Quick Notes

It's worth checking the layering method, with different opacity, to create the overlapping effect.

Another cool tip is that you can assign z-index value to each shape, creating more depth within the sections & backgrounds/shapes.


Coffee is the fuel that keeps the free content coming 🙂

[paypal-donation]