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


El módulo deslizante de Divi está repleto de opciones de diseño que hacen que sea fácil pensar fuera de la caja y crear impresionantes diseños de controles deslizantes. Así que hoy vamos a cambiar algunas cosas (literalmente). En la publicación que sigue, agregaremos elementos deslizantes verticales al módulo deslizante de Divi. Tener un control deslizante con elementos verticales (como texto del título y controles de diapositivas) permite a los visitantes ver más contenido de diapositivas e imágenes de fondo en columnas más estrechas (especialmente en dispositivos móviles). Y los elementos verticales agregan un toque refrescante al diseño general.

Para hacer esto, usaremos la opción de rotación de transformación de Divi para rotar todo el control deslizante y luego girar contrarrestar otros elementos dentro de cada diapositiva según sea necesario para crear un diseño moderno de control deslizante vertical. Comenzaremos repasando la técnica básica. Luego crearemos un diseño de encabezado completamente único con este control deslizante vertical.

¡Vamos a sumergirnos!

Vistazo

Elementos deslizantes divi verticales

Elementos deslizantes divi verticales

Elementos deslizantes divi verticales

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

Suscríbase 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 (generador visual)
  3. Dos imágenes que se han girado 90 grados en sentido antihorario. Esto se puede hacer fácilmente usando las opciones integradas de su sistema operativo o mediante cualquier aplicación simple de edición de fotos. También puede rotar una imagen directamente en WordPress editando el elemento multimedia.
    Elementos deslizantes divi verticales

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

La idea basica

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), deberá 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 difícil viene con la personalización de la altura y el ancho del control deslizante, ya que las cosas están literalmente cambiadas. 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 izquierda.

Luego, agregue un par de diapositivas, cada una con un Título, una oración del contenido del cuerpo y una imagen de fondo que se haya rotado previamente en sentido antihorario 90 grados.

Elementos deslizantes divi verticales

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

Elementos deslizantes divi verticales

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

Elementos deslizantes divi verticales

Aquí está el resultado.

Elementos deslizantes divi verticales

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

A continuación, tomaremos una oportunidad para crear uno de estos diseños de controles deslizantes únicos juntos.

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

Crear la sección y la fila

Antecedentes de la sección

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

Elementos deslizantes divi verticales

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

Color de fondo: # 24272a

Elementos deslizantes divi verticales

Configuración de fila

Luego debemos darle a nuestra fila un ancho de canal 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 de canal: 1
Ancho: 80vw (escritorio y tableta), 95vw (teléfono)
Ancho máximo: 80vw (escritorio y tableta), 95vw (teléfono)

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

Box Shadow: ver captura de pantalla
Posición horizontal de la sombra de la caja: -10px
Posición vertical de la sombra de la caja: 0px
Color de sombra: rgba (255,255,255,0.03)

Elementos deslizantes divi verticales

Agregar contenido de encabezado utilizando 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.

Elementos deslizantes divi verticales

Actualice el contenido del cuerpo con el siguiente encabezado h2:

My Work

Elementos deslizantes divi verticales

Luego actualice lo siguiente:

Título 2 Fuente: Karla
Título 2 Color del texto: #ffffff
Encabezado 2 Tamaño del texto: 5vw (escritorio), 60px (tableta), 50px (teléfono)
Relleno: 15% superior, 20% inferior, 5% izquierda, 5% derecha

Elementos deslizantes divi verticales

Box Shadow: ver captura de pantalla
Posición horizontal de la sombra de la caja: 60 px
Posición vertical de la sombra de la caja: 0px
Color de sombra: # 9a2508

Elementos deslizantes divi verticales

Añadir módulo de texto para contenido corporal

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:

Color del texto del texto: #cccccc
Ancho: 70%
Alineación del módulo: derecha
Margen: -5% superior
Relleno: 5% inferior, 10% izquierda, 5% derecha

Elementos deslizantes divi verticales

Box Shadow: ver captura de pantalla
Posición horizontal de la sombra de la caja: 0px
Posición vertical de la sombra de la caja: 10px
Color de sombra: rgba (255,255,255,0.03)

Elementos deslizantes divi verticales

Crear el control deslizante vertical

Ahora estamos listos para crear el control deslizante con los elementos del control deslizante vertical.

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

Elementos deslizantes divi verticales

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

Elementos deslizantes divi verticales

Reduzca el texto del cuerpo predeterminado para incluir una sola línea de texto. Luego, agregue una imagen de fondo que se haya girado previamente en sentido antihorario 90 grados.

Elementos deslizantes divi verticales

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

Elementos deslizantes divi verticales

Gire 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

Elementos deslizantes divi verticales

Altura del deslizador

No debemos 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á de 40vw por defecto. Ahora tenemos que darle al control deslizante una altura coincidente 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)

Elementos deslizantes divi verticales

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
Acolchado (tableta): fondo 42vw
Acolchado (teléfono): 50vw inferior

Elementos deslizantes divi verticales

Actualizar configuración de texto

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

Alineación de texto: izquierda
Título de la fuente: Karla
Tamaño del texto del título: 32 píxeles
Altura de la línea de título: 1.3em
Espaciado entre letras del cuerpo: 3px
Altura de la línea del cuerpo: 1.8em

Elementos deslizantes divi verticales

Estilizar el botón

Para aplicar estilo y posicionar 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: 0px
Espaciado entre letras de botones: 2px
Peso de fuente del botón: semi negrita
Icono del botón: signo más (ver captura de pantalla)
Alineación de botones: derecha
Margen del botón: 10% superior, 10% inferior

Elementos deslizantes divi verticales

Gradiente de fondo

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

Color de fondo izquierdo del degradado: # 9a2508
Gradiente de fondo derecho Color: rgba (0,0,0,0)
Posición de inicio: 12%
Posición final: 0%
Coloque el gradiente sobre la imagen de fondo: SÍ

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

Elementos deslizantes divi verticales

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

Dado que nuestro botón todavía está vertical, necesitaremos rotarlo nuevamente a su posición anterior con un fragmento de CSS. Agregue el siguiente CSS al botón deslizante:

transform: rotate(-90deg);

Elementos deslizantes divi verticales

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

transform: rotate(-90deg);
font-size: 80px;

Elementos deslizantes divi verticales

¡Eso es!

Veamos el resultado final.

Resultado final

Elementos deslizantes divi verticales

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

Elementos deslizantes divi verticales

Elementos deslizantes divi verticales

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.

elementos deslizantes verticales divi

Pensamientos finales

El módulo deslizante de Rotating 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 ajustar 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 utiliza para mostrar productos destacados o testimonios en diseños de columnas más estrechas.

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

Espero tener noticias suyas en los comentarios.

¡Salud!