¡Tu licencia Divi con un -20% de DescuentoOferta aquí

Cómo crear una galería deslizante tipo slider con Divi

Oct 19, 2020 | Tutoriales para 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 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.

 control deslizante de la galería de fotos divi

 control deslizante de la galería de fotos divi

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 la interfaz (constructor 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 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.

 control deslizante de la galería de fotos 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

 control deslizante de la galería de fotos divi

Creación del 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 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.

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

 control deslizante de la galería de fotos divi

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

 control deslizante de la galería de fotos divi

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.

 control deslizante de la galería de fotos divi

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.

 control deslizante de la galería de fotos divi

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)

 control deslizante de la galería de fotos divi

  • 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)

 control deslizante de la galería de fotos divi

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

 control deslizante de la galería de fotos divi

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

 control deslizante de la galería de fotos divi

  • 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

 control deslizante de la galería de fotos divi

Relleno deslizante

  • Relleno: 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 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

 control deslizante de la galería de fotos divi

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

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

 control deslizante de la galería de fotos divi

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This