Get Ready Elementor Templates

How To Make Digital Marketing Agency Website Elementor Free

Subscribe To My YouTube Channel For More Upcoming Videos

Icon Gap Style CSS


 

Icon Gap Style CSS Classes

icon-fix-gap

 

Dual Text Shadow CSS

.dual-text .ekit-heading--title > span{
    box-shadow: 8px 8px 0px #000000;
}

 

Dual Text Shadow CSS Class


dual-text

 

Button Icon Size CSS


.btn .elementor-button .elementor-button-icon{
    font-size: 20px;
}

 

Button Icon Size CSS Class


btn

 

Marquee Style CSS


 .marquee-img {
  overflow: hidden;
}

.marquee-img > div {
    gap: var(--gap);
}

.marquee-img .elementor-widget-image {
  flex-shrink: 0;
  will-change: transform;
}

.marquee-img .elementor-widget-image img {
  display: block;
}


.marquee-text-container {
  overflow: hidden;
  width: 100%;
}

.marquee-wrapper {
  display: flex;
  width: max-content;
}

.marquee-text-container .elementor-widget-heading {
  flex-shrink: 0;
  white-space: nowrap;
  padding-right: 2px; /* spacing instead of gap */
}

 

Marquee Style CSS Classes


marquee-img
marquee-text-container

 

Marquee Style JS Code









 

Sticky Position Style CSS


.sticky {
    position: sticky;
    top: 20px;
}

 

Sticky Position Style CSS Class


sticky

 

Video Play Button Style CSS


.video-play .elementor-custom-embed-play{
    padding: 25px;
    background: white;
    line-height: 0;
    border-radius: 100%;
}

.video-play img{
    height: 608px;
    width: 600px;
}

@media (max-width: 1024px){
    .video-play img{
    height: 550px;
    
}
}

@media (max-width: 767px){
    .video-play img{
    height: 290px;
    
}
}


 

Video Play Button Style CSS Class


video-play


 

Banner Heading Style CSS


.dual-text .ekit-heading--title > span {
    box-shadow: 8px 8px 0px #000000;
}


 

Banner Heading Style CSS Class


dual-text


 

Icon Gap Style CSS


.icon-fix-gap{
    line-height: 0;
}

.icon-fix-gap .elementor-icon{
    line-height: 0;
}


 

Icon Gap Style CSS Class


icon-fix-gap


 

Blog Post Style CSS


.blog-post .wpr-grid-extra-icon-right{
    font-size: 20px;    
    }
    
.blog-post .wpr-button-effect{
    display: inline-flex!important;
}

.blog-post .wpr-grid-item-inner{
        display: flex;
    flex-direction: row-reverse;
}

.blog-post .wpr-grid-item-below-content{
    width: 560px!important;
}

.blog-post .wpr-grid-media-wrap{
    width: calc(100% - 560px)!important;
}

@media(max-width: 1024px){
    .blog-post .wpr-grid-item-below-content{
    width: 50%!important;
}

.blog-post .wpr-grid-media-wrap{
    width: 50%!important;
}
}



.blog-post .wpr-grid-image-wrap, .blog-post .wpr-grid-media-wrap{
    display: flex;
    height: 440px;
    width: 100%;
}

.blog-post img{
    object-fit: cover;
}

.blog-post .wpr-grid-item{
    overflow: hidden;
}

@media(max-width: 767px){
    .blog-post .wpr-grid-item-inner{
    flex-direction: column;
}
    
    .blog-post .wpr-grid-item-below-content{
    width: 100%!important;
}

.blog-post .wpr-grid-media-wrap{
    width: 100%!important;
}

.blog-post .wpr-grid-image-wrap, .blog-post .wpr-grid-media-wrap{
    
    height: 290px;
   
}
}


.blog-post-grid img{
    height: 280px;
    object-fit: cover;
}

.blog-post-grid .wpr-grid-item-below-content{
    overflow: hidden;
}

.blog-post-grid .wpr-grid-item{
    transition: all 0.3s ease;
}

.blog-post-grid .wpr-grid-item:hover {
    box-shadow: 4px 4px 0px 0px #B88DFF!important;
}

.blog-post-grid .inner-block{
    background-color: #F5F4F1;
}

/*==================*/

.blog-post .elementskit-post-body {
    border-radius: 0 0 24px 24px;
}

.blog-post .elementskit-entry-header img {
    height: 280px;
    object-fit: cover;
}


 

Blog Post Style CSS Classes


blog-pos
blog-post-grid