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

Available Tutorial Series Installments...

Divi Secret Features Tutorial – Crafting Text Cutout Effects on Backgrounds in Divi
Divi Secret Features Tutorial – Animate Web Pages Using Divi Scroll Effects
Divi Secret Features Tutorial – Using Divi Global Presets to Streamline Your Divi Web Design Process
Divi Secret Features Tutorial – Finding Active Content and Styles in the Divi Builder
Announcing the Divi Secret Features Series – Divi tutorials on some lesser known Divi features

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.
      Adding  Section Background
    2. In Design > Spacing, set both Padding Top and Bottom to 0.
      Removing Section Padding
      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.
    Set Black Heading COlor
    Consider using a heading for a more impactful visual effect.
  4. Adjust the Row settings:
    1. Set white as the background.
      Adding a White Row 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.
      Add Row Padding
      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.
      Set Filter Blend Mode to Lighten

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

Basic Text Cutout on white overlay

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:

Basic Text Cutout on 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:

combine scroll effect and cutout effect

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.

Explore more from Divi Engine