1. Home
  2. Docs
  3. Content Elements
  4. Dual Color Heading

Dual Color Heading

How to Configure and Style Dual Color Heading

Grab your visitor’s attention by highlighting a single word in a sentence with a different color. EA Dual Color Heading lets you do exactly that. Pick colors in the right contrast. And sure enough, you will invoke certain emotions into your site-visitors.

Table of Contents:

  1. How to Activate Dual Color Heading
  2. How to Configure the Content Settings
    2.1. Content Settings
  3. How to Style Dual Color Heading
    3.1. Dual Heading Style
    3.2. Others
  4. Final Outcome

1. How to Activate Dual Color Heading

To use this Essential Addons element, find the EA Dual Color Headingelement from the Search option under the ELEMENTS tab. Simply just Drag & Drop the EA Dual Color Heading’ into the Drag widget hereor the Elementor section.

Dual Color Heading

After you are successfully done with step 1, this is how the element is going to look like.

Dual Color Heading

2. How to Configure the Content Settings

Under the ‘Content’ tab, you will find the ‘Content Settings’ section.

2.1. Content Settings

First of all, you have the freedom to choose your preferred ‘Content Style’ out of the given 4 Layouts: Default, Icon on Top, Icon & Sub-text on Top and Sub-text on Top. Besides, you can use the toggle to display or hide the Icon for the ‘Dual Color Heading’ as well. If it’s enabled, you are able to change the icon as per your preference.

Dual Color Heading is divided into two parts: Title & Sub-text. On the other hand, the Title itself is divided into two parts as well. You can easily modify the texts for both parts of the Title.

Besides, The Sub-text section is more of descriptive text to give your viewers an idea about what you are offering. You are able to write your own personalized Sub-text as well.

From the bottom of the ‘Content Settings’, you are able to change the alignment of your ‘Dual Color Heading’.

Dual Color Heading

Click to See Live Demo

3.  How to Style Dual Color Heading

Switch to the ‘Style’ tab to style all the features of Dual Color Heading.

3.1. Dual Heading Style

From the ‘Dual Color Heading Style’ section, you have the flexibility to modify the ‘Background Color & add styling to the Border & Box Shadow.

Dual Color Heading

3.2. Others

‘Color and Typography’ section lets you modify the color for both parts of the ‘Title’ and ‘Sub-text’. You are also able to change their ‘Typography’ as well.

Dual Color Heading

If you have the ‘Icon’ option enabled from the ‘Content Settings’, you will then see the ‘Icon Style’ section from the ‘Style Tab’. You will then be able to change the size & color of the Icon you are using as well.

Dual Color Heading

4. Final Outcome

By following the basic steps and a bit more modifying, you can style your Dual Color Heading as per your preference.

Dual Color Heading
With the help of EA Dual Color Heading, this is how you can design an impressive & unique headline for any special offer you have. Thus, you will easily be able to grab your visitors’ attention.

Getting Stuck? Feel free to Contact Our Support for further assistance.

Get Started Now

Tags , , , , ,

How can we help?