Anima tu contenido con el efecto de escritura en Elementor
Elementor te permite añadir pequeños toques interactivos que mejoran notablemente la experiencia del usuario en tu sitio web. Una opción para ello es el efecto de escritura de texto.
Cómo funciona el efecto de escritura
Este efecto simula que el texto se va escribiendo lentamente solo o palabra a palabra. Puedes reproducir la sensación de que alguien está escribiendo en tiempo real. Se activa automáticamente al cargar cada sección.
Cómo añadir el efecto de escritura en Elementor
Para añadir el efecto de escritura en elementor no es suficiente añadiendo el widget, también se tiene que colocar código javascript y código css, esos códigos te dejo mas abajo con un video donde explico paso a paso como aplicarlo
js para efecto de maquina de escribir en elementor
<script type="litespeed/javascript" data-src="https://cdn.jsdelivr.net/npm/typed.js"></script> <div class="autotyping">AGENCIA DE <span class="typing_text"></span></div> <script type="litespeed/javascript">var typed=new Typed(".typing_text",{strings:["MARQUETING DIGITAL","DESARROLLO WEB","DISEÑO WEB","POSICIONAMIENTO SEO","MARKETING DE CONTENIDO"],typeSpeed:100,backSpeed:60,loop:!0,cursorChar:'|️',})</script>
Css para dar estilos al efecto de movimiento
<style>.autotyping {
font-family: 'Playfair Display', serif;
color: #FFF;
font-size: 40PX;
font-weight: 800;
text-align: center
}
.autotyping>span {
color: #FFDC00;
font-size: 40PX;
font-weight: 700;
}
/*Shrinking for tablet*/
@media (min-width: 481px) and (max-width: 768px) {
.autotyping {
font-size: 30PX;
font-weight: 800;
}
.autotyping>span {
font-size: 30PX;
font-weight: 700;
}
}
/*Shrinking for mobile*/
@media (max-width: 480px) {
.autotyping {
font-size: 20PX;
font-weight: 800;
text-align: center;
}
.autotyping>span {
font-size: 20PX;
font-weight: 700;
}
}</style>
