Cómo configurar una anchura personalizada de columnas en DIVI

Utilizar varias columnas para configurar una web es una solución muy práctica y visual dentro de la organización del contenido que vamos a mostrar. Divi ofrece varias posibilidades, desde una a seis columnas y con diferentes formatos fijos, pero ¿podemos crear una anchura personalizada de columnas en Divi del tamaño que queramos?

Configuración de columnas en el tema DIVI

Las opciones de este tema son infinitas, una vez que descubres lo fácil que es manejar todas las configuraciones puedes crear un diseño tan personal como quieras, incluso de la cabecera y el pie de página, que suelen ser fijos en el resto de temas de WordPress.

Si aun no lo has descubierto o tienes curiosidad por ver como funciona, puedes probar Divi durante 30 días, y si no te gusta solicitar la devolución total del precio sin compromiso (podrás quedarte los archivos descargados, pero perderás la opción de las actualizaciones futuras).

COMPRAR DIVI CON UN PEQUEÑO DESCUENTO

Las columnas de Divi preestablecidas

Si no vamos a diseñar una web con contenido especial que necesite una configuración de columnas diferente, con las opciones que ofrece Divi, al elegir el tipo de fila, es suficiente para la gran mayoría.

Este tipo de columnas están divididas sobre una anchura total (100%) de forma simétrica o proporcional. Pero si necesitamos una medida exacta en píxeles o un porcentaje diferente, ¿se puede hacer?

Claro que se puede, y en el siguiente ejemplo vas a aprender cómo se hace para que lo repliques en la estructura de tu web si lo necesitas.

Pero no sólo eso, este sistema que ofrece Divi, en la pestaña de ajustes Avanzados, se puede utilizar para que las columnas se comporten como nosotros queramos en diferentes dispositivos.

Elegir la anchura personalizada de columnas en DIVI

Antes de empezar tenemos que conocer que tamaños vamos a asignar a las columnas.

Basándonos en la anchura total del contenido de la web, tenemos que dividir las columnas en píxeles o porcentajes según lo necesitemos.

Si vamos a elegir medidas en píxeles es necesario saber la anchura total del contenedor, lo podemos ver en las opciones de la fila dentro de la pestaña "Tamaño".

Elegir medidas en píxeles puede complicar la visualización del contenido en dispositivos y pantallas más pequeñas, por lo que sería necesario un mayor número de ajustes para que todo quedara en su sitio. Pero si no te importa, se pueden usar píxeles.

En esta misma pantalla debemos marcar la pestaña "Igualar las alturas de las columnas" para que todas las columnas queden alineadas y, si queremos, ajustar el "Uso Personalizado de canalón de ancho".

La utilización de porcentajes es más versátil, ya que el contenido se adaptará automáticamente a cualquier dispositivo, puede que se descoloque un poco, pero estaremos siempre mostrando toda la información sin que se salga por los laterales de la pantalla.

Además, no necesitamos conocer la anchura total porque siempre será 100%, y sobre este valor dividiremos el número de columnas.

Configurar 3 columnas con anchuras diferentes en DIVI

Aunque estoy todo el rato hablando del tema Divi, este procedimiento es compatible con el tema Extra y el plugin Divi Builder.

Vamos a configurar una fila de tres columnas a las que vamos a asignar tres medidas diferentes a cada una, partiendo de la anchura total del 100%.

Estas anchuras serán de 20%, 30% y 50%, valores que se pueden modificar siempre que el total sume el 100%, y que asignaremos sobre una fila de tres columnas estándar de Divi.

Para diferenciarlas y ver mejor el resultado rellenaré cada columna de un color sólido diferente.

El módulo, o módulos que podamos colocar en su interior no son importantes en este momento, y dependerá del contenido de nuestra web, texto, imagen, anuncios... Así que sólo colocaré un de texto indicando el porcentaje que usaré en cada sitio.

El resto de opciones, como los espacios entre columnas, los márgenes interiores y exteriores, seguirán el proceso normal de configuración desde la pestaña "Diseño" de cada columna.

Asignar el tamaño concreto a cada columna

Dentro de las opciones de la fila aparecerán, en la primera pestaña llamada "Contenido", el número de columnas que hemos elegido. Aquí también podemos añadir o eliminar columnas si nos equivocamos al insertar la fila.

Cada columna dispone de sus propias configuraciones, a las que podemos acceder a través del icono de la rueda dentada que hay en cada columna.

Debemos acceder a las opciones de cada columna, abrir la pestaña "Avanzado" y colocar una línea de código CSS indicando el tamaño que queremos que tenga la columna.

No os equivoquéis con las opciones de la "Fila", que son diferentes y no afectan al resultado que buscamos.

En la casilla "Elemento principal" añadimos los siguientes códigos en cada columna:

COLUMNA 1:
width: 20% !important;

COLUMNA 2:
width: 30% !important;

COLUMNA 3:
width: 50% !important;

Ya podemos ver el resultado que se adaptará a todos los medios donde mostremos nuestra web.

Anchura de columnas personalizadas en Divi adaptables

Estos valores modifican el comportamiento básico de Divi, haciendo que se muestren las medidas elegidas en todos los medios por igual.

En las pantallas más pequeñas es posible que la anchura personalizada de columnas en DIVI no muestre el contenido como nos gustaría. Así que vamos a solucionarlo indicando como queremos que se comporten las columnas en los distintos dispositivos.

Pasando el ratón por encima del título "Elemento principal" de la opción CSS personalizado, picamos en el icono con forma de móvil para crear la nueva configuración responsive.

Aparecen tres nuevas pestañas indicando los valores que podemos asignar a cada pantalla, para Escritorio, Tableta y Teléfono.

Los valores para el Escritorio ya los hemos asignado en el paso anterior, ahora seleccionamos "Tableta" y añadimos los siguientes datos para ajustar dos columnas arriba y una abajo:

Si queremos que todas las columnas ocupen una anchura del 100%, colocamos el código CSS de la columna tres en todas las columnas. Una opción que podemos utilizar para mostrar el contenido en los móviles.

COLUMNAS 1, 2 y 3 - Teléfono:
width: 100% !important;

El resultado sería el que se muestra en la siguiente animación:

Espero que con estas indicaciones podáis ajustar cualquier diseño a cualquier formato de anchura personalizada de columnas en DIVI, y si queréis dejarme algún comentario, intentaré ayudaros en la medida que pueda.