Cómo crear un control deslizante personalizado de la galería de fotos en Divi


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 los fotógrafos) necesitan presentar 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 insertar 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 es 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 super fácil y divertido de implementar.

Empecemos.

Vistazo

Aquí hay un adelanto del control deslizante de la galería de fotos que crearemos en este tutorial.

  control deslizante de la galería de fotos divi

  control deslizante de la galería de fotos divi

Descargue el diseño deslizante de la galería de fotos personalizada GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi gratis todos los lunes! 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.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, necesitará tener la siguiente configuración:

  1. El tema Divi instalado y activo
  2. Una nueva página creada para construir desde cero en el front-end (generador visual)
  3. 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 de desplazamiento en Divi.

Habilite la opción Divi Gallery en Opciones de tema Divi

Divi le permite reemplazar la pantalla predeterminada de la Galería de WordPress con una pantalla de la Galería Divi. Por lo tanto, cada vez que cree una galería de WordPress e incruste dentro de un módulo, la galería se mostrará como una galería utilizando el Módulo de 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, navegue a Divi> Opciones de tema. Luego, en la pestaña General, haga clic para habilitar la opción Divi Gallery.

  control deslizante de la galería de fotos divi

¡Eso es! Ahora el código corto predeterminado de la Galería de WordPress mostrará una galería de fotos con estilo Divi.

Creación del control deslizante personalizado de la galería de fotos en Divi

La sección y la fila

Para comenzar, 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 dispositivos móviles)
  • Relleno: 0px arriba, 0px abajo
  • Esquinas redondeadas: 20 px

  control deslizante de la galería de fotos divi

Construyendo el contenido del control deslizante

A continuación, agregue un módulo deslizante a la fila.

  control deslizante de la galería de fotos divi

Abra la configuración del control deslizante y elimine una de las diapositivas que se agregó de forma predeterminada. Luego haga clic en el icono de engranaje en la diapositiva para abrir la configuración de la diapositiva para esa diapositiva.

  control deslizante de la galería de fotos divi

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.

  control deslizante de la galería de fotos divi

Debajo del área de contenido del cuerpo, haga clic en el botón Agregar medios.

  control deslizante de la galería de fotos divi

En la ventana emergente Biblioteca de medios, seleccione la pestaña Crear galería en la esquina superior izquierda. Luego seleccione 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.

  control deslizante de la galería de fotos divi

Esto lo llevará a la página de edición de categoría dentro de la ventana emergente. Ignora la configuración de la galería en la esquina 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".

  control deslizante de la galería de fotos divi

Esto coloca un shortcode 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.

  control deslizante de la galería de fotos divi

Ahora tiene una galería integrada de estilo Divi en el área de contenido de su módulo deslizante. ¡Cosas geniales!

Continuemos actualizando nuestro contenido de diapositiva agregando una imagen de diapositiva principal.

  control deslizante de la galería de fotos divi

Ahora que tenemos listo el contenido de nuestro control deslizante, guarde su configuración para 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 caja

  • Esquinas redondeadas de la imagen: 20 px
  • Ancho del borde de la imagen: 40 px (escritorio), 0 px (tableta)
  • Color del borde de la imagen: rgba (0,0,0,0)

  control deslizante de la galería de fotos divi

  • Image Box Shadow: ver captura de pantalla
  • Posición horizontal de la sombra de la caja: -170px
  • Posición vertical de la sombra de la caja: -220px
  • Fuerza de propagación de la sombra de la caja: -60px
  • Color de sombra: rgba (255,255,255,0.2)

  control deslizante de la galería de fotos divi

Título y texto del cuerpo

  • Título de la fuente: Karla
  • Alineación del texto del título: derecha
  • Tamaño del texto del título: 48 px
  • Altura de la línea de título: 1.3em
  • Tamaño del texto del cuerpo: 16px
  • Espaciado entre letras del cuerpo: 2px
  • Altura de la línea del cuerpo: 2em

  control deslizante de la galería de fotos divi

Estilos de botones

  • Tamaño del texto del botón: 16 px
  • Color de fondo del botón: # 333333
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 20 px
  • Espaciado entre letras de botones: 2px
  • Fuente del botón: Karla
  • Fuente del botón Peso: Negrita
  • Icono del botón: ver captura de pantalla
  • Alineación de botones: derecha
  • Margen del botón: -5em derecha
  • Relleno de botón (escritorio): 3em izquierda, 5em derecha
  • Relleno de botón (teléfono): 2em izquierda, 6em derecha

  control deslizante de la galería de fotos divi

  • Button Box Shadow: ver captura de pantalla
  • Posición vertical de la sombra de la caja: 0px
  • Box Shadow Spread Strength: 20px (escritorio), 10px (teléfono)
  • Color de sombra: #ffffff

  control deslizante de la galería de fotos divi

Acolchado deslizante

  • Acolchado: 10% superior, 10% inferior

  control deslizante de la galería de fotos divi

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 la diapositiva para la diapositiva 1 y actualice lo siguiente:

  • Gradiente de fondo Color izquierdo: # 6d0066
  • Gradiente de fondo Color correcto: # 000000
  • Tipo de gradiente: radial
  • Dirección radial: arriba a la izquierda

  control deslizante de la galería de fotos divi

Crear diapositiva 2

Para crear la segunda diapositiva, podemos duplicar la diapositiva 1 usando el icono de duplicar. Luego abra la configuración de diapositiva duplicada (diapositiva 2).

  control deslizante de la galería de fotos divi

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 abreviado de incrustación de galería para agregar una nueva galería de fotos a la diapositiva.

Luego actualice el gradiente de fondo de la siguiente manera:

  • Gradiente de fondo Color izquierdo: # 0c71c3

  control deslizante de la galería de fotos divi

Resultado final

Aquí esta el resultado final.

  control deslizante de la galería de fotos divi

Y así es como se ve el control deslizante en la tableta y el teléfono.

  control deslizante de la galería de fotos divi

  control deslizante de la galería de fotos divi

Y aquí está el control deslizante si saca las imágenes de la diapositiva para que solo se muestre el contenido de la diapositiva y la galería.

  control deslizante de la galería de fotos divi

Pensamientos finales

La capacidad de incrustar una galería divi dentro del Módulo deslizante de Divi abre la oportunidad de crear algunos controles deslizantes de galería de fotos de gran aspecto con poco esfuerzo. Con suerte, este tutorial le dará algo de inspiración para crear algunos controles deslizantes hermosos de la galería de fotos.

Para obtener más información sobre esta técnica de inserción de la galería divi (incluidos consejos sobre el estilo de la galería divi de inserción), consulte la publicación en Cómo incrustar galerías Divi en alterna.

Espero tener noticias suyas en los comentarios.

¡Salud!