Cómo animar texto en WordPress con Shortcodes Ultimate










  • Animar fragmentos de texto puede ser una forma eficaz de captar la atención de un visitante. Es fácil animar texto en WordPress si elige el complemento adecuado para el trabajo. Si desea evitar la codificación CSS complicada y animar el texto con un código abreviado simple, lo tenemos cubierto.

    Usaremos el complemento Shortcodes Ultimate para hacer animación de texto en WordPress. Con 60 impresionantes opciones de animación , el complemento seguramente tendrá algo perfecto para su aplicación.

    Vale la pena mencionar que Shortcodes Ultimate hace mucho más que solo animar texto. Barras de progreso, comillas, información sobre herramientas, controles deslizantes, carruseles, tablas, y eso es solo una muestra.

    Estamos interesados ​​en la animación de texto en este tutorial, pero tómese un tiempo para familiarizarse con el complemento. Puede cubrir muchas bases (y reemplazar muchos otros complementos).

    Instalación del complemento final de códigos cortos

    Inicie sesión en su panel de administración de WordPress.

    En la navegación de la columna izquierda, pase el mouse sobre el enlace "Complementos" y haga clic en el enlace "Agregar nuevo".

    pase el mouse sobre el enlace "Complementos" y haga clic en el enlace "Agregar nuevo"

    En el cuadro "Buscar complementos...", ingrese "Shortcodes Ultimate".

    busque el complemento WordPress Shortcodes Ultimate

    Una vez que haya localizado el complemento, haga clic en el botón "Instalar ahora".

    haga clic para instalar el complemento WordPress Shortcodes Ultimate

    Finalmente, haga clic en el botón "Activar".

    haga clic para activar el complemento WordPress Shortcodes Ultimate

    Configuración de códigos cortos Ultimate

    En la navegación de la columna izquierda, pase el mouse sobre el enlace "Códigos cortos" y haga clic en el enlace "Configuración".

    haga clic en el enlace "Configuración"

    La mayoría de las configuraciones disponibles se pueden dejar con los valores predeterminados asignados por el complemento. Lo único que puede querer cambiar aquí es habilitar "Widgets de texto" en la sección "Habilitar códigos cortos en".

    casilla de verificación para habilitar widgets de texto

    Si solo va a animar texto en publicaciones o páginas, deje la casilla sin marcar y omita todas las configuraciones.

    Las opciones de animación, como la duración y los tiempos de retraso, se establecen mediante variables en los códigos abreviados individuales. Llegaremos a eso en un minuto.

    Bien, vamos a animar un poco de texto en WordPress

    Para comenzar, animaremos una línea de texto en una página existente.

    Abra una página en el editor de WordPress y busque el texto que desea animar.

    Dado que estamos animando una línea de texto en un bloque existente, no usaremos un bloque de código abreviado. En su lugar, agregaremos el shortcode a un bloque de párrafo existente.

    Si usa el editor de WordPress "clásico", usará el mismo proceso que mostramos aquí.

    El código abreviado es su_animate . Solo se requiere una variable, "tipo". Entonces, un shortcode simple completo se vería así:

    [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][su_animate type=”bounceIn”]Línea de texto para animar.[/su_animate][/ht_message]

    Eche un vistazo a la lista de tipos disponibles para ver las diferentes opciones de "tipo".

    Así que rodee el texto que desea animar con el código abreviado. Coloca [su_animate type=”bounceIn”] al principio del texto y [/su_animate] al final.

    agregar shortcode a la línea de texto

    Ahora guarde o publique la página y verá su texto animado en funcionamiento.

    animación en la página

    Lo sé, es una imagen fija, ¿qué puedo decir? No captura el movimiento del texto.

    Si está siguiendo esta animación de WordPress en casa, puede verla en su propio sitio.

    Configuración del tiempo de duración del texto animado

    Aquí es donde resulta útil poder animar texto sin saber CSS. El código requerido para configurar la duración y el tiempo de retardo se reemplaza por variables simples de código abreviado. (El CSS en realidad no se reemplaza, por supuesto, simplemente no tenemos que lidiar con eso).

    Bien, comenzaremos con la duración . Como probablemente puedas adivinar, esa es la cantidad de tiempo que tarda en ejecutarse la animación. Usaremos un valor en segundos. Entonces, para hacer que nuestro texto rebote dure cinco segundos, establecemos la duración = “5″ .

    [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][su_animate type=”bounceIn” duration=”5″ ]Línea de texto para animar.[/su_animate ][/ht_mensaje]

    Asegúrese de agregar la variable "duración" después de la variable "tipo".

    agregar variable de duración de shortcode

    Cuando guarda o publica la página, puede ver que el efecto de animación tarda más en reproducirse. Por lo tanto, aumentar la duración no hace que el efecto ágil que vimos en el primer ejemplo continúe por más tiempo. En cambio, el efecto tiene lugar en cámara lenta.

    El aumento del valor de duración se puede utilizar para crear diferentes efectos. Que te gusten esos efectos depende del tipo de impacto que estés tratando de generar.

    La variable de duración funciona con cualquier número del 0 al 20.

    Configuración del tiempo de retraso del texto animado

    Cambiar los controles de valor de retardo cuando comienza la animación. De forma predeterminada, cuando no hay un valor de retraso establecido, la animación comienza cuando se carga la página.

    El valor de retraso le permite crear una pausa antes de que comience la animación. Al igual que la variable de duración, el retraso utiliza un valor en segundos. Entonces, para hacer que nuestro texto rebote cinco segundos después de que se cargue la página, configuramos delay=”5″ .

    [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][su_animate type=”bounceIn” delay=”5″ ]Línea de texto para animar.[/su_animate ][/ht_mensaje]

    Y nuevamente, agregamos la variable "retraso" después de la variable "tipo".

    agregar variable de retraso de shortcode

    Una cosa importante a tener en cuenta es que establecer un tiempo de retraso hace que el texto que estás animando sea invisible hasta que transcurra ese tiempo .

    Entonces, en nuestro ejemplo, el texto no aparece en la página hasta cinco segundos después de que se carga la página. Eso es mucho tiempo para hacer que un visitante espere el texto que desea que vea.

    Al igual que la variable de duración, el retraso funciona con cualquier número del 0 al 20.

    Cómo usar tanto la duración como el retraso cuando animas texto en WordPress

    Si desea utilizar la duración y el retraso juntos, puede hacerlo. Simplemente agregue ambos valores al código abreviado:

    [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][su_animate type=”bounceIn” duration=”5″ delay=”5″ ]Línea de texto a animar.[/su_animate][/ht_message]

    ¿Podemos animar una línea de texto dentro de un párrafo?

    Mas o menos.

    El complemento Shortcodes Ultimate coloca el texto del código abreviado en un <div> de forma predeterminada. Entonces, usar el código abreviado insertará un espacio arriba y debajo del texto.

    Pero hay una variable llamada en línea que coloca el shortcode en una etiqueta <span> en lugar de una etiqueta <div>.

    Para usarlo, inserte una variable inline=”yes” .

    [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][su_animate type=”bounceIn” inline=”yes” ]Línea de texto para animar.[/su_animate ][/ht_mensaje]

    agregando la variable "en línea" al shortcode

    Es posible que deba probar diferentes valores de "tipo", porque usar el efecto en un <span> cambia la forma en que se ven algunas cosas.

    Animación de bonificación oculta

    Hasta ahora, solo hemos hablado de animar texto. Pero el shortcode se puede usar para animar casi cualquier elemento de una página.

    Aquí puse la apertura del shortcode frente a una imagen, luego lo cerré después de la imagen.

    usando shortcode en una imagen

    Eso hace que la imagen se precipite y rebote en su lugar de manera bastante dramática. Es un efecto impresionante, pruébalo.

    Agregar una duración de 10 segundos hace que flote en su lugar de manera más inquietante.

    usando la variable de duración de shortcode en una imagen

    Y mira, ahora finalmente puedo obtener una captura de pantalla del efecto.

    imagen flotando en su lugar

    Todavía es una imagen estática, lo sé, pero entiendes la idea.

    Qué sucede si desinstala el complemento Shortcodes Ultimate

    Si desinstala el complemento, las páginas y las publicaciones que usaron el complemento se verán afectadas. Los códigos cortos del complemento dejarán de funcionar, por lo que los códigos cortos en sí se mostrarán en cualquier lugar donde se hayan utilizado.

    Animación Sin Persuasión para Cualquier Ocasión!

    Hemos visto lo fácil que es animar texto en WordPress usando Shortcodes Ultimate. Es un efecto genial, y como muchos efectos geniales, uno que probablemente deberíamos usar con moderación. Pero para llamar la atención sobre una línea de texto, es difícil de superar.

    Y cuando usa el código abreviado de animación en las imágenes, puede crear algunos efectos inusuales y llamativos. Es divertido intentar aplicar el shortcode de animación a otros elementos de la página también. Pero recuerda, usa el efecto con moderación. Demasiado de algo bueno puede comenzar a volverse molesto y distraer.

    ¿Alguna vez ha intentado agregar una clase de animación CSS a su sitio manualmente? ¿Crees que podrías intentar incluir animación en tu sitio ahora que sabes que es más fácil de hacer?

    Házmelo saber en los comentarios.










  • Subir