How to Create Irregularly Shaped Section Transitions with Divi

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

In this post, we’ll show you how you can do that. We’re not only going to show you what to do within the Divi Builder, but we’re also going to show you how you can create these transparent borders on images with a few steps using Photoshop.

Example Result

Let’s take a look at a layout sample with stunning irregularly shaped section transitions:

ecommerce website design

As you can notice, you can use these transparent borders throughout your whole site and within different sections. It’s important to remember that, depending on how large your transparent border is, you 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 between 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 also opt for a free alternative called GimpShop. For this tutorial, we’ll be using Photoshop though.

Open Photoshop

Start by opening photoshop on your computer.

Open Image

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

irregularly shaped section transitions

Double-Click on Image & Create Layer

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

irregularly shaped section transitions

Add Another Layer

To add the transparent border, you’ll be needing another layer as well so go ahead and add it by clicking on the icon which we marked in the print screen below. Once you create the layer (Layer 1), make sure it’s placed above the layer that contains your image.

irregularly shaped section transitions

Select Brush & Size

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

irregularly shaped section transitions

Once you do, you can adjust the size and pattern that’s being used for the brush to your own preference. There are tons of free Photoshop brushes on the internet so depending on what type of website you’re creating, choose a fitting one. Also, make sure that the opacity is set at a 100%.

irregularly shaped section transitions

Start Using The Brush on The Borders

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

irregularly shaped section transitions

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

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

irregularly shaped section transitions

Make New Layer Invisible

Next, make Layer 1 invisible by removing the eye as marked in the print screen below.

irregularly shaped section transitions

Select Image & Delete New Layer

Then, click on the layer 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 Image

Click on 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 can use it on your website.

Add Backgrounds to Divi

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

Add New Standard Section

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

Upload Background Image

Once you’ve placed all the modules you want to appear in the hero section, you can go ahead and add the image you’ve created in the previous part of this post.

irregularly shaped section transitions

Add Background Color

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

irregularly shaped section transitions

Make Sure There’s Enough Padding

Depending on the number of modules and the size of your transparent border you’ve used in your hero section, you might have to add some custom padding. Play around with the different section padding values and see which one gives you the best result.

irregularly shaped section transitions

Add Same Background Color to Next Section

To make sure the different sections blend well with one another, use the same background color you’ve used in your hero section within your next section as well. That doesn’t necessarily mean that you have to use a one color background color for your next section, you can use a gradient background as well as long as the colors of both sections blend beautifully.

Example

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

ecommerce website design

Final Thoughts

In this post, we’ve shown you how you can easily make use of irregularly shaped section transitions. By using this method, you can basically create any kind of section transition you desire. Besides showing you how to create these irregular shapes with a few steps in Photoshop, we’ve also shown you how you can then make it work within the Divi Builder. If you have any questions or suggestions; make sure you leave a comment in the 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!

.divi_cta{background-color: #8f43ee; color: #fff; font-size: 20px; font-weight: bold; padding: 20px; text-align: center; display: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}

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

Click Here to Leave a Comment Below 0 comments

Leave a Reply: