Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.
Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo convertir el módulo divisor horizontal estándar que todos conocemos en uno vertical utilizando el paquete de diseño de empresa de mudanzas de Divi como ejemplo. Este enfoque será particularmente útil si está tratando de crear líneas de tiempo en sus páginas. También es genial usarlo para las secciones de «cómo funciona», y mucho más. Después de configurar el divisor vertical, agregaremos Módulos de Blurb encima para crear el efecto de línea de tiempo. Este tutorial no requiere ningún código CSS y se basa únicamente en las opciones integradas de Divi.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo al resultado en diferentes tamaños de pantalla.
Comencemos a crear: agregue una nueva página y cargue la página de destino del paquete de diseño de la empresa de mudanzas
Agregar una nueva página y cambiar a Visual Builder
Comencemos agregando una nueva página, agregando un título y cambiando a Visual Builder.
Elija un diseño prefabricado
Una vez que lo haga, podrá crear desde cero, elegir un diseño prefabricado o clonar una página existente. Vamos a utilizar la página de destino del paquete de diseño de la empresa de mudanzas para crear el resultado final, así que continúe y explore los diseños prefabricados.
Seleccione la página de destino del paquete de diseño de la empresa de mudanzas
Desplácese hacia abajo por los diseños prefabricados hasta que encuentre el paquete de diseño de empresa de mudanzas y cargue la página de destino en su página.
Comience a crear la línea de tiempo del divisor vertical
Buscar sección de línea de tiempo
Ahora estamos listos para comenzar a convertir los divisores horizontales en verticales y usar ese divisor para crear una línea de tiempo. Continúe y ubique la siguiente sección en su página de destino:
Agregue una nueva sección estándar a continuación
Justo debajo de esta sección, agregue una sección estándar.
Coloque la fila ‘Cómo funciona’ en una nueva sección
Continúe arrastrando la fila ‘Cómo funciona’ de la sección anterior a su nueva sección.
Agregar nueva fila
Estructura de la columna
Justo debajo de la fila que acaba de colocar en su sección, agregue otra con la siguiente estructura de columnas:
Espaciado
Antes de agregar cualquier módulo, abra la configuración de su fila y agregue ’60px’ al margen superior.
Agregue el módulo divisor a la columna 1
Ocultar divisor
¡Ya podemos empezar a añadir módulos! Comenzaremos con la primera columna y una vez que hayamos terminado, pasaremos a la segunda. Lo primero que necesitaremos en la primera columna es un módulo divisor. Como se mencionó antes, vamos a convertirlo en uno vertical. El primer paso para lograr el resultado deseado es deshabilitar la opción Mostrar divisor.
Fondo degradado
En lugar de usar el divisor real, crearemos un divisor usando el fondo del Módulo divisor. Estamos usando el siguiente fondo degradado:
- Color 1: #e0aa25
- Color 2: #c11000
Dimensionamiento
Ahora, ya nos hemos asegurado de que el divisor no sea visible. El siguiente paso crucial para crear un divisor vertical es disminuir drásticamente el ancho de nuestro divisor. Estamos usando ‘2%’ pero puedes hacer que parezca tan grueso como quieras. También estamos habilitando la alineación del módulo central.
Espaciado
Para estirar el Módulo divisor verticalmente, agregaremos ‘480px’ al relleno personalizado superior e inferior de nuestro Módulo divisor. Et voilà, ¡ya tenemos nuestro separador vertical!
Agregar módulos de Blurb de la sección anterior a la columna 1
Lo siguiente que vamos a hacer es crear una línea de tiempo usando este divisor vertical. Dentro de la sección anterior, encontrará tres módulos de Blurb. Continúe y coloque cada uno de ellos en la primera columna de la fila en la que está trabajando, justo debajo del Módulo divisor.
Modifique el Módulo Blurb #1
Agregar color de fondo
Vamos a utilizar una de las funciones de eficiencia de Divi para acelerar el proceso mientras editamos nuestros módulos de Blurb. Aplicaremos todos los cambios al primer módulo de Blurb y luego, simplemente copiaremos los estilos del módulo y los agregaremos a los otros módulos de Blurb con un solo clic. Abra su primer módulo de Blurb y agregue ‘rgba(255,255,255,0.73)’ como color de fondo.
Cambiar el tamaño de fuente del icono
Lo siguiente que deberá hacer es cambiar el Tamaño de fuente del ícono a ’65px’.
Eliminar espaciado
También eliminaremos todo el margen en la configuración de Espaciado. Más adelante, agregaremos el margen a cada módulo de Blurb individualmente porque los valores difieren.
Copie el estilo del módulo Blurb y agréguelo a los módulos Blurb restantes
Copiar estilos de módulos de Blurb
Terminamos de modificar el primer módulo de Blurb. Haga clic derecho sobre él y seleccione ‘Copiar estilos de módulo’. Esto copiará todas las modificaciones que acabamos de hacer.
Pegar estilos de módulo en los módulos de Blurb restantes
Y pegue los estilos de los módulos en los dos módulos de Blurb restantes. Notarás que no cambia el contenido, solo cambia la configuración de diseño, lo que te ahorra mucho tiempo.
Espaciando Módulos de Blurb
Módulo de publicidad #1
Como se mencionó anteriormente, el espaciado de los módulos de Blurb difiere. El segundo no tiene ninguno, pero el primero usa ‘-900px’ para el margen superior. Una vez que agregue este margen negativo, notará que los módulos de Blurb se vuelven parte de la línea de tiempo. Dentro de Visual Builder, parece que el Módulo divisor está encima de los Módulos de Blurb. Pero una vez que salga de Visual Builder, verá que todo encaja en su lugar, así que no se preocupe por eso.
Módulo de publicidad #3
Abra su último Módulo de Blurb a continuación y agregue ‘150px’ al margen inferior.
Coloque el módulo de imagen en la columna 2
Localizar imagen
¡Ahora podemos pasar a la columna 2! El único módulo que necesitaremos allí es un módulo de imagen. Estamos reutilizando uno que ya está en nuestra página, así que continúe y búsquelo:
Soltar imagen en la columna 2
Suéltelo y arrástrelo a su segunda columna a continuación.
Cambiar espaciado
Para centrarlo verticalmente, vamos a agregarle un margen:
- Margen superior: 300 px (escritorio), 30 px (tableta y teléfono)
- Margen inferior: 50 px (tableta y teléfono)
Eliminar la sección anterior y siguiente
¡Hemos terminado de crear nuestra sección! Lo último que queda por hacer es eliminar las secciones excesivas.
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Pensamientos finales
En esta publicación de blog de caso de uso, le mostramos cómo convertir divisores verticales en verticales utilizando el paquete de diseño de empresa de mudanzas de Divi. Este enfoque es ideal si desea crear líneas de tiempo en su página sin tener que usar ningún código adicional. Se basa únicamente en las opciones integradas de Divi. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!