Slider con Divi a pantalla completa

En nuestra anterior entrada “Primera página con Divi” hemos visto como crear una portada a pantalla completa para la web de ejemplo. También como añadirle un logo, un título y un botón de desplazamiento, además de introducir y explicar el módulo “Título de anchura completa”. Ahora toca un Slider o carrusel

El Slider que vamos a diseñar será de ancho completo con texto, fondo y botones de acceso a otras páginas o secciones de mi web.

Editamos nuestra página y nos vamos al constructor de Divi.

Creamos una sección de anchura completa justo debajo del Título de anchura completa creado anteriormente y en insertar módulo, seleccionamos un “Control deslizante de anchura completa”

imagen modulo 1

Una vez tengamos seleccionado el control deslizante se nos abrirá un cuadro de diálogo con las siguientes opciones:

 

Flechas:

Seleccionamos si queremos mostrar las dos flechas de desplazamiento del slider.

Controles:

Lo mismo que la opción anterior, pero se refiere a los botones circulares que se muestran en la parte inferior del slider.

Animación automática:

Podemos elegir si queremos que las imágenes del carrusel del slider cambien de manera automática si necesidad de pulsar ningún botón o flecha.

Velocidad de animación automática:

Al seleccionar la animación automática, tendremos que indicarle cada cuanto tiempo debe cambiar el carrusel de imagen. Se especifica en milisegundos. (ejemplo: 5 seg serían 5000 ms)

Continuar Automático de Diapositivas en Hover:

si seleccionamos esta opción, la animación automática continuará aunque tengamos el puntero del ratón sobre el slider. Normalmente no lo haría.

Usar efecto de paralaje:

Si está habilitado, tus imágenes de fondo tendrán una posición fija cuando te desplaces, creando un efecto de paralaje.

Eliminar sombra interior:

Desactiva o activa la sombra interior del slider

Desactivar el:

Donde nos permite desactivar este módulo en el telefono, tablet o pc de escritorio.

Etiqueta de administración:

Donde le podemos poner un nombre al módulo.

En la parte superior de este cuadro de diálogo, tenemos la opción  añadir nueva diapositiva, y será aquí donde vamos a definir cada imagen, texto, etc de nuestro carrusel,

El carrusel o slider estará definido por tantas diapositiva como queramos.

Veamos ahora como definir estas diapositivas. Pulsamos en añadir diapositiva

img modulo slider 2

Aquí ahora tenemos otras opciones que vamos a comentar:

Título:

Definimos el título que queremos que salga en nuestra dispositiva.

Texto del botón:

Nos aparecerá un botón debajo del contenido del carrusel y aquí pondremos el texto que queremos que salga en nuestro botón. Si no queremos el botón lo dejaremos en blanco.

URL del botón:

Ponemos la url o enlace de nuestra página de destino al pulsar el botón.

Imagen de fondo:

Cargamos una imagen y esta se usará como fondo de este módulo.

El ancho recomendado para una imagen de una diapositiva es de 1080 pixeles, y la altura vendrá determinada por la cantidad de texto que tenga. Las diapositivas tendrán la altura de la que tenga mayor cantidad de texto y por lo tanto, mayor altura.

Imagen De Fondo De La Posición:

Se selecciona la posición de la imagen de fondo

Imagen De Fondo De Tamaño:

Se selecciona el tamaño de la imagen de fondo

Color de fondo:

para usar solamente un color sólido como imagen de fondo. Tiene un selector de color para definirlo

Imagen de diapositiva:

Si está definida, la imagen de esta diapositiva aparecerá a la izquierda del texto de tu diapositiva. Sube una imagen, o bien déjalo en blanco si deseas una diapositiva solo de texto. Las imágenes de diapositivas no se mostrarán en navegadores cuyo ancho de pantalla sea menor de 768px.

Usar superposición de fondo:

Cuando se activa, se añadirá una superposición de colores personalizada sobre su imagen de fondo y detrás de su contenido deslizante.

Usar superposición de texto:

Cuando se activa, se añade un color de fondo detrás del texto deslizante para hacerlo más legible sobre las imágenes de fondo.

Alineación vertical de imagen de la diapositiva:

Este ajuste determina la alineación vertical de la imagen de tu diapositiva. Tu imagen puede estar centrada verticalmente o alineada a la base de tu diapositiva.

Vídeo de diapositiva:

Si está definido, este vídeo aparecerá a la izquierda del texto de tu diapositiva. Introduce una URL de una página de Youtube o Vimeo, o bien déjalo en blanco si deseas una diapositiva solo de texto.

Texto alternativo de la imagen:

Si tienes definida una imagen de diapositiva, introduce aquí el texto alternativo para tu imagen.

Color de texto:

Aquí puedes escoger si tu texto es claro u oscuro. Si tienes una diapositiva con un fondo oscuro, escoge texto claro. Si tienes un fondo claro, usa texto oscuro.

Vídeo .MP4 de fondo:

Todos los vídeos deberían subirse tanto en formato .MP4 como .WEBM para garantizar la máxima compatibilidad con todos los navegadores. Aquí tienes que subir la versión .MP4. Nota importante: en los dispositivos móviles los vídeos de fondo están deshabilitados. En su lugar se usará tu imagen de fondo. Por este motivo, para garantizar los mejores resultados deberías definir tanto una imagen de fondo como un vídeo de fondo.

Vídeo .WEBM de fondo:

Todos los vídeos deberían subirse tanto en formato .MP4 como .WEBM para garantizar la máxima compatibilidad con todos los navegadores. Aquí tienes que subir la versión .WEBM. Nota importante: en los dispositivos móviles los vídeos de fondo están deshabilitados. En su lugar se usará tu imagen de fondo. Por este motivo, para garantizar los mejores resultados deberías definir tanto una imagen de fondo como un vídeo de fondo.

Anchura de vídeo de fondo:

Para que los vídeos se muestren con el tamaño correcto, debes introducir aquí la anchura exacta (en píxeles) de tu vídeo.

Altura de vídeo de fondo:

Para que los vídeos se muestren con el tamaño correcto, debes introducir aquí la altura exacta (en píxeles) de tu vídeo.

Pausar vídeo:

Permite que otros reproductores pausen el vídeo cuando comiencen a reproducir

Contenido:

Aquí se escribe el texto que queremos añadir a la diapositiva. Hay que tener en cuenta que esta cantidad de texto va a determinar la altura del carrusel.

Etiqueta de administración:

Si queremos darle un nombre la la diapositiva para identificarla mejor.

Para el ejemplo de la tienda de mascotas, he seleccionado 6 imágenes de Pixabay, para crear seis diapositivas con botón de acceso a otras páginas (perros, gatos, peces, pájaros, reptiles y roedores). He creado las seis diapositivas con sus correspondientes imágenes de fondo y les he puesto sus títulos y activado el botón con la palabra entrar.

Aquí podéis ver un gif de ejemplo del slider

gif slider

 

 

Probad vosotros las combinaciones de fondos y colores que más os gusten y podréis crear sliders fantásticos.

Divi WordPress Theme

Web Hosting

¡Si quieres puedes compartirlo!

Uso de cookies

Hola, usamos cookies y nos obligan a indicártelo. Si sigues navegando es porque estás de acuerdo con nuestra política de cookies plugin cookies

ACEPTAR
Aviso de cookies

Share This

Share this post with your friends!