Elementor Call to Action

Call to action title element

Standaard styling

							
					.elementor-widget-call-to-action {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 2/3;
}

.elementor-widget-call-to-action * {
    transition: 1s;
}

.elementor-widget-call-to-action .elementor-widget-container {
    display: flex;
}

.elementor-widget-call-to-action .elementor-cta {
    display: flex;
    flex: 1;
}

.elementor-widget-call-to-action .elementor-cta__title {
    order: 2;
}

.elementor-widget-call-to-action .elementor-cta__button-wrapper {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}

.elementor-widget-call-to-action .elementor-cta__description {
    margin: 0;
    order: 0;
}

.elementor-widget-call-to-action:hover .elementor-cta__button-wrapper {
    max-height: 100px;
    overflow: hidden;
    opacity: 1;
    order: 9;
}

				
			
		

Reveal button

							
					/*******************/
/** reveal button **/
/*******************/

.cta-button-reveal {
    
    .elementor-cta__title {
        margin: 0;
    }
    
    .elementor-cta__button-wrapper {
        overflow: hidden;
        max-height: 0;
    }
    
    &:hover .elementor-cta__button-wrapper  {
        max-height: 999px;
    }
}

				
			
		

Call to action title element

call to action

Meer informatie

Lint

							
					/********************************************/
/** custom cta with class ".specialoffer"  **/
/********************************************/

.webchimp .specialoffer {
    border-radius: var(--border-radius-m);
    background: var(--color-primary);
    padding: var(--space-m);
    
    .elementor-cta__content {
        padding-top: 1.5rem!important;
        display: flex;
        flex-direction: column;
    }
    
    .elementor-cta__bg {
        background-repeat: no-repeat;
        background-size: contain;
    }
    
    .elementor-cta__title {
        font-size: var(--step-1);
    }
    
    .elementor-ribbon {
        position: absolute!important;
        height: auto;
        width: auto;
        
        .elementor-ribbon-inner {
            transform: rotate(0);
            color: #FE6055;
            background: none;
            font-weight: bold;
            margin: 0;
            padding: 0;
            width: auto;
            line-height: 1;
            font-size: 15px;
            letter-spacing: .05rem;  
        }
    
    }
    
    .elementor-cta__button-wrapper {
        margin-top: auto;
    }
}
				
			
		

organisatiesVersterk de professional, vergroot het resultaat

Sterke organisaties bouwen op mensen die zichzelf én elkaar durven laten zien. Mijn begeleiding versterkt de basis: psychologische veiligheid, vertrouwen en samenwerking – precies de voorwaarden voor teams die duurzaam presteren. Vanuit die stevigheid ontstaat ruimte voor betere resultaten én meer werkplezier. Met maatwerkprogramma’s voor teams en leiders vertalen we persoonlijke ontwikkeling naar concreet toepasbare verandering in de organisatie.

ribbon

Icon position

							
					/**********************/
/* Icon pos absolute  */
/* Add .iconposition  */
/**********************/

.iconposition .elementor-cta__title {
    padding-right: var(--space-l);
}

.iconposition .elementor-icon-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: auto;
    padding: var(--space-s); 
}
				
			
		

preheader

							
					/******************/
/* preheader      */
/* add .preheader */
/******************/

.preheader .elementor-cta__title span {
    display: block;
    width: fit-content;
}
				
			
		

push button down

				
					/*************************/
/* push button to bottom */
/*************************/

.buttondown {
    display: flex;

    .elementor-cta__content {
        display: flex;
        flex-direction: column;
    }

    .elementor-cta__button-wrapper {
        margin-top: auto;
    }
}

Custom ribbon

				
					.customribbon .elementor-ribbon {
    position: absolute;
    right: var(--space-l);
    top: var(--space-l);
    left: auto;
    height: auto;
    width: auto;
    transform: rotate(0);

    .elementor-ribbon-inner {
        transform: rotate(0);
        color: white;
        background: none;
        font-weight: bold;
        margin: 0;
        padding: 8px;
        width: auto;
        line-height: 1;
        font-size: 15px;
        letter-spacing: .05rem;
    }

}

Even sparren?

Een veilig gesprek zonder oordeel. Concrete inzichten en volgende stappen. Volledige vertrouwelijkheid

Plan en gratis meedenk gesprek

Custom “Call to action” styling. See “Custom CSS” field.