Logotipo Webficina

Como crear un Slider con Divi

Contenido

Home » Como crear un Slider con Divi

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 crear un Slider o carrusel con DIVI.

¿Qué es un Slider o Carrusel de Imágenes?

Un Slider o Carrusel de Imágenes es como un marco o pantalla en nuestra web en donde podemos indicar un número de imágenes, videos, texto, y que se irá mostrando alternativamente durante un tiempo definido por nosotros. También disponen de unos botones de control para poder alternarlos manualmente.

Un slider es una herramienta de diseño increíblemente versátil que te permite mostrar imágenes, vídeos y otros contenidos de forma bella y más eficaz, al tiempo que maximiza el espacio de su sitio web.

Tanto si necesitas una forma sencilla de mostrar un pase de diapositivas de fotos en un sitio web de comercio electrónico o inmobiliario, como si quieres una cabecera de vídeo atrevida con llamadas a la acción, los deslizadores pueden ayudarte a captar rápidamente la atención de tus visitantes.

La palabra Carrusel de imágenes lo define perfectamente, se muestra una imagen o video detrás de otro

 

Relacionado

Cómo descargar gratis ilustraciones animadas para una web

 

¿Cómo hacemos un Slider o Carrusel de Imágenes en Divi?

Vamos a ver como podemos diseñar un Slider, también llamado Carrusel de Imagenes con Divi

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».

 

Slider con Divi

 

 

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.

Relacionados:
Como crear Logotipo y el Menú Principal con DIVI

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.

Módulo Slider con Divi

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.

Relacionados:
Como hacer anuncios breves o “Blurbs” con Divi

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 con Divi
Gif Slider con Divi

Tal y como nos indican en la documentación oficial de EleganthThemes ahora veremos como se hace lo mismo en versiones posteriores de DIVI desde el constructor visual.

Relacionado

Cómo saber el tipo de fuente que está usando una web

Crear un Slider de Video con DIVI desde el constructor visual.

Primero habilitamos el constructor visual en la página donde queremos crear el Slider de Video. Agregamos una fila de ancho completo en el botón verde con el signo «+» y seguido abrimos el módulo «Control deslizante de Vídeo»

Una vez que se haya agregado el módulo, un vídeo de ejemplo te introduce en las opciones del módulo. Estas opciones se dividen en tres grupos principales: Contenido , Diseño y Avanzado.

Relacionados:
Mostrar artículos de una tienda Amazon Afiliados sin la API con Divi

Para agregar una nuevas diapositivas de vídeo, tienes que hacer clic en el enlace + Añadir nuevo vídeo. 

Recuerda borrar el vídeo que viene por defecto en el módulo.

Puedes añadir los videos cargándolos en la biblioteca de medios o insertarlos desde youtube con una URL también desde allí.

Configuración de contenido del módulo de control deslizante de video

Ahora que ha agregado su contenido, veamos alguna otras cosa para explorar. Los tres menús desplegables de la pestaña de contenido donde se han agrupado las configuraciones que afectarán a todo el módulo.

Elementos

Debajo de los elementos, puede ajustar la configuración de las flechas y los controles deslizantes del módulo deslizante de video.

Capa superpuesta

Aquí puede elegir mostrar u ocultar superposiciones de video en el video principal. Esto se puede hacer agregando una superposición a cada diapositiva de video o generada automáticamente por Divi.

Etiqueta de administrador

En este menú desplegable, puede agregar una etiqueta de administrador que aparecerá en el generador de back-end, así como en la vista esquemática del generador visual.

Pestaña diseño. Configuración de diseño del módulo de control deslizante de video

En esta pestaña solo hay un grupo de configuraciones llamado Controles. Aquí puede cambiar el color de los controles deslizantes

Configuración avanzada del módulo deslizante de video

En la pestaña Avanzado de su módulo de control deslizante de video, puede agregar una id´s y una clase CSS únicas. También puede agregar CSS personalizado a varios selectores de CSS predefinidos (y preseleccionados) dentro del módulo deslizante de video en el menú desplegable de CSS personalizado. Y finalmente, en el menú desplegable de visibilidad, puede ajustar la visibilidad de su módulo en teléfonos, tabletas y computadoras de escritorio.

Configuración de contenido de video individual

Si desea crear configuraciones específicas para diapositivas individuales, estas deberán configurarse dentro de las diapositivas de vídeo. Simplemente haga clic en el icono de engranaje de esa diapositiva para abrir su configuración única.

Vídeo

Como se demostró anteriormente, aquí es donde puede agregar su contenido de vídeo.

Superposición

En el menú desplegable de superposición, puede cargar una imagen para superponer la diapositiva de su vídeo o elegir que Divi genere una automáticamente.

Configuración de diseño de vídeo individual

En la pestaña de diseño de la diapositiva de vídeo, puede cambiar el color de la flecha de la diapositiva de claro a oscuro.

La mejor manera de aprender a utilizar Divi practicando, podemos Instalar en Nuestro PC un Servidor Local 

Una vez tengamos el servidor funcionando, instalamos WordPress y después instalamos el Tema Divi

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

 

 

Ir al contenido