+34 650908608 [email protected]
Alineación vertical en DIVI

Vamos a ver cómo podemos alinear verticalmente cualquier contenido de una manera sencilla

En este tutorial veremos algo muy sencillo como es alinear el contenido verticalmente en cualquier módulo de DIVI, pero que si no sabes por dónde empezar puede ser un verdadero quebradero de cabeza. 
Buscamos alinear cualquier contenido que podamos tener en nuestra página (imagen, texto, anuncio, etc) al centro en vez de en la parte de arriba, tal como hace Divi por defecto. Para ver el resultado final de este tutorial, haz scroll hasta el final de esta entrada. También puedes pulsar aquí para ir directamente al resultado final.

Para hacer este tutorial hemos tomado por referencia el de divisoup, pulsa aquí para ver la versión original, en inglés.

La solución a este problema es añadir unas líneas de CSS ya que utilizar el relleno puede ser peor, ya que al cambiar la resolución de pantalla (o bien al realizar un cambio de dispositivo) los cambios que hagamos se desplacen o según el navegador que utilices gestiona diferente los porcentajes en el relleno, dando un resultado final lejos de ser el esperado. 

Tutorial Alineación vertical - No alineado

Vamos manos a la obra

Una vez hemos creado una página o entrada y activado “Usar constructor Divi“, pulsa insertar columnas y seleccionamos más de dos columnas.

A continuación insertamos un módulo en cada una de nuestras columnas. Aquí hemos insertado en la primera columna un módulo de texto. En la segunda columna, un módulo de imagen. Vamos a fila y seleccionamos “Diseño“.
Dentro de “Diseño” seleccionamos la pestaña “Tamaño” y dentro de esta activamos la opción “Igualar las alturas de las columnas“.

Tutorial Alineación vertical - Tamaño

Ahora abrimos los ajustes de fila y vamos a las columnas, en este caso como queremos alinear la primera con la segunda, seleccionamos al primera.

A continuación dentro de la columna que queremos alinear seleccionamos “Avanzado” y buscamos en la primera pestaña el input que pone “Clase CSS“, ahí añadimos la clase CSS que más adelante crearemos para alinear verticalmente el contenido, en este caso nuestra clase es “alineacion-vertical”.

Tutorial Alineación vertical - Aplicar clase
Una vez añadida la clase veremos que no se ha hecho ningún cambio todavía. Aún nos falta implementar el CSS para que todo haga su magia.

 

Vamos a personalizador de temas y buscamos la opción que pone “CSS adicional

A continuación añadimos este trozo de código:

.alineacion-vertical{
display: flex!important;
flex-direction: column!important;
justify-content: center!important;
}

Y le damos a publicar.

Tutorial Alineación vertical - Aplicar clase

Y ¡Voila! el CSS hizo su magia alineando verticalmente nuestro contenido, una vez creada la clase CSS simplemente tenemos que añadir esa clase a cualquier elemento que queramos alinear en DIVI.

Aquí tenemos el resultado final:

Tutorial Alineación vertical - Resultado final

Esperamos que este pequeño tutorial os haya sido de utilidad ¡No dudéis en dejar vuestro comentario si tenéis cualquier duda!