Create Amazing Text Headers with the Divi Pixel Dual Heading

by Sep 28, 2021Announcements, Pixel Modules

Today we are extremely excited to introduce to you our brand new module we have added to the Divi Pixel plugin. The Dual Heading module will change the way you create heading texts on your Divi website!

We are working hard every day to make the Divi Pixel even better. In the previous update, we added the Image Slider module and improved significantly a few other modules available in the plugin.

The Divi Pixel already comes with 2 text-based modules which allow you to create animated texts sections. In this release, we are adding another brand new module that will help you create amazing headings with clipped backgrounds, animations, reveal effects and more! In this article, I’d like to tell you a few words about the new module that you are going to love!

Introducing the Divi Pixel Dual Heading

The heading texts are very important sections on your website. This is the first thing the visitor sees, which tells him what the paragraph is about. If you are writing attractive and engaging headings, then it is also worth making them attractive visually too. The default Divis Text module is great for adding texts to your website, but it’s not enough to create advanced headings. The Divi Pixel Dual Heading module will change the way you are adding the heading texts to your Divi page.

Building this module was really fun. It involved solid research of all modules of its kind, a lot of testing and experimenting, but it was worth it. We finally combined a few powerful settings that will let you create truly amazing and attractive text headings. Sky is the limit!

Dual Heading Features

With the Divi Pixel Dual Heading module, we can create a range of different text design layouts. The module allows you to add 1st heading text, 2nd heading text and background text. All these texts can be customized individually. You can create stroked text, add a background image to the text which can be clipped to the text, add background animation, and finally add reveal text effect.

Stroked Text

In the Design tab, we can find toggles with options that will allow us to select and customize the text styles. The stroked text is one of the options available and it lets us add a stroke to the text, choose stroke color and text fill. The stroked text option can be used for building text headings with a unique style and it looks great with the background image.

Text with Background Image

The clipped background in the text is one of my favourite features available in this module. It allows us to add a background image that can be clipped or displayed behind the text. The text with a background has one more powerful option. We can enable background image animation and this makes our text really cool. The animation has a few settings, like animation time, direction and timing function.

Reveal Text Effect

By creating this module, our team took it a step further. We have always been supporters of creating more functional modules. Our goal is to create one module with more sophisticated options, not to create several modules just to have more, which is a strategy chosen by many other companies that offer a large number of modules where several modules can be replaced with one Divi Pixel module.

But to the point. When creating this module, the question arose why not add a reveal effect to it? The answer was simple. Let’s do it! And this is how we created a module that not only allows you to create unique text styles but also add interaction to them, which is definitely very useful if we want to create something really special.

The reveal effect can be enabled in the module settings and it will apply to the 1st and 2nd heading. We can customize reveal text color, animation direction, speed and delay. The only 1 drawback of this effect is that it won’t work in the backend builder, which uses an iframe, so the scroll event cannot be recognised. To customize the reveal text effect, a front-end builder must be used.

Reveal Text Effect

Reveal Text Effect

Reveal Text Effect

Background Text

Using the Divi Pixel Dual Heading module we can not only add 1st and 2nd Text Headings. There is also an option to add Background Text. It’s a kind of 3rd text we can add to the module. This option is intended to be used for adding Background Text that will be displayed behind the 1st and 2nd heading. This feature creates even more design options you can use for building your unique heading text section.

Image Hotspot Improvements

In this release, we have also made a few improvements to the Image Hotspot module. We added a default image, so when we add the module to the page, the image placeholder will be displayed. Based on our customer’s feedback, we have also added a new ripple effect that can be enabled for the hotspots. This new animation style has controls for ripple effect size and animation speed so we can make it more or less prominent and customize it to fit our needs.

This is it! We hope you enjoy reading this article and believe that the new Dual Heading module will free up your creativity in your next web design projects. There are more cool features and modules to come, so please make sure to sign up for our newsletter. If you haven’t purchased the Divi Pixel plugin yet, now it’s the right time.

Grab 10% discount with the coupon code DP10

Maciej Ekstedt

Maciej Ekstedt

Maciej is the co-founder of Divi Pixel. He is a self-made web designer and marketing expert, and he loves his job so much that he barely leaves the office. He transforms creative ideas into effective strategies for his company. Maciej is fascinated by the phenomenon of a megalopolis. He notices patterns and details which make up the whole thing, and he uses these skills in his work.