Floating Images

1. Insert DP Floating Image on a page.
2. How to add Image Item: Go to the Content tab >> click Add New Image >> Content >> Image >> Add Image.
3. Adjust Floating Image’s Container Height: Go to the Container >> Container Height >> move the slider or input the value.

Content settings of an individual floating image item

The following steps need to be performed in the Content tab of an individual Floating Image Item’s settings. 

1. Insert Alt Text: Go to the Content >> Image Alt Text >> input your alternative text for the image.
2. Add Link: Go to the Link >> Module Link URL >> insert your linking URL >> Model Link Target >> select either In The Same Window / In The New Tab.

Design settings of an individual floating image item (Image Position, Floating effects, and more.)

The following steps need to be performed in the Design tab of an individual Floating Image Item’s settings. 

1. Adjust the Horizontal Alignment of an image: Go to the Design tab >> Image Position  >> Horizontal Align >> move the slider, or input the value.
2. Adjust the Vertical Alignment of an image: Go to the Design tab >> Image Position  >> Vertical Align >> move the slider, or input the value.
3. How to change Floating Effects: Go to the Image Animation  >> Floating Effect >> select Up Down / Left Right / No effect.
4. Set Animation Delay: Go to the Image Animation >> Animation Delay >> move the slider or input the value.
5. Set Animation Duration: Go to the Image Animation >> Animation Duration >> move the slider or input the value.
6. How to apply the Animation Speed Curve: Go to the Image Animation >> Animation Speed Curve >> select Ease-In-Out / Ease / Ease-In / Eas-Out / Linear.
7. Set animation repetition style: Go to the Image Animation  >> Animation Repeat >> select either Infinite / Initial.
8. Adjust floating image width: Go to the Sizing >> Width / Max Width >> move the slider or input the value.
9. Adjust Floating image margins and paddings: Go to the Spacing >> Margin / Padding >> input the values.
10. Apply rounded corners, border styles, width, and color to the floating image: Go to the Border >> make changes according to the requirement.
11. How to apply shadow to the Floating Image: Go to the Box Shadow settings, and apply the appropriate box shadow.
12.  Use Filters to adjust hue, saturation, brightness, and more on a floating image.