Tutorial Divi: Cómo añadir más columnas en las filas

Estructura de columnas personalizada de Divi

Añadir las clases CSS dos-col-tab en la configuración de la fila (una columna para móviles es por defecto en Divi por lo que no se necesita CSS personalizado para eso).3. Pro Tip: Utilice Divi Global Presets para cambiar el número de columnas en el móvil y TabletThis último paso no es necesario, pero es una buena manera de acelerar su proceso de diseño mediante la adición de diferentes estructuras de fila móvil a su Divi Global Presets library.This manera, usted no necesita agregar clases CSS personalizadas cada vez que desee cambiar el número de columnas en una fila. ¡En su lugar, sólo tiene que elegir los números de fila que desea utilizar desde el menú desplegable Presets al añadir una nueva fila.Changing números de fila móviles con Divi Global PresetsEso es todo! Para cambiar el número de columnas en móviles y tabletas, solo tienes que hacer clic en el conmutador de ajustes preestablecidos en la configuración de filas y elegir uno de la lista.

EXPLORA DIVITry hoy y recupera tu dinero en 30 días si no estás satisfecho. 100% libre de riesgo.Related postsCómo el estilo de su icono de carro Divi como Shopifyby Victor Duse | Jan 16, 2023En este tutorial, vamos a estilo de la cesta de menú Divi para parecerse a la cesta de Shopify minimalista.read moreCómo agregar un fondo de círculo para el número de cantidad de carro Diviby Victor Duse | Jan 9, 2023Vamos a dar el icono de carro de menú Divi por defecto un aspecto más moderno mediante la adición de un fondo de círculo superpuesto al número de cantidad de carro. leer másCambia el carrito de WooCommerce por un icono o imagen personalizada con Diviby Victor Duse | Jan 2, 2023Dale sabor a tu menú de WooCommerce cambiando el icono predeterminado del carrito de Divi por un icono de fuente personalizada o un icono de imagen personalizada con un poco de CSS.leer más

  Plantilla en Español – Inteligencia Artificial

Columnas anidadas Divi

¿Alguna vez has querido construir una página con más de 4 columnas en Divi? Por defecto, Divi desafortunadamente sólo nos da la opción de tener hasta 4 columnas en el constructor Divi pero en este tutorial, ¡te muestro cómo añadir 5 o 6 columnas!

Hay varias maneras de hacer esto e incluso hay un plugin gratuito (vinculado a continuación), pero si has estado siguiendo mis tutoriales, sabes que hago todo lo posible para evitar el uso de plugins adicionales debido a los frecuentes conflictos con las actualizaciones y el constructor visual.

Así que, así es como añado columnas extra e incluso te muestro cómo añadir hasta 7 u 8 columnas si lo deseas. Y por si fuera poco, también he hecho esto un diseño gratuito que se puede descargar y añadir a sus sitios fácilmente en el futuro. Ver el post o descargar a continuación. ¡Que aproveche!

Este plugin gratuito también le permitirá añadir más de 4 columnas. Usé esto hace un par de años y funcionó bastante bien, pero había oído que había algunos problemas con las actualizaciones recientes. Y si me conoces, trato de hacer todo SIN usar un plugin extra si es posible ¡Pero eres más que bienvenido a darle una oportunidad!

Divi extendido diseños de columna

¡Estoy empezando una serie sobre el módulo Divi Blog, y qué mejor lugar para empezar que con un snippet extremadamente fácil y rápido que cambia el módulo Divi blog en cualquier número de columnas que desee! ¡Estoy muy entusiasmado con esto, porque es tan rápido y fácil, incluso para los principiantes! ¡Sólo 1 líneas de CSS se necesita para cambiar el módulo de blog Divi a cualquier número de columna que usted necesita! ¡También añadimos un espacio entre las columnas, que técnicamente hace 2 líneas de código, que sigue siendo increíble! ¡La mejor parte es que estamos poniendo directamente en el módulo de Divi Blog!

  Qué es y cómo se edita el robots-txt virtual de WordPress

La mayoría de los otros tutoriales sobre esto son muy largos e implican bastante código, y la mayoría de ellos ya no funcionan. ¡Así que me gusta hacer soluciones que son realmente simple y fácil para usted! Si te gusta, suscríbete porque esto es lo que hago cada semana.

Vamos a empezar con el cambio de la cuenta de columnas del módulo Blog Divi a dos. Por defecto, el módulo Blog viene en 3 columnas cuando el diseño se establece en Grid, y 1 columna cuando el diseño se establece en Fullwidth.

Filas anidadas Divi

En el último tutorial, aprendimos lo fácil que es cambiar el tamaño de las columnas Divi. El siguiente tutorial lógico ahora es cómo cambiar el orden de apilamiento de las columnas Divi en tabletas y móviles. Los dos tutoriales combinados crean un sistema sorprendentemente simple que nadie más ha logrado. Así que estoy entusiasmado con esto, ¡y sé que va a ser muy útil para mucha gente!

Configuré una demostración rápida con una fila con dos columnas, la de la izquierda con un Módulo de Texto y la de la derecha con un Módulo de Imagen. Por defecto, Divi apilará estos de izquierda a derecha, por lo que en el móvil, el módulo de texto estaría en la parte superior y el módulo de imagen en la parte inferior.

Necesitarás algo de CSS, pero no te asustes demasiado. ¡No vamos a añadir un montón de clases CSS confusas y largos fragmentos de código como Elegant Themes hizo en su tutorial … en su lugar, vamos a resolver literalmente esta característica que falta Divi con unas pocas palabras de código en el constructor Divi!

  Cómo cambiar los nombres de perfiles de usuario por defecto de WordPress

Lo primero que hay que hacer es añadir un poco de CSS a la configuración de la fila Divi. Este CSS es necesario para decirle a las columnas dentro de la fila para mostrar con flex, con un tipo de CSS. Una vez completado este sencillo paso, ya estarás a mitad de camino para controlar el orden de apilamiento de tus columnas Divi en móvil.