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.
Let’ s check out a layout sample along with stunning irregularly shaped section transitions:
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.
Start by opening photoshop on your computer.
Once you’ ve accomplished that, open the image you’ d like to work on.
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).
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.
Choose Brush & Size
Whilst having the Layer 1 activated, go ahead and click on the brush icon.
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%.
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.
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.
Make New Layer Invisible
Next, make Level 1 invisible by removing the eye since marked in the print screen beneath.
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.
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.
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.
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.
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:
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.