Holiday Deals are Here!

UP TO

35%

Discounts

Ending in:

Get Yours Now!
wpmet-website-logo
  • Home
  • Plugins
    • ElementsKit
    • ShopEngine
    • GetGenie AI
    • MetForm
    • WP Social
    • WP Fundraising
    • Wp Ultimate Review
  • About
  • Blog
  • Support
  • Contact
  • My Account
wordpress plugin
Popular Search headermenumegafootermetform

Getting Started With ElementsKit

  • How to purchase ElementsKit Pro and activate license
  • Modules of ElementsKit

ElementsKit General Widgets

  • Social Media Widget
  • Advanced Accordion
  • Creative Button
  • FAQ
  • Progress Bar
  • Testimonial
  • Dual Button
  • Social Share
  • Unfold
  • Advanced Toggle
  • Google Map
  • Popup Modal
  • Breadcrumb
  • Image Swap
  • Lottie Animation
  • Back to Top
  • Heading Widget
  • Button Widget
  • Team
  • Accordion
  • Tab
  • Advanced Tab
  • Timeline Widget
  • Advanced Chart
  • ElementsKit Table Widget
  • Motion Text
  • Hotspot
  • Gallery
  • Woocommerce Product Carousel
  • Client Logo
  • Image
  • FunFact
  • Countdown Timer
  • Image Box
  • Image Accordion
  • Icon Box
  • Pie-Chart
  • Pricing Table
  • Video
  • Image Comparison
  • Drop Caps
  • Business Hours
  • Header Search
  • Tablepress
  • ElementsKit Advanced Slider
  • WhatsApp Widget
  • Image Hover Effect
  • Image Hover Effect
  • Image Morphing
  • Video Gallery Widget
  • Stylish List
  • Flip Box
  • Audio Player
  • Team Carousel Slider
  • Content Ticker

ElementsKit Modules

  • Header & Footer Builder
  • Sticky Content Module
  • Parallax Effects
  • Mega Menu Builder
  • One Page Scroll
  • Widget Builder
  • Facebook Messenger
  • Cross-Domain Copy Paste Module
  • Advanced Tooltip Module
  • Conditional Content Module
  • ElementsKit Icon Pack
  • Google Sheets Module
  • Reset Button Module for Elementor Pro Form
  • Masking Module
  • Particles Module

WP Posts

  • Post Tab
  • Post List
  • Category List
  • Post Grid
  • Blog Posts

Header Footer Widgets

  • Header Off-canvas
  • Vertical Mega Menu
  • Page List
  • Header Info
  • Nav Menu

Form Widgets of ElementsKit

  • Contact Form 7
  • Caldera Form
  • We Forms
  • Wp Forms
  • Ninja Forms
  • Fluent Forms
  • Mailchimp

Social Media Feeds

  • Twitter Feed API
  • Dribble Feed
  • Behance Feed
  • Facebook Feed API
  • Instagram Feed API
  • Pinterest Feed

Meeting Widgets

  • Zoom Integration

Review Widgets

  • Facebook Review
  • Yelp

Woocommerce Widgets

  • Woocommerce Product List
  • Woocommerce Category List
  • Woocommerce Mini Cart
  • Woocommerce Product Carousel

ElementsKit Settings

  • How to use ElementsKit Widgets
  • Ajax Load Feature of Mega Menu

How to translate ElementsKit pages

  • How To Translate ElementsKit Pages With WPML
  • How to translate Elementskit Header Footer and Advanced Widgets with WPML
  • Home
  • Doc
  • ElementsKit
  • ElementsKit General Widgets
  • Heading Widget

Heading Widget

Table of Contents
  • How to change the heading style in an Elementor?
  • Step 1: Enable Heading Widget
  • Step 2: Configure the heading title in Elementor
    • 2.1 Title
    • 2.2 Subtitle
    • 2.3 Title Description
    • 2.4 Shadow Text
    • 2.5 Separator
  • Step 3: Customize the heading title widget style
    • 3.1 General
    • 3.2 Title
    • 3.3 Focused Title
    • 3.4 Subtitle
    • 3.5 Title Description
    • 3.6 Separator
    • 3.7 Shadow Text

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.
How to enable Elementor Heading Widget

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.
  1. Enable Show Border to display the border beside the heading title. When you enable the title border, the Border Position option will appear.
  2. Choose the title Border Position from the given option: Start or End of the title.
  3. Enable the Float Left option. When Float Left is enabled, the Title Width option will appear.
  4. 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,

  1. Adjust Border Width.
  2. Adjust Border Height.
  3. Set the Vertical Position.
  4. Adjust the Right Gap between the border and title text.
  5. 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:

  1. Select the Background Type.
  2. Choose Background Color
  3. 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]

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

Once enabled, the following features will appear:

  1. Select the Background Type for Text Fill.
  2. 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:

  1. Enable the Use text fill feature for Subtitle.

Once enabled, the following features will appear:

  1. Select the Background Type of Subtitle.
  2. Choose the Subtitle Text Fill Color

Subtitle Outline:

You can draw an outline around the subtitle.

  1. Select the Border Type for the Subtitle outline.
  2. Set the Width of the outline.
  3.  Choose the Border Color.
  4. 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.

GET ElementsKit For Elementor
What are your Feelings
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Still stuck? How can we help?

How can we help?

Updated on October 25, 2022
Back to TopButton Widget
Table of Contents
  • How to change the heading style in an Elementor?
  • Step 1: Enable Heading Widget
  • Step 2: Configure the heading title in Elementor
    • 2.1 Title
    • 2.2 Subtitle
    • 2.3 Title Description
    • 2.4 Shadow Text
    • 2.5 Separator
  • Step 3: Customize the heading title widget style
    • 3.1 General
    • 3.2 Title
    • 3.3 Focused Title
    • 3.4 Subtitle
    • 3.5 Title Description
    • 3.6 Separator
    • 3.7 Shadow Text

Get Subscribed Today!

wpmet-website-logo
© 2022, Wpmet. All Rights Reserved. Built with ElementsKit.
Elements Kit
ShopEngine
GetGenie AI
Metform
WP Social
Wp Ultimate Review
Wp Fundraising
About us
Contact us
Support
Login/Register
Collaborate
Affiliates
Affiliate Area
Privacy Policy
Terms and Conditions
Refund Policy
Payment systems accepted by Wpmet

Wpmet is not affiliated with or endorsed by Open Source Matters or the WordPress Project. The CMS logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Opt out!.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
Vendor/Partner
SAVE & ACCEPT