Quick and Creative Image Borders with Divi

Written by Adam Cardenas

Project Manager at New Eve Media

April 16, 2020

Creating a border for your image through Divi is super easy – there’s a button for it under the design tab of your image module. Unfortunately, you are not able to get too creative yet with your border choices with just the border button. Therefore, we have listed plenty of easy solutions to get some quick and creative image borders!

The Basics

Firstly, I’ll show you the simplest way to make a border around your image. Start by uploading your image in the image module in the Divi builder. When the image is uploaded, head over to the design tab and scroll down until you find the borders section. The border is already set, but you’ll notice it has a width of 0 pixels. Simply raise the pixel count of your border, change the color if you’d like and voila, your border is there. 

Getting Creative With Your Border

As you can see, there isn’t much room for customization with the border itself when going this route. Thankfully, there are several different ways you can get around this.

For example, you may want to do a color gradient for your border, but the border option on the image module does not have this available. To get around this, you need to set up a background for your image. Start by scrolling to the background option under the “Contents” tab of the image module. Here you will see four options to choose from for your background; select the second option. Once selected, you will see two color options available. Choose the colors you’d like for your gradient and continue making your way down. Keep the gradient type as linear, the gradient direction at around 45 degrees, and the start and end position of the gradient somewhere in the middle of the background. 

 

Now you have your gradient set up, but you need to make it visible behind the image, so head over to the design tab of the image module. After that, scroll down to the custom padding option. Under “all options,” add the width you would like your border to be. When you update your page, you will see you now have a multi-colored border for your image. You can get creative with this as well. If you only want a partial border, make your second color for your gradient option white. The start position for your gradient must begin before your end position if you do not want a color fade to happen.

Another Quick Trick

If you want to get a bit more creative and do a shaped border, it is pretty simple as well. Start by doing a gradient background again, but this time choose white for your first color option and a different color for your second option. Under gradient type choose “radial,” and now you will see that you have a circular gradient. Set the start and end position of the gradient to the same value at a higher percentage and add your custom padding again. As a result, when the page is updated you will see that you have a neat framed border around your image.

To sum up, there are many different ways you can customize your border with the Divi Builder. As illustrated above, quick and creative image borders are so easy to implement with Divi. If you have found this article helpful and think that Divi may be an option for you, follow the links to purchase your own Divi package.

You May Also Like…

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.