How to create borders with backgrounds on Divi

borders with backgrounds divi

Borders with backgrounds divi images continue to be popular design elements when building websites. Using the right background images can add personality and style to your site without wasting time and money on custom graphics. And borders are useful for adding structure to your content.

Today we’re going to bring these two strengths together by designing Borders with backgrounds divi images. Divi has a set of useful options for customizing background images, which makes it easy to design background images for unique border designs. This allows us to combine colors, gradients, box shadows, and blend modes in all kinds of creative ways.

What you need to get started Borders with backgrounds divi

To get started, you need to have the following:

  1. The Divi theme installed and active
  2. A new page was created to build from scratch on the front-end (visual builder)
  3. Images to use for fictitious content

After that, you will have a blank canvas to start designing in Divi.

General tips for creating Borders with backgrounds divi

Before you start building, here are some general tips to keep in mind when creating background image border patterns.

# 1 choose images with lots of texture

Most of the time, you’ll want your borders to be narrower. This means that you will not be able to see much of the image. It is, therefore, useful to use images that have a lot of texture. For example, you can use a photo of a landscape, a bouquet, or a high tower. Here are some images that I am using for this tutorial.

Using blend modes on your background images can apply unique colors and textures to border patterns. All you need to do is add a background color or gradient with your background image and then select a blend mode for the background image. Color, Brightness, Multiplication, and Screen are some great blending modes for background image borders.

Use rounded corner options for unique shapes

Not all borders need to have straight edges. Mix it up a bit! Divi’s rounded corner options allow you to creatively shape these corners.

Use parallax background images as borders

The great thing about parallax is that it brings design to life with movement. Additionally, if you use background images with parallax for your border designs, you can create a subtle movement that stands out and makes your content stand out.

Design of background image borders in Divi

Now that we understand the general idea behind creating background image border patterns, let’s imagine a few together. We are going to build 2 different models. Each will have a basic presentation module to serve as fictitious content. And we will use the column settings to add the module background image border.

Let’s start with our first design.

Border background image # 1

This first design features a narrow background image border with an area shadow to make it look more like a frame for the content.

Here’s how to design it.

First, add a row or two columns to a regular section.

Add the Summary module

Then add a blurb module in the left column.

Once the blurb is in place, open blurb settings and extracts the default image so that only the title and the body content are visible.

Then give your text a white background.

Then update the presentation design settings as follows:

  • Text title: Oswald
  • Police Corps: Lato
  • Margin 5% top, 5% bottom, 5% left, 5% right
  • Padding: 7% top, 7% bottom, 10% left, 10% right
  • Rounded corners: 20px top right, 20px bottom left
  • Box Shadow: see screenshot

Add background image to column

This takes care of our presentation module. Now let’s add our background image border. To do this, we will add a background image to the column containing the Blurb module. Open the row settings, then the settings for column 1, and add the following background:

  • Background image: [upload the image of your choice]
  • Background color: # 303a7a
  • Mixture Background Image: Brightness

Then update the rounded corners and the shadow of the box as follows:

  • Rounded corners: 20px top right, 20px bottom left
  • Box Shadow: see screenshot

Add the Blurb module

To create the design, we will add the blurb text to column 2 of the same row that contains design # 1. Go ahead and copy design layout module # 1 and paste it into column 2. Then, update the presentation module settings as follows:

  • Rounded corners: restore default settings
  • Margin: 10% top, 10% bottom, 10% left, 10% right
  • Padding: 15% top, 15% bottom, 10% left, 10% right
  • Border Width: 1px
  • Border Color: #ffffff

Read more: How to do an advanced Twitter search

Add background image to column

With our module in place, open the row settings and add a background gradient to column 2.

  • Background gradient left: # f7e0a5
  • Gradient background right Color: rgba (237,240,0,0.79)
  • Gradient direction: 90deg
  • Starting position: 50%
  • Final position: 0%

Then add a background image with a beautiful color gradient effect.

  • Background image: [download image]
  • Background Image Mix: Color

As you can see, the color blend mode preserves the brightness of the two-color gradients behind the image to create a nice image border pattern with soft colors.

Latest Thoughts

Creating borders with pictures is an easy way to add beauty and personality to your design. The design highlighted in this tutorial is made to highlight the possibilities available with Divi in ​​the design of unique borders. Therefore, with the different color combinations, the designs are limitless. So, grab some images and explore more the design of borders with images on Divi.


For website maintenance service contact us.

Leave a Reply