Heading Widget

ElementsKit is the compact Elementor addon that comes with all the customizable features you need for your WordPress site using 85+ ElementsKit widgets, extensions, and modules. This includes the Elementor heading title widget that lets you add customized heading to pages on your WordPress website.

How to change the heading style in an Elementor? #

Using the ElementsKit Heading widget you can style the WordPress page headings the way you want. To use the widget, you need to have the ElementsKit plugin installed on your WordPress site. After that, enable the Heading widget, then configure the Elementor heading title attributes, and customize the heading style. Read this documentation to learn how to use the ElementsKit Heading widget for Elementor.

Step 1: Enable Heading Widget #

To use the Elementor heading title widget from ElementsKit, first, you have to enable the widget.

1. Go to ElementsKit > Widgets from your WordPress dashboard.
2. Find the Heading widget and enable the widget.
3. Click on the SAVE CHANGES button at the top right corner.

Step 2: Configure the heading title in Elementor #

Now open the Elementor editor, then drag and drop the ElementsKit Heading widget. You can configure the Title, Subtitle, Title Description, Shadow Text, and Separator.

2.1 Title #

In the Title section, 

1. Enter the Heading Title. You can bring focus to a part of the heading by putting that part under the curl bracket {}.
2. Add a URL Link for the Elementor heading title.
3. Select the Title HTML Tag (H1, H2, H3,…) for the heading.

4. Enable Show Border to display the border beside the heading title. When you enable the title border, the Border Position option will appear.
5. Choose the title Border Position from the given option: Start or End of the title.
6. Enable the Float Left option. When Float Left is enabled, the Title Width option will appear.
7. After that, you get to adjust Title Width 

2.2 Subtitle #

To display subtitles, first enable the Show Sub Title option.

1. Enter Heading Sub Title.
2. Set Sub Title Position from the given option: Before Title and After Title.
3. Select the Sub Title HTML Tag (H1, H2, H3,…) from the given option.
4. You can enable the Show Outline option. [Note: This option only works if the Border Sub Title is disabled.]

You can also enable Border Sub Title to display the border around the subtitle. When you enable the subtitle border, the Show Outline will be disabled.

2.3 Title Description #

To display the description alongside the heading title,

1. Enable the Show Description feature for the heading title widget.
2. Enter the Heading Description on the respective field.
3. You can adjust the Maximum Width for the description.

2.4 Shadow Text #

To display a shadow text,

1. Enable the Show Shadow Text feature.
2. Enter the Context of the shadow.

2.5 Separator #

To show the separator for a heading title, 

1. Enable the Show Separator feature for the Elementor heading title.
2. Select the Separator Style from the given options: Dotted, Solid, Solid with Star, Solid with Bullet, and or Custom.
3. Set the Separator Position at the Top of the title, Before title, After title, or Bottom of the title.

Custom Separator Style:

When you choose Separator Style to Custom, you get to choose the image and image size.

1. Select Separator Style to Custom.
2. Choose image from the media library.
3. Choose the Image Size size from the given option.

Step 3: Customize the heading title widget style #

Using ElementsKit’s Heading title widget for Elementor, you can customize the title, focused title, subtitle, title description, separator, and shadow text.

3.1 General #

Under the General section, set the Alignment to left, right, or center.

3.2 Title #

To customize the Title style in the heading title widget,

1. Select the Color for the title.
2. Select the Hover Color for the title.
3. Adjust Text Shadow.
4. Set Margin for the heading title.
5. Set Typography.

For the title Border,

6. Adjust Border Width.
7. Adjust Border Height.
8. Set the Vertical Position.
9. Adjust the Right Gap between the border and title text.
10. Select the Background Type for title border.

3.3 Focused Title #

To customize a Focused Title,

1. Select the Color for the focused title.
2. Choose Hover Color for the focused title.
3. Set the Typography.
4. You can set a Text Decoration Color.
5. Option to set Text Shadow is available too.
6. Set Padding for the focused title.

Background Color for Focused Title:

[Note: When you enable this feature, Use text fill feature won’t be available. Similarly, when Text Fill is enabled, Focused Title Background Color won’t be available]

1. Enable the Use background color on text feature.

Once enabled, the following features will appear:

2. Select the Background Type.
3. Choose Background Color
4. Set Border Radius for the focused title background.

Text Fill for Focused Title:

[Note: When Focused Title Background Color is enabled, this feature won’t appear. Similarly, when Text Fill is enabled, Focused Title Background Color won’t be available]

5. Enable the Use text fill feature for Focused Title.

Once enabled, the following features will appear:

6. Select the Background Type for Text Fill.
7. Choose the Text Fill Color.

3.4 Subtitle #

To customize the Subtitle styles,

1. Choose Color for Subtitle.
2. Set the Typography of the subtitle text.
3. Adjust Margin for the subtitle.
4. Adjust Padding for the subtitle.

Text Fill for Subtitle:

5. Enable the Use text fill feature for Subtitle.

Once enabled, the following features will appear:

6. Select the Background Type of Subtitle.
7. Choose the Subtitle Text Fill Color

Subtitle Outline:

You can draw an outline around the subtitle.

8. Select the Border Type for the Subtitle outline.
9. Set the Width of the outline.
10.  Choose the Border Color.
11. Adjust the Outline Radius for the subtitle.

3.5 Title Description #

To customize Title Description,

1. Choose the Title Description color.
2. Set the Typography.
3. Adjust the Margin for the title description.

3.6 Separator #

For the title Separator,

1. Adjust the Separator Width.
2. Adjust the Separator Height.
3. Set Margin for separator.
4. Choose a Separator color.

3.7 Shadow Text #

To customize the Text Shadow Style,

1. Adjust the Position of Shadow Text.
2. Set the Typography.
3. Choose the Shadow Text Color.
4. Adjust Border Width.
5. Choose a Border Color for Shadow Text.

That’s about it. Now you can finally add a stylish and customizable heading title in Elementor with subheadings, descriptions, and shadow text, using the Elementskit Heading widget.