Divi Essential Documentation

  1. Home
  2. Docs
  3. Divi Essential Documentation
  4. Modules Documentation
  5. Divi Team Member Overlay

Divi Team Member Overlay

Put an overlay effect on a team member’s image, and give a stylish feel to the presentation 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 – here, you can add a professional picture of a Team Member by clicking on Add Image

Content → Text

Name – type the name of the team member in the text field

Position – type the position he/she holds in the company in the text field

Design → Image

  1. Image Width – adjust the width of the image using the slider 
  2. Select Overlay Color – select a color for the overlay by using the pointer or simply add the hex code to achieve the exact color required
  3. Image Rounded Corners – adjust the four corners of the image to give rounded corners to it

Design → Image (continuation)

  1. Image Border Styles – include a border to the image either on all four sides or wherever you prefer
  2. Image Border Width – adjust the width of the border added to the image
  3. Image Border Color – pick a color for the border using the pointer or you can copy/paste the hex code to get the exact color required for the border
  4. Image Border Style – select a premade style of border

Design → Social Alignment 

Social Alignment – position the social networks either to the left, center, or right.

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 – this 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 both front and back
  5. Text Alignment – align the text for both the front and back text
  6. 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.
  7. Text Size – easily resize the text for both the front and back parts of the flip box

Design → Title Text (continuation)

  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 → Position Text 

  1. Font – Select a font from the collection or use a 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 both front and back
  4. Text Alignment – align the text for both the front and back text
  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 for both the front and back parts of the flip box
  7. Letter Spacing – space out the letters using the slider for an easier read for the website visitors

Design → Position Text (continuation)

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

Design → Image Overlay 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 image either on all four sides or wherever you prefer
  3. Border Width – adjust the width of the border added to the image
  4. Border Color – pick a color for the border using the pointer or you can copy/paste the hex code to get the exact color required for the border
  5. Border Style – select a premade style of border

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 image either on all four sides or wherever you prefer
  3. Border Width – adjust the width of the border added to the image
  4. Border Color – pick a color for the border using the pointer or you can copy/paste the hex code to get the exact color required for the border
  5. Border Style – select a premade style of border
Was this article helpful to you? Yes No

How can we help?