On many websites you have a page or a section that shows who is working there or who is working on a project. Let's call this a team members section.
If you look at the bottom
of this page, we have added an example of what that might look like. This example has a nice mouse over effect on the images.
In this tutorial we are going to recreate that example. So follow along.
Let's start with adding a section. In the primary tab set that section under Child Element Layout to Stack Child Elements Horizontally.
Under the Advanced tab go to Typography and set Text Align to middle.
Now add a div and give that div a class of teammembers-box and on the Primary tab under Layout Child Elements set it to Stack Child Elements Vertically, under Horizontal Item Alignment set it to Center and be sure to set the width to 33.33%.
Click on the Advanced tab and set the top padding to 20px and the bottom padding to 10px and the margin left and right to 10px.
Under the advanced tab go to Borders and choose the top border under Currently Editing. Give this a color. We choose our customary green color #719430 but of course you can choose any color you want and set the Width to 6px, the Style to solid and give it a Border rRdius of 10px.
Go to the Effects section and there click on Box Shadow and set the Shadow Color to rgba(61,61,0.1) or choose your own color. The Shadow Horizontal Offset is set to 0px, Shadow Vertical Offset is set to 25px, Shadow Blur is set to 20px and the Shadow Spread is set to 0px.
Now drop in an image inside the div and give it a class of teammember-image. Choose the image you want and set the Width to 293px in the Primary tab.
Now go to the Advanced tab and under Size & Spacing set the top margin to 17px and the bottom margin to 21px.
Now go to the Effects section and set the Transition Duration to 0.4 seconds.
Click on the state button next to the class name and select :hover. On the Advanced tab under Effects choose Box Shadow and set the Shadow Color to rgba(0,0,0,0.29) (again you can choose your own color), Shadow Horizontal Offset to 0px, Shadow Vertical Offset 0px, Shadow Blurr 10px and Shadow Spread to 0px.
Also under Effects on the :hover state go to Transform and click on the Add Transform button. Choose under Transform Type scale and set the Scale X to 1.03 and the Scale Y to 1.03. That's the image done.
Now add a heading element to the div under the image and give it a class of teammember-heading. Type the name of the team member. On the Primary tab set the Text Color to #494c4e or wahetever color you prefer, Font Size is 24px, Font Weight 700 and the Tag is set to H2.
On the Avanced tab under Size & Spacing set the top margin to 7px and the bottom margin to 19px.
Now add the social Media icons element under the heading, give it a class of teammember-social and add your social media channels under the Primary tab. Also under that tab set the Link Target to New Tab, make sure the Layout is set to Row, Icon Size 16px, Space Between Icons 19px, Icon Color #bebdbd (or your preferred color), Icon Hover Color #cccbcb and Icon Style Blank.
Now the last part. Add a text element and type the text you need there (keep it short 2 or 3 lines is more than enough). On the Primary tab set the Text Color to #929aa3 and the Font Size to 16px
On the Advanced tab under Size & Spacing set the left and right padding to 30px, the top margin to 33px and the bottom margin to 45px.
All you now have to do is duplicate the entire div two times and adjust the image, heading, social icons and text for each team member.
If you followed along you now have the exact same team member section as you can see below with your own team members.