Saltar al contenido principal

Cómo alinear elementos en la misma línea en Divi

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

La capacidad de alinear verticalmente el contenido al crear un sitio con divi Puede ser una adición práctica a su herramienta de diseño. A veces, un determinado diseño requiere que el contenido esté alineado verticalmente de diferentes maneras (centrado, bajo, alto). La necesidad más común es centrar su contenido verticalmente.

Proporciona una almohadilla espaciadora simétrica muy conveniente cuando se utilizan múltiples diseños columnas por su contenido Además, el contenido centrado verticalmente se mantiene centrado en diferentes anchos de navegador, eliminando la molestia de aplicar márgenes de relleno o personalizados para una respuesta similar.

En esto tutoriel, Voy a mostrarle cómo agregar algunos fragmentos de código CSS a cualquier columna para alinear verticalmente el contenido. Usaré algunos de los diseños de Divi predefinidos para ejemplos de cómo proceder. Si no sabes mucho sobre CSS, no tienes que preocuparte. Será muy fácil de aplicar a tus propios diseños en segundos.

Comprender Flex y Divi

La propiedad Flex (o Flexbox) es simplemente una forma de colocar elementos en pilas horizontales y / o verticales (como una mesa). Excepto que, a diferencia de las tablas tradicionales, la propiedad flex le permite crear cuadros que se ajustarán al tamaño del contenido que contiene.

Divi usa la propiedad flex cuando selecciona "Ecualizar alturas de columna" como parámetro de línea. Esto simplemente garantiza que el tamaño de sus columnas se ajustará al tamaño de la columna con más contenido. Y dado que Equalize Column Heights activa la flexibilidad para el contenedor de línea, puede aprovecharla fácilmente agregando css a sus columnas para ajustar el contenido de cada columna (o zona).

Por ejemplo, si agrega "margen: auto" a una columna en una fila, el contenido de esa columna (ya sea uno o más módulos) se centrará verticalmente.

Además, si agrega "align-items: center" a su línea, todas sus columnas (y sus contenidos) se centrarán verticalmente.

Por supuesto, hay muchos otros usos de la propiedad Flex en el diseño web, así como CSS más avanzado que puede aplicar a su tema. Pero para este tutorial, quería mantener las cosas simples.

¿Es realmente necesario?

Técnicamente, no. Puede alinear verticalmente su contenido / módulos en una columna mediante el espaciado personalizado (relleno y margen). Por ejemplo, puede usar las opciones de espaciado Divi para dar una columna igual al relleno superior e inferior para centrar los módulos verticalmente en la columna. También puede agregar solo un relleno mayor que una columna para alinear el contenido inferior. Sin embargo, es posible que deba ajustar el espacio al actualizar su página con más contenido. Además, puede ser difícil mantener esta alineación en diferentes anchos de navegador.

Por lo tanto, si está buscando una solución para alinear verticalmente el contenido sin tener que pensar en el espaciado personalizado, creo que lo encontrará útil.

¡Comencemos!

Cargue el diseño predefinido en su página.

Para empezar, usaré el diseño de la cartera de empresas de diseño de interiores. Para obtener este diseño en su página, cree una nueva página. Entonces dale un título a tu página. Haga clic en "Usar Divi Builder" y luego "Usar Visual Builder". Luego selecciona la opción "Elegir un diseño básico". Luego, seleccione el kit de diseño de Interior Design Company en la ventana emergente Cargar desde biblioteca. Finalmente, seleccione la página del Portafolio en la lista de diseños y haga clic en "Usar este diseño".

plantilla divi tema wordpress.png

Una vez que el diseño esté cargado en su página, estará listo para comenzar.

Método 1: cómo alinear verticalmente el contenido con Flex y Auto Margin

Abra la configuración de línea de la segunda línea de la página (la que está directamente debajo de la línea con el título de la página). Bajo los parámetros de diseño, abra el grupo de opciones de tamaño y observe que "Ecualizar alturas de columna" ya está activa. Esto significa que la línea ahora tiene la propiedad flex ("display: flex;") agregada.

armoniza las alturas de las columnas.png

Ahora vaya a la configuración de la pestaña Avanzada para la misma fila y agregue el siguiente fragmento de código css debajo del campo de entrada del elemento principal en la columna 2.

margen: auto;

automatic margin divi.png

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 554.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

Ahora el contenido de la segunda columna se ha movido para centrarse verticalmente.

Hacer menor contenido alineado

Si desea alinear su contenido en la parte inferior para que todos los módulos se apilen en la parte inferior de su columna, puede ajustar el valor del margen de la siguiente manera:

margen: auto 0;

margin divi line.png

Alineación vertical del contenido para todas las columnas de su fila

En lugar de agregar "margen: automático" a cada columna individualmente, también puede centrar verticalmente el contenido de todas las columnas en su fila agregando el siguiente fragmento de código al elemento principal de sus parámetros de fila.

alinear-elementos: centro;

alinear elementos divi.png

O si desea que todos los contenidos de sus columnas se alineen en la parte inferior, puede agregar este extracto:

alinear elementos: flex-end;

Y no olvide que puede aprovechar la función Estilos Divi Extend haciendo clic derecho en el elemento principal con su fragmento de código CSS y haciendo clic en "Expandir elemento principal".

extender elemento principal.png

Luego, extienda este elemento css principal a todas las líneas de la página (o sección) para centrar verticalmente todos los contenidos de cada columna de la página.

expanda estilos en divi.png

Ahora todo está centrado verticalmente.

apariencia de los cambios divi.png

Sin embargo, es posible que haya notado que el color de fondo de la columna blanca ya no cubre toda la altura de la línea. Esto se debe a que agregamos "margen: auto" a la columna. Para resolver este problema, puede cambiar el color de fondo de la línea en blanco y eliminar el relleno de la línea. Pero en cambio, te mostraré una forma de centrar el contenido de tu columna sin cambiar el margen.

Método 2: alineación vertical del contenido mediante la dirección de columna flexible

En el primer método, aprovechamos la propiedad flex agregada a la línea. Esto ha hecho de cada una de nuestras columnas una "caja flexible" que puede alinearse verticalmente simplemente ajustando el margen.

Pero también hay una forma flexible de alinear los contenidos de nuestra columna sin perder el efecto "Ecualizar Altura de columna" que mantiene nuestras columnas (y los fondos de columnas) del mismo tamaño. Para hacer esto, simplemente agregaremos algunas líneas de CSS a nuestra columna para que todos los módulos en la columna se apilen verticalmente y luego se centren.

Volvamos a nuestra línea en el ejemplo anterior. Abra la configuración de la línea y elimine cualquier CSS personalizado que pueda tener haciendo clic con el botón derecho en CSS personalizado y haciendo clic en "Restablecer estilos CSS personalizados".

Luego agregue el siguiente CSS en la columna 2, elemento principal:

Crea fácilmente tu blog con SiteGround

SiteGround le permite crear su blog de WordPress en unos pocos clics. Nombre de dominio gratis, alojamiento seguro, SSL, transferencia y mucho más ... [Recomendado]

pantalla: flexión; dirección flexible: columna; justificar-contenido: centro;

Dirección flex-column.png

O, si quisiera alinear el contenido en la parte inferior, simplemente reemplace "Justificar contenido: centrar" con "justificar contenido: flex-end".

flex alineación end.png

Lo mejor de esta configuración es que si mi contenido está centrado verticalmente y se alcanza el ancho de la línea, el contenido permanece centrado.

apariencia de boxes.png

Realiza anuncios publicitarios (Resumen) con diferentes cantidades de textos alineados verticalmente

Hacer que el contenido de su columna esté centrado verticalmente también puede ser útil para los anuncios publicitarios. Como usted sabe, no todas las burbujas contendrán la cantidad exacta de texto utilizado para describir la función o el servicio. Centrar estas burbujas verticalmente puede crear un hermoso diseño para su diseño.

Para este ejemplo, alinearé verticalmente los elementos difuminados en el diseño de la página de inicio Digital Payments.

Primero agregaré diferentes cantidades de texto del cuerpo a los anuncios publicitarios para dar una representación más realista de cómo se vería un sitio.

alineación de blorbds.png

Ahora tengo que ir a la configuración de línea y 'Armonizar alturas de columna'.

harmonize columns.png

Ahora puedo agregar mis fragmentos de CSS para alinear mi contenido y modificar el diseño.

En la pestaña Avanzado de la configuración de su fila, podemos centrar verticalmente el contenido de nuestras columnas agregando lo siguiente en Elemento principal:

alinear-elementos: centro;

Modificar la alineación del contenido divi.png

O cámbialo siguiendo para alinearlos.

alinear elementos: flex-end;

alineación en la parte inferior divi.png

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [GRATIS]

También puede restablecer sus estilos CSS personalizados y agregar los siguientes márgenes personalizados para alinear la parte inferior de la primera columna y la parte superior de la tercera columna alineada.

Columna 1 elemento principal de CSS:

margen: auto auto 0;

Columna 3 elemento principal de CSS:

margen: 0 auto auto;

personalizar la alineación de resúmenes divi.png

¿Qué pasa con los diseños de una columna?

Técnicamente, no necesita un fragmento de código CSS o flexión para centrar verticalmente el contenido de su columna. Todo lo que necesita hacer es asegurarse de tener el mismo espacio por encima y por debajo de su contenido (o módulos). La mayoría de las veces, los usuarios necesitan contenido vertical centrado en modelos de varias columnas porque desean que el contenido adyacente se alinee perfectamente.

Eso es todo para este tutorial que muestra cómo alinear elementos en la misma línea en Divi.

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Volver arriba
4 acciones
cuota2
Tweet
Guardar2
WhatsApp