What You Need
- A WordPress site with Divi installed or the Gutenberg editor
- A video background
- Basic understanding of CSS
Step-by-Step Guide
For Divi Users:
Step 1: Preparing Your Video Background
- Find or create a video background. For high-quality, free options, sites like Pexels are invaluable.
- Adjust your video’s contrast if necessary to ensure text legibility. Online tools like media.io can help with contrast adjustment.
Step 2: Setting Up Your Divi Environment
- Navigate to your WordPress page and enable the Divi builder.
- Choose to “Build From Scratch” and select a full-width section for your header.
- In the visual builder mode, under the design tab, center your content and set it to fullscreen.
Step 3: Adding and Styling Your Text
- Add your header and sub-header text. Experiment with sizes and styles to fit your design needs. For our example, we used “Super Big Title” as the main header.
- Adjust the text size to ensure visibility. For instance, a title size of 108px was effective for our design.
Step 4: Applying the Difference Blend Mode
- Navigate to the design settings of your full-width header module.
- Scroll to the filters section and find the blend modes option.
- Select “Difference” from the dropdown menu to apply the blend mode, ensuring your text adjusts its color based on the background, enhancing visibility.
For Gutenberg Users:
Step 1: Creating a New Page with Gutenberg
- Create a new page, naming it accordingly, e.g., “Difference Background.”
- Opt to use the default editor if prompted by Divi.
Step 2: Adding a Column Block
- Insert a column block and set it to 100% width.
- Adjust page settings as needed, e.g., setting the template to blank and disabling sidebars for a wide layout.
Step 3: Inserting Text and Video
- Add a heading block with your desired text and style it—set the text color to white and adjust the size for visibility.
- Insert a video block, upload/select your video, and ensure settings like autoplay, loop, and muted are enabled.
Step 4: Customizing with CSS
- To center the text over your video, you might need to add custom CSS. Utilize the Advanced settings in Gutenberg to add custom classes for both your text and video blocks.
- For text, ensure it’s positioned absolutely and centered. Use CSS to adjust its placement over the video.
- For the video, set its size, position, and z-index to ensure it covers the entire background and sits behind the text.
- Apply the difference blend mode to your text via CSS using
.yourTextClass { mix-blend-mode: difference; }.
Conclusion
Creating engaging web designs with dynamic text visibility over video backgrounds is streamlined with Divi and Gutenberg. Both platforms offer unique ways to implement the CSS difference blend mode, enhancing your site’s visual appeal and user experience.
What’s Next?
Explore various video backgrounds and text styles to discover the transformative impact of blend modes on your designs. Stay tuned for more Divi and WordPress tips from the Divi Engine team. And don’t forget, if you loved this tutorial, check out the other Divi and WordPress tutorials on our blog!
