Cómo utilizar creativamente las nuevas opciones de alineación de filas de Divi

En el tutorial de Divi de hoy, le mostraremos cómo puede usar las nuevas opciones de alineación de filas en Divi a su favor. Combinaremos las opciones de alineación de filas con otras opciones de diseño integradas para darle una idea de lo que es posible con las Opciones de diseño avanzadas de Divi. El ejemplo que le mostraremos cómo recrear no contiene absolutamente ningún código adicional, lo que significa que cualquier persona con cualquier nivel de habilidad puede lograr este diseño.

¡Empecemos!

Vista previa del diseño

Aquí hay un vistazo rápido a lo que crearemos hoy (en el escritorio):

Y así es como se verá el diseño en el móvil:

Cómo utilizar creativamente las nuevas opciones de alineación de filas de Divi

Suscríbete a nuestro canal de Youtube

Configuración del personalizador de temas

Barra de menú principal

Como puede notar, también hemos hecho coincidir el menú principal con el diseño. Para modificar su barra de menú principal, vaya a su Tablero de WordPress> Apariencia> Personalizar> Encabezado y navegación> Barra de menú principal> Y realice los siguientes cambios:

• Ocultar imagen de logotipo: Activar
• Altura del menú: 30
• Tamaño del texto: 17
• Espaciado entre letras: -1
• Estilo de fuente: mayúsculas
• Color del texto: #FFFFFF
• Color de enlace activo: #FFFFFF
• Color de fondo: rgba (255, 255, 255, 0)
• Color de fondo desplegable: rgba (255, 255, 255, 0)

Sección de héroe

Una vez que haya modificado su menú principal, es hora de comenzar con el diseño. Lo primero que debe hacer es agregar una nueva página, cambiar al Visual Builder y agregar una nueva sección estándar. Esta primera sección va a ser nuestra sección de héroes y se ve así:

Configuración de la sección

Fondo degradado

Una vez que haya agregado la sección estándar, puede agregarle un fondo degradado:

• Primer color: # 9e5555
• Segundo color: # 000000
• Tipo de degradado: lineal
• Dirección del gradiente: 180 grados
• Posición inicial: 50%
• Posición final: 50%

Configuración de filas

Superposición de color

Luego, agregue una fila de una columna a esa sección y abra su configuración. Lo primero que tendremos que hacer es agregar una superposición de color. Puede elegir qué tan oscura desea que sea su imagen seleccionando un color gris oscuro. En este caso, usamos '# 595959'.

Imagen de fondo

Lo siguiente que tendremos que hacer es agregar una imagen de fondo a la fila de una columna y aplicar la superposición de colores. Para mezclar la superposición de color y la imagen de fondo, elija 'Multiplicar' como su Mezcla de imagen de fondo.

Alineación de la fila central

Como la mayoría de los sitios web, elegiremos una alineación de fila central para la sección de héroe.

Hacer fila de ancho completo

También queremos que nuestra fila sea de ancho completo, por lo que habilitaremos esa opción dentro de la subcategoría Tamaño de la pestaña Diseño.

Acolchado personalizado

Lo último que tendremos que hacer dentro de la configuración de la fila es agregar un relleno personalizado de '300px' en la parte superior e inferior.

Primer módulo de texto

Una vez que tengamos todas las configuraciones en su lugar, agregaremos el primer módulo de texto a la fila. Elija el texto que desea que aparezca en la pestaña Contenido y pase a la pestaña Diseño. Dentro de la pestaña Diseño, asegúrese de que la siguiente configuración se aplique a la subcategoría Texto:

• Fuente de texto: Arvo
• Tamaño de fuente de texto: 64 (escritorio), 47 (tableta), 33 (teléfono)
• Color del texto: #FFFFFF
• Altura de la línea de texto: 1em
• Orientación del texto: centro

Segundo módulo de texto

Luego, agregue otro módulo de texto. El segundo módulo de texto contiene, en cambio, las siguientes configuraciones:

• Fuente de texto: Lato
• Tamaño de fuente de texto: 25 (escritorio), 18 (tableta), 16 (teléfono)
• Color del texto: #FFFFFF
• Altura de la línea de texto: 1.7em
• Orientación del texto: centro

Segunda sección

Una vez terminada la sección de héroe, podemos pasar a la segunda sección. Para esta sección, usaremos la alineación de fila derecha en lugar de la central en combinación con fondos de columna y margen personalizados para crear un efecto hermoso. Necesitaremos crear versiones de dos filas dentro de esta sección: la versión de escritorio y la versión de tableta / teléfono. Esto asegurará que el diseño se vea impresionante en todo tipo de pantallas.

Configuración de la sección

Fondo degradado

Después de haber agregado una segunda sección, agréguele el siguiente fondo degradado:

• Primer color: # 000000
• Segundo color: # d6d6d6
• Tipo de degradado: lineal
• Dirección del gradiente: 184 grados
• Posición inicial: 20%
• Posición final: 20%

Agregar fila de escritorio

Luego, puede continuar y agregarle una primera fila de dos columnas; esta fila será la versión de escritorio. Afortunadamente, también podremos reutilizar la mayor parte para la versión para tableta / móvil.

Configuración de filas

Fondo de columna

Dentro de la pestaña Contenido, agregue '#FFFFFF' como color de fondo de la segunda columna.

Alineación de la fila derecha

Vaya a la pestaña Diseño y seleccione una alineación de fila a la derecha.

Hacer fila de ancho completo

A continuación, abra la subcategoría Tamaño y habilite la opción 'Hacer esta fila de ancho completo'.

Acolchado personalizado

Lo último que deberá hacer en la configuración de la fila es agregar un relleno superior de '300px' a la fila y el siguiente relleno a la segunda columna:

• Superior: 35px
• Derecha: 35px
• Abajo: 150px
• Izquierda: 35px

Columna 1

Primer módulo divisor

Para la primera columna, comenzaremos agregando un módulo divisor. Dentro de la subcategoría Visibilidad de la pestaña Contenido, habilite la opción 'Mostrar divisor'.

Vaya a la pestaña Diseño y seleccione '#FFFFFF' como color divisor.

Luego, elija 'Sólido' como Estilo de divisor y 'Superior' como Posición de divisor dentro de la subcategoría Estilos.

Lo último que deberá hacer dentro de la pestaña Diseño del Módulo Divisor es realizar los siguientes ajustes en la subcategoría Tamaño:

• Peso del divisor: 3
• Alto: 0px
• Ancho: 20%
• Alineación del módulo: derecha

Primer módulo de texto

Justo debajo del Módulo Divisor, agregue el primer Módulo de Texto y use la siguiente configuración dentro de la subcategoría Texto de la pestaña Diseño:

• Fuente de texto: Arvo
• Tamaño de fuente de texto: 30px
• Color del texto: # 000000
• Altura de la línea de texto: 1.6em
• Orientación del texto: centro

Clonar el primer módulo divisor y cambiar la alineación

Clone el módulo divisor que hemos creado y colóquelo justo debajo del primer módulo de texto. Lo único que debe cambiarse es la alineación del módulo en la subcategoría de tamaño. En lugar de tenerlo en el lado derecho, elija el izquierdo.

Segundo módulo de texto

Lo último que deberá agregar a la primera columna es otro módulo de texto con la siguiente configuración:

• Fuente de texto: Lato
• Tamaño de fuente de texto: 14
• Altura de la línea de texto: 1.7em
• Orientación del texto: centro

Columna 2

Módulo de imagen

Lo primero que deberá agregar a la segunda columna es un Módulo de imagen con la siguiente configuración dentro de la subcategoría Espaciado de la pestaña Diseño:

• Mostrar espacio debajo de la imagen: Sí
• Margen superior: -300px
• Izquierda: -80px

Módulo de texto

Luego, agregue un Módulo de texto justo debajo del Módulo de imagen y elija la siguiente configuración dentro de la subcategoría Texto de la pestaña Diseño:

• Fuente de texto: Lato
• Tamaño de fuente de texto: 14
• Altura de la línea de texto: 1.7em
• Orientación del texto: centro

Módulo de seguimiento de redes sociales

Lo último que deberá agregar a la segunda columna es un módulo de seguimiento de redes sociales. Agregue tantos íconos sociales como desee y asegúrese de seleccionar 'Centro' como Alineación de elementos dentro de la pestaña Diseño.

Desactivar en tableta y teléfono

Una vez hecho todo esto, puede continuar y deshabilitar la fila en Teléfono y tableta.

Agregar fila móvil

Clonar fila de escritorio

Ahora que ya hemos creado la versión de escritorio, la versión móvil será mucho más rápida. Clone la fila Escritorio y siga los siguientes pasos.

Cambiar columnas

Comience cambiando los módulos que se encuentran en ambas columnas.

Color de fondo de la columna

Luego, elimine el color de fondo de la segunda columna y colóquelo en la primera columna.

Relleno de columna

En lugar de tener el Relleno personalizado en la segunda columna, necesitaremos tenerlo en la primera columna. Además, el relleno inferior no es '150px' sino '35px' como el relleno superior, derecho e izquierdo.

Usar alineación de fila central

Luego, también tendremos que cambiar la alineación de la fila a 'Centro'.

Desactivar en el escritorio

Por último, pero no menos importante, asegúrese de que la fila esté desactivada en el escritorio.

Tercera sección

La tercera sección será muy similar a la segunda. Crear esta sección será fácil ya que podemos controlar la mayoría de las configuraciones de la segunda sección y hacer algunos ajustes. Una vez que haya completado todos los pasos, podrá presenciar el siguiente resultado:

Configuración de la sección

Fondo degradado

Agregue una nueva sección estándar y use el siguiente fondo degradado:

• Primer color: # d6d6d6
• Segundo color: # 9e5555
• Tipo de degradado: lineal
• Dirección del gradiente: 184 grados
• Posición inicial: 30%
• Posición final: 30%

Margen personalizado

Luego, agregue un margen personalizado de '-200px' también.

Fila de escritorio

La misma forma de trabajar cuenta para la tercera sección; vamos a hacer una versión de escritorio y tableta / teléfono.

Clonar la fila del escritorio de la segunda sección

Comience clonando la fila Escritorio de la sección anterior. La mayoría de las configuraciones son las mismas y repasaremos los cambios que deben realizarse.

Cambiar columnas

Uno de los cambios que debemos hacer es cambiar los módulos que se encuentran en ambas columnas.

Color de fondo de la columna

Luego, también necesitaremos eliminar el color de fondo de la segunda columna y agregar '# 000000' como el color de fondo de la primera columna.

Relleno de columna

Elimine el relleno personalizado de la columna 2 y use '35px' para el relleno personalizado superior, derecho, inferior e izquierdo de la primera columna.

Usar alineación de fila izquierda

Además, cambie la alineación de las filas de derecha a izquierda.

Margen personalizado del módulo de imagen

La subcategoría de espaciado del módulo de imagen también necesitará algunos cambios:

• Superior: -150px
• Derecha: -80px

Margen personalizado del primer módulo divisor

A continuación, agregue un margen superior de '200px' al primer módulo divisor dentro de la segunda columna.

Usar colores opuestos

Como puedes notar; el uso de colores es lo opuesto al segundo apartado. Continúe y cambie todos los colores de fuente a '#FFFFFF' y los colores del divisor a '# 000000'.

Desactivar en tableta y teléfono

Aunque la fila ya está deshabilitada en la tableta y el teléfono (debido al clon), puede ir a la subcategoría Visibilidad si desea asegurarse.

Fila móvil

Clonar la fila anterior del escritorio

Para la versión móvil, clone la fila Escritorio que acaba de crear y realice los cambios que siguen en la siguiente parte de esta publicación.

Usar alineación de fila central

Abra la configuración de la fila y cambie la alineación de la fila al centro.

Margen personalizado del módulo de imagen

Otra cosa que deberá hacer es cambiar el margen superior del Módulo de imagen a '-20%'.

Desactivar en el escritorio

Por último, pero no menos importante, asegúrese de que esta última fila esté deshabilitada en el escritorio.

Resultado

Siguiendo este tutorial paso a paso, debería poder lograr el siguiente resultado en el escritorio:

Y el siguiente resultado en el móvil:

Pensamientos finales

En esta publicación, le mostramos cómo puede usar creativamente las diferentes opciones de alineación de filas dentro de Divi Builder. La gente aprende más haciendo, por eso le proporcionamos un ejemplo que le mostramos paso a paso cómo crear. Si tiene alguna pregunta o sugerencia; no dude en dejar un comentario en la sección de comentarios a continuación.

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!