Los sliders son uno de los recursos más utilizados en las páginas webs, ya sean webs corporativas, eCommerce, plataformas…

Se suelen añadir sliders en la parte superior de la páginas de inicio, con la finalidad de atraer al visitante y mostrar las instalaciones, los productos o la temática en general de la web, de forma interactiva.

En este post vamos a ver cómo configurar el módulo Slider de ancho completo en Divi, el cual la plantilla llama “Control deslizante de anchura completa”.

Cómo hacer un Slider perfecto para tu web

Antes de nada, ten en cuenta que un slider en una página principal es la primera toma de contacto que tiene el visitante con tu web y no todas las imágenes son ideales para ubicarlas aquí.

Por lo tanto, recuerda estos detalles:

  • Una imagen de calidad es de suma importancia. Procura que la imagen elegida contenga las dimensiones que marca la plantilla para que se muestren correctamente, que tenga la calidad suficiente y que ayude a resaltar el contenido que deseas.
  • Si añades texto sobre el slider, este debe de ser corto y preciso, para que que el usuario pueda leerlo fácilmente y captar la idea de inmediato.
  • Determina un tiempo adecuado para la trasición de cada diapositiva o imagen, considerando los segundos necesarios para que al usuario le de tiempo a ver la imagen y leer el mensaje.
  • Evita que el slider acapare toda la atención de la página web. Es cierto que si se hace bien es un gran atractivo visual para el usuario, pero probablemente tengas otras secciones que te interesa remarcar igualmente, como por ejemplo, la sección de productos de tu tienda online, la tabla donde muestras tus servicios, tu página de cursos, la página de proyectos…
  • Recuerda que prácticamnete la mitad de los usuarios, si no más, utilizan el teléfono móvil o la tablet para navegar por internet. Así que, aunque Divi sea una plantilla responsive, intenta utilizar imágenes y textos en el slider cuyo contenido se visualice adecuadamente en todos los dispositivos.

Cómo hacer que un Slider tenga anchura completa en el tema Divi

Crear un slider de ancho completo en la plantilla Divi no es complicado pero debes de conocer antes cómo funciona. Sobre todo porque las posibilidades de diseñar un slider con este contructor son infinitas.

Para añadir un slider a una web con Divi, hay que añadir un módulo de slider. La plantilla lo llama “Control deslizante de anchura completa”. A continuación habrá que configurar todos sus ajustes.

Este módulo se encuentra dentro de las secciones de anchura completa y es la vía más rápida para configurar un slider que rellene todo el ancho de la web. También podrías añadir el módulo “Deslizador” en una sección estandar y hacer que tenga ancho completo con CSS, pero lógicamente requiere de más trabajo.

Configurar el módulo “Slider” de Divi paso por paso

Añadir y configurar un Slider de ancho completo en Divi es tan sencillo como seguir los siguientes pasos:

Entra en la página que quieres editar y activa el Constructor Divi.

Lo primero que debes añadir es una Sección de anchura completa.

añadir sección anchura completa divi

Clica en Insertar módulo y entre los nueve módulos que te aparecen disponibles para ancho completo, añade el de Control deslizante de anchura completa.
añadir slider tema divi

Si entras en esta sección (icono de las tres líneas), te aparecerán las pestañas de ajustes comunes a todos los módulos de Divi:

  • Ajustes generales.
  • Ajustes avanzados de diseño.
  • CSS Personalizado.

cómo hacer un slider en divi

Vamos a ir personalizando el módulo de slider de Divi viendo las opciones de configuración de cada una de estas pestañas:

Ajustes generales

Estos son los ajustes generales del slider de anchura completa. Todo lo que modifiques aquí afectará al módulo en conjunto, osea a todas las imágenes que incluyas.

Las opciones que puedes ajustar en esta ventana son:

Añadir nueva diapositiva: entrando aquí podrás editar cada imagen del slider por separado, añadiendo un título, un texto y una url al botón, o una imagen, vídeo o color al fondo.

Crea una nueva diapositiva y clica en el icono de las tres líneas cada vez que necesites editarla.

Estos ajustes individuales de cada diapositiva prevalecen sobre los anteriores. Por tanto, tenlo en cuenta a la hora de modificar ajustes como el tamaño, tipografía o color del texto.

Al igual que todos los módulos, aquí volverás a encontrar los tres apartados comunes: Ajustes generales, Ajustes avanzados de diseño y CSS Personalizado.

ajustes diapositiva slider

Si vuelves hacia atrás, volverás a la ventana de los ajustes generales del módulo. Esto puede confundir un poco al principio, pero la dinámica que sigue el tema Divi es siempre la misma.

Una vez tengas las diapositivas creadas, te aparecerán alistadas en los ajustes del Control Deslizante o Slider. La plantilla Divi te permite ordenarlas de forma intuitiva arrastrando los bloques con el ratón.

configurar imágenes slider divi

Flechas: tienes la opción de añadir o eliminar las flechas laterales con las que el usuario avanza sobre las diapositivas o imágenes.

Puedes seleccionar el color de estas flechas en los Ajustes avanzados de diseño, bien del módulo en general o bien de cada diapositiva por separado. Lo ideal es que sea un color visible en función de la imagen de fondo que hayas elegido.

Controles: se refiere a los puntitos inferiores que marcan el orden de las diapositivas. Puedes activar o desactivar esta opción.

Igualmente puedes elegir el color de estos controles en los Ajustes avanzados de diseño.

Animación automática: tienes la opción de permitir que las diapositivas se vayan deslizando automáticamente o dejarlas estáticas para que sea el usuario el que las pase.

Si activas esta opción aparecerá un nuevo campo en el que debes indicar la velocidad de las diapositivas en milisegundos. Por ejemplo, si quieres que pasen cada 3 segundos, indica 3000 en este campo.

Usar efecto paralaje: puedes hacer que tus diapositivas tengan efecto paralaje, es decir, que al hacer scroll, la imagen del fondo se desplaza a una velocidad más lenta que el resto de elementos de la web, creando un efecto de profundidad en ella y haciendo que se vaya mostrando poco a poco.

Recuerda que si activas esta opción, tu imagen tomará las dimensiones del ancho y el alto de la pantalla.

Aunque los parallax sean muy atractivos visualemente en la web, te recomiendo no abusar de ellos y activar este efecto si dispones de imágenes con buena calidad.

Eliminar sombra interior: aquí puedes activar o desactivar la opción de sombra interna. Resulta ideal activarla cuando tienes fondos de color o imágenes de fondo.

Desactivar el: aquí se muestran tres casillas con cada dispositivo, escritorio, tableta o smartphone. Activa la casilla en la que quieras que no se muestre esta sección completa.

Puedes desactivar una sección cuando en la versión móvil la web se ve muy sobrecargada, con exceso de información para el lector.

desactivar en smartphone

Etiqueta de administración: Este es el título con el que se muestra el módulo en el contructor web de Divi de la edición de la página.

Puedes sustituir, por ejemplo, “Control deslizante de anchura completa” por “Slider ancho completo” o por “Slider con ofertas de Navidad”, para reconocerlo mejor al entrar en el constructor.

Ajustes avanzados de diseño

Entrando en estos ajustes personalizarás aspectos más detallados del slider, que afectarán a todas las diapositivas en conjunto. Los ajustes que Divi te permite personalizar aquí son los siguientes:

diseñar slider en divi

Relleno superior: añade un relleno superior al slider en general e indícalo en píxeles. Esto te ayudará a agrandar o reducir la altura del slider desde la parte superior de la sección.

Si clicas en el icono del teléfono móvil que te aparece en la parte derecha, podrás personalizar el relleno superior en cada tipo de dispositivo, para que se adapte a la perfección.

Relleno inferior: añade un relleno inferior al slider en general e indícalo en píxeles. Esto te ayudará a agrandar o reducir la altura del slider desde la parte inferior de la sección.

Si clicas en el icono del teléfono móvil que te aparece en la parte derecha, podrás personalizar el relleno inferior en cada tipo de dispositivo, para que se adapte a la perfección.

Ocultar contenido en dispositivos móviles: si quieres desabilitar esta sección en los dispositivos móviles, activa esta casilla.

Ocultar CTA en dispositivos móviles: si quieres desabilitar el botón de “Call to Action”, es decir, el botón del slider, activa esta casilla.

Este botón tiene sentido si enlazas hacia un contenido importante que te interese, como pueden ser tus productos, tus proyectos, una promoción…

Mostrar imagen o vídeo en dispositivos móviles: habilita esta casilla para mostrar las imágnes o vídeos del slider en los dispositivos móviles.

Ajustes cabecera: te aparecerán varios apartados en los que puedes seleccionar la fuente, el tamaño, el color de texto, el espacio entre letras y el interlineado de todos los títulos de cabecera que aparecen en el slider.

Ajustes cuerpo de texto: te aparecerán varios apartados en los que puedes seleccionar la fuente, el tamaño, el color de texto, el espacio entre letras y el interlineado de todos los textos que aparecen en el slider.

Utilizar estilos personalizados para botón: si activas esta casilla, se abrirán campos nuevos que te permitirán dar dar estilo a todos los botones en general que aparecen en el slider.

Puedes elegir el tamaño y el color del texto, el color de fondo, el ancho y el color del borde, el radio frontera (redondeo de los bordes), el espacio entre letras, la fuente del texto del botón, el color y ubicación del icono que irá dentro del botón y el aspecto del botón en hover (al pasar el ratón po encima).

CSS Personalizado

En este apartado puedes añadir CSS para esta sección en general y modificar cualquier aspecto que la plantilla Divi no tenga incluido, lo cual te permite personalizar por completo el diseño.

Con todos estos ajustes, ya quedaría configurado el slider de ancho completo en Divi. La plantilla te da tantas posibilidades de crearlo fácilmente, que a partir de aquí, podrás buscar la definición de slider que más se enfoque a tu negocio online.

Todas las configuraciones de las capturas de pantalla que ves en este post son reales y me han servido para hacer un slider sencillo con Divi, utilizando solo los ajustes que trae la plantilla y sin añadir ningún código. Algo que prácticamente cualquier persona con unos conocimientos base podría hacer.

divi ejemplo slider¿Te imaginas ahora todo el potencial que tiene el tema Divi para crear un slider de ancho completo?

Por último, si quieres reutilizar el mismo slider en diferentes páginas, guarda este módulo en la Biblioteca de Divi y agrégalo a la página o páginas que desees con tan solo un click. Esta es otra de las maravillas de Divi.

También te puede interesar...

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
¡GRATIS! 

Esta guía con 7 Trucos de diseño para Divi

¡GRATIS!

Esta guía con 7 Trucos de diseño para Divi

Obtén, de forma totalmente gratuita, estos trucos de diseño que la plantilla Divi no incluye y crea webs únicas.

Consentimiento

¡Perfecto! Ahora VE A TU BANDEJA DE ENTRADA y abre el email que te he enviado desde DIVESP. ¡Gracias!