How to Design Custom Blog Page in WordPress with Elementor Pro

 

 

1. Code snippet in Gradient banner Section:

selector{
    -webkit-mask-image: linear-gradient(to top,transparent,rgba(0,0,0,.013)8.1%,rgba(0,0,0,.049)15.5%,rgba(0,0,0,.104)22.5%,rgba(0,0,0,.175)29%,rgba(0,0,0,.259)35.3%,rgba(0,0,0,.352)41.2%,rgba(0,0,0,.45)47.1%,rgba(0,0,0,.55)52.9%,rgba(0,0,0,.648)58.8%,rgba(0,0,0,.741)64.7%,rgba(0,0,0,.825)71%,rgba(0,0,0,.896)77.5%,rgba(0,0,0,.951)84.5%,rgba(0,0,0,.987)91.9%,#000);
    mask-image: linear-gradient(to top,transparent,rgba(0,0,0,.013)8.1%,rgba(0,0,0,.049)15.5%,rgba(0,0,0,.104)22.5%,rgba(0,0,0,.175)29%,rgba(0,0,0,.259)35.3%,rgba(0,0,0,.352)41.2%,rgba(0,0,0,.45)47.1%,rgba(0,0,0,.55)52.9%,rgba(0,0,0,.648)58.8%,rgba(0,0,0,.741)64.7%,rgba(0,0,0,.825)71%,rgba(0,0,0,.896)77.5%,rgba(0,0,0,.951)84.5%,rgba(0,0,0,.987)91.9%,#000);
    opacity: 0.4;
}

 

2. Code snippet in Post Info Widgets:

selector a{
    text-decoration: none;
}

 

3. Code snippet in Custom Loop 2nd Section:

selector{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

 

4. Code snippet in Archive Posts Widget:

selector article{
    position: relative;
}
selector article .post-hover{
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
selector article:hover .post-hover{
    opacity: 1;
}
selector article .post-hover .elementor-widget-wrap .elementor-element{
    transition: all 0.3s ease-in-out;
    transform: translateY(20px);
    opacity: 0;
}
selector article:hover .post-hover .elementor-widget-wrap .elementor-element{
    transform: translateY(0);
    opacity: 1;
}
selector article .post-hover .elementor-widget-wrap .elementor-element:nth-child(1){
    transition-delay: 0s;
}
selector article .post-hover .elementor-widget-wrap .elementor-element:nth-child(2){
    transition-delay: 0.1s;
}
selector article .post-hover .elementor-widget-wrap .elementor-element:nth-child(3){
    transition-delay: 0.2s;
}

@media (max-width:767px){
selector .elementor-section > .elementor-container{
    min-height: 370px !important;
}
selector .elementor-section{
    padding-left: 20px !important;
    padding-right: 20px !important;
}
selector .elementor-heading-title{
    font-size: 20px !important;
}
selector .post-hover .elementor-heading-title{
    font-size: 24px !important;
}
selector .elementor-posts {
    --grid-row-gap: 40px;
}
}

 

5. Code snippet in Custom Loop 3rd Section:

selector{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}
selector .elementor-widget-wrap, selector .elementor-element{
    position: static;
}
selector a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}