Creative Team Member Card Design with Cool Hover Effect using Elementor | Elementor Tips and Tricks

hey what's going on guys today i'll show you how you can create this kind of awesome card effect on your website with elementor you can apply this effect especially for your team member area and you can see it's looking more attractive than the basic looking image box we can achieve this effect so easily by adding a few lines of custom css so without further ado let's get started okay so here you can see we have created a section and inside this section we have added some text using the heading widget and after this heading first of all i want to add an inner section so let's type this under here and i want to make this a four column layout so let's add a new column here and also add a new column and inside this first column first of all i want to add an image so let's drag this here and i want to add an image select this one okay after this image i want to add an heading widget so from here i want to add this okay here i want to add the name of this team member so let's give her a name and after that i want to add her designation so let's duplicate this heading and here i want to write our designation and after that here i want to add some social icons for this team member so from here you can add their social profile link to these icons so here i wanna search for social icons i wanna drag this one okay here first of all i wanna change the facebook icon so let's go to this icon settings and here search for facebook and go to all icons and i want to choose this light one okay and for twitter it's okay and after that for this one instead of youtube i want to add the link in profile okay let's go to all icons and choose this one and after that i also want to add an skype icon so let's click on add item and search for skype all right so we have put it all the content for our team member card now first of all let's design our content so first of all let's go to the image settings and go to the style tab and here i want to select its width to 50 percent and also set the height to 200 pixel or 180 okay perfect but here you can see this image looks a little bit distorted so to get rid of this let's set the object fit to cover and from here i also want some border radius for this image so let's make it to six pixel then let's design this heading widget so let's click on here and first of all i want to adjust this element to center and from the style i wanna set its color to fully white so let's make it to white but you cannot see this text right now because our background is also white so for this i want to make a background for this column so let's go to this column settings and go to style and from this background option i want to set a gradient background so let's click on gradient option and from here we can pick two colors for the gradient and here let's choose our first color i want to make it fully black and for our second color i want to make it to this kind of radish color okay so right now let's go back to designing this heading so here i wanna set the font family for this heading to my favorite font poppins and also change the font size to 20 pixel and after that for the second heading i want to apply the same style so let's copy the style from here and also paste it for this one okay but for this heading i want this font size little bit smaller so let's go to this style settings and from this typography i want to make its font size to 13 pixel and let's also reduce the font weight i wanna set it to 400 okay so after that for this social icons let's go to the style and i don't wanna make the official color for this icon so let's make it to custom and here for changing the background color let's select the primary color and i want to make it fully white but let's reduce the transparency for this color and then from here you can also reduce the size of this icon i want to make this to [Music] 16 pixel and here i also want to add some spacing so make it to 12 and here let's make these icons to fully rounded so i want to make the border radius to 20 pixel okay that looks good but here we need to adjust some spacing for the headings so for this one here i want some spacing at the top so let's go to its advanced settings and go to margin and at the top i want to make 12 pixel margin and at the bottom i want to reduce this margin so let's give some negative margin here 14 pixel okay and for our this heading here at the bottom i need some space so make the bottom margin to 5 pixel and lastly i want some padding for our whole column so go to this column settings here and go to advanced and first of all for the column i want here 10 pixel padding from each side of this column but at the top i want some more padding so let's make it to 45 pixel and at the bottom i want to make it 240 and here i also want to add some spacing between each of these columns so for this let's add some margin here to 15 pixel okay and after that like this image i also want a rounded corner for this column so go to style settings and from this border option let's add a border radius of 10 pixel okay right now our section looks good but here i also want to add an background overlay image for this column basically here i want to add a wavy background image at the top of this column here so first of all we need to create this wavy background image so for this let's go to this website this is app.hiki.app so from here you can easily create this kind of wavy background image i will also put that link on the description you can get this from here okay so first of all here i want to make the direction of this image at the top so from here let's change this direction to top and from here i don't want this background color so let's hide this color from here and from this field option you can change the background color for this wavy background okay so we will use this image for our this section so here i want to add a yellow color like this one okay so first of all let's pick this color from this image for this let's go to any color picker option we will go to this background option from here and click on this color and here you can see a option color sampler so let's click on here and after that let's click on this image and you can see this option will automatically pick some colors from this image okay we will select this yellowish color so let's click on here and you can see this color code is added right here so let's copy this from here and here we don't want to use this color as our background so let's clear this from here and again go to this website and here we paste our copied color code okay now you can see for our background image we can successfully add this color all right and under here you can see a shuffle button so if you want to change the shape of this wave you can randomly generate this shape from here you can choose any shape by shuffling this from here okay let's select this one right now i want to save this as a png image so let's click on png and our image is successfully saved so let's go back again to our page and from here i want to add this background image so let's click on here and upload this image click on insert media and here first of all i want to change the position for this image so let's make it to top center and also i want to make the size to cover okay but we cannot see it properly so we need to increase the opacity for this image to fully one okay the first member of our team member section is successfully completed now we need to simply duplicate this section so let's click on duplicate okay i have duplicated these three times and here i want to delete the remaining empty column so let's delete this so this and here for our second column i want to change this image and here for this column i want to set the background image color to the red color from this image so let's go to the column settings go to style go to background overlay option click on color sampler and click on this image okay we can see this red color so let's click on here and i want to copy this red color from here and let's clear this and we will paste this color at this place okay and here i also want to change this shape okay and then save this image so let's upload this image at here okay and obviously i need to change the name for this team member and also the designation okay and following the same procedure we will also change our remaining items so let's quickly change this okay we have updated all of our content and right now it's look really nice but here one last thing we need to do we need to add the cool animation for each of our team members so for this let's go to the column settings again and here go to advanced and go to custom css and here you need to write down some custom css and obviously you need to have the elementor pro version to write down any kind of custom css here i also put the link of the elementary pro in my description if you didn't have you can easily get it from here okay right now let's paste our css code here and after pasting that you can see by default it looks like an image but when we hover over on that you can see this nice transition this image looks smaller and these social media icons comes from this bottom very nicely and here is also and fading effect for these two headings and here all of these transitions all together looks very very cool so here you can see i have added these few lines of custom css but don't worry about this i also put this code snippets link on my description you can easily get it from my website okay and here you need to only care about these three things so here you can see this is our image height and this is the image width so this image height and the image width need to be identical with the image height and width we have set it from this option right here and after that here you can also see the padding top is 45 pixel so this padding top is also need to be same with the padding top from here this is also 45 pixel so we need to match those values with our settings otherwise this didn't work properly so we need to make sure that and here we don't have to bother with rest of our coding so right now i want to copy this code from here and i also want to add this transition for our remaining columns so let's go to the column settings for this one and go to advanced custom css and paste this code for this one okay now this column is also working with noise transition and let's go to this one paste this and also for this one paste this so right now let's update this and go to our preview okay here you can see this nice transition which looks really very cool okay lastly i want to check this with all of our devices so let's go to this responsive mode and first of all i want to go to the tablet devices so first of all here we need to make the column to 50 percent of our screen so go to the column settings and go to layout i want to make it to 50 percent so this one 250 percent okay now this also looks cool on our tablet devices and then if we go to mobile device okay now this also looks cool okay that's how you can create nice transition in your team member section if you enjoy this tutorial then don't forget to like and subscribe i'll see you on my next

Channel: Make Dream Website

Views: 2,847

Keywords: Team Member Card Design Elementor, team members elementor, elementor card design, team member design, team member widget elementor, team member card, team members wordpress, team member plugin, team showcase wordpress plugin, elementor image box, card hover effect wordpress, image hover effect elementor, image hover effect wordpress, wordpress hover text over image, elementor tips and tricks, elementor tips, elementor tricks, elementor advanced design, elementor design tricks

Id: UOh-FTv7_0M

Length: 16min 26sec (986 seconds)

Published: Tue Jul 27 2021