Divi Essential Documentation

⌘K
  1. Home
  2. Docs
  3. Divi Essential Documentat...
  4. Modules Documentation
  5. Divi Floating Elements

Divi Floating Elements

Have elements float around your screen, this is a very exciting feature to help grab the attention of your visitors!

Content → New items → Background 

  1.  New Item – create new items to add animated floating items to your design. You can choose between floating text or a floating image.
  2. Background – add background color to your floating element design

Design → New Item → Animation Settings

Pick from the seven unique float effects. You also get to custom make your float effect using the Custom effect.

  1. Use Default Animation – choose from the seven effects or use a custom effect.
  2. Horizontal Position – adjust the Horizontal Position using the slider.
  3. Vertical Position – edit the upright position using the slider.

Design → New Item → Image Settings

For each item you add, you can separately add rounded corners, border, and border style for the image you’ve picked for the design layout. Same for the text; you can also stylize the text you’ve added.

Let’s go through what we have for Image Settings:

  1. Image Rounded Corners – include rounded corners around the edges of the image.
  2. Image Border Styles – add borders on all four sides or specific sides using border styles.
  3. Image Border Width – adjust the border width using the slider.

Design → New Item → Image Settings (continued)

For each item you add, you can separately add rounded corners, border, and border style for the image you’ve picked for the design layout. Same for the text; you can also stylize the text you’ve added.

Here are the rest of the image settings tools simplified:

  1. Image Border Color – add color to the border using the pointer or place the hex code to get the exact color you want for the design.
  2. Image Border Style – select a premade border style.
  3. Box Shadow – include box-shadow to the image and configure its settings. 

Design → Title Settings

  1. Font – Select a font from the collection or use a custom font.
  2. Font Weightdefine how you want your font to show either regular, italic, bold extra, or even extra light.
  3. Font Style – Pick a style of font 
  4. Text Color – manually select a color for the background of the text using the pointer, or you can state the hex code and get the exact color you require.
  5. Text Size – easily resize the text using the slider.
  6. Letter Spacing – you can space out the letters using the slider for an easier read for the website visitors.
  7. Line Height – adjust the space between the lines using the slider

Design → Title Settings (continued)

  1. Text Shadow – add text shadow to have the texts highlighted.
  2. Rounded Corners – adjust the four corners to include rounded corners
  3. Border Styles – include borders on any side of the text or all four sides. 

Design → Title Settings (continued)

  1. Border Width – adjust the width of the border using the slider.
  2. Border Color – pick a color for the border using the pointer or place the hex code to get the exact color you want for the design.
  3. Border Style – select a style of the border from the premade border styles.
  4. Box Shadow – Include a box shadow to the entire design. Choose the best one from the following shadows and adjust them to your liking.

How can we help?