Tutorial de animación de texto fundido con Elementor

En el diseño de páginas web.Animación de textoPuede dar lugar a una experiencia web más atractiva e interactiva para los usuarios. En este artículo, le explicaré cómo implementar texto en Elementor.Efecto de animación de fundido línea a línea.

¿Por qué utilizar la animación de fundido?

La animación de fundido no sólo hace que el contenido de la página sea másvívidamentey también dirige la atención del usuario hacia el contenido clave. Al mostrar el texto línea por línea, puede evitar la saturación de información y mejorar la experiencia del usuario.

Pasos para implementar una animación de fundido línea a línea

1. Instale y active Elementor

Antes de utilizar cualquier funcionalidad de Elementor, asegúrese de que el plugin de Elementor está instalado y activado. Puede instalarlo siguiendo los pasos que se indican a continuación:

1. Inicie sesión en el backend de WordPress.
2. Navegue hasta "Plugins > Instalar nuevo plugin".
3. Buscar "Elementor" y, a continuación, haga clic en "Ahora instalando".

4. Una vez finalizada la instalación, pulse "active".

Si ha instalado el Elementor ProLa animación también está disponible con funciones de animación más avanzadas.

2. Añadir widgets de texto

1. Abra o cree un nuevoPáginas/ArtículosA continuación, utilice Elementor para editarlo.
2. En el panel de widgets de la izquierda, arrastre el icono "editor de texto" a cualquier lugar de la página.

3. Uso de las funciones de animación propias de Elementor

1. Seleccione el cuadro de texto añadido y, a continuación, en el panel de edición de la izquierda, haga clic en "alto nivel".

2. Desplácese hasta "efecto de movimiento", pulse para ampliar.

3. En "Ir a animación" En el menú desplegable, seleccione "fundirse"(Fundido de entrada).

4. Efecto de fundido

Para mostrar el texto línea por línea, el contenido del texto puede procesarse mediante segmentación:

1. texto largodividir en varias líneas, cada línea puede colocarse individualmente en elEn diferentes widgets de texto.
2. Configure la animación de entrada por separado para cada widget de texto, asegurándose de que cada cuadro de texto está configurado como "fundirse".
3. Al ajustar elTiempo de retardo para cada cuadro de textopara conseguir el efecto de visualización línea a línea. Seleccione los widgets de texto sucesivamente, en el menú "efecto de movimiento", ajuste elretardo de animación(por ejemplo 0,2 segundos(matem.) género0,4 segundosetc.), para que el texto se muestre secuencialmente, línea por línea.

5. Efecto de fundido avanzado (obligatorio) Elementor Pro)

Si dispone de Elementor Pro, también puede configurar efectos de animación más detallados para cada párrafo de texto. Ejemplo:

1. Abra".efecto de movimiento"Parte.
2. Habilitar"efecto de desplazamiento", selección de transparencia "fundirse".

3. Ajuste la velocidad de la animación, la dirección y el punto de activación para que el texto se vaya desvaneciendo línea a línea a medida que el usuario se desplaza por el párrafo.

6. Vista previa y liberación

Una vez que haya completado todos los ajustes de animación, haga clic en la esquina inferior izquierda de la página "avances" para comprobar que el efecto es el esperado. Si todo está bien, pulse el botón "escriba a" para impulsar una página en directo con una animación de texto fundido línea a línea.

resúmenes

Con Elementor, es fácil implementar animaciones de fundido de texto línea a línea visualmente atractivas que mejoran la experiencia del usuario. Este efecto es especialmente adecuado para páginas que necesitan mostrar contenido importante, como descripciones de servicios, páginas de marketing y páginas de aterrizaje. El uso adecuado de la animación puede hacer que su sitio web sea más dinámico y aumentar la atención del usuario al contenido de la página.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres