Cómo configurar una anchura personalizada de columnas en DIVI

29 de julio - 2020

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?

Suscríbete:

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.

división en columnas de las filas en el tema DIVI
Selección de columnas para la inserción de una fila

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".

Tamaño del contenedor de las columnas en DIVI
Anchura total de la fila

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".

Igualar tamaño de altura de las columnas
Igualar tamaño de altura de las columnas

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.

Fila con tres columnas estándar en DIVI
Fila estándar de 3 columnas iguales

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.

anchura personalizada de columnas en DIVI coloreadas
Columnas a modificar

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.

Opciones de la FILA
Opciones de la Fila en el constructor Divi
Opciones de las columnas en DIVI
Configuración de 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.

Añadir CSS personalizado para laanchura personalizada de columnas en DIVI
Casilla para asignar el ancho de la columna

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 personalizada de columnas en DIVI
Columnas con tamaño personalizado

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.

adaptar la anchura en diferentes dispositivos
Opciones de adaptabilidad para dispositivos de DIVI

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:

COLUMNA 1 - Tableta:
width: 40% !important;

COLUMNA 2 - Tableta:
width: 60% !important;

COLUMNA 3 - Tableta:
width: 100% !important;

Opciones en DIVI para tablet
Ajuste responsive para tablet

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:

Resultado de la personalización
Comportamiento de las columnas según el dispositivo

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.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

1 Comentario

  1. Alex Nieto

    Genial, me ha venido de lujo!!

    Responder

Enviar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Mi canal de Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Anuncio - WordPress Gestionado de SiteGround - Potente pero simple de usar. Haz clic para aprender más. Descuento directo DIVI -  10 por ciento