Create image reflections divi and text is a classic design technique that can be used to spice up content on a web page. In addition, Divi facilitates the creation of these reflections directly from Divi Builder without having to use a photo editor.
In this tutorial, I will show you how to Create image reflections 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.
What you need to get started
For starters, all you need is Divi. Make sure the Divi theme is installed and active. We will be creating our designs from scratch using Divi Builder on the front-end (visual builder). You will also need some dummy images for this tutorial (a background image of around 1920px x 600px and another image of 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 good 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 a positioned text module.
This design technique is not limited to individual modules. You can 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 row of one column.
Then add an image module to the row.
Maximum width: 600px
Module alignment: 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:
The 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 the basic reflection design. However, we can add a gradient overlay to our bottom 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 sits above the bottom image. Then 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 content on top of the reflection image later if you wish.
Go ahead and create a text module under the bottom image.
Remove the default content so that the text module is empty.
Then update the text module settings as follows:
Background gradient left Color: rgba (255,255,255,0)
Background gradient right Color: #ffffff
Then add the following custom CSS code to the main element:
This absolute positioning of the text module overlays the text module on the lower half of the line.
Adding a background color
If you don’t want a white background, you can use other background colors to create a full-width reflection pattern.
To do this, open the row settings and update the following:
Background color: # 000000
Max width: 100%;
Custom padding: 0px high, 0px low
Reflections can look cool if you take the time to design them properly. Fortunately, Divi has the tools to make it happen. There are other methods of doing CSS reflections, but unfortunately, they tend to lack support from browsers. The designs in this tutorial will look great on any browser.
That’s it for this tutorial, I hope it will allow you to add reflections on your WordPress site using Divi’s internal features.
For website maintenance service contact us.