Designing highlights for images and text is a classic design technique that can be used to spice up the contents of a web page. Plus, Divi makes it easy to create these reflections directly from Divi Builder without having to use a photo editor.
In this tutorial, I will show you how to design reflections for images on Divi. The key to doing reflections is to use Divi's transform option to create a mirror version of an item. After that you can add a custom overlay which I will show you how to use with a text module.
Let's start!
Preview
Here is an overview of the designs we will build in this tutorial.
What you need to get started
To get started, all you need is Divi. Make sure the Divi theme is installed and active. We will be creating our designs from scratch using the Divi Builder on the front-end (visual builder). You will also need some dummy images for this tutorial (a background image around 1920px x 600px and another image around 500px x 350px).
When you're ready, go to your WordPress dashboard and go to Pages> Add. Give your new page a title and deploy Divi Builder on the front-end. Select the “Build from Scratch” option. Now you are ready to go!
The basic idea behind creating an image and text reflection in Divi
The basic idea of creating reflection patterns in Divi includes three steps:
- Create a module with your image or text
- Duplicate the module and use the transform scale to create the mirror image or text
- Add a gradient overlay to the mirrored element using a divider or an absolutely positioned text module.
This design technique is not limited to individual modules. You can actually add reflections to entire rows in Divi using this method, which is useful for creating unique header designs. We'll add reflection to a line of our text reflection design later in this tutorial. But for now, let's start by creating an image reflection.
How to create an image reflection
To create an image reflection, let's start by creating a new regular section with a one column row.
Then add an image module to the line.
Download the image you want from the media library to the image module. Then update the following image settings:
Maximum width: 600px
Alignment of the module: center
Custom margin: 0px at the bottom
Create the mirror image
To create the reflection effect, we first need to create a duplicate copy of the image directly below the image.
To do this, duplicate the image module. Then update the duplicate image settings as follows:
Opacity: 40%
X axis of transformation scale: -100%
The Transform scale property is what magically flips the image vertically and horizontally to create a mirrored version of the image.
This supports basic reflection design. However, we can add an additional gradient overlay to our lower image for a more realistic reflection design.
Add a gradient overlay using a text module
To add a gradient overlay to our bottom image, we can use a text module. We can give the text module an absolute position so that it is above the bottom image. Next, we can add a gradient background to the text module. Using a text module (instead of a separator) will give you the additional option of adding contents over the reflection image later if desired.
Go ahead and create a text module under the bottom image.
Delete it contents by default so that the text module is empty.
Then update the text module settings as follows:
Left background gradient Color: rgba (255,255,255,0)
Background gradient right Color: #ffffff
Width: 100%
Height: 50%
Then add the following custom CSS code to the main element:
position: absolute! important; top: 50%;
This absolute positioning of the text module superimposes the text module on the lower half of the line.
Adding a background color
If you do not want a white background, you can use other background colors to create a reflection pattern across the entire width.
To do this, open the line settings and update the following:
Background color: #000000
Width: 100%:
Max Width: 100%;
Custom padding: 0px high, 0px down
Let's see the result now.
Reflections can look really cool if you take the time to design them properly. Fortunately, Divi has the tools to succeed. There are other methods for performing CSS reflections, but unfortunately they tend to lack support from browsers. The designs in this tutorial will look great on all browsers.
I have found that reflections look great in page headers and showcasing images for a portfolio item. And I'm sure there are a lot of other implementations.
That's it for this tutorial, I hope it will allow you to add reflections on your WordPress site using Divi's internal features.
