Divi Essential Documentation

  1. Home
  2. Docs
  3. Divi Essential Documentat...
  4. Modules Documentation
  5. Divi Image Icon Effect

Divi Image Icon Effect

Image Icon Effect is another star module making it easier for your readers to ‘Focus’ on the texts you put on your relevant images.

Pick your favorite from the 6 most interesting hover effects making your post attractive to all visitors.

Content → Text 

  1. Heading Text – type the Heading Text in the content field.
  2. Focus Text – type the Focus Text in the content field.
  3. Select Heading Tag – choose a suitable heading tag

Content → Image

Image – select a picture to show in default and select an image when hovered.

After placing both the images this is how it looks on the front end.

Content → Icon

Include Icons one through four within the Icon feature.

Content → Icon

  1. Use Icon – enable the switch to use an Icon
  2. Icon Link Target – place a link for the Icon
  3. Icon – select a suitable Icon for your design from the many premade icons in the collection.

Design → Hover Effect

Select Image Hover – from the six trendy hover effects, select the one that best suits your design.

Design → Fonts

Here we discuss what options you’re getting for text stylization of the heading and focus texts within the Image Icon Effect module.

  1. Font – Select a font from the collection or use custom font.
  2. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
  3. Font Style – Pick a style of font for the design.
  4. Text Alignment – align the text to the left, right, or center.
  5. Text Color – manually select a color for the background of the text using the pointer or you can simply state the hex code and get the exact color you require.
  6. Text Size – easily resize the text using the slider for desktop, tablet, and phone.

Design → Fonts (continued)

  1. Letter Spacing – space out the letters using the slider for an easier read for the website visitors.
  2. Line Height – adjust the space between the lines using the slider.
  3. Text Shadow – select a prebuilt shadow for your text

Design → Icon Settings

Choose a color for each of the four icons. You can use the color picker to select a color or place the hex code to achieve the exact shade required for the design.

Design → Icon Settings (continued)

  1. Icon Size – Use the slider to adjust the icon size for desktops, tablets, and phones.
  2. Icon Spacing – adjust the spacing between the icons
  3. Icon Line Height – change the space between the lines using the slider.
  4. Use Icon Background – choose a background color for the icons.
  5. Text Shadow – include shadow to the icons.
  6. Rounded Corners – adjust the four corners of the icons to get rounded corners on each or all four corners.

Design → Icon Settings (continued)

  1. Border Styles – include borders on any side of the text or all four sides. 
  2. Border Width – adjust the width of the border using the slider.
  3. Border Color – pick a color for the border that you’ve added.
  4. Border Style – select a style of the border from the premade border styles.

How can we help?