Floating Images

How to add image in DP Floating Image module

Add an Image Item

• Navigate to the Content tab.
• Click on Add New Image.
• Go to Content > Add New Image to upload or select the image you want to use.

Adjust the Floating Image’s Container Height

• Navigate to the Container settings.
• Find the Container Height option.
• Adjust the height by moving the slider or manually inputting the desired value.

Content and Design Options for an Individual Floating Image Item

Once you’ve added an image to the Floating Image Item, you can access various content and design options to customize its appearance and behavior.

Content Options

1. Image Alt Text
   • After inserting the image, you will find the Image Alt Text option, where you can input alternative text for the image.

Design Options

• Image Position
  • In the Design tab, you’ll find controls for setting the Horizontal and Vertical Alignment of the image within its container.
  • Horizontal Alignment: This option allows you to position the image to the left, right, or center horizontally.
  • Vertical Alignment: You can adjust whether the image aligns at the top, middle, or bottom vertically within its designated space.

• Image Animation Settings

The Animation settings in the Design tab allow you to create engaging motion effects for your Floating Image Item.

• Floating Effect: You can apply a floating animation to give the image a sense of dynamic movement on the page.

• Animation Delay: This setting controls how long the system waits before starting the animation. A delay can be useful for timing effects in complex layouts.
• Animation Duration: This controls how long the animation lasts from start to finish. Short durations result in quicker animations, while longer durations create slower, more drawn-out effects.
• Animation Speed Curve: The speed curve determines the pacing of the animation. You can choose between different curves, such as linear, ease-in, ease-out, or ease-in-out, depending on how you want the animation to start and finish.

• Animation Repeat: This option allows you to specify if and how often the animation should repeat. This can be helpful for ongoing animations that loop continuously or only happen once.