In this tutorial,We are going to show you Team members in list view with creative hover effects that just may surprise you.Today We are sharing a step by step tutorial for Team List view USINg Divi Person module to anywhere on your website.
Steve Thomas
Web Developer
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Miranda joy
Web Designer
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
kristiana
Web Developer
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages
CREATE TEAM LIST VIEW USING PERSON MODULE WITH HOVER EFFETS
Step 1. Download DCT_TEAM_LISTVIEW.zip File
Step 2. Unzip Zip Folder
Step 3. Import Divi_Person_Module_With_List_View_And_Creative_Hover_Effects.json file on Divi -> Divi Library -> Import & Export Button
Step 4. After import layout json files you can see in below
Step 5 : Create New Page > Click on “+” Icon see below image
Step 6. After click ,layout will be load then Publish Page
Step 7. Here two way possibility of use tilt .
1. Using Child theme
On unzip folder you can found Child Theme folder “DCT_TEAM_LISTVIEW.zip” file so just upload and activate.
If child theme already exist then follow below step
-> Copy enqueue script function “DCT_TEAM_LISTVIEW” code and paste on your existing child theme functions.php file.
-> Copy “DCT_TEAM_LISTVIEW.css ” code and paste on your existing child theme style.css file.
DCT_TEAM_LISTVIEW In Function.php
function DCT_TEAM_LISTVIEW() {
wp_enqueue_style( 'team-list-view', get_stylesheet_directory_uri() . '/DCT_TEAM_LISTVIEW.css' );
}
/* Add Front-Site Css
-------------------------------------------------------------- */
add_action( 'wp_enqueue_scripts', 'DCT_TEAM_LISTVIEW' );
-> Upload “DCT_TEAM_LISTVIEW.CSS” file on your server or anywhere and add that path on Divi-> Theme Options -> GENeRAL Tab.
-> Copy CSS code from FOLDER file and paste on Divi-> Theme Options -> GENeRAL Tab -> Custom CSS.
Just PASTE CSS code in CUSTOM CSS TAB AND SAVE IT.
See image
DIVI PERSON MODULE WITH LISTVIEW & CREATIVE HOVER EFFETCS CSS
/* ======================= List view =========================*/
.dct_team_list{border:3px solid #d4434d;text-align:center;overflow:visible;position:relative;z-index:1}
.dct_team_list:after,.dct_team_list:before{background:#d4434d;width:17px;height:150px;
position:absolute;z-index:-1;content:""}
.dct_team_list:before{-webkit-transition:all .5s ease .2s;-moz-transition:all .5s ease .2s;
-ms-transition:all .5s ease .2s;-o-transition:all .5s ease .2s;transition:all .5s ease .2s;top:100%;left:0;margin-top:-150px}
.dct_team_list:after{-webkit-transition:all .5s ease .2s;-moz-transition:all .5s ease .2s;-ms-transition:all .5s ease .2s;
-o-transition:all .5s ease .2s;transition:all .5s ease .2s;visibility:visible;top:0;right:0}
.dct_team_list .clearfix::after{visibility:visible}.dct_team_list:hover:after,
.dct_team_list:hover:before{top:50%;margin-top:-75px}
.dct_team_list .et_pb_team_member_image{border:3px solid #d4434d;margin:30px;width:30%;position:relative;
-webkit-transition:all .5s ease 0s;-moz-transition:all .5s ease 0s;-ms-transition:all .5s ease 0s;
-o-transition:all .5s ease 0s;transition:all .5s ease 0s}
.dct_team_list:hover .et_pb_team_member_image{border-color:#d4434d}
.dct_team_list .et_pb_team_member_image:after{content:"";background:#33343e;width:100%;height:0;position:absolute;
top:50%;left:0;opacity:0;transform-origin:0 0 0;-webkit-transition:all .5s ease 0s;-moz-transition:all .5s ease 0s;
-ms-transition:all .5s ease 0s;-o-transition:all .5s ease 0s;transition:all .5s ease 0s}
.dct_team_list:hover .et_pb_team_member_image:after{height:100%;opacity:.85;top:0}
.dct_team_list .et_pb_team_member_image img{width:100%;height:auto}
.dct_team_list .et_pb_team_member_description{width:60%;position:absolute;top:5%;right:0;opacity:1;
-webkit-transition:all .5s ease .2s;-moz-transition:all .5s ease .2s;-ms-transition:all .5s ease .2s;
-o-transition:all .5s ease .2s;transition:all .5s ease .2s}
.dct_team_list .et_pb_team_member_description .et_pb_team_short_description{text-align:justify}
.dct_team_list:hover .et_pb_team_member_description{opacity:1}
.dct_team_list .et_pb_team_member_description .et_pb_module_header{font-size:18px;font-weight:600;color:#000;
text-transform:uppercase;margin:0 0 5px;text-align:left}
.dct_team_list .et_pb_team_member_description .et_pb_member_position{font-size:14px;color:#000;text-transform:capitalize;
text-align:left}.dct_team_list .et_pb_team_member_description .et_pb_team_short_description{font-size:13px;color:#000;
overflow:hidden;text-overflow:ellipsis;padding-right:40px;text-align:justify}
.dct_team_list .et_pb_member_social_links{padding:0;list-style:none;text-align:right}
.dct_team_list .et_pb_member_social_links li{display:inline-block}
.dct_team_list .et_pb_member_social_links li a{background:#d4434d;display:inline-block;width:35px;height:35px;
line-height:35px;border:1px solid #d4434d;font-size:15px;color:#fff;-webkit-transition:all .5s ease 0s;
-moz-transition:all .5s ease 0s;-ms-transition:all .5s ease 0s;-o-transition:all .5s ease 0s;transition:all .5s ease 0s}
.dct_team_list .et_pb_member_social_links li a:hover{color:#000;}
/* ======================= Single Row - Person module=========================*/
.dct_team_list.dct-list-1{min-height:300px}
/* ======================= Different Color=========================*/
.dct_team_list.orange{border:3px solid orange}
.dct_team_list.orange .et_pb_team_member_image{border:3px solid orange}
.dct_team_list.orange:after,.dct_team_list.orange:before{background:orange}
.dct_team_list.orange .et_pb_member_social_links li a{border:1px solid orange;background:orange;}
.dct_team_list.blue{border:3px solid #00bfff}
.dct_team_list.blue .et_pb_team_member_image{border:3px solid #00bfff}
.dct_team_list.blue:after,
.dct_team_list.blue:before{background:#00bfff}
.dct_team_list.blue .et_pb_member_social_links li a{border:1px solid #00bfff;background:#00bfff;}
.dct_team_list.pink{border:3px solid #ff1493}.dct_team_list.pink .et_pb_team_member_image{border:3px solid #ff1493}
.dct_team_list.pink:after,.dct_team_list.pink:before{background:#ff1493}
.dct_team_list.pink .et_pb_member_social_links li a{border:1px solid #ff1493;background:#ff1493;}
/* ======================= Responsive=========================*/
@media (max-width:1199px){.dct_team_list .et_pb_member_social_links li{margin-right:0}
.dct_team_list .et_pb_team_member_description{position:relative;top:0;width:100%}
.dct_team_list .et_pb_team_member_image{margin:0 auto;margin-top:20px;float:none}
.dct_team_list .et_pb_team_member_description .et_pb_module_header{text-align:center;margin-top:20px}
.dct_team_list .et_pb_team_member_description .et_pb_member_position{text-align:center}
.dct_team_list .et_pb_team_member_description .et_pb_team_short_description{padding-right:30px;padding-left:30px;
text-align:justify}}@media only screen and (max-width:980px){.dct_team_list{max-width:550px;margin:0 auto}}
@media only screen and (min-width:768px) and (max-width:1199px){
.dct_team_list .et_pb_team_member_image{width:280px;display:block}
.dct_team_list .et_pb_team_member_description{display:block}}
-> Copy style code from DCT_TEAM_LISTVIEW.css file and paste on Divi -> Theme Options -> General -> Custom CSS .
See Image
FOR SIMPLE EFFECT USE CLASS “dct_team_list” ON PERSON MODULE .
For SINGLE ROW USE CLASS “dct_team_list dct-list-1” on PERSON MODULE .
