Cómo agregar elementos deslizantes verticales al módulo deslizante de Divi para un diseño de encabezado único

Vistazo

Descargue el diseño de elementos deslizantes verticales Divi 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 nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout 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 será «resuscrito» 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 a Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

https://youtu.be/Nmuy9VAYo4M

Suscríbete a nuestro canal de Youtube

Lo que necesitas para empezar

Para comenzar, necesitará tener lo siguiente:

1. El tema Divi instalado y activo
2. Una nueva página creada para construir desde cero en el front-end (constructor visual)
3. Dos imágenes que se han girado 90 grados en sentido contrario a las agujas del reloj. Esto se puede hacer fácilmente usando las opciones integradas de su sistema operativo o mediante cualquier aplicación de edición de fotos simple. También puede rotar una imagen directamente en WordPress editando el elemento multimedia.
   

Después de eso, estarás listo para crear tu obra maestra en Divi.

La idea básica

La idea básica detrás de agregar elementos deslizantes verticales es usar las opciones de transformación de Divi para rotar el módulo deslizante 90 grados (en sentido horario o antihorario) para que se muestre verticalmente en la página. Para las imágenes de fondo del control deslizante (o diapositiva), querrá rotar la imagen de antemano (o usar el editor de imágenes de WordPress) para que la imagen se muestre en posición vertical cada vez que gire el control deslizante. Esto mostrará los controles deslizantes, las flechas y el texto verticalmente como es de esperar. La parte complicada viene con la personalización de la altura y el ancho del control deslizante, ya que las cosas literalmente se dan la vuelta. Este diseño de control deslizante funciona mejor en un diseño con dos o más columnas.

Aquí hay un ejemplo rápido de cómo hacer esto.

En una sección normal con una fila de dos columnas, agregue un módulo deslizante a la columna de la izquierda.

Luego agregue un par de diapositivas, cada una con un título, una oración de contenido del cuerpo y una imagen de fondo que se haya girado previamente 90 grados en el sentido contrario a las agujas del reloj.

Luego gire el módulo deslizante 90 grados a lo largo del eje z usando las opciones de transformación de Divi.

Luego agregue espaciado (relleno inferior) al control deslizante para crear un ancho adicional y alinear el texto a la derecha de cada diapositiva.

Aquí está el resultado.

Como puede ver, el concepto es simple, pero estos elementos deslizantes verticales realmente pueden ser útiles para crear diseños únicos.

A continuación, intentaremos crear juntos uno de estos diseños únicos de controles deslizantes.

Adición de elementos deslizantes verticales al módulo deslizante de Divi para un diseño de encabezado único

Crear la sección y la fila

Fondo de la sección

Comience creando una sección normal con una fila de dos columnas.

Antes de agregar un módulo a la fila, primero actualice la sección con el siguiente color de fondo:

Color de fondo: #24272a

Configuración de fila

Luego, debemos darle a nuestra fila un ancho de medianera personalizado de 1 y luego establecer el ancho usando la unidad de longitud vw. El uso de la unidad de longitud vw es importante para que nuestro control deslizante vertical responda más adelante.

Abra la configuración de la fila y actualice lo siguiente:

Ancho del canalón: 1

Ancho: 80vw (escritorio y tableta), 95vw (teléfono)

Ancho máximo: 80vw (escritorio y tableta), 95vw (teléfono)

Luego agregaremos una sombra de caja para propósitos de diseño.

Sombra de cuadro: ver captura de pantalla

Posición horizontal de sombra de cuadro: -10px

Posición vertical de sombra de cuadro: 0px

Color de sombra: rgba(255,255,255,0.03)

Agregar contenido de encabezado usando un módulo de texto

Eventualmente agregaremos el control deslizante en la columna 2, pero por ahora agreguemos el título del encabezado con texto adicional en la columna 1. Para hacer esto, agregaremos dos módulos de texto en la columna 1.

Agregue el módulo de texto para el título

Para agregar nuestro título de encabezado, agregue un módulo de texto a la columna 1.

Actualice el contenido del cuerpo con el siguiente encabezado h2:

Luego actualice lo siguiente:

Encabezado 2 Fuente: Karla

Encabezado 2 Color del texto: #ffffff

Encabezado 2 Tamaño del texto: 5vw (escritorio), 60px (tableta), 50px (teléfono)

Relleno: 15 % arriba, 20 % abajo, 5 % izquierda, 5 % derecha

Sombra de cuadro: ver captura de pantalla

Posición horizontal de sombra de cuadro: 60 px

Posición vertical de sombra de cuadro: 0 px

Color de sombra: #9a2508

Agregar módulo de texto para el contenido del cuerpo

A continuación, agregue un nuevo módulo de texto debajo del primer módulo de texto en la columna 1. Podemos dejar el contenido predeterminado por ahora.

Luego actualice lo siguiente:

Texto Color del texto: #cccccc

Ancho: 70 %

Alineación del módulo: derecho

Margen: -5 % superior

Relleno: 5 % inferior, 10 % izquierdo, 5 % derecho

Sombra de cuadro: ver captura de pantalla

Posición horizontal de sombra de cuadro: 0px

Posición vertical de sombra de cuadro: 10px

Color de sombra: rgba(255,255,255,0.03)

Crear el control deslizante vertical

Ahora estamos listos para crear el control deslizante con los elementos deslizantes verticales.

Para hacer esto, agregue un módulo deslizante en la columna 2.

Abra la configuración de diapositivas de la primera de las dos diapositivas predeterminadas.

Reduzca el texto del cuerpo predeterminado para incluir una sola línea de texto. A continuación, agregue una imagen de fondo que se haya girado previamente 90 grados en sentido contrario a las agujas del reloj.

Luego haga lo mismo para la segunda diapositiva predeterminada dándole una imagen de fondo diferente.

Girar el control deslizante

A continuación, gire el control deslizante con la opción de rotación de transformación:

Transformar Rotar eje z: 90 grados

Altura del control deslizante

No tenemos que preocuparnos por el ancho del control deslizante, ya que abarcará automáticamente el 100 % de la columna. La columna es el 50% de 80vw (el ancho de la fila), por lo que básicamente el ancho será 40vw de forma predeterminada. Ahora debemos darle al control deslizante una altura correspondiente de 40vw en el escritorio y luego ajustar la altura a 80vw en la tableta y 95vw en el teléfono.

Actualice lo siguiente:

Altura: 40vw (escritorio), 80vw (tableta), 95vw (teléfono)

Luego ajuste el relleno para alinear el texto a la derecha del control deslizante vertical.

Relleno (escritorio): 0px arriba, 21vw abajo, 0px izquierda, 0px derecha

Relleno (tableta): 42vw

abajo Relleno (teléfono): 50vw abajo

Actualizar configuración de texto

Ajuste el título y el cuerpo del texto de la siguiente manera:

Alineación del texto: izquierda

Fuente del título: Karla

Tamaño del texto del título: 32 px

Altura de la línea del título: 1,3 em

Espaciado entre letras del cuerpo: 3 px

Altura de la línea del cuerpo: 1,8 em

Aplicar estilo al botón

Para diseñar y colocar el botón, actualice lo siguiente:

Tamaño del texto del botón: 16 px

Color de fondo del botón: #9a2508

Ancho del borde del botón: 0 px

Espaciado entre letras del botón: 2 px

Grosor de la fuente del botón: semi negrita

Icono del botón: signo más (ver captura de pantalla)

Alineación del botón: derecha

Margen del botón: 10 % superior, 10 % inferior

Gradiente de fondo

Para crear un fondo para el texto del título de nuestro control deslizante vertical, podemos agregar un degradado de fondo al control deslizante de la siguiente manera:

Color izquierdo del degradado de fondo: #9a2508

Color derecho del degradado de fondo: rgba(0,0,0,0)

Posición inicial: 12 %

Posición final: 0 %

Colocar degradado encima de la imagen de fondo: SÍ

Nota: si lo desea, puede ajustar la opacidad del color derecho del degradado de fondo para crear una superposición para sus imágenes de diapositivas.

Rotar el botón y las flechas del control deslizante con CSS personalizado

Dado que nuestro botón aún está en posición vertical, necesitaremos volver a girarlo a su posición anterior con un fragmento de CSS. Agregue el siguiente CSS al botón deslizante:

Para las flechas del control deslizante, puede agregar el mismo fragmento de css para que apunten hacia la derecha y hacia la izquierda en lugar de hacia arriba y hacia abajo. Y mientras estamos allí, también podemos aumentar el tamaño de las flechas. Agregue el siguiente CSS al

¡Eso es todo!

Veamos el resultado final.

Resultado final

Y aquí está en tableta y teléfono.

Siéntase libre de explorar nuevos diseños ajustando los elementos verticales. Aquí hay un ejemplo del mismo diseño con el botón colocado a la izquierda y una superposición de texto.

Pensamientos finales

Girar el módulo deslizante de Divi es una forma rápida y efectiva de agregar elementos de diseño vertical a su control deslizante. Realmente, la única parte desafiante es lograr que el tamaño y el espacio sean agradables y receptivos. Pero afortunadamente, Divi tiene suficientes opciones integradas que facilitan modificar el diseño para que se vea genial en todos los dispositivos.

Este diseño de control deslizante vertical también funcionará muy bien en otras áreas de su sitio además de un encabezado. Puedo ver que esto se usa para mostrar productos destacados o testimonios en diseños de columnas más estrechos.

Espero que esto te sirva de inspiración para tu próximo proyecto.

Espero escuchar de usted en los comentarios.

¡Salud!