Divi Secret Features Tutorial – Crafting Text Cutout Effects on Backgrounds in Divi

Divi provides a sleek method for achieving a text cutout effect, where a background, covered by a solid or semi-transparent color, reveals the actual background within the text boundaries. The image below visualizes the concept:

To implement this cutout effect, we’ll require the following elements:

1. A Section housing the background.
2. A Row featuring a white or black overlay background.
3. Text with black or white color.

Crafting the Cutout Effect

Let’s start by creating a cutout effect with a white overlay:

1. Build a Divi Section, a Row within it, and finally, a Text module inside the Row.
2. Navigate to the Section Settings and:
   1. Add an image or video as the background.
      
   2. In Design > Spacing, set both Padding Top and Bottom to 0.
      
      This ensures the Row inside can cover the entire section area.
3. Open the Text module settings and set the text color to solid black.
   
   Consider using a heading for a more impactful visual effect.
4. Adjust the Row settings:
   1. Set white as the background.
      
   2. In the Design tab, within Sizing, set Width and Max Width to 100%.
      
      This ensures the row covers the entire section area.
   3. Add top and bottom padding to the Row for some vertical space. Consider adding side padding to prevent text from touching screen edges.
      
      Utilize the VH Unit for height similar to the viewport height.
   4. In the Filters section under Row Design options, find Blend Mode, and set it to Lighten.
      

Observe how the text cuts out the white background, revealing the section background image:

Employing a Dark Overlay

Alternatively, you can employ a dark overlay. To achieve this, modify three aspects from the previous instructions:

• In step 3, set the text color to white.
• In step 4.1, set the Row background to black.
• In step 4.4, set the Blend Mode to Darken.

This results in the same effect with a black overlay:

Elevating the Effect

While the effects are visually appealing, they can benefit from enhancements. Consider these ideas:

1. Add Parallax to the background image: Enable the parallax effect for the section’s background image to introduce a scrolling effect.
2. Introduce transparency to the overlay: Slightly transparent row background colors can enhance the design.
3. Leverage Scroll Effects: Apply Scroll Effects to the text module for animation. Vertical motion and scale work well with this design.
4. Explore Video Backgrounds: Use video backgrounds instead of images when incorporating semi-transparent overlays.
5. Logo Cutout: Extend the technique to logos by utilizing an all-black or all-white logo with transparency.

Here’s a preview of the text cutout effect after implementing some of these tips:

Elevate Your Divi Skills

By employing blend mode filters for cutout effects, you can craft distinctive sections on your Divi website. Also, by combining Divi Scroll Effects, you can animate the design and make it pop even more. By utilizing this trick, it gives you an edge over the competition.