Creating visually appealing content is key to capturing user attention on websites, and an effective way to do this is to use a ‘Two-color title.These headlines, where two colors are combined in a single headline, not only add a dynamic aesthetic, but also help highlight key messages. Two-color titles give designers a simple yet powerful tool to break monotony, highlight important words, and improve readability. By guiding the viewer’s eye to specific phrases or keywords, they improve the flow of content and make key points more memorable. Additionally, this technique can align with brand colors, thus reinforcing the visual identity of the site.
See the demo
Popular Use Cases for Using a Two-Color Header in an Elementor Website
/* widget: List */ #uc_list_elementor_e142e93{ display:grid; position: relative; } #uc_list_elementor_e142e93 .ue-list-item { display:flex; } #uc_list_elementor_e142e93 .ue-list-item-title{ display:flex; align-items: center; } #uc_list_elementor_e142e93 .ue-list-item-image img { max-width:100%; } #uc_list_elementor_e142e93 .ue-list-item-text *{ margin-bottom:0px; transition: inherit; } #uc_list_elementor_e142e93 .ue-list-item-index { flex-grow:0; flex-shrink: 0; display:flex; align-items:center; justify-content:center; line-height: 1em; } #uc_list_elementor_e142e93 .ue-list-item-index svg { height:1em; width: 1 em; } #uc_list_elementor_e142e93 .ue-list-item-content { flex-grow:1; } .ue_badge{ font-size:13px; }
1
Highlight key information in titles
Applying two different colors in a title is ideal for highlighting keywords, helping visitors quickly grasp the main message.
2
Split content sections
Headers often break up website content, such as “Features & Benefits” or “About Us.” Adding a two-tone effect to these headers gives each section a distinct look, creating visual variety while guiding users through the content.
3
Introducing key features on product pages
Use two-color headlines on product pages to draw attention to important features. For example, a title like “Best Quality” might have “Best” in one color and “Quality” in another, making it stand out on the page.
4
Calls to Action (CTAs):
Add two-color effects to CTAs like “Start Now” or “Join Today” to highlight action words, make them stand out, and increase the likelihood of user engagement.
5
Branding and color consistency
For brands with established color schemes, dual-color headlines can reinforce brand identity by subtly incorporating brand colors. This makes headlines visually consistent with the brand palette, improving brand recognition.
Step #1: Install and activate the free version of Unlimited Elements for Elementor
You need to install and activate the free Unlimited Elements version for Elementor.
Get Unlimited Items for Free
Step #2: Adding the Dual Color Heading Widget to Your Elementor Website
To add a dual-color header, you need to install the Dual-Color Header widget from the Unlimited Elements Widgets library.
/* widget: List */ #uc_list_elementor_0e98094{ display:grid; position: relative; } #uc_list_elementor_0e98094 .ue-list-item { display:flex; } #uc_list_elementor_0e98094 .ue-list-item-title{ display:flex; align-items: center; } #uc_list_elementor_0e98094 .ue-list-item-image img { max-width:100%; } #uc_list_elementor_0e98094 .ue-list-item-text *{ margin-bottom:0px; transition: inherit; } #uc_list_elementor_0e98094 .ue-list-item-index { flex-grow:0; flex-shrink: 0; display:flex; align-items:center; justify-content:center; line-height: 1em; } #uc_list_elementor_0e98094 .ue-list-item-index svg { height:1em; width:1em; } #uc_list_elementor_0e98094 .ue-list-item-content { flex-grow:1; } .ue_badge{ font-size:13px; }
1
Access Unlimited Element Widgets in WordPress Dashboard
2
Look for “two-color title”
3
Hover over the widget and click install
Step #3: Add a Two-Color Header to Your Elementor Page
Now, in the Elementor editor, find the Dual Color Heading widget and drag it to the desired part of your page.
/* widget: List */ #uc_list_elementor_23c7ae9{ display:grid; position: relative; } #uc_list_elementor_23c7ae9 .ue-list-item { display:flex; } #uc_list_elementor_23c7ae9 .ue-list-item-title{ display:flex; align-items: center; } #uc_list_elementor_23c7ae9 .ue-list-item-image img { max-width:100%; } #uc_list_elementor_23c7ae9 .ue-list-item-text *{ margin-bottom:0px; transition: inherit; } #uc_list_elementor_23c7ae9 .ue-list-item-index { flex-grow:0; flex-shrink: 0; display:flex; align-items:center; justify-content:center; line-height: 1em; } #uc_list_elementor_23c7ae9 .ue-list-item-index svg { height:1em; width:1em; } #uc_list_elementor_23c7ae9 .ue-list-item-content { flex-grow:1; } .ue_badge{ font-size:13px; }
1
Title one
“Title One” is the first word of the double title.
2
Title two
“Title Two” is the second word of the double title.
3
HTML tag
Select the HTML tag on “Div”, “Span”, “H1, H2,…H6”.
4
Alignment
Align the title center, left, or right.
Stylize the two-tone title
/* widget: List */ #uc_list_elementor_57b76e5{ display:grid; position: relative; } #uc_list_elementor_57b76e5 .ue-list-item { display:flex; } #uc_list_elementor_57b76e5 .ue-list-item-title{ display:flex; align elements: center; } #uc_list_elementor_57b76e5 .ue-list-item-image img { max-width:100%; } #uc_list_elementor_57b76e5 .ue-list-item-text *{ margin-bottom:0px; transition: inherit; } #uc_list_elementor_57b76e5 .ue-list-item-index { flex-grow:0; flex-shrink: 0; display:flex; align-items:center; justify-content:center; line-height: 1em; } #uc_list_elementor_57b76e5 .ue-list-item-index svg { height:1em; width:1em; } #uc_list_elementor_57b76e5 .ue-list-item-content { flex-grow:1; } .ue_badge{ font-size:13px; }
1
Title one
Choose the color, typography and shadow of the first title.
2
Title two
Choose the color, typography and shadow of the second title.
I’m done!
Addition Two-color titles are a simple technique that can have a big impact, transforming plain text into a design feature that captures attention and improves the user experience. By combining colors effectively, you can create headlines that are not only visually appealing, but also help direct readers to what matters most. Whether you are a seasoned designer or a beginner, add two-tone titles is a simple and effective way to bring a modern and elegant look to your Elementor website. Try implementing it in your next project to see the difference! This approach can also strengthen your brand identity, making your content more memorable and consistent.
See the demo
Comments are closed, but trackbacks and pingbacks are open.