Personaliza rápido el ancho de columna en DIVI.
En el mundo del diseño web, la personalización y la adaptabilidad son pilares fundamentales para crear experiencias únicas y envolventes para los usuarios.
La capacidad de moldear y ajustar cada elemento a nuestra visión no es solo un deseo, sino una necesidad. En este contexto, Divi, de Elegant Themes, es una herramienta poderosa y flexible, permitiendo a los diseñadores y desarrolladores web construir sitios web visualmente impresionantes con una facilidad y eficiencia inigualables. Sin embargo, para desbloquear su potencial, es imperativo entender cómo podemos tomar el control total sobre cada aspecto del diseño.
En este artículo, nos sumergiremos en el arte y la técnica de personalizar el ancho de las columnas en Divi utilizando CSS, proporcionándote una sencilla herramienta para que puedas esculpir tus páginas web con una precisión milimétrica y una creatividad sin restricciones.
Acompáñame para que web resuene con tu marca y visión.
Opciones nativas de DIVI para el Ancho de las Columnas
Te muestro en esta imagen qué opciones nos da Divi para los distintos anchos de columna.
Problema: No podemos elegir exactamente el ancho de columna en una fila
Como hemos visto, hay varias opciones, bastante versátiles para elegir el ancho de las columnas, pero, si se da el caso que queremos ajustar más milimétricamente, no podemos, por lo tanto este es un problema, pero no te preocupes, porque la solución es muy sencilla y fácil de aplicar.
Solución: Personaliza el ancho de las columnas con un sencillo CSS
Como te prometía te voy a dar la solución para que personalices tu ancho de columna.
Lo primero es ver dónde colocar el código CSS. Será en cada columna, que se encuentra dentro de la fila (color verde)
A continuación nos vamos a ir a modificar cada columna individualmente:
Por último nos vamos a ir a avanzado — css personalizado
Allí vamos a colocar el código CSS que te indico. Simplemente le decimos qué ancho de pantalla debe tener cada columna. El valor puede estar dado en píxeles o en %, según prefieras.
width: 40%;
/* — Pon esto en cada columna, junto con el % o px que quieres que ocupe cada una — */
Por otra parte, si deseas un poco de flexibilidad, puedes, en lugar de indicar el width, puedes indicarle min-width o max-width, si quieres que haya un límite, acompañado de una flexibilidad. Por ejemplo:
min-width: 500px;
max-width: 40%;
Ejemplo de filas y columnas con el CSS aplicado para personalizar el ancho de cada columna
Aplicando el primer ejemplo (width 20% y width 80%) veríamos tal que así nuestras filas y columnas.
Antes
EJEMPLO DE COLUMNA DE DIVI 1
EJEMPLO DE COLUMNA DE DIVI 2
Después
Ejemplo solo visible en dispositivos de escritorio
EJEMPLO DE COLUMNA DE DIVI 1
EJEMPLO DE COLUMNA DE DIVI 2
¿Qué hago si no me funciona el código?
Puede que el código no te funcione. Ante esto tengo dos posibles problemas y su solución:
Problema 1: El CSS de DIVI va por encima del nuestro y no nos hace caso
Si te ocurre esto hay un arreglo posible, añadirle !important al final de cada línea del código. Por ejemplo:
width: 20% !important;
En este caso tu CSS pasa a ser más importante que el nativo del tema y está forzado a hacerte caso.
Problema 2: El código funciona y tú no lo sabes
Es posible que el código lo hayas puesto bien y esté todo perfecto y aun así no veas que se ajustan bien las columnas. Esto se puede deber a que en la previsualización mientras editas la página no lo ves, pero una vez guardada sí. No pasa nada, en ocasiones nuestro querido tema no procesa el código para mostrarte una vista previa. Prueba a guardar como borrador a ver si así se te previsualiza. Si no, tendrás que ajustarlo, guardarlo y darle a ‘Ver la página/entrada” para ver cómo va quedando, pero el código en principio ha sido probado en varias versiones y funciona.
