Divi Essential Documentation

⌘K
  1. Home
  2. Docs
  3. Divi Essential Documentat...
  4. Modules Documentation
  5. Divi Team Social Reveal

Divi Team Social Reveal

Add a team member’s image and reveal the social media sites as one hovers on the design. Great for showcasing social networking and self-promotion of team members.

Content → New Item → Social Network

As you add New Items, you will have the option to put the Social Media Link of the specific Team Member’s design layout.

Content → Image

Image – add a professional picture of a Team Member by clicking on Add Image.

Content → Text

  1. Name – type the name of the team member in the text field.
  2. Position – place the position they hold in your company.
  3. Body – write a summary about their work and what is charming about their efforts in the company.

Content → Image Background

  1. Background Color – enable to select a color for the image’s background.
  2. Select Background Color – pick a color using the pointer or place the hex code to get the exact color.

Content → Content Background

Within Content Background, you can either select fill color or gradient. 

  1. Background Color – enable to select a color for the content’s background.
  2. Select Background Color – pick a color using the pointer or place the hex code to get the exact color.

Design → Style

Select a style between the two styles available.

Design → Image

  1. Image Width – adjust the width of the image using the slider 
  2. Image Alignment – align the image to the left, center, or right.
  3. Image Rounded Corners – adjust the four corners of the image to give rounded corners to it.
  4. Image Border Styles – include a border to the image either on all four sides or wherever you prefer.

Design → Image (continued)

  1. Image Border Width – adjust the width of the border added to the image
  2. Image Border Color – pick a color for the frame using the pointer, or you can copy/paste the hex code to get the exact shade required for the border
  3. Image Border Style – select a premade style of border
  4. Image Box Shadow – choose a box shadow for the image and configure the intensity. 

Design → Title Text 

  1. Title Heading Level – Pick a level for the heading 
  2. Font – Select a font from the collection or use a custom font
  3. Font Weight –  is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
  4. Font Style – Pick a style of font for the text.
  5. Text Alignment – align the text for Title Text.
  6. 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.
  7. Text Size – easily resize the text using the slider.

Design → Title Text (continued)

  1. Letter Spacing – space out the letters using the slider for an easier read for the website visitors
  2. Line Height – easily include gaps between the lines using the slider
  3. Text Shadow – add text shadow to have the texts highlighted

Design → Body Text

  1. Font – Select a font from the collection or use a custom font
  2. Font Weight –  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 text.
  4. Text Alignment – align the text for Title Text.
  5. 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.
  6. Text Size – easily resize the text using the slider.
  7. Letter Spacing – use this to space out the letters utilizing the slider.

Design → Body Text (continued)

  1. Line Height – easily include gaps between the lines using the slider
  2. Text Shadow – add text shadow to have the texts highlighted

Design → Position Text

  1. Font – Select a font from the collection or use a custom font
  2. Font Weight –  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 text.
  4. Text Alignment – align the text for Title Text.
  5. 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.
  6. Text Size – easily resize the text using the slider.
  7. Letter Spacing – use this to space out the letters utilizing the slider.
  8. Line Height – easily include gaps between the lines using the slider.

Design → Position Text (continued)

Text Shadow – add text shadow to have the texts highlighted. You can also configure the intensity using the text shadow settings after selection.

Design → Content Border

  1. Rounded Corners – adjust the four corners of the content to give rounded corners to it.
  2. Border Styles – include a border to the content on all four sides or wherever you prefer.
  3. Border Width – adjust the width of the border added to the content.
  4. Border Color – pick a color for the frame using the pointer, or you can copy/paste the hex code to get the exact shade required for the border.

Design → Content Border (continued)

Border Style – select a premade style of border

How can we help?