Divi Team Overlay Card

Create an elegant card-shaped team member design with an overlay effect on the images revealing the body text and social network icons. This makes the section more appealing to look at for the viewers.

Content → Image

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

Content → Text

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

Content → Image Overlay Color 

Select a color to set as an overlay to reveal the content and social icons on hover.

Design → Social Alignment 

Align the social icons to the left, center, or right. 

Design → Body Text

Other than the basic text stylization, we included the option to use paragraphs, links, bullet points, and numbered and quoted texts.

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 → 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.
8. Letter Spacing – space out the letters using the slider for an easier read for the website visitors

Design → Title 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 – space out the letters using the slider for an easier read for the website visitors
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. Configure the intensity and position of the shadow after selection.

Design → Image Border

1. Rounded Corners – adjust the four corners of the image to give rounded corners.
2. Border Styles – include a border to the image on all four sides or wherever you prefer.
3. Border Width – adjust the width of the border added to the image

Design → Image Border (continued)

1. 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
2. Border Style – select a premade style of border