Carrusel a pantalla completa en Divi de WordPress

por | 23 Comentarios

Los temas de Elegant Themes vienen cargados de funcionalidades que otros temas o plantillas no incluyen y que evitan tener que añadir plugins adicionales que sobrecargan la web. En ocasiones necesitamos añadir elementos que se salen de lo estándar, como configurar un carrusel a pantalla completa en Divi, y para lo que se necesita unas configuraciones que el usuario normal puede que no conozca.

Suscríbete:

Fullscreen slider o Carrusel a pantalla completa en Divi

He recibido varios comentarios de personas que no entienden cómo no existe una opción que realice este proceso automáticamente en un tema tan versátil como Divi.

Es un asunto complejo, las compañías tienen que demostrar que sus productos funcionan mejor que los de la competencia, y en este caso, para que el tema Divi funcionen bien, pueda estar optimizado y sea fluido a la hora de cargar cualquier página, tiene que eliminar algo de código.

Los sliders son elementos que no todo el mundo utiliza, por razones técnicas o estéticas, y por eso, de momento, no permiten una configuración total de lo que nos gustaría tener.

Pero aunque no incluya una opción automática, tenemo la posibilidad de adaptarlos sin necesidad de instalar plugins adicionales. Disponemos de la base y podemos moldearlo con las hojas de estilo (CSS).

Proceso para crear un pase de diapositivas a pantalla completa

Tras las últimas actualizaciones del tema Divi, pienso que es mejor dejar de lado la parte de administración y realizar todo el proceso desde la parte frontal o front-end, puesto que así podemos ir viendo al momento todas las modificaciones que hagamos.

Para los que estáis acostumbrados a utilizar Divi con el editor de WordPress, tenéis que activarlo primero desde las opciones del tema.

Para poder tener una guía completa del proceso comenzaré desde cero, creando una nueva página en WordPress para luego añadir el carrusel a pantalla completa en Divi.

Los que tengáis una página ya creada podéis saltaros este paso y editarla directamente desde la parte visual.

Ajustes iniciales

Para conseguir un fullscreen completo, antes hay que configurar el formato de la cabecera para poder ver correctamente las diapositivas del carrusel a pantalla completa en Divi.

Aquí entra un poco la lógica, según el tipo de imágenes que utilicemos convendrá configurar estas opciones de una forma u otra.

El primer punto es elegir si queremos un menú fijo o no. Salvando opciones avanzadas para hacer que el menú se comporte de diferente forma en diferentes páginas, lo más habitual es que la configuración que escojamos sea la misma para toda la web.

Por ejemplo, si optamos por elegir un menú con el fondo transparente para que se vean las imágenes del carrusel, al cambiar de página se mezclará con el contenido, creando un aspecto desordenado y mal diseñado.

La mejor opción es aplicar un color semitransparente en el menú, o configurar la página para que no se muestre el menú hasta que nos desplacemos.

Color de fondo de la cabecera de DIVI
Color de fondo de la cabecera de DIVI

Los ajustes de la cabecera los podemos realizar en cualquier momento, pero si lo hacemos desde el principio podremos ir viendo con mayor claridad el resultado.

Añadir nueva página

Desde la versión 5 de WordPress, la forma de crear una nueva página y el aspecto del editor ha cambiado, para los que empiezan ahora lo verán como algo natural, pero para el resto que llevamos ya un tiempo trabajando con WordPress ha resultado ser una transformación radical.

Al añadir una nueva página, lo primero de todo será asignar el título que tendrá, como estoy creando una página de inicio, la llamaré así.

Después tendremos que decidir si trabajar con un borrador o publicar la página para que esté accesible en internet. En el caso de trabajar en borrador, habrá que publicarla al terminar de configurar la página por completo.

Otra opción importante, que añade Divi a Gutenberg, es elegir si mostramos el menú al cargar la página o que aparezca al desplazarse. Puede ser interesante dependiendo del contenido que tengamos.

Configurar página para carrusel a pantalla completa en Divi
Configuración de página

Si en lugar de una página, estamos creando una entrada, para que el slider sea a pantalla completa hay que modificar las opciones del apartado de los «Ajustes de página de Divi» para que no aparezca la barra lateral.

Elegir la forma de diseñar la página

Al iniciar Divi Builder aparecen tres opciones, empezar a construir, elegir un diseño preconfigurado de Divi o clonar una página que ya hemos creado con anterioridad.

Yo elijo la primera opción, pero al ser un elemento independiente, podremos añadir el carrusel a pantalla completa en cualquiera de las otras dos opciones.

Diseños de páginas en DIVI
Diseños de páginas en DIVI
Seleccionar la sección y el módulo del slider

Para configurar un carrusel a pantalla completa en Divi, tenemos que elegir una sección de ancho completo, y colocar dentro un módulo de «Control deslizante de anchura completa«.

Si la página es nueva cerramos las opciones de los módulos que aparecen de forma automática hasta que sólo quede el recuadro azul de la sección estándar.

Para poder ver el efecto, he añadido otra sección por debajo con una lista de las entradas de la web. Así añado algo de contenido para poder hacer scroll.

Colocando el cursor en la parte inferior de esa sección, picamos en el signo más y seleccionamos la sección de ancho completo.

Seguidamente elegimos el módulo de control deslizante de anchura completa.

Sección de ancho completo en DIVI
Sección de ancho completo en DIVI
Control deslizante de anchura completa
Control deslizante de anchura completa de DIVI

Para terminar de configurar el diseño de la página hay que colocar el carrusel a pantalla completa en Divi en la parte superior.

Para este paso cerramos las opciones del módulo, que se habrán abierto automáticamente, y desplazamos la sección hasta colocarla en su posición.

Posición de las secciones en DIVI
Posición de las secciones desde el visor de módulos

Configurar la sección de anchura completa

Lo único que vamos a añadir será un nombre a la clase CSS en la pestaña «Avanzado«.

El nombre tiene que ser único, en minúsculas, sin espacios ni caracteres especiales. Yo utilizaré «alturaseccionslider«.

Nombre para la clase de la sección del carrusel
Nombre para la clase de la sección del carrusel

Configurar el módulo de Control deslizante de anchura completa

De momento sólo configuraremos las opciones básicas del módulo y dejo a vuestra elección el resto de opciones:

Pestaña contenido: Añadimos las diapositivas que vamos a utilizar.

  • Dentro de cada diapositiva añadimos un título, el nombre del botón (si queremos utilizarlo) con la dirección del enlace y la imagen como fondo del módulo, nunca como imagen de diapositiva.
  • Dependiendo del encuadre de la imagen, se puede utilizar el efecto de paralaje o buscar la posición inicial para mostrar mejor la diapositiva.
  • En la opción del tamaño debe estar seleccionada «Cubierta«.
  • Es importante que las imágenes estén optimizadas, recortadas y dimensionadas al tamaño correcto, y que no pesen entorno 200/250Kb para no ralentizar la carga de la web demasiado. Seguiremos unas proporciones 16:9, que es el formato que tienen la mayoría de los monitores, y que dan un tamaño de 1920×1080 píxeles. Podemos reducir el tamaño en un 20% para optimizar la carga con una pérdida mínima de calidad y dejarlo en 1530×860 píxeles.

Pestaña diseño: Antes de nada, advertiros que estas pestañas son las del módulo, ya que dentro de cada diapositiva también existen.

  • Aquí puedes cambiar aspectos como el tamaño de las fuentes, el aspecto del botón y varias opciones gráficas, pero no nos afecta en este momento.
  • La última pestaña activa la transición de las diapositivas, quí podemos indicar el tiempo entre cada cambio en milisegundos.

Pestaña avanzado: Al igual que en la pesraña anterior, esta corresponde a la opción del módulo y no a la de las diapositivas o imágenes.

Solo vamos a añadir un nombre en la opción «Clase CSS«. Este nombre tenemos que apuntarlo para utilizarlo después en el código que os apunto más abajo. Yo utilizaré el nombre «alturamoduloslider«.

Nombre para la clase del módulo de slider a pantalla completa
Nombre para la clase del módulo de slider a pantalla completa

Este es el resultado que hemos obtenido hasta el momento, con un carrusel o deslizador de diapositivas adaptado a las opciones generales de DIVI.

Deslizador de anchura completa de DIVI.
Deslizador de anchura completa de DIVI.

Ajustar el carrusel a pantalla completa en Divi a la altura de la ventana

Hasta aquí hemos configurada el carrusel o deslizante hasta donde nos dejan las opciones de Divi, pero si queremos que ocupe toda la pantalla, tenemos que hacer uso de las hojas de estilo.

Para seguir un proceso correcto, ajustaremos las alturas de la sección, el módulo y las imágenes a la altura que tenga la ventana del navegador en el momento de mostrar la página.

Para eso utilizarmos un pequeño código CSS utilizando los nombres que asignamos antes a las clases CSS de la sección y el módulo.

Abrimos el personalizador de WordPress, y en la pestaña «CSS adicional» añadimos el siguiente código CSS.

Ajuste a pantalla completa con CSS en Divi
Ajuste a pantalla completa con CSS en Divi

La etiqueta .et_pb_slide hace referencia a cada diapositiva individual que también ajustamos a la altura de la ventana.

Podremos observar como se adapta al instante el carrusel a las proporciones que tenemos en la ventana del navegador.

Si no hemos configurado la cabecera, o queremos realizar algún ajuste de últma hora, sin salir del personalizador, nos dirigimos a la pestaña «Cabecera y navegación > Barra del menú principal» y jugamos con las opciones. Recordad que siempre tiene que haber un mínimo de transparencia para que las imágenes se ajusten correctamente.

Acordaros de «Guardar y publicar» antes de salir o perderemos todos los cambios y tendremos que volver a realizarlos..

Ajustar el carrusel de Divi a móviles y otros dispositivos

Todo el proceso anterior podía haberlo hecho colocando el código CSS dentro de la sección o módulo en lugar de en la pestaña del personalizador, pero no podría jugar con esas propiedades para adaptarlo a los diferentes dispositivos.

Tengo un tutorial del tema Extra, que también trabaja con «Divi builder», donde aplico los cambios en el mismo módulo, ya que no requería, en ese momento, adaptarlo a diferentes dispositivos.

De esta forma, podemos jugar con el código CSS aplicado y decidir cómo queremos que se muestre el slider en cada momento, según el tamaño de la pantalla en el que se muestre el carrusel.

Si el motivo principal no está centrado, perderemos mucha información al recortarse la imagen a un formato más alto que ancho, como el teléfono.

Reducir el tamaño del carrusel según el dispositivo

Si no queremos que nos pase esto conviene reducir el tamaño del slider, por ejemplo, a la mitad de la pantalla del teléfono, o eliminar los ajustes de la altura.

carrusel a pantalla completa en Divi. adaptar a moviles

Para ajustar el slider a la mitad de la pantalla del teléfono, añadiremos este código a continuación del que pusimos anteriormente, en la pestaña «CSS adicional» del personalizador de WordPress.

De esta forma, cuando la resolución de la pantalla sea inferior a 768 píxeles el slider ocupará el 70% de la pantalla de una tablet, y cuando sea inferior a 480 píxeles ocupará la mitad de la altura de la pantalla del teléfono. Podemos modificar estos valores hasta encontrar el ajuste que más nos guste.

Desplazar la imagen según el dispositivo

Si deseamos mantener el carrusel a pantalla completa en cualquier dispositivo, podemos sustituir el código anterior por el siguiente, que permite mover la imagen cambiando los valores en píxeles y así encontrar el encuadre correcto.

Cambiar las imagen por otra diferente

Con esta opción, primero tenemos que subir las imágenes a WordPress, copiar la url de cada imagen y sustituirla en el código de abajo.

Las imágenes deben estar optimizadas para dispositivos, por lo que el tamaño y formato deben ser verticales. Un tamaño adecuado sería de 730×10240 píxeles con una relaión de aspecto 5:7.

En esta opción hay que ir añadiendo cada slider por separado tantas veces como imágenes componen el carrusel. Cada slide está identificado con un número que empieza con el cero.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

23 Comentarios

  1. Iván

    Hola Juan,

    Lo primero, felicitarte por tu buen trabajo, me encantan tus vídeos y sobre todo, tu manera de explicarlo tan sencillo y tan bien; ¿y si en vez de slide lo hacemos con un vídeo fullscreen? ¿se podría?

    Un saludo,

    Responder
  2. Rafael

    Hola Juan. Muchas gracias por este excelente tutorial. He aplicado todo el ejercicio y hasta ahora sin problema en la altura. Pero quiero que me ayudes por favor para configurar que el slider avance automáticamente. No encuentro la opción para activar las transacciones.
    Muchas gracias por tus tutos y por la ayuda.

    Responder
    • Juan

      Hola Rafael,

      Dentro de la pestaña «Diseño» de la configuración del módulo del deslizador, la última propiedad que pone «Animación» contiene una opción que está desactivada que pone «Animación automática».

      Cuando la activas puedes elegir el tiempo en milisegundos que tarda en pasar de una diapositiva a otra y si quieres que se detenga cuando se pasa el ratón por encima.

      Responder
  3. Eduardo

    Hola estimado,
    Está genial el tutorial, lo puse en practica y todo quedo muy bien.
    Ahora, si quisiera que las imágenes sean aleatorias, que tendría que hacer?
    Gracias de antemano por la respuesta. 🙂

    Responder
    • Juan

      Hola Eduardo,

      No se puede hacer un «random» de imágenes para que aparezcan aleatoriamente con el slider de Divi, puede que en un futuro incluyan esta función que ahora no existe.

      Seguramente con un poco de javascript se podría hacer, pero ya hay que andar modificando código que podría interferir en otros módulos o configuraciones.

      Responder
  4. Marta

    Buenas tardes, Juan.

    Lo primero, felicitarte por tu página y agradecerte el contenido.

    He implementado el código en una página que estoy desarrollando, pero en el momento en que empiezo a deslizar las imágenes pierdo el footer (navegando en web y smartphone) y el menu (navegando en smartphone). El footer estoy forzando que aparezca usando el código

    footer {
    position:fixed;
    left:0px;
    bottom:0px;
    height:50px;
    width:100%;
    }

    ¿Cómo podría solucionarlo?

    También te quería preguntar como deslizar la imagen navegando con el ordenador al hacer scroll.

    Un saludo y muchas gracias.

    Responder
    • Juan

      Hola Marta,

      Posiblemente sea una cuestión de superposición de capas. Desconozco como está configurado el Slider, así que te doy una solución para el footer. Añade en la pestaña CSS adicional un z-index mayor que el que pueda tener el Slider, por ejemplo:

      #main-footer {
      z-index: 9999 !important;
      }

      No es necesario que elimines el resto de código que tengas.

      Responder
  5. Antonio

    Hola Juan, gracias por tu aportaciones. Esta solución me funciona a medias, veo la img a pantalla completa pero la siguiente sección se ve en medio de la imagen.

    Responder
    • Juan

      Hola Antonio,

      Acabo de actualizar el artículo y pronto colgaré el nuevo vídeo, al leer tu comentario pensé que alguna opción estaba obsoleta y producía algún fallo, pero a parte de tener algunas opciones en sitios diferentes a la versión anterior de DIVI, todo funciona bien.

      Comprueba la pestaña «Separación» de las dos secciones, la del carrusel y la que tengas debajo, por si tienes asignado algún margen o espacio incorrecto.

      También puedes comprobar la superposición de capas z-index en la pestaña «Avanzados» por si se están colapsando.

      Responder
  6. neptuniana

    ¿se ouede usar en blogger?,es que no encuentro ningún tutorial como este en donde el slider sea tan bonito

    Responder
    • Juan

      Hola neptuniana, blogger es una plataforma para blogs muy limitada en cuanto a modificaciones, para crear un slider tendrás que modificar el código y añadir funciones dinámicas, pero es muy complejo y nunca quedará como en el tema Divi. Este tema es para instalarlo en un servidor online contratado, y no depende de una plataforma gestionada por terceras partes, por eso es más sencillo realizar cambios. Con blogger tienes que adaptarte a lo que ofrece, con Divi puedes realizar infinitos cambios a tu gusto.

      Responder
  7. kike García

    Hola gracias amigo por tan excelente información,

    Sin embargo mi sitio no consigo que se pueda visualizar bien en tablet y smarthphone.

    He seguido al pie de la letra todo el video y revisado muy bien los codigos.

    los códigos que he creado son los siguientes:

    .alturaseccionslider,
    .alturaseccionmodulo,
    .et_pb_slide {
    height:100vh
    }

    @media (max-width: 768px) {
    .alturaseccionslider,
    .alturamoduloslider,
    .et_pb_slide {
    height: inherit;
    }
    }

    Agradezco tu ayuda.

    Responder
    • Juan

      Hola kike García,

      Comprueba los nombres que has utilizado para las clases CSS, en tu código veo que no coincide el de la altura del módulo y debería ser el mismo.

      Responder
  8. Mauricio

    hola buenas ,antes que nada muchas gracias por tomarte el tiempo de explicar, he tenido un problema ,el tamaño de la seccion si es a pantalla completa ,pero la foto del modulo se muestra a la mitad, he seguido al pie de la letra todo los pasos y no se en que pude equivocarme,si pudieras orientarme,te lo agradeceria mucho.

    Responder
    • Juan

      Hola Mauricio,
      Comprueba que cada imagen que has incluido en el fondo tiene seleccionada la propiedad «Cubierta» en «Imagen de fondo de tamaño».
      No está de más comprobar también los nombres de las clases que hemos puesto en las pestañas «Avanzado» para ver que no nos hemos comido ninguna letra, no hay espacios al principio o al final y coinciden con los colocados en el código de los estilos.

      Responder
  9. Joel

    Hola!
    Hize tal cual indicas en el tutorial pero el problema que se me presento es que al pasar de una imagen a otra la primera imagen tiene un efecto de subirse hacia arriba y la siguiente imagen baja pero no se vee casi nada y vuelve a cambiar a la primera imagen.
    Quiere que la transición sea de una imagen a la otra.
    Muchas gracias por tu ayuda.

    Responder
    • Juan

      Hola Joel, comprueba que has escrito bien todos los códigos, si has aplicado algún efecto de animación al módulo, déjalo sin animación, ya que esto afecta al contenido y no al cambio de diapositivas.

      Responder
  10. Dani

    Muy buena solución. Pero se me plantea una duda. Al usar la etiqueta «.et_pb_slide «, afecta a todos los sliders de la web. ¿ Hay alguna manera de personalizar que solo afecte a algunos?

    Un saludo.

    Responder
    • Juan

      Hola Dani, la etiqueta .et_pb_slide hace referencia todos los sliders de toda la web, para conseguir que sólo afecte a uno, o a los que tu elijas, tienes que añadir un escalón más en la cadena que hace referencia a la dirección .et_pb_slide
      Tienes que añadir delante de la etiqueta general del slider el nombre que asignaste al módulo en la clase CSS
      Quedaría así:
      .alturaseccionslider,
      .alturamoduloslider,
      .alturamoduloslider .et_pb_slide {
      height: 100vh;
      }

      Responder
  11. Beatriz

    Hola Buenas!

    Muchas gracias por la ayuda, lo primero. Tengo un problema con con Slider.

    La imagen no me va hasta el final de la pantalla, me sale un pequeño footer al hacer el scrolll, ¿Podrías ayudarme? muchas gracias!

    Responder
    • Juan

      Hola Beatriz,
      El pequeño footer que te aparece en la parte inferior es un elemento que no estás utilizando pero que aparece porque suele llevar algún contenido.
      Prueba a colocar este código en la pestaña de «CSS adicioanl» desde el personalizador y me cuentas si te funcionó.

      #footer-bottom {display: none !important;}

      Responder
  12. Michel

    Hola, gracias por tu ayuda pero tengo un problema mi pagina no se puede adaptar así como lo explicas en el vídeo, por favor si me pudieras ayudar. gracias

    Responder
    • Juan

      Hola Michel, he visitado tu web y no puedo determinar cual es tu problema, no aparece ninguna imagen en el slider. Si pudieras concretar algo más sobre tu problema podríamos buscar una solución

      Responder

Enviar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Hosting WordPress de SiteGround

¿Quieres estar informado de lo que pasa en IVW?

Suscríbete y te aviso de las novedades

verificarprivacidad

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción. ¡Gracias por suscribirte!

Pin It on Pinterest

Share This
Ir al contenido