- Link Loop items to Post URL using dynamic options of the widgets in the loop or make the whole container a link, but Elementor warns to not use links within inner containers
- Enable flex box container and this tutorial requires Elementor Pro 3.8 or above
- Make Sure the class names of every Loop item are unique
- Separate two class names by a space like this da-card da-face1
- Change the Loop 2 snippet class names as explained in the tutorial
- CSS code can be copied to theme styles under CSS or at page level under the advanced tab of the page where the grid built
Build Elementor Post grids using CSS and Flexbox Container
Learn how to design Elementor Post grids using Elementor Pro 3.8 loop grid builder, custom css and the powerful Elementor flexbox container framework.
This snippet requires the following Themes/Plugins/Services/Tools:
- Elementor Pro (3.8 or Above)
Copy the snippet from below:
/*CSS Grid Code Start/
.da-my-grid .e-loop-document:nth-child(2){
grid-column: 1 / 3;
background: pink;
border-radius:15px 0;
}
.da-my-grid .e-loop-document:nth-child(4){
grid-column: 3/ -1;
background: silver;
border-radius:15px 0;
}
/*CSS Grid Code End*/
/*Start of Loop 1 Code*/
.da-card {
position: relative;
width: 300px;
height: 400px;
margin: 0 auto;
background: #000;
border-radius: 15px;
box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);
}
.da-card .da-face {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.da-card .da-face.da-face1 {
box-sizing: border-box;
padding: 20px;
}
.da-card .da-face.da-face1 h3 {
margin: 0;
padding: 0;
}
.da-card .da-face.da-face2 {
transition: 0.5s;
}
.da-card .da-face.da-face2 h2 {
margin: 0;
padding: 0;
font-size: 50px;
color: #fff;
transition: 0.5s;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.da-card:hover .da-face.da-face2 {
height: 60px;
}
.da-card:hover .da-face.da-face2 h2 {
font-size: 20px;
}
.da-card .da-face2 {
background-image: linear-gradient(40deg, #fffc00 0%, #fc00ff 45%, #00fffc 100%);
border-radius: 15px;
}
/*End of Loop 1 Code*/
/*Start of Loop 2 Code*/
.da-card .da-face{
width: 300px;
height: 200px;
transition: 0.5s;
}
.da-card .da-face.da-face1{
background: #333;
z-index: 1;
transform: translateY(100px);
}
.da-card:hover .da-face.da-face1{
background: #ff0057;
transform: translateY(0);
opacity: 0.2;
transition: 0.5s;
}
.da-card:hover .da-face.da-face1 {
opacity: 1;
}
.da-card .da-face.da-face2{
background: #fff;
padding: 20px;
box-sizing: border-box;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
transform: translateY(-100px);
}
.da-card:hover .da-face.da-face2{
transform: translateY(0);
}
/*End of Loop 2 Code*/