Divi Builder le permite tener hasta cuatro columnas para diseños de página. Y, para la mayoría de los sitios web, cuatro columnas es todo lo que necesita. Pero a veces es necesario agregar más columnas. Por supuesto, hay complementos que le permiten incrustar códigos cortos para agregar columnas adicionales a su diseño. Pero esto puede ser una limitación cuando se trabaja con Divi Builder, ya que los códigos abreviados requieren que trabaje desde dentro de un módulo.
Es por eso que en la publicación de hoy, le mostraré cómo agregar más columnas a sus filas usando Divi Builder sin el uso de un complemento o códigos cortos. De esta manera, puede agregar cualquier cantidad de columnas para organizar módulos Divi de cualquier tipo. ¿Necesita un diseño de diez columnas para mostrar logotipos de clientes o piezas de cartera utilizando el módulo de imagen? ¿Necesita un diseño de seis columnas para enumerar los servicios de su empresa utilizando el módulo de Blurb? ¡Bien tu puedes! Y la mejor parte es que aún puede editar los módulos en estas columnas usando Divi Builder.
¡Empecemos!
Suscríbete a nuestro canal de Youtube
Primero implemente el Divi Builder y siga con el diseño de la sección estándar que se muestra.
Seleccione Configuración del módulo de hileras. En Configuración general, seleccione la opción para hacer que la fila sea de ancho completo.
En la pestaña CSS personalizado, ingrese «seis columnas» en el cuadro de texto Clase CSS. Agregaremos CSS a esta clase más adelante.
Guardar la salida
Ahora inserte una columna de ancho completo en su fila.
Inserte el módulo Blurb.
En la Configuración del módulo de Blurb, en Configuración general, actualice la siguiente configuración:
Insertar título: [ingrese su título]
Cargue una imagen (ancho 300 px, estoy usando una imagen de unsplash.com)
Orientación del texto: centro
Insertar contenido: [ingrese su contenido]
Ingrese una etiqueta de administrador (opcional)
Guardar la salida
Ahora necesita duplicar el módulo Blurb que acaba de personalizar para crear cinco módulos adicionales, lo que le da un total de seis módulos publicitarios. Es importante que tenga seis módulos aquí porque esto coincide con la clase de «seis columnas» que creó anteriormente.
Guarda o publica tu página.
Ahora que sus seis módulos están listos, vaya a Divi → Opciones de tema y agregue el siguiente CSS en el cuadro de texto CSS personalizado:
|
01
02
03
04
05
06
|
.ten-columns .et_pb_module {width: 10%; float: left;}.nine-columns .et_pb_module {width: 11.11%; float: left;}.eight-columns .et_pb_module {width: 12.5%; float: left;}.seven-columns .et_pb_module {width: 14.28%; float: left;}.six-columns .et_pb_module {width: 16.66%; float: left;}.five-columns .et_pb_module {width: 20%; float: left;} |
Ahora obtenga una vista previa de su página. Debería ver sus módulos publicitarios en un diseño de seis columnas.
Es posible que haya notado que el código CSS personalizado que ingresó incluye seis clases diferentes. Esto le brinda la posibilidad de crear diseños para cinco, seis, siete, ocho, nueve y/o diez columnas.
La clase de seis columnas es lo que está creando ahora. Pero, si quieres una cantidad diferente de columnas, solo tienes que cambiar dos cosas.
El primer cambio es actualizar el CSS personalizado de configuración del módulo de fila con una clase de CSS diferente. Por ejemplo, si desea cinco columnas, debe colocar «cinco columnas» en el cuadro de texto Clase CSS.
El segundo cambio es asegurarse de tener cinco módulos publicitarios en lugar de seis.
¿Necesita más diseños de columnas?
Si eres bueno en matemáticas (¿a quién engañamos? Solo usa tu aplicación de calculadora) puedes agregar tantas columnas como quieras a tu diseño. Simplemente calcule el porcentaje que necesita y cree una clase para ese porcentaje.
Por ejemplo, si desea un diseño de 12 columnas, esto es lo que debe hacer:
- Divide 1 entre 12 y multiplícalo por 100 para obtener 8,33 %. (Este será el ancho de una de sus columnas).
- Agregue una clase CSS personalizada llamada «doce columnas» al módulo de fila que contiene sus 12 módulos.
- Ingrese el siguiente css personalizado para este porcentaje:
|
01
|
.twelve-columns {width: 8.33%; float: left;} |
Ser aún más creativo con los diseños de sus columnas
Para crear diseños de columnas más creativos, puede incorporar esta funcionalidad con la sección de especialidad.
Por ejemplo, así es como haría un diseño de medio cinco quintos.
Seleccione la sección Especialidad del Divi Builder.
Inserte el siguiente diseño de columna:
Inserte un módulo de propaganda en la mitad de la columna izquierda:
Vaya a Configuración del módulo de fila en el módulo de fila derecho.
En la pestaña CSS personalizado, ingrese «cinco columnas» en el cuadro de texto Clase CSS.
Inserte una columna de ancho completo y agregue cinco módulos a su fila repitiendo los mismos pasos que hizo anteriormente.
El resultado es un diseño de columna de medio cinco quintos.
Cuidando el móvil
Si no desea mantener su diseño de columna personalizado igual en todos los dispositivos, puede ingresar CSS adicional para reducir las columnas a un tamaño más legible en dispositivos móviles. Siéntase libre de cambiar los porcentajes para satisfacer sus necesidades.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
|
@media (max-width: 980px){.ten-columns .et_pb_module {width: 20%;}.nine-columns .et_pb_module {width: 33.3%;}.eight-columns .et_pb_module {width: 25%;}.seven-columns .et_pb_module {width: 25%;}.six-columns .et_pb_module {width: 33.3%;}.five-columns .et_pb_module {width: 33.3%;}}@media all and (max-width: 767px) {.ten-columns .et_pb_module {width: 100%;}.nine-columns .et_pb_module {width: 100%;}.eight-columns .et_pb_module {width: 100%;}.seven-columns .et_pb_module {width: 100%;}.six-columns .et_pb_module {width: 100%;}.five-columns .et_pb_module {width: 100%;}} |
Eso es todo. Ahora tiene la capacidad de agregar más columnas a sus diseños de página usando Divi Builder.
Pensamientos finales
Agregué esta funcionalidad por primera vez al completar un proyecto para un cliente que quería agregar más columnas para un montón de logotipos para mostrar a sus clientes y socios destacados. También querían la capacidad de ordenar y editar las imágenes/logotipos usando Divi Builder. La solución funcionó perfectamente. Espero que encuentres esta solución útil también.
Esperando saber de usted en los comentarios. ¡Disfrutar!