The way to Create Irregularly Shaped Section Transitions with Divi

One of the best ways to boost the type of your own website is by using different section transitions. In the previous post, we’ ve shown you how you can do that will using the Divi built-in options only.  However, if you’ re looking to develop something a little bit more advanced or personalized, you can create irregularly shaped section transitions as well. Since of their complexity, the best way to approach this really is by using images with a transparent border.

In this post, we’ ll display you ways to do that. We’ lso are not only going to demonstrate exactly what to do within the Divi Constructor, but we’ re also going to show you how you can generate these transparent borders on images along with a few steps using Photoshop.

Example Result

Let’ s check out a layout sample along with stunning irregularly shaped section transitions:

ecommerce website design

As you can notice, you can use these types of transparent borders throughout your whole web site and within different sections. It’ t important to remember that, depending on just how large your transparent border is, a person should have enough place left within the sections to fit the different content you’ re trying to share. It’ ll also create a nice balance among the various sections.

How to Create Irregularly Shaped Section Transitions with Divi

Subscribe To Our Youtube Channel

Create Transparent Borders with Photoshop

You can achieve as original shapes as you want with Photoshop. You could furthermore opt for a free alternative called GimpShop. For this tutorial, we’ lmost all use Photoshop though.

Open Photoshop

Start by opening photoshop on your computer.

Open Picture

Once you’ ve accomplished that, open the image you’ d like to work on.

irregularly shaped section transitions

Double-Click on Picture & Create Layer

Once your image is uploaded within Photoshop, double-click on the image layer that a new layer for it (Layer 0).

irregularly shaped section transitions

Add Another Layer

In order to add the transparent border, you’ lmost all be needing another layer as properly so go ahead and add this by clicking on the icon which we marked in the print screen below. When you create the layer (Layer 1), ensure it’ s placed above the layer that contains your image.

irregularly shaped section transitions

Choose Brush & Size

Whilst having the Layer 1 activated, go ahead and click on the brush icon.

irregularly shaped section transitions

Once you do, you can alter the size and pattern that’ s being used for the brush in order to your own preference. There are a lot of free Photoshop brushes on the web so depending on what type of web site you’ re creating, choose a fitting one. Also, be sure that the opacity is set at a 100%.

irregularly shaped section transitions

Start Using The Brush on The Borders

When you have your brush in place, start using it on the side you want to be transparent. Make sure you protect the whole border with your clean so it’ ll all become transparent afterwards.

irregularly shaped section transitions

CTRL (Windows) or Command (Mac) + Choose New Layer

Once performed, you can press CTRL (for Windows) or Command (for Mac) in your keyboard and click on Layer 1 simultaneously. You’ ll see that Photoshop can select everything you’ ve added in order to that layer, which is, in this case, the shaped border.

irregularly shaped section transitions

Make New Layer Invisible

Next, make Level 1 invisible by removing the eye since marked in the print screen beneath.

irregularly shaped section transitions

Choose Image & Delete New Layer

Then, click on the level that contains your image and press the delete button on your keyboard. Once you do that, you’ ll see that the border will become transparent.

irregularly shaped section transitions

Select Rectangular Marquee Tool & Click on on Image

Click upon the Rectangular Marquee Tool and press somewhere randomly on the image.

Save Image as PNG

Lastly, you’ ll need to save the image as a PNG so you may use it on your website.

Add Backgrounds to Divi

Once a person create the various images you want to use within your Divi website (by making use of the Photoshop technique above), the rest of it is straightforward. The images you’ ve created serve as the history of a particular section. We’ re only going to show you exactly how to build the hero section of our example since the same method applies for the different sections too.

Add New Standard Section

Add a new page, switch to Visual Builder and include a new standard section to that page.

Upload Background Image

Once you’ ve positioned all the modules you want in order to appear in the hero section, you may go ahead and add the picture you’ ve created in the previous element of this post.

irregularly shaped section transitions

Add Background Color

Once you’ ve done that, you can decide what color may appear in the transparent a part of your own image. In this example, we’ ve used ‘ #dddddd’ as the background color. You can immediately see that will the color will appear right inside the transparent part of the picture.

irregularly shaped section transitions

Make Sure There’ s Enough Padding

Depending on the quantity of segments and the size of your transparent boundary you’ ve used in your leading man section, you might have to include some custom padding. Have fun with the different section padding values and see what type gives you the best result.

irregularly shaped section transitions

Add Same Background Color to Next Section

To ensure the different sections mix well with one another, make use of the exact same background color you’ ve used in your own hero section within your next section as well. That doesn’ t always mean you need to use a one color background color for your next section, a person can use a gradient background since well as long as the colours of both sections blend beautifully.


As described before, you can create as numerous image borders as you want and use them in a creative method throughout your website. To give you a taste of it, we’ ve developed the following example preview:

ecommerce website design

Final Thoughts

In this post, we’ ve shown you how you can easily make make use of of irregularly shaped section transitions. Applying this method, you can basically create any kind of kind of section transition you wish. Besides showing you how to generate these irregular shapes with a few steps in Photoshop, we’ ve also demonstrated you ways you can then make this work within the Divi Builder. When you have any questions or suggestions; make certain you leave a comment in the particular comment section below!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

The publish How to Create Irregularly Shaped Section Transitions with Divi appeared first upon Elegant Themes Blog.