Use Headinger Widget to create a unique post title

The Headinger is a header creating widget for the Elementor Builder. The widgets allow you to create a unique style display for the post title on your site to make content more attractive to your users.

To better understand the capabilities of the widget, we included 5 templates to the package. These are just some examples that can inspire you to create your style. It provides you a quick start in a few clicks. Read more about using templates.

Post title sample

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor to start using the Headinger widgets. You will find the widget at the end of the general section.

 Widget icon

Drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

Content Tab

On the Content tab of the Headinger widget, you can enter the main post title and manage subheader and additional header.

Header settings

The section contains settings related to the block of the main post title:

Header Settings of the Content Tab

Header

Enter the title text of the current page or post.

Link

The link entered in this field will be attached to the title. Leave the field blank if you do not want to add a link for the title.

HTML tag

Select one of the available tags from the list for the title text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.

Word break

The toggle to enable/disable a brake of the header text. This can be useful when the header consists of long words which may cause display problems on different devices without using the break.

Line

The toggle to enable/disable the display of the line in the title. The line style and placement can be managed in the style tabs.

Split header

The toggle to enable/disable the additional text for the title. It is displayed on a new line.

Subheader

The toggle to enable/disable the display of the subheader text. When the option is enabled, the new “SubHeader” section with the settings appears in the Content tab. The text styles can be managed in the Style tab.

Additional header

The toggle to enable/disable the display of the additional header. When the option is enabled, the new “Additional Header” section with the settings appears in the Content tab. The text styles can be managed in the Style tab.

Subheader settings

The section is available if the option “Subheader” option is enabled. The block contains fields for text adding, options for the text position and adding a line.

Subheader settings of the Headinger widget

Subheader

Enter the subheader text of the current page or post.

Subheader bottom

The option allows you to enable the display of the header under the main title. When the toggle is disabled, the header is displayed above the main title.

Word break

The toggle to enable/disable a brake of the subheader text. This can be useful when the subheader consists of long words which may cause display problems on different devices without using the break.

Line

The toggle to enable/disable the display of the line in the subheader. The line style and placement can be managed in the style tab.

Additional Header settings

The section is available if the option “Advanced header” option is enabled. The block contains a field for text adding.

Text

Enter the text for the advanced header of the current page or post.

Style tab

On the Headinger widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, gradients, and more.

Header

There are many options in the section to change the style of the header text and background to create your own design.

Header style options
TEXT STYLE
  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
  • Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
  • Alignment – manage title alignment (left, center, right) for desktop, tablet or mobile.
BOX STYLE
  • Background Type – this setting changes the background of the current section. You can choose a color, gradient, or background image.
  • Border – select one of the available border types (solid, double, dotted, dashed, groove) for the current block and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
Border types of the Headinger
LINE STYLE

The section with line style settings is available if the line display is enabled in the Сontent tab.

  • Position – select one of the line placement position: Before, After, Bottom or Before and After the text.
  • Color – specify the font color and opacity for the text of the current block using the color picker.
  • Width – specify the line width for all devices or for desktop, tablet or mobile separately.
  • Height – specify the line height for all devices or for desktop, tablet or mobile separately.
  • Spacing – specify the space between the text and the line for all devices or for desktop, tablet or mobile separately.

Subheader

The section with subheader style settings is available if the subheader is enabled in the Сontent tab.

  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
  • Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
  • Alignment – manage title alignment (left, center, right) for desktop, tablet or mobile.
  • Line Style – the section with line style settings is available if the line display is enabled in the Сontent tab.

Additional header

  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
  • Shadow – this setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
  • Alignment – manage title alignment (left, center, right) for desktop, tablet or mobile.
  • Transform origin – select one of the available positions of the transformed element.
  • Rotate – specify the rotation angle of the element for all devices or for desktop, tablet or mobile separately.
  • X Offset – specify the offset of the text along the x-axis
  • Y Offset – specify the offset of the text along the y-axis

Advanced Tab

The settings in the advanced tab Motionger widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

Update page in the Elementor
Update page in the Elementor

Hosting for Elementor websites

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.