Bloque contenedor (Container), colores y relleno

Existe una incompatibilidad entre el sistema Genesis (tema utilizado) y las configuraciones de padding (relleno) del bloque de grupo. Por ello, hay que emplear el bloque Container (de Genesis). De esa manera se pueden realizar diseños de rejillas con color y relleno. Si se utiliza el bloque de columnas no se permite establecer un gap (espacio) entre ellas. Sin embargo, existe el bloque de columnas avanzadas en el que sí pero entonces las columnas tienen todas el mismo color.

Activa la vista de lista y examina los siguientes ejemplos a la vez, viendo la configuración de los bloques Container, columnas, columnas avanzadas y espaciador que verás en la columna de la derecha (recuerda que para esto tienes que tener señalado el bloque correspondiente).

Cuando señalas un bloque en la vista de lista, se remarca en el editor y viceversa, lo que facilita tanto el la construcción del diseño como el seguimiento de uno ya hecho.

Un bloque container coloreado con relleno (5%)

Captura-de-pantalla-2023-03-21-a-las-22.12.18 Bloque contenedor (Container), colores y relleno

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis consequat pretium. Aenean ut tempus est. Vestibulum non ultricies ante. Vestibulum consequat sapien a purus ultricies, vel sagittis leo posuere. Vivamus id neque sit amet nunc molestie fermentum. Maecenas quis suscipit tellus, id tristique libero. Duis rhoncus porta magna ut lacinia. Vivamus pellentesque tortor nunc, sed laoreet justo placerat a. Donec quam nibh, dapibus eget nisi convallis, pretium ullamcorper lectus. In at efficitur sapien, quis imperdiet eros. Curabitur suscipit auctor libero et dictum. Fusce gravida suscipit est non gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ut facilisis ligula.

Un bloque container coloreado con relleno (5%) y dentro de él un bloque de columnas avanzadas. Cada columna está coloreada y con relleno (5%). La separación entre columnas es de un gap de 5%. Las columnas no admiten tener distinto color.

Captura-de-pantalla-2023-03-21-a-las-22.14.38 Bloque contenedor (Container), colores y relleno

Un bloque container coloreado con relleno (5%) y dentro de él un bloque de columnas. Cada columna es, a su vez, un bloque container coloreado con relleno (5%). Cada columna tiene un color. No se puede establecer espacio entre las columnas (gap).

Captura-de-pantalla-2023-03-21-a-las-22.16.26 Bloque contenedor (Container), colores y relleno

Rejilla de 2×2 utilizando bloque container sin relleno y columnas-container coloreadas con relleno de 5%, sin gap entre las columnas.

Captura-de-pantalla-2023-03-21-a-las-22.18.32-608x1024 Bloque contenedor (Container), colores y relleno

Boceto de diseño para la página individual de cada centro de formación. Se utiliza un bloque espaciador para aumentar el largo de la columna que tiene menos contenido.

Captura-de-pantalla-2023-03-21-a-las-22.19.49-477x1024 Bloque contenedor (Container), colores y relleno

Aquí iría la información del centro (dirección, teléfono, etc.) y categoría del centro.

Imatge-llocs-formacio-ok-CAID-1024x768 Bloque contenedor (Container), colores y relleno

CAPTURE-MAP-1024x481 Bloque contenedor (Container), colores y relleno

Aquí iría el bucle con las formaciones del centro.

Detalles:

Bloque contenedor (Container), colores y relleno

Un bloque container coloreado con relleno (5%)

Un bloque container coloreado con relleno (5%) y dentro de él un bloque de columnas avanzadas. Cada columna está coloreada y con relleno (5%). La separación entre columnas es de un gap de 5%. Las columnas no admiten tener distinto color.

Un bloque container coloreado con relleno (5%) y dentro de él un bloque de columnas. Cada columna es, a su vez, un bloque container coloreado con relleno (5%). Cada columna tiene un color. No se puede establecer espacio entre las columnas (gap).

Rejilla de 2×2 utilizando bloque container sin relleno y columnas-container coloreadas con relleno de 5%, sin gap entre las columnas.

Boceto de diseño para la página individual de cada centro de formación. Se utiliza un bloque espaciador para aumentar el largo de la columna que tiene menos contenido.

Uneix-te a la comunitat

Els vídeos d’ARTxTu

Segueix-me a Instagram