Header text effect

FREE!

VIEW LAYOUT

Categories: , Tags: , Added: August 26, 2019

Split header text layout & tutorial

This free Divi layout and tutorial is from the Elegant Themes website blog post “How to Create a Split Blend Mode Headline with Divi”.

By using a mix of Divi column & module blend modes, column background color and negative margins you can create a unique header text effect.

The tutorial will show you how to;

  • Add gradient background and blend mode over the background image
  • Use display: flex; on columns so they display side0by-side on smaller devices
  • Use Blend Mode: Difference on heading text in column 2 along with a negative margin to move into column 1

Download this layout on the Elegant Themes blog

download divi layout JSON

To download the JSON layout file for this tutorial you will need to enter an email into the subscription box on the blog post. If you are already signed up to the Elegant Themes mailing list you will not be re-added. This sign-up form is found just below the layout Demos near the top of the post.

To import the layout to your Divi website you will need to extract the zip file and drag-and-drop the JSON file into your Divi Builder page.

Affiliate disclosure* – Links to layouts on Elegant Themes and 3rd party websites may contain affiliate code. You will never pay any extra for using these links. Thanks for supporting Divi Theme Examples.

Reviews

There are no reviews yet.

Be the first to review “Header text effect”

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close