Cómo construir un control deslizante de pantalla completa personalizada con Divi 5 (descarga gratuita)

Una de las últimas versiones de Divi 5 presenta el módulo de carrusel grupal, una característica para crear controles deslizantes y carruseles personalizados e interesantes para su sitio de WordPress. Puede mostrar fácilmente su cartera, productos, un héroe inmersivo o un control deslizante de pantalla completa, y llevar el diseño de su sitio a nuevas alturas.

En esta publicación, proporcionaremos una guía paso a paso para crear un control deslizante de pantalla completa utilizando el módulo de carrusel grupal. ¡Vamos a sumergirnos!

Comprender el módulo de carrusel grupal

El módulo de carrusel grupal es una adición versátil a Divi 5, lo que le permite crear controles deslizantes y carruseles dinámicos.

A diferencia de los módulos tradicionales, admite una amplia gama de diseños, desde carruseles de imagen simples hasta controles deslizantes complejos basados ​​en postes alimentados por el bucle. Esta flexibilidad lo hace perfecto para exhibir contenido como carteras, testimonios o galerías de productos de una manera convincente.

Características clave del módulo de carrusel grupal

El módulo de carrusel grupal brilla con características robustas. Admite bucles de contenido dinámico, lo que le permite extraer publicaciones, páginas o tipos de publicaciones personalizadas directamente en su control deslizante utilizando el bucle de bucle.

El módulo también le permite usar cualquier módulo Divi para construir deslizadores hermosos y atractivos que usen filas anidadas y grupos de módulos. Puede personalizar la navegación con flechas y puntos de paginación, personalizar su posición, color y otros estilos para que coincida con su sitio.

Las opciones de reproducción automática, las velocidades ajustables y las características de pausa en el balance brindan una experiencia llamativa para sus visitantes, asegurando que permanezcan en su sitio por más tiempo. Además, el módulo es totalmente personalizable, lo que le permite crear diseños de pantalla completa y ancho completo, lo que lo hace ideal para secciones de héroes, servicios o características en su sitio web.

Cómo construir un control deslizante de pantalla completa con el módulo de carrusel grupal de Divi 5

En este tutorial, le mostraremos cómo usar el módulo de carrusel grupal para construir un control deslizante de pantalla completa para sus próximos sitios web de Divi 5. Al final, tendrá el conjunto de habilidades para construir controles deslizantes cautivadores para alentar a sus visitantes a actuar.

Paso 1: Configuración de una nueva página

Cree una nueva página, agregue un título y haga clic en Usar Divi Builder para comenzar.

Cuando se abre el constructor visual, elija Build desde Scratch debajo de las opciones Crear su página .

Pase el cierre de la sección en su nueva página para revelar el icono de configuración . Haga clic en él para revelar la configuración de la sección.

Navegue a la pestaña de diseño . Haga clic en el menú desplegable de diseño . En Justify Content , seleccione Center . En el campo Alinear elementos , seleccione Center . Esto permitirá que el contenido de nuestra sección se centre horizontal y verticalmente.

A continuación, ajustaremos la configuración de espaciado para la sección. Expanda el menú desplegable de espaciado . Establezca el margen en 0px , superior e inferior. Bajo relleno , configure la parte superior e inferior en 0px .

Con la configuración de la sección en su lugar, haga clic en el icono Green + para agregar una nueva fila.

Seleccione la fila de una sola columna en columnas iguales .

A continuación, agregue el módulo de carrusel grupal a la fila.

Antes de agregar contenido, debemos configurar la fila y agrupar el módulo de carrusel con Flexbox y los controles de espaciado.

Paso 2: Configurar la configuración de la fila

La creación de un control deslizante de pantalla completa requiere que establezcamos la fila y el módulo de carrusel grupal a un ancho 100% . Haga clic en el icono de capas para ajustar fácilmente las secciones. Esto es crucial cuando se trabaja con secciones y filas de ancho completo, especialmente cuando se han establecido relleno y margen en 0. Hace que sea más fácil ver la estructura de diseño de su página

En la vista de capas, haga clic para seleccionar la fila de una sola columna que alberga el módulo de carrusel grupal. Navegue a la configuración de diseño. En el menú desplegable de diseño, ajuste el espacio horizontal a 0 .

Además, configure los elementos alineados en el centro de la fila.

Establezca el ancho y el ancho máximo en la pestaña de tamaño al 100%.

En la pestaña de espaciado , configure el margen superior e inferior y el acolchado en 0px .

Paso 3: Configurar la configuración del carrusel grupal

A continuación, configuraremos la configuración de carrusel grupal. Expanda el menú desplegable Configuración del carrusel en la pestaña Contenido. Puede alternar la rotación automática , elija la velocidad de rotación automática en la configuración predeterminada de 2000 ms y habilite la pausa en Hover .

En la pestaña Elements , deshabilite la navegación de dot y deje las flechas de la muestra habilitadas. También puede elegir un icono personalizado para las flechas izquierda y derecha.

Haga clic para expandir la pestaña Flechas en la pestaña Diseño. Asigne #FFFFFF como color de flecha , deje el tamaño de la flecha en el 48 pxs predeterminado y deje la posición de flecha establecida en el interior .

Expanda la pestaña de fondo y asigne #000000 como color de fondo .

Paso 4: Estilo el primer grupo

Podemos agregar contenido a la primera diapositiva con la configuración de la sección, la fila y el grupo agrupar en su lugar. Haga clic en la pestaña Contenido en el módulo de carrusel de grupo y haga clic en el icono de configuración del grupo.

Expanda el menú desplegable de fondo y seleccione la pestaña Gradiente .

Haga clic en el primer deslizador de gradiente para asignar un nuevo color. Ingrese #EFB648 en el campo de color .

A continuación, haga clic en el control deslizante de segundo grado y asigne #F28F52 como color.

En el campo Tipo de gradiente , seleccione Circular .

A continuación, navegue a la pestaña de diseño . Expanda la pestaña de espaciado y asigne un acolchado del 5% a la parte superior e inferior del grupo.

Paso 5: Agregue contenido al primer grupo

Ahora que la configuración de nuestro grupo está configurada, podemos comenzar a agregar contenido al grupo. Haga clic en el icono Black + para agregar un módulo.

Cuando aparezca el cuadro de diálogo Insertar módulo o fila, haga clic en la pestaña nueva fila . En la sección de columnas iguales , seleccione la fila de columna única .

Agregue un módulo de encabezado

Seleccione e inserte el módulo de encabezado .

Expanda el menú desplegable de texto e ingrese el jugo de naranja como título .

Navegue a la pestaña de diseño . Expanda el menú desplegable Texto de encabezado . Seleccione H1 como nivel de encabezado , use Bebas Neue como fuente de encabezado , configure el estilo de fuente de encabezado en mayúsculas , la alineación del texto del encabezado al centro , el color de texto de encabezado a #ffffff y el tamaño de texto de encabezado a 20 EM .

Use los controles de respuesta de Divi 5 para ajustar el tamaño del texto de encabezado a 15em en la tableta y 8EM en el móvil.

Agrega una nueva fila

A continuación, agregaremos una nueva fila debajo de la fila de una sola columna que contiene el módulo de encabezado. Haga clic en el icono Black + para agregar un nuevo módulo.

Haga clic en la pestaña nueva fila . En columnas de compensación , elija la opción 1/4 + 1/2 + 1/4.

En la pestaña Diseño , expanda la pestaña de tamaño e ingrese al 70% para el ancho y el ancho máximo . Establezca la alineación en el centro .

Agregue un módulo de encabezado

Seleccione el módulo de encabezado y agréguelo a la primera columna .

Dé un título al encabezado y diríjase a la pestaña Diseño . Expanda el menú desplegable Texto de encabezado . Seleccione H2 para el nivel de encabezado , Bebas Neue como la fuente de encabezado , la mayúscula como el estilo de fuente de encabezado , #ffffff como el color del texto del encabezado y 6EM como el tamaño del texto del encabezado .

Use los controles de respuesta de Divi para ajustar el tamaño del texto de encabezado a 4EM .

Agregar un módulo de texto

Agregue un módulo de texto debajo del encabezado en la primera columna. Ingrese un texto del cuerpo y cambie a la pestaña de diseño . Seleccione Poppins como fuente de texto , configure el color de texto en #ffffff y el tamaño de texto en 16px .

Agregar un módulo de botón

Agregue un módulo de botón en el módulo de texto en la primera columna. Asigne texto al botón en la pestaña de contenido y cambie a la pestaña Diseño. Expanda el menú desplegable del botón y habilite Usar estilos personalizados para el botón . Luego expanda el menú de fondo del botón . En la pestaña Color de fondo , agregue #528BF2 como color del botón.

Use los controles flotantes de Divi 5 para asignar #6A7C9D como color desplazamiento para el botón.

Vuelve a la vista de escritorio. Expanda la pestaña Desenvío del borde del botón . Agregue el radio de borde de 100px debajo del botón y configure el ancho del borde del botón en 0px .

Expanda el menú desplegable de texto del botón . Asigne Poppins como fuente del botón , #ffffff como el color del texto del botón y 16px como tamaño de texto del botón .

Expanda la configuración del icono del botón y deshabilite el icono de botón Mostrar alternar.

Finalmente, expanda el menú desplegable de espaciado . Agregue el relleno de 15px en la parte superior e inferior y 35px a la izquierda y a la derecha.

Agregar un módulo de imagen

Coloque un módulo de imagen en la segunda columna. Cuando aparezcan la configuración, pase el paso sobre el campo de la imagen para revelar la configuración. Haga clic en el icono de configuración para cargar la biblioteca de medios y cargar una imagen en el módulo.

A continuación, agregaremos una interacción a la imagen para crear un efecto de mouse. Navegue a la pestaña avanzada . Expanda el menú de interacciones para revelar su configuración. Haga clic en el botón de interacción Agregar .

Seleccione el mouse Ingrese cuando aparezcan las opciones.

Ingrese la inclinación de la imagen en el campo de la etiqueta de administración , seleccione el mouse Ingrese como evento de activación, el movimiento del mouse reflejado como la acción del efecto, seleccione la imagen como el módulo de destino, inclinado como el tipo de movimiento y 15 para la sensibilidad. Finalmente, haga clic en el botón Guardar interacción para habilitar la interacción.

Agregar un módulo de contadores de barras

Haga clic para agregar el módulo de contadores de barras en la tercera columna. En la pestaña de contenido. En la pestaña Elements , deshabilite el porcentaje de espectáculos .

A continuación, expanda la pestaña de fondo. Agregue #ffffff como color de fondo.

Cambie a la pestaña de diseño y expanda el menú desplegable de la barra . En el campo de color de fondo de la barra , agregue #528BF2 como color.

Expanda el menú desplegable de texto de título . En el campo de la fuente de título , seleccione Bebas Neue . Seleccione #ffffff como el color del texto del título y 22px como tamaño de texto del título .

Vuelva a cambiar a la pestaña de contenido. Esta vez, haga clic en el icono de configuración para el primer elemento de contador de barras.

Ingrese el texto en el campo de título y establezca el campo porcentual en 75 .

Haga clic para volver a la pestaña Contenido principal para el módulo de contadores de barras.

Ahora que nuestra configuración de diseño está configurada, puede copiar fácilmente el primer elemento de contador de barras para preservar la configuración.

Duplique el elemento del contador de barras y cambie el título y el porcentaje a la configuración deseada.

Paso 6: Agregar animaciones

Para que el grupo sea más inmersivo, agregaremos algunos efectos de animación. Primero, agregaremos un efecto de zoom a nuestro encabezado principal. Haga clic para seleccionar el encabezado principal para el grupo. Navegue hasta la pestaña de diseño y desplácese hacia abajo para expandir la pestaña de animación. Seleccione Zoom para la animación. Deje toda la configuración tal como está.

A continuación, haga clic para expandir la segunda fila (fila de tres columnas). Haga clic en la configuración de la primera columna.

Haga clic en la pestaña Diseño y desplácese hacia abajo para revelar la pestaña de animación. Elija Slide para el estilo de animación y el derecho para la dirección de animación. Deje todas las demás configuraciones como está.

Haga clic en la pestaña Contenido principal para la fila. Esta vez, seleccione la tercera columna. Navegue a la pestaña Diseño, expanda la pestaña de animación y elija Slide> Left para la animación. Deje la otra configuración en sus valores predeterminados.

Paso 7: filas superpuestas

Para agregar un poco de talento adicional al diseño, ajustaremos el margen en la segunda fila para crear un efecto de superposición. Esto empujará la fila hacia arriba, lo que le permitirá superponer el encabezado principal para un buen efecto. Seleccione la segunda fila en el diseño y navegue hasta la pestaña de diseño. Expanda la pestaña de espaciado para revelar la configuración. En el margen superior, establezca el valor en -8%.

A continuación, aplicaremos un valor de índice Z para colocar la segunda fila por encima del 1er. Navegue a la pestaña avanzada, expanda la configuración de posición y aplique 9999999 al campo de índice Z.

Cuando obtenga una vista previa del control deslizante, verá que la segunda fila ha sido empujada hacia arriba para superponer ligeramente la primera fila, creando un buen efecto de superposición.

Paso 8: Capacidad de prueba de prueba

Antes de copiar el primer grupo, es una buena idea probar la capacidad de respuesta del diseño. Use los puntos de interrupción de respuesta personalizables de Divi 5 para realizar cualquier ajuste.

En Divi 5, ahora hay 7 puntos de interrupción en lugar de Divi 4's 3. Puede usar estos puntos de interrupción para garantizar que su diseño se vea increíble en cualquier tamaño de pantalla. Navegue a través de los puntos de interrupción y haga los ajustes necesarios antes de copiar el primer grupo.

Una de las mejores características nuevas en Divi 5 es la capacidad de cambiar el orden de las columnas para dispositivos móviles. Esta es una excelente manera de mantener el diseño funcional y efectivo en todos los tamaños de pantalla. Mientras esté en la vista móvil, seleccione la segunda columna de la segunda fila en nuestro diseño (fila de 3 columnas).

En la pestaña Contenido , expanda la pestaña de pedido . A partir de ahí, establezca el orden de visualización en -1 . Eso colocará la columna con la imagen en la parte superior, permitiendo que la imagen superponga el encabezado como lo hace en las vistas de escritorio y tableta.

Paso 9: Grupos de duplicación

Una vez que tenemos todo a cuadrado, podemos copiar fácilmente el primer grupo y cambiar el gradiente de fondo, el texto y la imagen sin repetir todos los pasos. En la pestaña principal de contenido del grupo de carrusel, haga clic para duplicar el primer grupo.

Antes de copiar, asigne una etiqueta de administración al grupo para facilitarlo de la identificación.

A partir de ahí, cambie el título, cambie la imagen y asigne un nuevo gradiente de fondo al grupo. Use #FC6A3C para el primer control deslizante de gradiente y #C52F00 para el segundo.

También querrá cambiar el botón y los colores del mostrador de la barra a #3DFCCA y #C52F00 en Hover.

También necesitaremos ajustar el tiempo de animación para el segundo grupo. Esto asegura que las animaciones no se cargarán para otras diapositivas hasta que el control deslizante avance. En el módulo de encabezado principal, navegue hasta la pestaña Diseño , expanda el menú de animación y establezca el retraso de animación en 2000 ms .

Haga lo mismo para la fila de 3 columnas. En la primera y tercera columnas , establezca el retraso de la animación en 2000 ms .

Cambios en el tercer grupo

Para el tercer grupo, use #71B953 y #617A56 para el gradiente de fondo .

Para los módulos del botón y los contadores de barras , use #BA54B3 y #654F64 para el color flotante.

También deberá cambiar el retraso de animación en el módulo de encabezado y las primeras y terceras columnas de la segunda fila a 4000 ms .

Cambios en el cuarto grupo

Para el gradiente de fondo , use #AD52B7 y #AD52B7 .

Use #83B853 y #83B853 para los módulos de contador y botón de barra.

Finalmente, establezca el retraso de la animación en 6000 ms en el encabezado principal del grupo, junto con la primera y tercera columnas de la fila de 3 columnas.

Paso 10: Vista previa y guarde el control deslizante

El paso final es guardar el diseño y obtener una vista previa para garantizar que no se pierdan pasos. En Visual Builder, haga clic en el botón Guardar en la esquina superior derecha.

Haga clic en el botón Vista previa para abrir el diseño en una nueva pestaña.

Una vez completo, su control deslizante debería verse así:

¡Eso es todo! El módulo Group Carousel es una nueva adición versátil a Divi 5. Le permite crear controles deslizantes y carruseles para cualquier proyecto y ofrece opciones de personalización ilimitadas.

Descargue el diseño de carrusel de pantalla completa

Si desea usar el diseño que hemos recreado en esta publicación, puede acceder a él a través del siguiente formulario. Una vez que haya descargado y desabrochado la carpeta, encontrará un archivo JSON. Navegue a su biblioteca Divi para cargar el archivo para que pueda acceder y usarlo para cualquier página que cree.

Descargar los archivos

Descargar gratis

Únase al boletín Divi y le enviaremos una copia del último paquete de diseño de la página de destino de Divi, además de toneladas de otros recursos, consejos y trucos de Divi increíbles y increíbles. Sigue y serás un Divi Master en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en Descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscrito con éxito. ¡Consulte su dirección de correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales de Divi gratuitos!

Construye tu primer carrusel en Divi 5 hoy

La creación de un control deslizante de pantalla completa personalizada con el módulo de carrusel grupal de Divi 5 abre un mundo de posibilidades para crear experiencias atractivas en sus sitios web. Después de los pasos de esta publicación, ha aprendido cómo usar las características del módulo, desde opciones de personalización avanzada como animaciones, puntos de interrupción receptivos y efectos interactivos. La flexibilidad del módulo de carrusel grupal le permite construir diapositivas para cualquier cosa que pueda imaginar, todo mientras mantiene un aspecto sin interrupciones y profesionales en todos los tamaños de pantalla.

Descargue el último Alpha Public Divi 5, experimente con el módulo Group Carousel y háganos saber lo que piensa en los comentarios o en nuestros canales de redes sociales.