Los temas de Elegant Themes vienen cargados a tope de funcionalidades que otros temas o plantillas no incluyen, esto tiene sus ventajas y sus inconvenientes. Y uno de los inconvenientes es configurar un carrusel a pantalla completa en Divi a través de su constructor Divi Builder.

Fullscreen slider o Carrusel a pantalla completa

He recibido 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 nos dan la posibilidad de adaptarlos sin necesidad de instalar plugins adicionales. Tenemos la base y podemos moldearlo con las hojas de estilo (CSS).

Proceso para crear un pase de diapositivas a pantalla completa

En esta descripción realizaré el proceso desde la zona de administración, ya que lo primero que tenemos que hacer es seleccionar “Usar el constructor Divi” como forma de crear la página de inicio.

En los paneles de la derecha seleccionamos que la página sea de ancho completo y que el menú esté siempre visible. Estas opciones las podés modificar cuando queras.

 

Una vez activado, podemos seguir configurando la página desde el editor de la administración o hacerlo desde el “Constructor visual“. Yo seguiré con la primera opción.

 

Elegir la sección y el módulo del slider

Para configurar un carrusel a pantalla completa en Divi, elegimos una sección de ancho completo y montamos dentro un módulo de “Control deslizante de anchura completa“.

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.

 

Configurar el módulo de Control deslizante de anchura completa

De momento seguimos las opciones básicas del módulo, el resto de opciones les  dejo que las prueben:

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.

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

  • En esta ocasión sólo quitaré la sombra del borde, ya que a mí me gusta ver las imágenes lo más limpias posible.

Pestaña avanzado: Al final del todo está la configuración de la velocidad de transición. Una velocidad normal sería de 4000 milisegundos (4 segundos).

 

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 de la ventana del navegador, que tenga en el momento de mostrar la página.

Primero tenemos que asignar un nombre a la “Clase CSS“, tanto de la sección como del módulo. Esto se realiza desde la pestaña “Avanzado” de cada apartado.

 

A continuación, vamos al personalizador de WordPress, y en la pestaña “CSS adicional” añadimos el siguiente código CSS.

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

Para terminar de ajustar el slider completamente, sin salir del personalizador, nos dirigimos a la pestaña “Cabecera y navegación > Barra del menú principal” y jugamos con el color de fondo, aplicamos un poco de transparencia para que el slider se coloque debajo del menú y que quede todo ajustado.

En este apartado podemos jugar un poco con todas las opciones que nos ofrecen, cambiando los colores a nuestro gusto u ocultando por completo e color del fondo. Acordaros de “Guardar y publicar” antes de salir.

 

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

Si se han fijado, Divi tiene sus apartados correspondientes para añadir el código CSS. Yo no los he utilizado precisamente por este motivo

De esta forma, podemos jugar con el código CSS desde el personalizador 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.

Dependiendo de las imágenes que utilicemos, necesitaremos de esta acción o no.

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

Si no queremos perder mucha información de la diapositiva, nos 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.

 

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 se adaptará a la mitad de la altura de la pantalla del teléfono. Podemos modificar estos valores, si queremos, hasta encontrar el ajuste que más nos guste.

Si lo que deseamos es eliminar nuestro ajuste a una determinada resolución, cambiaremos el valor “height: 50vh; por “height: inherit;”.

 

Si te ha resultado útil esta información, o te has visto en alguna dificultad a la hora de realizarlo, puedes dejar un comentario e intentaremos buscar una solución.

 

Pin It on Pinterest