Añadir deslizador de diapositivas en DIVI adaptable

Cuando añadimos un deslizador de diapositivas en DIVI, también conocido como carrusel o "slider", vemos que en muchas ocasiones no se comporta como deseamos. El formato que trae por defecto el constructor Divi, en ocasiones, no es el que nos gustaría utilizar.

Configurar un slider en DIVI para que sea "responsive"

Para el que aun no lo sepa, "responsive" es como se denominan a los elementos de una web que son capaces de adaptarse a cualquier dispositivo en el que e muestra. Y es lo que intentaré hacer con el deslizador de diapositivas en DIVI.

Pero antes hay que conocer cómo se comporta el módulo que incorpora el tema DIVI para saber lo que tenemos que hacer, o al menos entender el proceso que os explicaré a continuación.

El módulo "Deslizador" de diapositivas de Divi Builder

Este módulo trae por defecto una configuración muy básica en la que manejamos principalmente 4 elementos:

• Una imagen o vídeo principal: Colocados en el interior del módulo con unos espacios y márgenes con relación al tamaño que tienen, y que no cubren todo el espacio.
• Uno texto descriptivo: Compuesto por un título y un párrafo que se añaden al módulo junto a la imagen o vídeo anteriores.
• Un botón: Para dirigir al visitante a la página que decidamos configurar como destino.
• El fondo de la diapositiva: Con opciones para colores sólidos, degradados, una imagen o un vídeo.

En la imagen anterior se puede observar que la imagen utilizada siempre ocupa la mitad izquierda del módulo y reserva la otra mitad para el texto. Con las opciones de diseño podemos mostrar y ocultar elementos o cambiar el aspecto de estos, pero no crear un tipo de slider diferente.

Ahora surge el problema, ya hemos visto lo que nos ofrece le constructor Divi, pero ¿y si queremos otro tipo de carrusel? Dependiendo de lo hábiles que seamos podemos elegir dos caminos diferentes:

• Instalar un plugin adicional diferente que permita realizar lo que deseamos, con la obligación de aprender como funciona y añadir funciones adicionales que pueden ralentizar la web (o no, depende de muchos factores)
• Utilizar las herramientas que el mismo DIVI nos ofrece para adaptar la configuración básica en algo propio y personalizado.

Voy a descartar la primera opción, si hemos decidido utilizar el tema DIVI, que es una maravilla y que si estás pensando en comprarlo te lo recomiendo, vamos a aprovechar todas las opciones que trae antes de añadir plugins de terceros que pueden no ser compatibles al 100% con el tema.

Crear un deslizador de diapositivas adaptable y diferente en Divi

Me planteo e siguiente ejercicio, realizar un deslizador de diapositivas donde las imágenes cubran todo el módulo, sin texto (o incorporado en la propio imagen), que se adapte a todos los dispositivos y, como guinda del paste, que incorpore un enlace sobre la imagen sin ningún botón.

Si buscáis otro tipo de carrusel, en este mismo blog podéis encontrar un artículo donde explico cómo realizar un slider a pantalla completa y adaptable con el menú superpuesto.

Para empezar, antes que nada, tenemos que disponer de las imágenes que vamos a utilizar. Estas imágenes tienen que cumplir unos requisitos mínimos para que se visualicen correctamente en la web. Empecemos poco a poco.

Tamaño de las imágenes

Las imágenes deben tener un tamaño y resolución adecuados, como mínimo deben tener el tamaño, en píxeles, en el que se van a visualizar de forma más grande. Me explico mejor, si el tamaño más grande de la imagen es el que se muestra en el monitor de un ordenador de sobremesa, ese es el tamaño como mínimo que deben tener las imágenes.

De lo contrario, obtendremos unos resultados bastantes decepcionantes. Os muestro un ejemplo de una imagen mostrada a tamaño real en píxeles y la misma a un tamaño menor pero ampliada al tamaño de la primera.

Por defecto, DIVI tiene asignado un tamaño de 1080px de anchura en la configuración estándar de las secciones, aunque podemos modificar este valor desde el personalizador.

También es importante que todas las diapositivas tengan el mismo tamaño, tanto de anchura como de altura. Principalmente para controlar todos los elementos que contienen las imágenes y asegurarnos que se verán una vez que las incluyamos en el deslizador de diapositivas.

Al tratarse de un módulo que alberga varias imágenes, y las imágenes son los elementos que más retardan la carga de una página, como recomendación sugiero utilizar el formato .jpg con una compresión de colores que reduzca el tamaño de los archivos. Pero esto es más de cara al SEO que a la configuración del propio slider.

Añadir el módulo Deslizador

No lo he mencionado pero doy por supuesto que hemos habilitado el Constructor Divi para poder diseñar la página.

Vamos a crear una sección regular y dentro colocaremos una fila única con el módulo "Deslizador " o "Slider", dependiendo si trabajamos en español o inglés. Y ya que DIVI nos da la opción, trabajaremos con el constructor visual.

Incluir todas las diapositivas

Editamos el módulo "Deslizador" y añadimos las imágenes como fondo de las diapositivas. No os confundáis y las coloquéis como imágenes de las diapositivas.

Las imágenes que voy a utilizar las he descargado del banco de fotos gratuito Pixabay, al cual agradezco su aportación.

Según las vamos añadiendo, hay que asignar un comportamiento en las opciones que aparecen en la parte inferior, sobre todo en dos de ellas, el resto no es necesario tocarlas:

• Imagen de fondo de tamaño: Cubierta
• Imagen de fondo de la posición: Centro

De esta forma tenemos las imágenes "responsives" y adaptables en referencia al módulo, pero nos queda ajustar la altura todavía.

Ajustar la altura del deslizador de diapositivas en Divi

Para terminar vamos a ajustar la altura jugando con las medidas del "padding" o relleno del módulo.

Cuando terminemos de insertar todas las imágenes que necesitemos, aceptamos y vamos a la configuración del módulo, a la pestaña "Diseño". Fijaros bien que no sea la pestaña Diseño de las diapositivas, tiene que ser en las opciones generales del módulo, para que afecte a todas las imágenes por igual.

En la pestaña "Diseño" nos dirigimos al apartado "Separación", y en el Relleno personalizado colocamos un valor 0 en la casilla Superior y colocamos un valor en % en la casilla Base, por ejemplo un 50%.

Ahora que tenemos asignado el valor en %, lo vamos variando hasta encontrar el que se ajuste mejor a las imágenes.

Ya hemos terminado, ahora el Slider, Carrusel o Deslizador de Diapositivas se adaptará al dispositivo que estéis utilizando. Pero quedan algunas configuraciones adicionales que ya dependen del dueño de la web, como activar el cambio automático, elegir el tiempo de retardo o decidir, si queremos, en que dispositivos se mostrará.

Asignar un enlace a cada imagen

Para conseguir que las imágenes nos lleven a una url que nosotros elijamos, tenemos que añadir un botón del tamaño de la imagen y hacerlo transparente para que no se vea.

En la configuración de cada diapositiva activamos el botón escribiendo cualquier cosa en la casilla "Texto del botón", no os preocupéis por lo que pongáis porque lo haremos invisible y no se verá después.

Escribimos, o copiamos, en el apartado "Enlace", la url a la que queremos dirigir al usuario, ya sea interna o externa.

A continuación seleccionamos la pestaña "Avanzado" en cada diapositiva y colocamos el siguiente código CSS en la casilla correspondiente al botón:

Con esto hacemos desaparecer el texto del botón asignando un tamaño de 0px, creamos un fondo transparente para que no se vea y asignamos un tamaño muy grande para que ocupe toda la imagen. Para que el enlace no se salga fuera del deslizador, asignamos al botón una posición absoluta.

Cuando pasemos el ratón por encima veremos la mano que indica que existe un enlace. Recordad que esto hay que hacerlo con cada diapositiva.

Has visto lo que se puede hacer con el tema Divi, si no lo tienes es el momento de dar el paso a uno de los temas de WordPress que harán que tu web luzca de manera profesional. Adquiérelo ahora.

Todos mis alumnos pueden descargarlo de la zona premium de forma gratuita para probar la última versión.