Revolution Slider – Capitulo 02 – Textos Animados

Bienvenidos al capítulo 02 del Curso Avanzado de Revolution Slider. En este capítulo vamos a aprender a crear textos animados con Revolution Slider sobre una serie de diapositivas para nuestras cabeceras de las webs. Como no se puede correr antes de andar, vamos a comenzar por crear un cabecero sencillo. Luego le insertaremos unos títulos y por último los animaremos un poco para que podáis ver el efecto. El trabajo que vamos haciendo lo vamos a colocar aquí, en el curso, para que podáis comprobar los resultados.

Antes de nada:

¿Para que empresa es el Slider?

En nuestro caso, hoy vamos a decantarnos por crear un slider para una empresa de Seguridad. Lo primero, como no puede ser de otra manera, es conocer el trabajo de la empresa de seguridad. Si ya hemos recabado la información correspondiente, sabemos que nuestra empresa realiza las siguientes funciones:

1º Instalación de alarmas
2º Instalacion de cámaras de seguridad
3º Vigilantes de seguridad.

Por lo tanto vamos a optar por crear textos animados con Revolution Slider para un Slider con 3 diapositivas. En la primera haremos una inserción publicitaria sobre Alarmas, en la segunda diapositiva nos centraremos en las cámaras de seguridad y en la ultima en la vigilancia.

Nota importante: Es posible, que muchas empresas, al ver la potencia de Revolution Slider, piensen que es buena idea poner docenas de diapositivas con todos sus servicios o trabajos. Se trata de un error muy común y vamos a analizar porque no se debe hacer.

En primer lugar, una persona toma la decisión de seguir viendo una web en 7 segundos. Y seguramente perdamos los 2 primeros con la carga de la web si no esta correctamente optimizada. Lo que nos deja apenas 5 segundos libres para llamar la atención de esa persona. Por lo tanto, nuestra primera diapositiva no debe durar mas que 4 segundos, ya que así tendremos un segundo intento para hacer que el potencial cliente se quede, aunque solo sea durante el breve instante que vera la asegunda diapositiva. Si también resulta impactante, tenemos medio camino hecho… Sin embargo, la gente no se va a quedar media hora mirando el slider…

En cuando tenga tomada la decisión de que quiere seguir viendo la web, comenzara a hacer el scroll y adiós al cabecero. Por ese motivo no conviene poner mas de 3 diapositivas, como mucho 4… pero rara vez alguien aguanta mas tiempo viéndolas.

¿Video en lugar de imágenes estáticas?

Pues por lo que hemos podido ver en estos años depende… Si lleva música, desde luego que no, porque no sabéis si la persona esta viendo la web desde su casa o desde su trabajo… Si eso empieza a sonar en un momento inadecuado, esa persona cierra la web de la misma. Por otro lado, se ha demostrado que los vídeos que comienzan de manera automática no gustan a la gente, porque les da la sensación de que ellos no pueden controlar la reproducción de los contenidos.

Una vez que ya tenemos definidas algunas ideas. Usando las imágenes que nos ha proporcionado la empresa, comenzaremos a crear textos animados con Revolution Slider.

Creando la primera diapositiva

En la parte superior del editor de Slider, veréis que tenéis tres cuadros de nuevo. “Static/global Layers”, “#1 Slide” y “Add Slide”. Mas adelante entraremos a analizar para que sirve el primero, pero ahora me gustaría que os quedéis con el segundo y tercero.

añadir nuevo slider

“#1 Slide” hace referencia a la diapositiva que estamos editando ahora, en este caso, la primera de la serie de 3 que vamos a usar, la que corresponde a las alarmas. El botón de “add slide” nos permite añadir una diapositiva nueva, pero rara ver lo usaremos, porque existen otros métodos mas “rápidos” para crear la diapositiva numero 2. Si pasáis el ratón sobre “#1 Slide” podréis comprobar que aparece un pequeño menú desplegable que nos permite duplicar la diapositiva.

Importante: La estética es muy importante. Debemos ser coherentes y seguir patrones, por lo tanto, a la hora de crear la segunda diapositiva, es mucho mas sencillo duplicar la primera, una vez este correctamente configurada y simplemente cambiar las imágenes y los textos. Así conseguimos que se parezcan entre ellas y guarden una consonancia, consiguiendo que al crear textos animados con Revolution Slider obtengamos un resultado mas profesional.

Bloque “Main Background”

Llegados a este punto, vamos a elegir que queremos que aparezca de fondo en nuestra diapositiva. Como veis, por defecto viene marcada la opción “transparent”. ¿Es necesario cambiarla?… Pues depende del resultado que queráis. En nuestro caso vamos a dejar el fondo transparante, porque no se puede “jugar” con él… Lo que haremos será añadir una imagen, a la diapositiva, a la que luego le daremos algunos efectos extra. No obstante, pegamos un repaso a las diferentes opciones.

propiedades del fondo del slider

Background Image: Es simplemente para añadir una imagen de fondo, que siempre aparecerá en nuestro slider. Se puede coger de la librería de imágenes de wordpress.
External URL, es lo mismo, solo que la imagen la tomáis de una web externa.
Transparent: No habrá nada de fondo
Colored: Podeis elegir un color de fondo
Youtube/Vimeo: Se puede usar un vídeo de fondo de cualquiera de estas fuentes.
HTML5 Video: Un vídeo en formato mp4 que subáis a vuestra web y que podréis usar después.

El resto de opciones: “General Settings”, “Thumbnail”, etc las iremos explicando mas adelante, a medida que las vayamos a necesitar.

Como hemos dicho antes, vamos a dejar la opción por defecto que es transparente y bajamos hasta la sección donde podemos editar la diapositiva. Si alguna vez habéis usado un editor de vídeo, podréis comprobar que el funcionamiento es muy similar, con una línea de tiempo en la parte de abajo, donde podréis asignar tiempos a cada elemento.

Insertar una imagen en la primera diapositiva.

Antes de crear textos animados con Revolution Slider debemos tener un fondo sobre los que mostrarlos. Para insertar una imagen de fondo en la primera diapositiva debemos tener claras varias cosas. La primera, es el tamaño que hemos definido en nuestro Slider. En el anterior capitulo os explicaba como poder cambiar estos tamaños. En esta ocasión os voy a poner la configuración que vamos a utilizar para este trabajo. Si la tenéis diferente, lo suyo es que la cambiéis para que quede igual que la mostrada aquí. En la parte superior, arriba del todo haciendo scroll, veréis que podéis alternar entra varias pestañas, una de ellas es “Slider Settings” desde donde podréis ajustar los tamaños. Una vez hecho, botón verde para guardar los cambios y vuelta al editor.

configuración optima para revolution slider

Si no te aclaras con este paso, consulta el Capitulo Anterior

Una vez en el editor vamos pulsar el botón azul “Add layer” que viene a ser “añadir capa”. La capa que vamos a añadir es una imagen, que será la imagen que usaremos de fondo. Como vamos a usar el ancho completo de la pantalla, vamos a seleccionar o usar siempre imágenes de 1980 de ancho. El alto da igual siempre que sea superior al alto que hemos configurado en el Slider.

Importante: Vamos a usar imágenes de 1980px… lo que significa que o las pasáis por el Photoshop y les bajáis el peso, o la vais a liar. No se pueden usar imágenes de 2 mbytes cada una, porque si no el tiempo de carga de la web se va a la porra. Y esta es una realidad comprobada en muchas web realizadas por “profesionales” a los que el SEO les da igual. Esto es un curso avanzado de Revolution Slider, por lo tanto, el resultado tiene que ser profesional en todos los sentidos. Calidad de trabajo, tiempo de carga, SEO, etc…

Os dejamos un link a las tres imágenes, sin derechos de autor, que hemos usado nosotros: imagen 1, imagen 2, imagen 3

Volviendo al inicio, apretamos en «Add layer» y si ya tenemos cargadas las imágenes en nuestra biblioteca de wordpress, elegimos la primera. Vamos a usar la de los chicos que están delante de un montón de monitores.

añadir una imagen a Revolution Slider

Posición de la imagen en el Slider

Podréis ver que la imagen, al aparecer, esta en un lateral en vez de correctamente centrada. Para arreglar esto, tenemos dos botones realmente útiles. Que son los de centrado vertical y centrando horizontal. Apretaremos ambos para que la imagen quede correctamente posicionada. También la podéis mover a mano, si, pero es recomendable hacer las cosas de manera correcta, por motivos que entenderéis un poco mas adelante.

Aparte de los botones de centrando, al lado de los mismos a la derecha, tenemos otras opciones que nos permiten desplazar la imagen hacia arriba, abajo, lateralmente en caso de que el centrado no haya quedado de manera correcta. Por ejemplo, en nuestro caso, la cabeza del chico aparece cortada porque el alto del slider esta configurado en 600 pixels. ¿Qué podemos hacer para que la imagen baje un poco? Sencillo, usando el campo “vertical Offset” vamos a añadir 100 px y veremos como la imagen baja un poco… Si queremos que suba, debemos añadir -100px, para logar el efecto contrario. Como la imagen esta centrada tanto vertical como horizontalmente, estos valores toman como referencia el centro de la imagen.

Si creáis una entrada en vuestro blog y escribís el shortcode del slider, ya podréis ver como queda vuestro primer trabajo.

Como podéis observar, la imagen no ha salido completa… eso se debe a que Slider Revolution recorta el tamaño de la imagen para que entre dentro del contenedor. El tamaño del contenedor esta definido por vuestra plantilla de wordpress, salvo en los casos en que uséis maquetadores visuales.

¿Qué hacemos para que la imagen salga completa?

centrar imagen en Revolution Slider

Sencillo, donde pone el tamaño del imagen, vamos a cambiarlo: Como veréis hay varias opciones. Nos vamos a decantar por W: 100% y veréis que la altura H cambia por si sola a AUTO. Si guardáis los cambios y veis el resultado, comprobareis que ahora la imagen se ve entera, aunque mas pequeña.

Como añadir Títulos a nuestro Slider

Pues de la misma manera que “Add image” es para las imágenes, tenemos la opción de usar “Add text/html” para los títulos. Pulsamos sobre el correspondiente botón y nos aparecerá un pequeño editor, muy pequeño, donde escribir nuestro primer titulo. Vamos a escribir “Alarmas Conectadas a Central Receptora” y como tenemos ese texto seleccionado, vamos a cambiarle el tamaño, y el grosor.

Tamaño del texto 40px y grosor 800

cambiar texto en Revolution Slider

Una vez que lo tenemos hecho, podemos añadir mas texto o directamente duplicar la capa de texto que acabamos de crear, con lo que arrastramos todas sus propiedades. Vamos a optar por esta opción, ya que nos permite trabajar de manera mas rápida. Botón derecho sobre el texto y en el menú desplegable pinchamos en “duplicate layer”. Con lo que ahora tendremos dos veces el mismo texto. Lo movemos hasta colocarlo debajo del anterior y hacemos doble clic encima. Vemos que se abre de nuevo el pequeño editor y cambiamos el nombre por “Seguridad Manolo” y también cambiamos el tamaño del texto por 80px.

Si nos fijamos en la imagen, podremos comprobar que la parte de abajo, que corresponde a la ropa del chico es mas oscura, por lo tanto el texto será mas legible en esa parte, que arriba. Vamos a moverlo, simplemente arrastrándolo con el ratón hasta esa posición abajo.

Por ultimo, vamos a añadir algún efecto de animación a las letras, para conseguir un efecto mas curioso.

Animar textos con Revolution Slider.

Animar cosas es un arte, que o eres una persona creativa, que te gusta la edición de vídeo, etc… o es un calvario. Aun así, vamos a explicar los fundamentos básicos de como conseguir efectos de fundido, movimiento, etc sobre los textos de nuestro slider.

En el editor de diapositivas, tenemos Style, que nos permite, por normal general cambiar el estilo de las cosas, por ejemplo, en las letras, tamaño, color, grosor, y a su lado tenemos la pestaña de “Animation” que nos permite animar las cosas.

Si tenemos alguna de nuestras capas de texto seleccionadas, en el momento que pinchemos sobre “Animation”, Revolution Slider les aplicara una animación por defecto. La que esta configurada por defecto (que podemos cambiar) es Fade-In, que nos viene perfecta, porque nos encanta que las letras aparezcan así de la nada… lo que vamos a hacer es cambiar la velocidad con la que lo hacen y el momento.

Entendiendo como funcionan las animaciones.

Si nos fijamos, cada animación tiene dos filas. Una define la animación de entrada y la otra define la animación de salida. Si queremos que las letras se queden ahí y no desaparezcan, dejaremos la animación de salida sin uso. Para definir el tiempo que tardan en aparecer las letras, tenemos un reloj en el que ahora pone 300 (en mili-segundos). Lo vamos a cambiar por 1000 para que tarden 1 segundo en aparecer.

Sobre la fuerza de la animación “Power.3.ease.In.Out” hablaremos mas adelante, pues requiere prácticamente un capitulo entero. Pero os dejo caer que se trata de las curvas de arranque y frenado… Una manera de suavizar el inicio de la animación y el final.

Una vez que ya tenemos definidos los tiempos, vamos a pinchar en el botón + y podremos jugar con el movimiento de nuestro texto. Vamos  a conseguir un efecto de que el texto cae mágicamente mientras que aparece.

Añadir movimiento a los textos:

Al pulsar el botón + lo primero que nos aparece es el Offset, nos vamos a quedar únicamente con esta parte de momento y mas adelante iremos explicando todas las funcionalidad de cada opción y como combinarlas.  Vamos a introducir un valor de -50 en Y y podremos observar lo que sucede… Os recomiendo que probéis diferentes valores, tanto para X como para Z. Los valores de X hacen que el texto se mueva de manera horizontal. Los valores de Z le dan profundidad… valores que pueden ser positivos o negativos.

Una vez que ya tenemos terminada esta parte, pinchamos sobre la capa “Seguridad Manolo” y realizamos los mismos pasos.

Nos vamos a encontrar con un pequeño problema… y es que los dos textos caen a la vez y de hecho, tan rápido que por ejemplo, aquí no se llega ni a ver… Solo recargando la pagina podemos verlo. Para solucionar esto, vamos a ir a la selección de tiempos y a ordenar un poco nuestras capas, para que no aparezcan a la vez…

Editor de lineas de tiempo

En las líneas de tiempo, veréis las capas que hemos ido creado, la primera es la imagen, que no la vamos a tocar de momento y la segunda y tercera, son nuestros textos. El cuadro que marca 1000 es la duración de la animación. Si pinchamos sobre el, y lo movemos, definiremos cuanto tardara la animación en aparecer. La idea es que los dejéis tal y como los tenemos nosotros en esta imagen. Así el primer texto comenzara su animación con 1 segundo de retraso y el segundo texto con 1 segundo y medio.

Y con esto ya tenemos nuestra primera diapositiva terminada. Hemos aplicado una configuración adicional que hace que el slider se repita sin parar, porque si no, cuando vais siguiente el curso y llegáis a esta punto, no podriais ver el efecto sin recargar la pagina. Lo normal, en una web, es que si se trata de un Slider con una única diapositiva, aparezcan los textos y se quede ahí parado, para que los clientes lo puedan leer y no se repita… Si hay mas diapositivas, la cosa cambia.

¿Cómo añadimos la segunda y tercera diapositiva?

Muy sencillo. Ahora… el truco del almendruco.

En la parte superior, donde pone “#1 Slide”, en su menú desplegable, usamos la opción duplicate y creamos 2 diapositivas mas… con lo que ya tenemos 3. Son iguales, si, pero ahora solo tendremos que editar la segunda y la tercera, cambiar las imágenes y los textos… Tardaremos 1 minutos y tendremos un sencillo pero buen trabajo realizado.

Elegimos el “#2 Slide” haciendo clic sobre el. Fijaros bien que haya quedado seleccionado y bajamos hasta el área de editar el slide. Doble clic en la imagen y directamente se abre la librería para que elijamos otra. Elegimos la de cámaras de seguridad y cambiamos el texto haciendo doble clic sobre él. Si no os aparece el texto, no os asustéis. Al elegir la imagen, Revolution Slider la trae al frente para que podéis trabajar con ella sin que nada os tape la visión. Para que el texto vuelva a aparecer, bajar hasta los controles de tiempo y pinchar sobre la capa de texto que queráis editar. Aparecen todos los textos en pantalla de nuevo. Hacéis doble clic sobre el que queráis cambiar y apañado.

Os dejo nuestro resultado final, a ver si lo podéis hacer igual 😉

Detalles: Como veis, las imágenes no salen del mismo tamaño ¿Por que? ¿Os acordáis de aquel offset de 100px que pusimos al principio para poder verle la cabeza al chico de los monitores?. Pues ha ocurrido lo siguiente: Al hacerse la imagen mas pequeña para adaptarse al contenedor, Revolution Slider ha aplicado ese offset de 100px que provoca que dos de las imágenes queden ligeramente desplazadas hacia abajo… En la de la cámara no se nota ese desplazamiento, porque es mucha mas alta que las demás… Para corregir este «error» habría que quitar el offset de 100 a todas las imágenes.

Concluimos este capitulo sobre como crear textos animados con Revolution Slider. En breve el siguiente capitulo: Adaptar nuestro Slider a la pantalla del movil.

Co-fundandor de la Agencia de Marketing Wolabu. Ingenioso, creativo y siempre de buen humor.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *