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.
- 1 Example Result
- 2 How to Create Irregularly Shaped Section Transitions with Divi
Create Transparent Borders with Photoshop
- 3.1 Open Photoshop
- 3.2 Open Image
- 3.3 Double-Click on Image & Create Layer
- 3.4 Add Another Layer
- 3.5 Select Brush & Size
- 3.6 Start Using The Brush on The Borders
- 3.7 CTRL (Windows) or Command (Mac) + Select New Layer
- 3.8 Make New Layer Invisible
- 3.9 Select Image & Delete New Layer
- 3.10 Select Rectangular Marquee Tool & Click on Image
- 3.11 Save Image as PNG
- 4 Add Backgrounds to Divi
- 5 Example
- 6 Final Thoughts
Let’s take a look at a layout sample with stunning irregularly shaped section transitions:
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.
Start by opening photoshop on your computer.
Once you’ve done that, open the image you’d like to work on.
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).
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.
Select Brush & Size
While having the Layer 1 activated, go ahead and click on the brush icon.
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%.
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.
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.
Make New Layer Invisible
Next, make Layer 1 invisible by removing the eye as marked in the print screen below.
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.
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.
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.
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.
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.
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:
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!
How did you get the middle section to be half grey on top and half white on bottom?
I don’t think this is good for user experience since adding transparent png that big would cost you big image file. I prefer use png transfparent on small image. If you look for this effect, i woul prefer using overlay div
Hi Donjete… amazing content. thanks for sharing
DIVI best choice for creative ideas
Great inspiration for being creative. Thank you for the inspiration 🙂
Thanks for the tutorial. I’ve been wanting to know how to do this for a while.
To be honest, I was a bit disappointed that it has to be done this way though. I was hoping it was something like a mask we could create once then use as an overlay or module in Divi. Divi has made me lazy. 😉
The creative ideas are racing though my mind.
thank you very much for this tutorial. It’s indeed more a photoshop tutorial than a Divi tutorial, but it’s nevertheless very useful for webdesigners, as Photoshop is a daily instrument for all of us, who do not only work with premade solutions.
So, this solution of creating irregularly shaped section transitions is, in my eyes, a good option for small websites or landing pages that need individual weblayouts.
thanks to provoke to the immediate need of shape dividers in divi too for most of the divi users..
I just was wondering what GimpShop was because I never heard of it. Turns out somebody stole the work of a developer, stuffed it with spam- and bloatware and now makes money with it. Could you please recommend Gimp instead of GimpShop since GimpShop not only is stolen but also the development is on hold?
Rather it should be called “How to Create Irregularly Shaped Section Transitions with Photoshop” 😀
Merci, la vidéo est très bien faite, et le rendu est top!
I hope some nice shape dividers are on the roadmap for Divi, I’d love to see those built in!
Thanks for the trick, but it’s not a good solution. The day the client wants a design change, we’re obliged to re-create all the images.
What about a true solution fot dividing sections, like @ your challenger : https://elementor.com/v130-shape-divider/
It could be a great feature in divi.
Thanks 4 your work,