¿Quieres crear tus diseños personalizados en Gutenberg Page Builder para diseñar secciones de sitios web agregando múltiples bloques? Bueno, no puedes hacer esto con la funcionalidad predeterminada. Sin embargo, el bloque Contenedor GutenKit está disponible con varios ajustes preestablecidos de estructura de columnas. Y puedes agregar múltiples bloques dentro de una columna.

Además, le permite personalizar cada columna individualmente y controlar la posición de los bloques. Esta documentación le enseñará a utilizar el bloque Contenedor GutenKit para crear diseños de columnas en el generador de páginas Gutenberg. 

Cómo utilizar el bloque contenedor GutenKit #

Asegúrate de haber instalado el complemento GutenKit. Luego, comienza desde el panel de WordPress, crea una nueva página o publicación y comienza a editar.

Paso 1: Agregar bloque contenedor #

Comience desde el panel de WordPress y cree una nueva página o publicación. Se lo dirigirá al editor de bloques de WordPress. Luego, haga clic en el botón “+” en la esquina superior izquierda de su editor de bloques. Aparecerá un menú de bloques con una variedad de bloques:

• Utilice el cuadro de búsqueda para encontrar el “Envase” block
• Once you find it, just click on it or drag and drop it to the editor screen

El Envase block is added to your screen. It offers 15 different column structures/ preset column widths. Choose your preferred one according to your design and content type. For example, we are going for a 50/50 structure.

Ancho del contenedor arrastrable #

GutenKit container is draggable. You can control the gap between containers manually like this.

Step 2: Configure The Container #

After selecting your preferred structure for the container, take a look at the block settings in the right sidebar.

Layout Tab #

Ve a la Layout Tab → Container section in the right sidebar to configure its settings.

Envase #

Container Width: From here you will control the column width (Full Width, Boxed, Custom).

• Full Width: Selecting this will reveal the “Ancho del contenido” option. Here, you will choose the width for the content in the column. Pick between the “En caja & Ancho completo” options.

Boxed –

• Set a fixed Content Box Width (in px) for the container
• Control the Altura mínima of the content area
• Adjust these values using the slider or by typing the exact number
• Keep the content centered with defined width, instead of stretching full screen

Full Width –

• Content automatically stretches to full screen width (no fixed box width option here)
• Ajustar el Altura mínima of the content area
• Set the value using the slider or by typing the exact number in px

• Boxed: Colocar Altura mínima of the container (in px, using slider or manual input).

• Custom: Colocar Ancho personalizado as a percentage (%) and Altura mínima (in px), both adjustable via slider or manual input.

• Costumbre:Usted configurará el Ancho personalizado para tu columna.
• Altura mínima: Seleccione la altura mínima para la columna.

Propiedades de los elementos #

• Dirección:Desde aquí puedes colocar elementos de la columna en cuatro direcciones diferentes.
• Justificar contenido:Aquí puede controlar el espacio entre y alrededor de los elementos en la columna contenedora.
• Alinear elementos:Establece la alineación de los elementos verticalmente.
• Brecha entre elementos:Define la brecha entre los elementos de la columna.
• Envoltura:Habilitar Wrap colocará los elementos en la parte inferior cuando no haya suficiente espacio en la columna.

Opciones adicionales #

• Desbordamiento: Show or hide a scroll bar, or choose Auto to add one automatically only when the content exceeds the column’s size.

• Etiqueta HTML: Set an HTML tag for this container to control how it’s structured semantically, choosing from options like Div, Header, Main, Article, and more.

Step 3: Style The Container #

Desde esta área de configuración, personalizará la apariencia de la columna.

• Fondo: Set the background type, such as color, gradient, image, or video, for the container in its normal and hover states.

• Superposición de fondo: Set an overlay background between solid color, gradient, and image.

• Borde: Da color a un borde y define su ancho. Además, le da efectos de sombra al borde.

¡Eso es todo! Ahora puedes agregar y usar fácilmente un bloque contenedor para crear tu propio diseño en el Generador de páginas de Gutenberg.