En este manual vamos a tratar sobre Revolution Slider que es una de las herramientas más completas de WordPress que existen en el mercado. Para los que conocéis Photoshop o cualquier otra herramienta de edición de imagenes, podríamos decir que es una herramienta similar que nos permite crear múltiples capas y pequeñas animaciones dentro de un slider.

Un Slider es lo que hay en la pagina principal de casi todas las webs corporativas, una imagen muy grande donde hay texto que se mueve y van pasando distintas imagenes a modo de diapositiva. Dentro de estas se pueden crear diseños muy muy chulos.

Como este es un manual básico haremos un caso práctico súper simple, el resultado final de nuestro Slider tras terminar este manual será como mostramos en esta imágen:

Nota de la imagen: Este Slider lo realizó uno de mis clientes tras revisar una pequeña formación, buen trabajo Sílvia! 🙂

Como crear mi primer Slider

Si tu web te la hicieron o ya tienes un Slider activo y funcionando ignora este paso.

Para crear un Slider debes dirigirte a tu WordPress e iniciar sesión desde el enlace:

tudominio.com/wp-admin

Una vez dentro en la columna negra de tu izquierda dirígete a donde dice:

Revolution Slider.

Si le das clic verás algo así:

Fíjate en el punto (2) donde hay una caja con un + y pone New Slider, ahí es donde debes darle clic para crear un nuevo Slider.

Una vez le des clic a esa opción te aparecerá esta pantalla:

Aquí sólo deberás darle un nombre y darle clic a guardar dando clic al botón verde de arriba a la derecha donde hay un (2) en la flecha roja.

Mi recomendación es que le des un nombre representativo, por ejemplo si este Slider irá a la “Home” yo pondria algo así como “Home-Slider”

Entender lo que es un Slide y como crear nuestra primera composición

La diferencia entre un Slider y un Slide esque un Slider es un contenedor de muchos Slides. Es decir, el Slider seria como la caja y dentro tendriamos a tantos Slides (imágenes o composiciones como querramos).

Para cada Slide podremos añadirle un color de fondo o una imagen de fondo, múltiples capas, ya sean botones que apunten a una página, textos dinámicas que se fundan o bien otros elementos tipo vídeos o otras imágenes dentro…pero aquí lo simplificaremos y nos centraremos sólo en el Slider que os mostramos al inicio de este tutorial.

Por ahora simplemente crea un Slide, debes hacerlo primero entrando dentro de tu Slider, pero para darle clic pon tu puntero justo encima de tu slider y verás que te aparece una icona con un lápiz, dale justo ahí:

Una vez dentro verás una caja con el símbolo + y donde justo debajo pone “New Slide” tal y como te muestro en la imagen:

 

Al darle clic se abrirá un desplegable, debes marcar la primera opción “Add Blank Slide”. Te aparecerá un emoji tomandose el café y una vez finalizado el proceso verás que tienes una caja con un fondo transparente que se representa con los cuadros grises y blancos, similar a este:

Con esto ya tendrías tu primer Slide creado.

Cómo asignar una imagen de fondo en nuestro Slide

Para asignar una imagen de fondo debes seleccionar primero la opción Main / Background Image te la muestro aquí:

 

Seleccionamos la imagen de nuestra galería de WordPress o la cargamos de nuestro escritorio y listo. Recuerda súper importante que la imagen de fondo debe estar optimizada y que no tenga un peso superior a 1MB. También recordar que las proporciones de una imagen de fondo debes ser proporcionales a la caja, en este caso rectangular.

Te recomiendo pexels.com y pixabay.com para encontrar imágens de calidad y totalmente gratuïtas.

Crear nuestra primera capa de texto flotante

Una vez tengamos la imagen de fondo cargada, si nos fijamos en la parte inferior podemos ir viendo como está quedando nuestro Slide:

Si os fijáis en esta zona tenemos a un botón de color azul donde pone Add Layer, si le damos clic nos dará estas opciones:

 

Lo primero que queremos hacer es crear la primera capa de texto, así que le daremos clic a “Text/Html” y nos creará la primera capa de texto, tal que así:

(1) Esta opción nos permitrá cambiar la tipografia y el tipo de letra hay multitud de diseños y tipos de texto

(2) Este es la capa de texto que hemos creado y podemos ponerlo donde queramos simplemente arrastrándolo

(3) En esta zona es donde debemos escribir el texto que nos interesa

 

Acerca del Autor

Met El Idrissi

Desarrollador web WordPress freelance y emprendedor tecnológico en aplicaciones web SaaS

Ver Artículos