Floating Element

Estimated reading: 5 minutes 267 views

It is a powerful widget that enhances your webpage’s visual appeal and engagement by presenting various elements in a unique and captivating manner. With this widget, you can effortlessly showcase icons, images, Lottie animations, and personalized text, allowing for a dynamic and immersive user experience.

One of the standout features of this widget is its extensive customization options, enabling you to tailor the appearance of each element to suit your specific needs. You have the flexibility to apply a range of effects, such as scaling, translating, rotating, and more, further enhancing your content’s visual impact and interactivity.

In addition, the Floating Element Widget can overlay text on images, providing a seamless way to convey information or context related to the visuals.

The “Floating Element” widget features the following controls.

Content

Floating Items

  • Title: Enter the title.
  • Type: Choose an element from Icon, Lottie, Image, or Text.

Content

  • Icon
    • Icon: Either choose from icon library or upload a SVG.
Floating Element: Icon Settings
Floating Element: Icon Settings
  • 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 – Enable the reverse option to display the animation in reverse order.
Floating Element: Lottie Settings
Floating Element: Lottie Settings
  • Text
    • Text: Enter the text to float.
Floating Element: Text Settings
Floating Element: Text Settings
  • Link: Enter the URL to link with an element.
  • View – Select from default, stacked, or framed display options.
  • Shape – Select either Circle or Square shape for the stack or frame view.
Floating Element: Elements Settings
Floating Element: Elements Settings
  • Image
    • Choose Image: Upload an image.
    • Title: Select from title, caption, or custom text to elegantly overlay onto your image( The title and caption text will display the text that you provide when uploading the image).
      • Text: Enter the text(applicable when selecting custom in the Title option).
Floating Element: Image Settings
Floating Element: Image Settings
  • Vertical Position: Specify the vertical position.
  • Horizontal Position: Specify the horizontal position.
  • Size: Specify the size.
Floating Element: Elements Settings
Floating Element: Elements Settings

Effects

  • Translate: Set up the translate properties.
  • Rotate: Configure the rotation properties.
  • Scale: Specify the scaling properties.
  • Duration: Enter the animation duration in milliseconds.
  • Delay: Specify the animation delay in milliseconds.
  • Animation Direction: Select the animation direction from available options.
Floating Element: Effects Settings
Floating Element: Effects Settings

Settings

Floating Settings

  • Scale: Enable the option to apply scaling.
  • Scale Value: Specify the scaling value.
  • Translate: Set the translate properties.
Floating Element: Overlay Settings
Floating Element: Floating Settings

Overlay

  • Position: Choose from inside or outside.
  • Show Overlay: Choose the desired option for displaying overlay content(applicable if position is selected as Inside).
  • Alignment: Select the alignment.
Floating Element: Overlay Settings

Style

Icon

Normal

  • Primary Color: Select the primary color of the icon.
  • Secondary Color: Select the secondary color of the icon.

Hover

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

  • Size: Set the size of the Icon.
  • Padding: Set the padding for the Icon.
  • Rotate: Set the rotation of your Icon in degrees.
  • Border Width: Set the border’s width.
  • Border Radius: Set the border’s radius.
  • Box Shadow: Set the box shadow.
Floating Element: Icon Style Settings
Floating Element: Icon Style Settings

Lottie

  • Primary Color: Select the primary color of Lottie.
  • Secondary Color: Select the secondary color of Lottie.
  • Primary Hover Color: Select the primary hover color of Lottie.
  • Secondary Hover Color: Select the secondary hover color of Lottie.
  • Size: Set the size of the Icon.
  • Box Shadow: Set the box shadow.
  • Border Radius: Set the border’s radius.
  • Padding: Set the padding for the Icon.
Floating Element: Lottie Style Settings
Floating Element: Lottie Style Settings

Image

  • Width: Specify the width of the image.
  • Background Type: Select either Classic or Gradient.

Classic

  • Color: Choose the color for the background.
  • Image: Either upload an image or select a dynamic tag for display.

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.
  • Border type: Select the border type.
  • Border Radius: Set the border’s radius.
  • Box Shadow: Set the box shadow.
  • Padding: Set the padding.
Floating Element: Image Style Settings
Floating Element: Image Style Settings

Overlay

  • Typography: Set the typography.
  • Color: Select the color of overlay content.
  • Hover Color: Select the hover color of overlay content.
  • Background Type: As we mentioned above, you can select either classic or gradient. Click Here.
  • Animation: Select the animation.
  • Padding: Set the padding.
  • Border Radius: Set the border radius properties.
Floating Element: Image Overlay Style Settings
Floating Element: Image Overlay Style Settings

Text

  • Typography: Set the typography.
  • Color: Select the color of overlay content.
  • Hover Color: Select the hover color of overlay content.
  • Background Type: As we mentioned above, you can select either Classic or Gradient. Click Here.
  • Padding: Set the padding.
  • Border Radius: Set the border radius properties.
  • Border Type: Select the border type.
Floating Element: Text Style Settings
Floating Element: Text Style Settings
Share this Doc

Floating Element

Or copy link

CONTENTS