The dual heading widget is the perfect tool for both the users that wants to create eye-catching headings and those who prefer a more simplistic design to give another element the space to shine.This widget is composed of two parts that can either have a similar decorative pattern or totally different colors and styles, it all depends on your needs and your imagination.
You can find the list of customisations that this widget offers down below.
In the content section, you will define the text for your heading and setup the alignement.
Under the styling tab section, you will have the full control over the styling & design of all the aspects of the dual heading widget.For both heading 1 and heading 2, you can change the text properties, colors, backgrounds...
-Enable Advanced Styling : Enabling this will provide you with more advanced styling options that will appear at the bottom of the styling tab.
-Heading 1 & Heading 2 : Select​ which heading part you want to style.Note that every single styling option in this tab will only affect the selected heading.
-Typography & Text Color : Change the text color, font family, font size, letter spacing and all the other text properties.You can use a gradient color with the possibility to control the direction.
-Background : You can either upload an image to use as a background or use colors instead.Solid and gradient colors are both available with the addition of having full control on the gradient behavior.
-Borders & Shadows : Apply a border with full control over the type, width, and color.You can also add a text shadow or a box shadow and create unique headings.
-Distances : Control the space around and within each heading part using margins and padding.
The following options will only be displayed if the advanced styling option is enabled.
-Background & Text Margins : Control the background and text margins.This will you give even more design possibilities and only your imagination is the limit.
-Z Index & Element Overflow : This option is only for advanced users that know their way around CSS.You can change the z-index value for each heading part if you have trouble with overlapping elements.You can also alternate the default overflow behavior to have more control on what is displayed.