The Highlighter(called “Text highlight” in the Selection pack) is an Elementor widget for creating the highlighted header. The widget allows you to make your heading attractive using the unique original animation that can be applied to specific worlds or to the whole title. The Highlighted header widget supports 20 custom animation types for the header, designed for this product that you will not find anywhere else.
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 and 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 highlighted header widget, you can enter the main post title with the animation and manage subheader and additional header.
Highlighter settings
- Animation – apply one of the 20 custom available animations for the highlighted text.
- Animation delay(s) – specify when the animation will start. This allows the animation to begin rendering some time after the page loads.
- Scene duration(s) – specify the duration of the animation, including rendering and pause.
- Animation duration(%) – specify the animation rendering time without taking into account the pause. This is determined as a percentage of the Scene duration(s) value.
- Animate on viewport – the option allows you to run animation only on the viewport
- Reverse animation – the option allows you to enable/disable the reverse animation.
- Loop animation – the option allows you to enable/disable looping animation.
Header settings
- Text – enter the title text of the current page or post. The text to be animated is enclosed in braces. Text before {Highlighted Text} text after.
- 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.
- 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.
- 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.
- 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.
- 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.
- Text – Enter the subheader text of the current page or post.
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 style tab of the highlighted header widget, you can configure everything related to the visual style of elements: colors, typography, backgrounds, gradients, and more.
Highlighter
- Line thickness – specify the highlighter line thickness
- Width – specify the width of the highlighter for different devices. The value can be set in various units: px, %, em, rem.
- Height – specify the height of the highlighter for different devices. The value can be set in various units: px, %, em, rem.
- Scale – specify the scale of the highlighter for different devices.
- Rotate – specify the rotation angle of the highlighter for different devices
- Offset X – specify the highlighter offset along the X-axis in percent or pixels.
- Offset Y – specify the highlighter offset along the Y-axis in percent or pixels.
- Highlighter color – specify the color and opacity of the highlighter line using the color picker.
- Blend mode – select one of the 16 blending modes for text and highlighter
- Foreground – the option allows you to make the highlighter as foreground.
- Round edges – the option allows you to add round edges for lines.
Header
There are many options in the section to change the style of the header text and background to create your own design.
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.
Highlighted TEXT
- 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.
- Auto-width – enable the option to adapt the width to the width of the word or specify your width.
- Margin – the setting allows managing the margin of the animated text in different units(px, em, %) for desktop, tablets or phones.
- 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.
- 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 Highlighted header 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.
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.