Have you ever wanted to present create a product card with Elementor ?
This is what we will show you in this tutorial. To get a fairly precise idea of ​​what we will be talking about today, we invite you to watch the following video:
This tutorial is about presenting products that are shoes by highlighting their sizes, colors and the buy button of each. When you hover over each of the cards, this information will appear. Here is a brief summary of what we will do.
To follow this tutorial, we invite you to find pictures of shoes and to have a Pro version of Elementor. If you don't have it yet, click this link to get it.
But let's come back to what we're here for.
Let's create a page and modify it with Elementor.
In this one, let's choose a structure with 3 columns. Let's settle it height on min height , the minimum height on VH and set the cursor to 100.
In the Style tab, choose the background color to #130640
In the middle column insert a Image widget by selecting a shoe image from your library.
Go to the Style tab and in the image property set the width to 80
Then drag a Title widget and enter the title Nike shoes - This is an example, it could be a whole other brand -
Read also: How to Optimize Your Website Layout with Elementor
Set the HTML Tag to H3 and center the alignment
Go to the Style tab and change the text color to white color
Change the typography too
Then drag a Inner Section widget below the Title widget that you inserted above.
By default this widget will offer you 2 columns, delete one of them. In this Inner Section widget, Insert a Title widget.
Give it as a title Cut : and set the HTML Tag to Team.
In the Style tab, change the Title color, Size to 15 and Fat to 300
In the Advanced tab, set only the Right margin to 5 and in the property Positioning select Inline (Auto).
Add in the same Inner Section a Button widget with for Text 8 and the icon spacing on 0.
Read also: How to scroll through a long image of a portfolio with Elementor
In the Style tab, change the text color and the background color of the button respectively to Black and White and in the Internal Margin enter 6-10-6-10 respectively for the Internal Top-Right-Bottom margins -Left.
On the Advanced tab, set only the left margin to 5, and in the Positioning property, select Inline (Auto).
Duplicate this button 3 times and change the text of the last 3 buttons to 9,10,11 - you can do this also using the letters S, M, L, XL, XXL-
Click edit section and set Horizontal Alignment to Center
Then duplicate this Internal section -Inner Section- and modify Size by Color remove 3 buttons and on the one that will remain erase the button text.
In the tab Contents of the Button, select the Circle icon from the icon library, click Insert to add it into the button.
In the Style tab, give size 24 to the typography and link the Internal margins and enter 0. In the background color set the transparency to min and then you can change the color of the text to blue for example.
Then duplicate this button 3 times and change the colors of the other two to yellow and red. Then click on the inner section to edit it and on the Advanced tab set the Top and Bottom margins to -5 and 10.
Now we are going to add a Button widget below the second Inner Section Widget, enter as text Buy now and Alignment to Center. In the Style tab, set the button to White and the button text to Black, then set all border radii to 20.
Select the main column we worked on and set the alignment Vertical on Environment, in the Style tab, choose the Background type as Dégradé and as Type select Radial then on the main color set the transparency and the location to 94. For the second color, set the location to 77 and the radius of the edges over 10.
On the Advanced tab, set the margins to 0-35-0-35 and the inner margins to 50-20-50-20.
You can then hide the panel to see what your work looks like. You will see that your card is very pretty, but we are going to bring it to life by animating certain sections. And for that we are going to animate the Size, the Color and the buy button.
See also: How to change header on page scrolling on Elementor
Let's first section the first Internal section which displays the size of the product and on the Advanced tab, define Fade In Up as Movement Effect - Entry Animation and animation delay on 300.
Let's do the same with the internal section which displays the colors but with an animation delay of 800. For the buy button, its delay will be 1000
Now we are going to assign the class hide first Inner Section and Buy Button. Select the first Inner Section, in the Advanced tab and in the Advanced property enter hide-first in the CSS Classes field. Do the same for the other Inner Section and for the buy button.
We are therefore going to add CSS code that will animate the entire column. Copy the following code:
selector {
height: 400px;
display: flex;
}
/ * CSS for Show / Hide * /
selector .hide-first {
display: none;
}
selector: hover .hide-first {
display: block;
}
/ * Image Transformation * /
selector img {
transition: ease .5s;
}
selector: hover img {
transform: translate (-20px, -40px) rotate (-25deg) scale (1.4);
}
/ * Mobile overview * /
@media (max-width: 767px) {
selector: hover img {
transform: translate (-20px, 0px) rotate (-10deg) scale (1);
}
selector {
margin: 50px 10px;
}
}
Select the column to modify it and go to the Advanced tab and in the Custom CSS field, paste this code.
NB: You should know that this option is only available if you have the Pro version ofElementor.
If it is done, your map will animate on mouseover while by default hiding the sizes, colors and the buy button.
Regarding the explanation of the code, the comment part gives an overview. But by modifying the values ​​you will understand what each instruction is for.
See also: How to add two buttons side by side in the same column with Elementor
If everything works normally, duplicate this column twice and delete the other empty columns.
All you have to do is replace the images and titles of the other blocks and finally preview your work.
You have just created a beautiful product card.
Get Elementor Pro Now!
Conclusion
So ! That's it for this tutorial which shows you how to make a product card with Elementor. If you have any concerns on how to get there let us know in the Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
