Todos sabemos que los controles deslizantes son excelentes para atraer a los usuarios con servicios, productos o páginas destacados en una ubicación conveniente en la mitad superior de la página. Algunos sitios (creo que fotógrafos) necesitan incluir una o más de sus galerías de fotos en la página de inicio. Usar un control deslizante para esto puede ser una buena opción. Sin embargo, es posible que no haya considerado presentar su galería de fotos en un control deslizante como este.
En este tutorial, le mostraré una manera fácil de incrustar galerías de imágenes Divi en sus diapositivas para crear un control deslizante de galería de fotos completamente personalizado en Divi. El truco consiste en crear una galería de imágenes de WordPress en el área de contenido de su control deslizante. Entonces solo necesita asegurarse y seleccionar la opción para usar la Galería Divi en lugar del estilo predeterminado de la Galería de WordPress. Es muy fácil y divertido de implementar.
Descargar el tutorial GRATIS
Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se «volverá a suscribir» ni recibirá correos electrónicos adicionales.
Vistazo
Aquí hay un adelanto del control deslizante de la galería de fotos que crearemos en este tutorial.
Lo que necesitas para empezar
Para comenzar, necesitará tener la siguiente configuración:
- El tema Divi instalado y activo
- Una nueva página creada para construir desde cero en la interfaz (constructor visual)
- Aproximadamente 6-8 imágenes que se utilizarán para la imagen del control deslizante y la galería de fotos
Después de eso, tendrá un lienzo en blanco para comenzar a construir algunas pestañas flotantes en Divi.
Habilite la opción Galería Divi en Opciones de tema Divi
Divi le permite reemplazar la visualización predeterminada de la Galería de WordPress con una visualización de la Galería Divi. Por lo tanto, cada vez que crea una galería de WordPress y la inserta dentro de un módulo, la galería se muestra como una galería utilizando el Módulo Galería Divi. Básicamente, esto le permite agregar galerías de imágenes Divi a cualquier módulo en Divi Builder. En nuestro caso, agregaremos una Galería Divi al módulo deslizante.
Para cambiar la configuración, vaya a Divi> Opciones de tema. Luego, en la pestaña General, haga clic para habilitar la opción Galería Divi.
¡Eso es! Ahora, el código abreviado predeterminado de la Galería de WordPress mostrará una galería de fotos de estilo Divi.
Creación del control deslizante de la galería de fotos personalizada en Divi
La sección y la fila
Para comenzar, siga adelante y cree una sección regular con una fila de una columna.
Luego actualice la configuración de la fila de la siguiente manera:
- Ancho: 100% (por lo que el control deslizante será de ancho completo en el móvil)
- Relleno: 0px arriba, 0px abajo
- Esquinas redondeadas: 20px
Creación del contenido del control deslizante
A continuación, agregue un módulo deslizante a la fila.
Abra la configuración del control deslizante y elimine una de las diapositivas que se agregaron de forma predeterminada. Luego, haga clic en el ícono de ajustes en la diapositiva para abrir la configuración de la diapositiva para esa diapositiva.
Luego actualice el contenido de la diapositiva con lo siguiente:
- Título: Nuestra Galería
- Botón: Ver todo
- Cuerpo: Esta es nuestra galería. Echale un vistazo.
Debajo del área de contenido del cuerpo, haga clic en el botón Agregar medios.
En la ventana emergente de la Biblioteca de medios, seleccione la pestaña Crear galería en la parte superior izquierda. Luego, seleccione las 6 imágenes que desea usar para la galería y haga clic en el botón «Crear una nueva galería» en la parte inferior derecha.
Esto lo llevará a la página de edición de categorías dentro de la ventana emergente. Ignore la configuración de la galería en la parte superior derecha porque los estilos de la Galería Divi anularán esta configuración de la Galería de WordPress.
Luego haga clic en el botón «Insertar galería».
Esto coloca un código corto de la galería dentro del contenido del módulo deslizante. Si desea que la galería se muestre después del texto del cuerpo actual, asegúrese de colocar el código corto después del contenido.
Ahora tiene una galería de estilo Divi incrustada que se muestra en el área de contenido de su módulo deslizante. ¡Cosas muy interesantes!
Continuemos actualizando el contenido de nuestra diapositiva agregando una imagen de diapositiva principal.
Ahora que tenemos el contenido del control deslizante listo para usar, guarde la configuración de la diapositiva 1.
Configuración del control deslizante
Asegúrese de guardar la configuración de la diapositiva individual. Luego actualice la siguiente configuración de diseño para el control deslizante principal. Esto asegurará que las actualizaciones de diseño afectarán a todas las diapositivas individuales que agregará.
Borde de imagen y sombra de cuadro
- Esquinas redondeadas de la imagen: 20px
- Ancho del borde de la imagen: 40 px (escritorio), 0 px (tableta)
- Color del borde de la imagen: rgba (0,0,0,0)
- Image Box Shadow: ver captura de pantalla
- Posición horizontal de la sombra del cuadro: -170px
- Posición vertical de la sombra del cuadro: -220px
- Fuerza de propagación de la sombra de caja: -60px
- Color de sombra: rgba (255,255,255,0.2)
Título y texto del cuerpo
- Fuente del título: Karla
- Alineación del texto del título: derecha
- Tamaño del texto del título: 48px
- Altura de la línea de título: 1.3em
- Tamaño del texto del cuerpo: 16px
- Espaciado de letras del cuerpo: 2px
- Altura de la línea del cuerpo: 2em
Estilos de botones
- Tamaño del texto del botón: 16px
- Color de fondo del botón: # 333333
- Ancho del borde del botón: 0px
- Radio del borde del botón: 20px
- Espaciado entre letras de botones: 2px
- Fuente del botón: Karla
- Peso de la fuente del botón: Negrita
- Icono de botón: ver captura de pantalla
- Alineación de botones: derecha
- Margen del botón: -5em a la derecha
- Acolchado de botones (escritorio): 3em a la izquierda, 5em a la derecha
- Acolchado de botones (teléfono): 2em a la izquierda, 6em a la derecha
- Sombra del cuadro de botones: ver captura de pantalla
- Posición vertical de la sombra del cuadro: 0px
- Fuerza de propagación de la sombra de la caja: 20 px (escritorio), 10 px (teléfono)
- Color de sombra: #ffffff
Relleno deslizante
- Relleno: 10% superior, 10% inferior
Agregar un degradado de fondo a la diapositiva 1
Ahora que tenemos el estilo del control deslizante en su lugar, podemos agregar un degradado de fondo personalizado a nuestra diapositiva individual. Abra la configuración de diapositiva para la diapositiva 1 y actualice lo siguiente:
- Color de degradado de fondo a la izquierda: # 6d0066
- Gradiente de fondo Color derecho: # 000000
- Tipo de degradado: radial
- Dirección radial: arriba a la izquierda
Crear diapositiva 2
Para crear la segunda diapositiva, podemos simplemente duplicar la diapositiva 1 usando el icono de duplicar. Luego abra la configuración de la diapositiva duplicada (diapositiva 2).
En este punto, puede actualizar el contenido de la nueva diapositiva según sea necesario. Por ejemplo, puede agregar una nueva imagen de diapositiva y generar otro código corto para insertar en la galería para agregar una nueva galería de fotos a la diapositiva.
Luego actualice el degradado de fondo de la siguiente manera:
- Color de degradado de fondo a la izquierda: # 0c71c3
