In this guide, we’ll show you how to add a “Side Line Heading widget” to your Elementor website. The Side Line Heading widget lets you create clean, stylish headings with a decorative line placed beside the text. It’s a great way to add a modern and professional touch to section titles and key content across your pages. Whether you’re highlighting important information or improving the visual hierarchy of your layout, this free widget helps make your headings stand out with elegance and clarity.
Let’s explore the customization options available in the “Side Line Heading widget” for Elementor below.
Add a Side Line Heading to Elementor
This widget requires “Unlimited Elements Pro” version installed and activated on your WordPress website.
Go to Unlimited Elements and click "Widgets".
Search for "Side Line Heading" in the widget library.
Hover over the widget and click Install.
Add a Side Line Heading Widget to an Elementor Page
Click "Add Element" in Elementor
Search for "Side Line Heading" in the widget panel.
Drag and drop the “Side Line Heading” widget into the container.
Elementor Side Line Heading Widget General Settings
Line Width
Adjusts the horizontal length of the decorative line next to the heading.
Line Height
Sets the thickness (vertical size) of the decorative line.
Line Color
Defines the color of the decorative line to match your design.
Title
Enter the main heading text displayed alongside the line.
Subtitle
Add optional secondary text that appears below or beside the main title.
Title Spacing
Controls the spacing around the main heading text for better layout control.
Subtitle Spacing
Adjusts the space around the subtitle for clear visual separation.
Line Spacing
Sets the vertical distance between the decorative line and the heading text.
Space Between
Controls the overall spacing between the decorative line, title, and subtitle to maintain visual balance.
Elementor Side Line Heading Widget Style Settings
Enable Styles
Toggle this option on or off to activate custom styling controls for the title.
Typography
Customize the title's font, size, weight, line height, letter spacing, and other text-related properties.
Color
Sets the color of the title text to match your design theme.
Custom Styles
Enter custom CSS or inline style declarations for advanced title styling. Ideal for users who want greater control over the appearance.
Enable Styles
Toggle to activate or deactivate custom title styling.
Typography
Configure font settings for the title.
Color
Set the title text color.
Custom Styles
Access additional styling options.
Side Line Heading Widget Design Examples For Elementor
Here are some live use cases for the Side Line Heading widget.
Layers with Icon Bullets with Side Line Heading.
Zoom Caption Reveal Content with Side Line Heading.
Thank you for using the Side Line Heading widget for Elementor! This free widget adds sleek, modern side-line accents to your titles and subtitles, giving your headings a clean and professional appearance. It’s a simple yet effective way to elevate your site’s design and draw attention to key content. Need help or design ideas? Visit our demo page for examples and inspiration.
