logooneasesoria4

¿Necesita una consulta gratuita?

Cómo centrar verticalmente cualquier contenido con Divi @ Ayuda WordPress

A veces, muchas veces, al añadir elementos en Divi, es complicado hacer que todos se muestren centrados verticalmente, para que ocupen una misma línea imaginaria, algo fundamental a la hora de diseñar una web.

Es verdad que se puede conseguir, forzando la alienación vertical mediante jQuery, pero no siempre funciona en todos los navegadores, y además en ocasiones es incompatible con la optimización para las métricas web principales.

Si te encuentras con esta necesidad, o más bien, cuando te encuentres con esta necesidad, lo mejor es recurrir al CSS, pues unas pocas líneas te van a solucionar el problema de inmediato.

El problema

Para que veas a qué me refiero, haz lo siguiente:

  1. Añade una sección a cualquier página o entrada usando el maquetador Divi.
  2. Elige añadir 3 columnas.
  3. En la primera y tercera columna añade un módulo de imagen
  4. En la segunda columna, la de enmedio, añade un módulo de botón
  5. En la pestaña de diseño de cada elemento (imágenes y botón) abre la sección de alineación y haz clic en el icono de alineación vertical superior (por defecto la alineación es a la izquierda)

elementos divi alineados verticalmente arriba

Como puedes ver, consigues 3 columnas, cada una con un elemento, los cuales están – convenientemente – alineados verticalmente en la parte superior.

Además, puedes alinear al centro el botón.

Pero no hay ningún ajuste que te facilite centrar verticalmente esos elementos…

La solución

Para empezar vamos a añadir un poco de CSS sencillito donde suelas hacerlo, en la hoja de estilos del tema hijo, en las opciones de Divi o en el personalizador de temas, este:

/* Centrar verticalmente elementos Divi */
.divi-alinear-vertical-ayudawp { 
display: flex; 
flex-direction: column; 
justify-content: center;
}

Y apunta o quédate con el nombre utilizado para la nueva clase CSS: divi-alinear-vertical-ayudawp, que la necesitaremos a continuación.

css adicional central verticalmente divi

Ahora ve a los ajustes de la sección y abre la configuración de cada una de las columnas de la misma.

editar columnas fila divi

En la sección avanzada de cada columna, añade una clase CSS, la que antes creamos (divi-alinear-vertical-ayudawp) y guarda los cambios en la configuración de cada columna.

elementos divi centrados verticalmente

Verás que se van centrando verticalmente los elementos que añadimos, justo lo que íbamos buscando 🙂

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

¿Te gustó este artículo?

Déjanos tus comentarios..!

23 de enero de 2024

RECIBE

GRATIS

Recursos para tu web GRATIS.

En agradecimiento por haber leido nuestro blog te ofrecemos algúnos plugins, temas y asesoría para el desarrollo de tu sitio web.
Envía correo y espera respuesta...Gracias..!
baneranunciopluginsbest
Publicaciones Relacionadas
Abrir chat
One Asesoría
Hola 👋
¿Necesita cotizar una página o tienda online, cómo podemos ayudarle..?