{"id":15544,"date":"2017-01-10T11:11:54","date_gmt":"2017-01-10T19:11:54","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=15544"},"modified":"2017-01-10T11:11:54","modified_gmt":"2017-01-10T19:11:54","slug":"create-dual-color-heading-beaver-builder","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/create-dual-color-heading-beaver-builder\/","title":{"rendered":"How to Create Dual Color Heading in Beaver Builder"},"content":{"rendered":"

Beaver Builder<\/a> is a powerful WordPress Page Builder Plugin. It comes with a well-defined set of modules and functionality.\u00a0Beaver Builder comes with a Heading Module\u00a0<\/strong>that allows you to add headline text in your content. This module has ample amount of options to control the styling.<\/p>\n

There’s a lot you can do and be more creative if you add some custom CSS and HTML to this module. Let’s\u00a0create a dual color heading with Beaver Builder Heading Module.<\/p>\n

Create Dual Color Heading<\/h3>\n

Let’s start by adding Heading module to the page. As you can see in the screenshot below, I have added the Heading text. You can change the\u00a0font family, font size, color etc. from the style tab.<\/p>\n

\"beaver-builder-heading-module\"<\/p>\n

 <\/p>\n

In this example, I have set the text color to white and this is how it looks.<\/p>\n

\"heading-style-example\"<\/p>\n

Now, in order to create a dual color heading, we will add some HTML to the\u00a0Heading Input field <\/strong>in the Heading module. You can look at the screenshot below.<\/p>\n

\"dual-color-heading-beaver-builder-1\"<\/p>\n

I have added a\u00a0span\u00a0<\/strong>tag and a CSS class to first two words. We will use this CSS Class to target the styling for these two words. In order to change the color for these words, you can use the following CSS:<\/p>\n