Advanced Heading

Estimated reading: 8 minutes 570 views

This is a powerful widget that empowers users to create visually stunning and streamlined headings for their web pages. Users can add a range of design components, such as shadow text, icons, separators, and highlighted text, to enhance the overall aesthetics of the heading.

Moreover, the widget allows users to insert icons, images, or Lottie animations between the Separator to add an extra layer of visual appeal. The widget’s easy-to-use interface makes the process of creating headings a breeze, and the result is a stunning, professional-looking heading that will surely capture the user’s attention.

The “Advanced Heading” widget features the following controls:

Content

Heading – Enter the desired text you want to display or choose the dynamic tag option. If you want to highlight specific text within the heading, place them in between %%_%%, like, Hello %%World%%.
Link – Include a link URL in the widget by manually entering it or choosing a dynamic option.
HTML Tag – Select the HTML tag you wish to use to display your heading.

Icon type – Choose from a list of Icons, Images, or Lottie animations.

Icon

Icon: Select from the Font Awesome icon library or upload an SVG image.

Image

Image: Either upload an image or select a dynamic tag for display.
Image size: Choose the size for your icon image display.

Lottie Animation

Source – Choose the source of the Icon by either adding an External URL or selecting a media file.
Loop – Enable the loop option to display the animation continuously.
Reverse – Activate the reverse option to display the animation in reverse order.

View – Select from default, stacked, or framed display options.
Shape – Select either Circle or Square shape for the stack or frame.

Position – Choose the position of the Icon, either before or after the heading.

Sub Heading

Enable – Activate the option to add subheadings to your webpage.
Text – Input the desired text or select a dynamic tag option for display.
HTML Tag – Select the HTML tag you wish to use to display your sub-heading.

Shadow Text

Enable – Activate the option to add shadow text to your webpage.
Text – Input the desired text or select a dynamic tag option for display.

Icon

Icon Type: As we mentioned above, you can choose from a list of Icons, Images, or Lottie animations. Click here.

Alignment: Set the alignment of icon.

Separator

Show Separator – Enable the option to show Separator.
Type – Select the type of Separator.
Graphic Type – Select the graphic type for display between the separators, such as Image, Icon, or text.

Icon

Icon type: Select either an Icon or a Lottie animation

Icon

Icon – Select an icon from the Font Awesome library or upload an SVG

Lottie Animation

Source – Choose the source of the Icon by either adding an External URL or selecting a media file.
Loop – Enable the loop option to display the animation continuously.
Reverse – Activate the reverse option to display the animation in reverse order.

View – Select from default, stacked, or framed display options.
Shape – Select either Circle or Square shape for the stack or frame.

Text

Text – Enter the text that you wish to appear or use a dynamic tag between the separator.

Image

Image – Upload an image.

Alignment – Choose the alignment of the Separator, whether left, right, or center.

Order

Choose the order of displaying individual elements, such as

Heading
Subheading
Separator
Icon

Note: If any of these elements have a lower priority than others, they can be placed first on the webpage. This feature gives you greater control over the visual hierarchy of your webpage.

Style

Heading

Typography: Set the typography option for the heading.
Fill Style: Select either a color or an image.

Color

Color: Select the color for the background.
Hover Color: Select the color for hover states.

Advanced Heading: Heading Style Settings

Image

Background Type: Choose either a Classic or a Gradient.

Classic

Color: Choose the color for the background.
Image: Either upload an image or select a dynamic tag for display.
Repeat: Specify the repeat pattern for the background image.
Display size: Choose between contain, cover, and auto options, or add custom values for the background display size.
Image Size: Choose the size of the image, from thumbnail to full.
Position: Set the position of the background image.
Attachment: Choose either scroll or fixed.

Gradient

Color: Select the color for the background.
Location: Determine the position of the color on the background by specifying their location in percentage.
Second Color: Select the second color for the background.
Location: Determine the position of the second color on the background by specifying their location in percentage.
Type: Select either Radial or Linear.
- Radial
  - Position: Set the position.
- Linear
  - Angle: Set the angle using DEG, GRAD, RAD, and TURN.

Text Shadow: Apply a shadow to the heading if desired.
Position: Choose the position of the heading, whether left, right, or center, for display.
Text-align: Choose the alignment of the heading, whether left, right, or center, for display.
Padding: Set the padding for the heading.
Margin: Set the margin for the heading.

Heading Icon

Normal

Primary Color: Choose the primary color for the icon.
Secondary Color: Choose the secondary color for the icon.

Hover

Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the icon.

Size: Set the size of the Icon using %, EM, REM, VW, or PX.
Padding: Set the padding for the Icon.
Rotate: Set the rotation of your Icon in degrees.
Border Width: Set the border’s width using %, EM, REM, VW, or PX.
Border Radius: Set the border’s radius using PX,%, EM, or REM.

Highlighted Text

Typography: Set the typography option for the highlighted text.
Fill Style: As we mentioned above, you can select either a color or an image. Click here.
Text Shadow: Apply a shadow to the highlighted text in the heading if desired.
Background Type: As we mentioned above, you can select either Classic or Gradient. Click Here.
Border Radius: Set the border radius.
Padding: Set the padding.

Sub Heading

Typography: Set the typography option for the heading.
Fill Style: As we mentioned above, you can select either a color or an image. Click here.
Text Shadow: Apply a text shadow on the subheading.
Alignment: Choose the desired alignment of the Icon, whether it should be on the left, right, or center
Padding: Set the padding for the subheading.
Margin: Set the margin for the subheading.