Cómo crear una diapositiva de galería de fotos personalizada en div en Div

Todos sabemos que las diapositivas son excelentes para atraer a los usuarios con servicios recomendados, productos o páginas en una ubicación conveniente sobre los folletos. Algunos sitios (creo que las fotos) deben presentar una o más de sus galerías de fotos en la página principal. Usar una diapositiva para esto puede ser una opción agradable. Sin embargo, es posible que no haya pensado presentar la galería de fotos en una diapositiva de este tipo. En este tutorial, le mostraré una manera fácil de incorporar las galerías de imágenes en sus diapositivas para crear una diapositiva totalmente personalizada para la galería de fotos en el Div. El truco es crear una galería de imágenes de WordPress en el área de contenido de su diapositiva. Es muy fácil y divertido de implementar.
Vamos a empezar. Está haciendo un ojo en la diapositiva de la galería de fotos que construiremos en este tutorial.


Descargue el aspecto deslizante de la galería de fotos personalizada para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div.
Pasemos al tutorial, ¿no? ¿Qué necesita para comenzar a comenzar? Deberá tener la siguiente configuración:
El tema instalado y activo
Una nueva página creada para construir desde cero en el frente (Visual Builder)
Alrededor de 6-8 imágenes que se utilizarán para la imagen deslizante y la galería de fotos
Después de eso, tendrá un lienzo vacío para comenzar a construir algunas pestañas flotantes en la división. Active la opción Div Gallery en las opciones de tema Divin -Divin le permite reemplazar la visualización predeterminada de la Galería de WordPress con una visualización del Div. Entonces, cada vez que cree una galería de WordPress y la incorpore en un módulo, la galería se mostrará como una galería utilizando el módulo de la galería DIV. Esto prácticamente le permite agregar galerías de imagen Div a cualquier módulo en Divi Builder. En nuestro caso, agregaremos una galería de la división al módulo de glister.
Para cambiar la configuración, navegue por las opciones de temas de división. Luego, en la pestaña General, haga clic para activar la opción Div Gallery. ¡Esto es! Ahora, el código corto predeterminado de WordPress mostrará una galería de fotos de Div Style. Creando la Galería de fotos personalizada en la división y gire para comenzar las cosas, continúe y cree una sección normal con una fila con una columna. Luego actualice la configuración de la fila de la siguiente manera:
Ancho: 100% (por lo que la diapositiva será de ancho completo en el móvil)

Forro: 0 px arriba, 0 px abajo
Esquinas redondeadas: 20 px
Construyendo el contenido deslizante y luego, agregue un módulo deslizante uno a la vez.
Abra la configuración del control deslizante y elimine una de las diapositivas que se han agregado de forma predeterminada. Luego haga clic en el icono de la rueda en la diapositiva para abrir la configuración de la diapositiva para esa diapositiva.

Luego actualice el contenido de diapositivas con lo siguiente:

Título: Nuestra galería

Botón: Ver todo
Cuerpo: Esta es nuestra galería. Échale un vistazo.
En la zona de contenido del cuerpo, haga clic en el botón Agregar medios.
En la ventana de la biblioteca de medios emergentes, seleccione la pestaña Crear la galería en la parte superior izquierda. Luego seleccione 6 imágenes que desea usar para la galería y haga clic en “Crear una nueva galería” en la parte inferior derecha.

Esto lo llevará a la página de edición de categorías en la ventana emergente. Ignore la configuración de la galería en la esquina superior derecha, porque los estilos de la Galería Div sobrescribirán estas configuraciones de la Galería de WordPress. Luego haga clic en el botón “Insertar la galería”.

Esto coloca un código corto de la galería en el contenido del módulo deslizante. Si desea que la galería se muestre de acuerdo con el texto actual del cuerpo, asegúrese de colocar el código corto después del contenido. Ahora tiene una galería incorporada que se muestra en la zona de contenido del módulo deslizante. ¡Muy bien cosas! Continuemos actualizando el contenido de las diapositivas agregando una imagen de diapositiva principal.


Ahora que tenemos el contenido de glaster listo para comenzar, guarde la configuración de diapositivas 1. Establezca Configuración Asegúrese de guardar la configuración de diapositivas individual. Luego actualice la siguiente configuración de diseño para la diapositiva principal. Esto asegurará que las actualizaciones de diseño afecten todas las diapositivas individuales que agregará. Border de imagen y sombra de caja

Imagen esquinas redondeadas: 20 px

Ancho de borde de la imagen: 40 PX (escritorio), 0 px (tableta)

Color del borde de la imagen: RGBA (0.0,0,0)
Sombra de cuadro de imagen: ver captura de pantalla
Posición horizontal de la sombra de la caja: -170px
Box Shadow Posición vertical: -220px

Poder de extender la sombra de la caja: -60px
Color de la sombra: RGBA (255,255,255,0,2)
El título y el texto del cuerpo
Título de la fuente: Karla
Alineación del texto del título: Derecho

Título Tamaño del texto: 48 PX
Altura de la línea de título: 1.3em
Tamaño del texto del cuerpo: 16 PX
Espacio de letras del cuerpo: 2 PX
La altura de la línea del cuerpo: 2em
Estilos de Butry
Tamaño de texto de texto: 16 PX
El color de fondo del botón: # 333333

El ancho del nudo del botón: 0 PX
Butter Raza: 20 PX
Distancia entre letras y botones: 2 PX
Botón de fuente: Karla
Fuente del botón de peso: en negrita
Icono del botón: ver captura de pantalla
Alineación de botones: correcto
Botón Marja: -5em derecho
Botón de llenado (escritorio): 3em a la izquierda, 5em a la derecha
Botón de relleno (teléfono): 2em a la izquierda, 6em a la derecha
Botón de caja de sombra: ver captura de pantalla
Box Shadow Posición vertical: 0px
Poder de extensión de la sombra de la caja: 20 PX (escritorio), 10 px (teléfono)

Color de la sombra: #ffffff
Relleno deslizante
Revestimiento: 10% más, 10% inactiva
Agregando un gradiente de fondo a la diapositiva 1 ahora, que tenemos el estilo deslizante en posición, podemos agregar un gradiente de fondo personalizado a nuestra diapositiva individual. Abra la configuración de diapositivas para la diapositiva 1 y actualice lo siguiente:

Color izquierdo del gradiente de fondo: # 6D0066
Color correcto del gradiente de fondo: # 000000

Tipo de gradiente: radial
Dirección radial: superior izquierda
Creando la diapositiva 2 para crear la segunda diapositiva, solo podemos duplicar la diapositiva 1 usando el icono duplicado. Luego abra la configuración de diapositiva duplicada (diapositiva 2).
En este momento puede actualizar el contenido de la nueva diapositiva, según sea necesario. Por ejemplo, puede agregar una nueva imagen de diapositivas y generar otro código de incorporación de galería corto para agregar una nueva galería de fotos a la diapositiva. Luego actualice el gradiente de fondo de la siguiente manera:
Color izquierdo del gradiente de fondo: # 0C71C3

El resultado final aquí es el resultado final.

Así es como se ve el control deslizante en la tableta y el teléfono.
Y aquí está el control deslizante si elimina las diapositivas para que solo se muestren la diapositiva y la galería.