Revolution Slider – Capitulo 01 – Primeros pasos

Bienvenido al curso avanzado de Revolution Slider. Durante las próximas semanas, vamos a ir conociendo más a fondo este maravilloso plug-in que habitualmente se utiliza para crear cabeceros para las páginas web, pero que sin embargo, ofrece cientos de miles de posibilidades más, la mayoría desconocidas por los usuarios. Se trata de un plug-in potentísimo, de él que como acabo de decir, la mayoría de las personas desconoce la totalidad de sus funciones.

En este tutorial de Revolution Slider en español, aprenderemos a crear, desde el típico slider con 2 o 3 (o las que quieras) imágenes deslizantes con sus correspondientes titulares, hasta (si somos un poco más creativos) increíbles slider’s con efectos en 3D. Mediante la utilización de imágenes png a modo de sprites, podemos crear efectos de desenfoque, movimiento, efectos parallax y miles de combinaciones, que darán a nuestras páginas webs un aire mucho más dinámico e interactivo incluso, mejorando la experiencia del usuario y logrando una apariencia muy profesional. Por eso te animamos a que sigas nuestro tutorial de Revolution Slider en español, donde pondremos muchos ejemplos y compartiremos las plantillas de Revolution Slider que vayamos creando.

Pero vamos a ir paso a paso.

¿Qué es realmente Revolution Slider?

Se trata de un plug-in creado por la empresa Themepunch que se puede comprar por 26 $ en su versión Premium y que permite su uso en una sola website. El precio de Revolution Slider es de unos 23,20 €, por lo tanto, bastante asequible. En principio nació como una herramienta para crear slider’s, pero más adelante se le fueron incorporando funcionalidades como imágenes Hero, carruseles, etc. Si estas pensando en comprar Revolution Slider, te recomiendo que sigas leyendo 😉

¿Dónde puedo descargar Revolution Slider gratis?

Pues resulta realmente complicado de encontrar, por eso hemos decidido poner a vuestra disposición una versión Free (por supuesto, libre de viruses) desde nuestro servidor, que si bien no ofrece el 100% de las posibilidades de la versión de pago, os podemos asegurar que cumple de sobra para poder realizar increíbles slider’s. La versión gratuita es tan extensa, que realmente pensamos que no es necesario comprar la versión de pago. Eso si, la versión Premium os da acceso a una amplia galería de plantillas con las que os podréis ahorrar mucho trabajo. Aunque también es cierto, que en el momento que comienzas a “entender” el funcionamiento interno del plug-in, podrás sacar plantillas de tus propios trabajos.

(Una vez descargado e instalado, nos aparecerá en el menú izquierdo de wordpress en la parte de abajo).

Primer acceso a Revolution Slider.

La primera vez que entráis a Revolution Slider veréis el típico dashboard donde se te informa de varias cosas. La primera, como no, es que el plug-in no esta activado y te ofrece la posibilidad de comprar una licencia. En naranja nos avisa de que hay una versión posterior, pero no nos dejara actualizarlo ya que no hemos pagado. Y por ultimo, el plug-in realiza un pequeño check para asegurarse que los requisitos técnicos para el uso de Revolution Slider se cumplen.

dashboard revolution slider

En la siguiente fila tenéis algunas opciones más del Revolution Slider, como la posibilidad de tener soporte o descargar plantillas, pero no estarán accesibles al tratarse de una versión gratuita. Si ya estáis viendo esta pantalla, es que ya lo tenéis todo listo para proseguir con el curso avanzado de Revolution Slider

Primeros pasos en el curso avanzado de Revolution Slider

Creando nuestro primer trabajo con Revolution Slider. En el dashboard del plug-in podréis ver (en la parte superior) que existen tres cuadros. Sus nombres, son:

“New Slider” (crear un slider nuevo).

“Add Slider from template” (añadir un slider desde una plantilla)

Y por último “import slider” (importar un slider).

crear nuevo revolution slider

Si no es la primera vez que usáis el Revolution Slider y ya lo teníais instalado, con algún trabajo hecho, os aparecen más cuadros, uno por cada slider. Como en teoría es la “primera vez” que usáis el plug-in, vamos a hacer clic sobre “New Slider”.

Nos vamos a encontrar con esto:

opciones revolution slider

Como podéis observar en el bloque 1: «Content source» (fuente del contenido), Revolution Slider permite crear una amplia variedad de sliders, no solo usando imágenes, si no otras fuentes como páginas de vuestra web, entradas especificas del blog, incluso de los productos de WooCommerce si tenéis montada una tienda online.

Como dijimos al principio, las posibilidades de la herramienta son casi infinitas. Pero de momento, vamos a optar por “Default Slider”, que suele ser la opción habitual para las cabeceras de las páginas web.

Elegir un nombre para nuestro Slider

El bloque 2 de opciones, nos permite elegir el nombre que usaremos para nuestro slider. En el primer cuadro podremos el nombre con el que lo distinguiremos de otros sliders. Supongamos que vamos a crear el cabecero de la empresa “Seguridad Manolo”. Pues lo podemos llamar “Cabecera Seguridad Manolo”. Es importante distinguir bien mediante nombres los sliders, pues puede que pongamos más de uno en la web y si los nombramos “Slide1”, “Slide2” y etc… es posible que luego nos liemos.

El segundo cuadro nos permite insertar un alias, un nombre corto, que se usara en el shortcode. Veréis que al escribir en ahí, automáticamente se generara el shortcode en el 3er recuadro. Ese código deberéis copiar e introducirlo en la parte de la web donde queréis que aparezca el slider. Si usáis un maquetador visual, es tan simple como añadir una fila de “Html personalizado” el principio de la página donde queréis que aparezca y pegar el shortcode. No obstante, nosotros hemos probado a meterlo usando el editor de texto de maquetador de Site Origin y también funciona.
Seleccionar el tipo de Slider

como nombrar revolution slider

De momento nos vamos a quedar con “Standar Slider” aunque si os fijáis en la parte inferior del bloque 3, veréis que pone “Load a preset from this slider type” podréis ampliar y elegir entre una variedad de diferentes sliders. Eso sí, están categorizados por 3 tipos de slider’s.

1- Slider simples o comunes, que son aquellos que normalmente se usar para los cabeceros de las páginas web. Suelen ser 3 imágenes que van deslizándose de manera automática cada 4 segundos e instar títulos publicitarios o descriptivos.

2- Escenas Hero, que normalmente se utilizan en otras partes de la web, donde se pueden poner características de los productos o servicios, con la diferencia de que en vez de usar una imagen estática con el texto “pegado”, se puede crear una escena Hero, que es una imagen, con el texto (seleccionable y por lo tanto, legible para Google de cara al SEO) superpuesto. Permiten crear efectos en el texto y en la propia imagen dando más dinamismo a la web.

3- Carrusel de imágenes. Que normalmente se suele usar para mostrar diferentes fotografías de un mismo producto, o a modo de catálogo. Por ejemplo, si la empresa para la que diseñamos la web vende puertas, podemos crear un carrusel con imágenes de cada puerta y el cliente puede ir pasándolo y viendo los diferentes modelos.

Configurando el Slider elegido (Slide Layout):

Una vez hemos seleccionado el tipo de slider que vamos a utilizar, llega el momento de configurarlo para los diferentes dispositivos donde se podrá ver. Esto normalmente es la asignatura pendiente de muchos desarrolladores web, pues no prestan atención a estos detalles y no configurar la versión móvil del slider.

configurar tamaños revolution slider

Explicación importante:

Revolution Slider es completamente responsive, pero no es inteligente. Esto quiere decir, que si de mano no tocáis nada, adaptara el tamaño del slider a la pantalla del móvil, pero esto tiene un inconveniente. El monitor de un pc es apaisado (más ancho que alto) mientras que la pantalla del móvil es vertical (más alta que ancha). ¿Qué sucede si no configuramos bien el nuestro slider: que cuando se vea en el móvil, ocupara la parte de arriba, como si de una web en miniatura se tratase y todos los textos del slider serán tan pequeños, que no se podrán leer

Lo que suele ser una chapuza y algo que no queremos en este curso avanzado de Revolution Slider.

En las pantallas de Portátil (notebook) o de Tablet, esto no es tan importante, pero sí que debemos realizar dos versiones del Slider (al menos si se trata del cabecero de la web). Una para ordenador y otra para móvil. Para poder hacerlo correctamente, debemos marcar “custom grid size” en la versión móvil e introducir los valores que nosotros deseemos. Normalmente los correctos para que el cabecero ocupe una buena parte de la pantalla y se vea todo claro es: 480x (para el nacho) y 800px (para el largo).

Detalles importantes:

Debemos diferencias entre la parte útil de la pantalla y la parte que es de relleno. Normalmente las webs, sobre todo en monitores HD, de 1980 pixels, o incluso mas, no rellenan todo el área de pantalla. Trabajamos sobre los 1240 puntos, dejando unos márgenes blancos a cada lado del cuerpo de la web. Esto se hace normalmente para evitar que el texto sea demasiado ancho y el pobre lector acabe con torticulis. Sin embargo, a nivel de cabeceros para webs, nos puede interesar que la imagen sea del ancho completo, aunque el texto de los titulares quede dentro de ese área de 1240 puntos.

¿Cómo se modifica esto?

Veréis que Revolution slider os da la opción de elegir entre “Auto”, “Full width” o “full screen” (este último se suele usar poco). Lo habitual es elegir “Full width” para aprovechar el ancho completo del monitor, respetando las líneas guía que nos dirán el ancho de nuestra web (en base, normalmente a la plantilla que estamos usando). No obstante, si pincháis sobre cada una de las tres configuraciones, podréis observar cómo cambia en los ejemplos de abajo.

Bloque 5: Un pequeño repaso antes de dar al botón “verde”.

Del bloque 5, realmente nos vamos a quedar con ese precioso botón verde que dice “Save settings” que debemos apretar para que todo lo que acabamos de configurar se guarde y no perdamos el trabajo que llevamos hecho hasta ahora.

repaso revolution slider

Este bloque viene a ser una especie de: 1º repasar que todo esté bien, que nos da la posibilidad de volver a las opciones, 2º entrar a editar nuestros slider’s y por último, en la 3ª sección nos explica cómo debemos introducir nuestro slider en la web. Existen varias maneras de hacerlo, pero eso lo explicaremos más adelante, cuando tengamos nuestro primer trabajo listo.
Sin pinchamos en el botón verde de “salvar configuración” (Save settinngs), el plug-in automáticamente nos llevara a la parte en la que podremos empezar a crear nuestro slider.

En el aproximo capitulo del curso avanzado de Revolution Slider comenzaremos a crear nuestro primer Slider y ampliaremos la información sobre cada elemento del editor de Slider, sus funcionalidades y como utilizarlos.

Ajustes extras:

Si sois un poco avispados, habréis detectado que a la derecha en la parte de arriba, hay más opciones de configuración. Algunas de ellas realmente complejas, a la vez que muy potentes que nos permiten dar un acabado aún más profesional a nuestros trabajos.

A medida que avancemos en el curso, iremos haciendo un pequeño análisis de cada apartado de este menú y explicando cómo esas funciones afectan al comportamiento de nuestro slider y cómo podemos implementarlas para conseguir efectos aún más alucinantes.

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

4 comentarios

  1. oprolevorter

    An impressive share, I just given this onto a colleague who was doing a little analysis on this. And he in fact bought me breakfast because I found it for him.. smile. So let me reword that: Thnx for the treat! But yeah Thnkx for spending the time to discuss this, I feel strongly about it and love reading more on this topic. If possible, as you become expertise, would you mind updating your blog with more details? It is highly helpful for me. Big thumb up for this blog post!

  2. Pere

    Hola buenos días,
    He instalado slider revolution 6.
    Puedo duplicar un módulo o slide pero no puedo moverlo a otro.
    Con slider revolution 5 podía hacerlo perfectamente.
    ¿Podéis ayudarme?

    • Jakobe Fontan

      Puedes intentar hacerlo de la siguiente manera: Añade el Slide que quieres pasar a plantillas. Luego pasas al siguiente Slider que quieres crear y lo añades desde plantillas.

Dejar un comentario

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