# Widget contenedor

{% hint style="info" %}
El widget contenedor te permite añadir widgets adicionales dentro de un contenedor específico, también conocido como bloque.
{% endhint %}

Los contenedores ayudan a organizar el contenido y estructurar los diseños de forma eficiente.

* **Ir a Widgets** – Abre el **panel de Widgets** en tu editor.
* **Seleccionar "Contenedor"** – Encuentra el **widget Contenedor** y añádelo a tu página.

Esto te permite **agrupar elementos, mejorar el espaciado y aumentar la flexibilidad del diseño**, ¡asegurando un aspecto limpio y estructurado!

<figure><img src="https://content.gitbook.com/content/e72ThyzkOdxFPyh3rXde/blobs/heuJMkCMaFjXP8Tzew8F/Group%201171279105.png" alt=""><figcaption></figcaption></figure>

Una vez que tu contenedor esté configurado, hay muchos ajustes disponibles para ayudarte a crear y diseñar la sección perfecta para tu página.

Echemos un vistazo más de cerca a los **ajustes del contenedor**.

A continuación verás:

1. Ajustes del bloque
2. Ajustes de la columna
3. Pestaña de visualización del bloque
4. Añadir bloque

Dentro de un contenedor puedes editar:

* Color de fondo
* Añadir vídeo
* Degradados
* Superposiciones
* Divisores de forma
* Puntos de anclaje

<figure><img src="https://content.gitbook.com/content/e72ThyzkOdxFPyh3rXde/blobs/asv6VfiX5wUHXxCnoI1p/container%20settings.PNG" alt=""><figcaption></figcaption></figure>

### Elementos del contenedor

Antes de entrar en los detalles, echemos un vistazo a los principales elementos del contenedor.&#x20;

Como en cualquier contenedor/bloque, puedes hacer divisiones y crear múltiples columnas horizontales y también columnas verticales. La imagen a continuación muestra el contenedor/bloque dividido en 3 columnas horizontales.

Para dividir el contenedor en hasta 5 columnas, coloca el cursor en la parte superior del contenedor o bloque seleccionado. Aparecerá un botón para realizar la división.

{% hint style="info" %}
Nota: Cada columna puede redimensionarse al ancho que necesites. Además, también puedes añadir bordes y diferentes colores a cada columna.
{% endhint %}

<figure><img src="https://content.gitbook.com/content/e72ThyzkOdxFPyh3rXde/blobs/CnnV32l5paGGONTmxtTz/container%20split%20horizontal%20columns.PNG" alt=""><figcaption></figcaption></figure>

En la imagen de abajo hemos añadido color a las columnas para que puedas ver visualmente a qué nos referimos.

<figure><img src="https://content.gitbook.com/content/e72ThyzkOdxFPyh3rXde/blobs/CXcVuPMwBtytzzUU4i2Z/contaiiner%20columns%203.PNG" alt=""><figcaption></figcaption></figure>

Antes de continuar con cómo usar las columnas para tu contenido, hablemos de crear columnas verticales. Puedes añadir una nueva columna ya sea encima o debajo de las tres columnas existentes. Haz clic en el icono más (+) para añadir una nueva columna encima, por ejemplo.

<div align="left"><figure><img src="https://content.gitbook.com/content/e72ThyzkOdxFPyh3rXde/blobs/CIHlr4nTyiwgHBgG7lQ6/container%20add%20vert%20column.PNG" alt=""><figcaption></figcaption></figure></div>

Hemos añadido una nueva fila por encima de la anterior. Esta fila tiene dos columnas: blanca y negra como referencia.

<figure><img src="https://content.gitbook.com/content/e72ThyzkOdxFPyh3rXde/blobs/sCNRry1z0pszchZImpWq/CONTAINER%20VERT%20AND%20HOR%20COLUMN.png" alt=""><figcaption></figcaption></figure>

Ahora tenemos un contenedor con:

* 2 columnas
* 3 columnas

### **Columna global**

Las columnas globales agilizan tu proceso de diseño al permitirte usar el mismo bloque en varias páginas. Con la opción de columna global, puedes actualizar un lugar y los cambios se aplicarán automáticamente a todas las columnas que compartan la misma información de columna global.

Para crear una columna global, primero selecciona la columna deseada. Luego, navega al panel de ajustes emergente y selecciona 'Esta es una columna global'.

<figure><img src="https://content.gitbook.com/content/e72ThyzkOdxFPyh3rXde/blobs/lsRK0IjjXMJ5zXb42mnI/container%20global%20column.png" alt=""><figcaption></figcaption></figure>

Después de la selección, aparecerá un menú desplegable. Para usuarios primerizos, solo habrá una opción disponible, como se ilustra a continuación:

<div align="left"><figure><img src="https://content.gitbook.com/content/e72ThyzkOdxFPyh3rXde/blobs/bmShkvZlqOsbc4pWXZ7o/container%20create%20global%20column.PNG" alt=""><figcaption></figcaption></figure></div>

Después de seleccionar la opción, nombra tu columna y haz clic en guardar. Ahora, tu columna es global. Esto significa que si copias y pegas esta columna en varias páginas de tu sitio web, cualquier edición realizada se reflejará en todas las instancias de la columna global.

La imagen de abajo muestra la columna que convertimos en columna global. Ninguna otra columna se verá afectada.

<figure><img src="https://content.gitbook.com/content/e72ThyzkOdxFPyh3rXde/blobs/8ZqXEvVSfuGu5FlwYUgM/container%20global%20column%20created.png" alt=""><figcaption></figcaption></figure>

Para eliminar o renombrar una columna, o bien desmarca la opción o haz clic en el texto de renombrar.

<figure><img src="https://content.gitbook.com/content/e72ThyzkOdxFPyh3rXde/blobs/Tk7qVsAjvtvBdzMfBgcz/container%20removing%20global%20column.PNG" alt=""><figcaption></figcaption></figure>

### **Puntos de anclaje**

**Puntos de anclaje** son secciones específicas de tu sitio web a las que diriges a los visitantes cuando hacen clic en un botón de llamada a la acción o en un enlace dentro del texto.

Si tienes un botón en tu sitio web que quieres que los visitantes pulsen, puedes enlazarlo a una sección específica en la misma página. Al hacer clic, llevará a los usuarios directamente a la sección donde el **punto de anclaje** está colocado.

**Cómo añadir un punto de anclaje:**&#x20;

1. Navega a **Ajustes del contenedor**.
2. Selecciona **Punto de anclaje**.
3. Etiqueta tu punto de anclaje para referencia futura.
4. Añade el enlace del punto de anclaje a la llamada a la acción (por ejemplo, un botón).

<figure><img src="https://content.gitbook.com/content/e72ThyzkOdxFPyh3rXde/blobs/TursYtRk4GjsJKzBRQHn/container%20anchour%20point%20selection.PNG" alt=""><figcaption></figcaption></figure>

Añadiendo tu punto de anclaje desde tu llamada a la acción

Selecciona tu llamada a la acción de origen. En este caso usaremos un botón.

Selecciona el punto de anclaje, luego elige la página, sección o paso del embudo donde se encuentra tu punto de anclaje. Tendrá la misma etiqueta que asignaste antes.

Ten en cuenta que puedes tener diferentes puntos de anclaje en distintos dispositivos ('Móvil y escritorio') si es necesario.&#x20;

Asegúrate de haber guardado tu punto de anclaje si no aparece en el menú desplegable. Una vez guardado, aparecerá en la lista.

<figure><img src="https://content.gitbook.com/content/e72ThyzkOdxFPyh3rXde/blobs/nIjswZYfP9pPBUBKLBTG/container%20anchor%20point%20url.PNG" alt=""><figcaption></figcaption></figure>

### **Ajustes adicionales del contenedor**

Dentro del contenedor puedes controlar:&#x20;

* Retraso del contenedor
* Ocultar/marcar contenedor como borrador
* Posicionamiento del bloque/contenedor

**Retraso del contenedor** funciona igual que el retraso de cualquier widget: puedes elegir un marco temporal específico para que todo el contenedor aparezca cuando un visitante vea tu sitio web.

**Ocultar** o marcar un contenedor como borrador lo hará invisible para los visitantes del sitio web.

Por último, **posicionamiento del bloque/contenedor** te permite mover rápidamente tus contenedores hacia arriba y hacia abajo en la página.

<div align="left"><figure><img src="https://content.gitbook.com/content/e72ThyzkOdxFPyh3rXde/blobs/f6FdMNEotzI9z93J7V17/Capture.PNG" alt=""><figcaption></figcaption></figure></div>
