# B. Builder



# B1. Introducción - Builder

Builder permite crear contenidos maquetados de forma ágil e intuitiva con una presentación profesional.

**1. Se pueden crear páginas de contenido** como por ejemplo; Landing Page, Instrucciones de preparación de archivo, información de interés y presentación de ofertas, entre otros.

Ejemplo de landing page creada con página de contenido con Builder activado:  
  
[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/cUJimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/cUJimage.png)  
  
  
  
Ejemplo de de página de instrucciones de archivo creada con página de contenido con Builder activado:

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/teZimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/teZimage.png)

**2. Se pueden crear** **los desplegables** de cualquiera **de los elementos** añadidos en el **menú principal**.

Ejemplo de desplegable de un elemento del menú maquetado con Builder:

[![image-1665642674437.png](https://kb.wakaprint.com/uploads/images/gallery/2022-10/scaled-1680-/image-1665642674437.png)](https://kb.wakaprint.com/uploads/images/gallery/2022-10/image-1665642674437.png)

**3. Se puede maquetar** **la página de inicio** estableciendo una página de contenido creada con Builder como página de inicio.

Ejemplo de de página de inicio de creada con página de contenido con Builder activado:

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/3Ykimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/3Ykimage.png)

# B2. Activar en elementos del menú - Builder

Para editar con Builder de los desplegables de elementos del menú principal, acceder al gestor > Ajustes > Menú.  
En cada elemento del menú, al poner el cursor encima del nombre muestra un botón de tipo texto llamado "Configurar". Al hacer clic en él se abre el menú para uso de Builder.

En los elementos del menú que ya se ha editado el desplegable con Builder, además del botón "Configurar" muestra un botón de tipo texto llamado "Editar Builder".

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/yx5image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/yx5image.png)

##### **1. Interfaz de "Configurar"**  
  


Al hacer clic en el botón "Configurar" en un elemento del menú, se muestra la interfaz de acciones para configurar los desplegables con Builder.

[![image-1665643566419.png](https://kb.wakaprint.com/uploads/images/gallery/2022-10/scaled-1680-/image-1665643566419.png)](https://kb.wakaprint.com/uploads/images/gallery/2022-10/image-1665643566419.png)

<table border="1" class="align-center" id="bkmrk-elemento-funci%C3%B3n-nom" style="border-collapse: collapse; width: 96.0494%; border-width: 1px;"><colgroup><col style="width: 32.5547%;"></col><col style="width: 67.4339%;"></col></colgroup><tbody><tr style="background-color: rgb(206, 212, 217);"><td style="border-width: 1px;">**Elemento**  
  
</td><td style="border-width: 1px;">**Función**</td></tr><tr><td style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/5Wpimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/5Wpimage.png)

</td><td class="align-left" style="border-width: 1px;">Nombre e ID del elemento del menú principal.</td></tr><tr><td style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/FLKimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/FLKimage.png)

</td><td class="align-left" style="border-width: 1px;">Botón activar el maquetador Builder.   
En blanco desactivado.   
En magenta, Activado</td></tr><tr><td style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/sd3image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/sd3image.png)

</td><td class="align-left" style="border-width: 1px;">Botón para cerrar el menú de ajustes.</td></tr></tbody></table>

<p class="callout warning">  
 **Al hacer clic en el botón tipo icono de cubo de basura se elimina el elemento del menú y se pierde por tanto la maquetación hecha con Builder.**  
  
[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/ifNimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/ifNimage.png)  
  
  
  
</p>

Al activar el botón de Usar Builder, se activa el maquetador para el desplegable del elemento en el menú.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/F5rimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/F5rimage.png)

Con el botón "Usar Builder" activado mostrará el botón tipo texto llamado "Editar Builder".  
Para comenzar a maquetar con Builder hacer clic en el botón "Editar Builder".

<p class="callout success">  
Para no mostrar en la vista pública lo maquetado con Builder, sin perder lo maquetado, desactivar el botón "Usar Builder". El contenido no se pierde. Lo que se desactiva es el maquetador del elemento. Si se vuelve a activar se recupera lo maquetado con Builder.  
  
</p>

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/2JBimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/2JBimage.png)

<p class="callout info">  
Importante. Todos los desplegables de los elementos del menú principal pueden ser editados con Builder. Para el elemento del menú principal de tipo enlace no hay desplegable. Es un enlace a una página. Por lo que no se puede maquetar con Builder.  
  
</p>

#####   

# B3. Activar en páginas de contenido - Builder

Una **página de contenido** en una tienda online es una página informativa cuyo objetivo es **aportar información útil al usuario**, más allá de mostrar productos.

Estas páginas se utilizan para **resolver dudas**, **explicar servicios o procesos** y **mejorar la confianza** del cliente (por ejemplo: *Envíos y devoluciones, Preguntas frecuentes, Guías de compra, Sobre nosotros*). Además, ayudan a mejorar el **posicionamiento orgánico (SEO)** al incluir contenido relevante relacionado con el negocio.

**Tipologías de páginas (clasificación del potencial):**

- **Landing Page**: Página creada para una campaña o un objetivo concreto (por ejemplo, captar leads o presentar una solución específica). Está orientada a la conversión y suele enfocarse en una única temática o producto.
- **Instrucciones de preparación de archivo**: Página de contenido técnico que explica al usuario cómo preparar correctamente un archivo antes de enviarlo a producción (formatos, medidas, sangrados, resolución, perfiles de color, etc.).
- **Página de inicio**: Página principal de la web. Su función es presentar la marca, guiar al usuario hacia las secciones más importantes y facilitar la navegación a categorías, productos o servicios clave.

Para editar con Builder en las páginas de contenido acceder al gestor &gt; Páginas.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/gRKimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/gRKimage.png)

Clic en botón crear página o clic en actualizar página que no tenga Builder activado. Se reconoce porque si lo tiene activado el listado de páginas muestra este icono y texto.

Clic en crear página o clic en actualizar página que no tenga Builder activado.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/oirimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/oirimage.png)

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/0B1image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/0B1image.png)

Al hacer clic en crear página se accede a la interfaz de para su edición.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/VCHimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/VCHimage.png)

<table border="1" class="align-center" id="bkmrk-elemento-funci%C3%B3n-cam" style="border-collapse: collapse; width: 79.1358%; height: 119.545px; border-width: 1px;"><colgroup><col style="width: 20.6405%;"></col><col style="width: 79.3483%;"></col></colgroup><tbody><tr style="height: 60.142px; background-color: rgb(236, 240, 241);"><td class="align-left" style="border-width: 1px; height: 60.142px;">**Elemento**  
  
</td><td class="align-left" style="border-width: 1px; height: 60.142px;">**Función**</td></tr><tr style="height: 29.7017px;"><td class="align-left" style="border-width: 1px; height: 29.7017px;">  
[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/nuaimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/nuaimage.png)

</td><td class="align-left" style="border-width: 1px; height: 29.7017px;">Campo para escribir nombre de la página. El nombre es tomado como meta título de la página.</td></tr><tr style="height: 29.7017px;"><td class="align-left" style="border-width: 1px; height: 29.7017px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/9Peimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/9Peimage.png)

</td><td class="align-left" style="border-width: 1px; height: 29.7017px;">Campo para escribir descripción de la página. Es tomado como meta descripción de la página.</td></tr><tr><td class="align-left" style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/rnyimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/rnyimage.png)

</td><td class="align-left" style="border-width: 1px;">Botón para que definir el estado de la página. En blanco, está publicada. En magenta, no está publicada.</td></tr><tr><td class="align-left" style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/lOpimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/lOpimage.png)

</td><td class="align-left" style="border-width: 1px;">Botón para activar Buider. En blanco, desactivado. En magenta, activado.</td></tr><tr><td class="align-left" style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/3g6image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/3g6image.png)

</td><td class="align-left" style="border-width: 1px;">Botón para guardar los cambios. Crea la página y accede al editor de la página con Builder.</td></tr></tbody></table>

**Interfaz de Jerarquía**  
Con esta interfaz se pueden anidar las páginas como hijas de otras. En la vista pública se mostrará en la página enlace a las páginas hijas y descendientes.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/EEyimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/EEyimage.png)

<table border="1" class="align-center" id="bkmrk-elemento-funci%C3%B3n-sel" style="border-collapse: collapse; width: 100%; height: 119.545px; border-width: 1px;"><colgroup><col style="width: 41.5146%;"></col><col style="width: 58.4741%;"></col></colgroup><tbody><tr style="height: 60.142px; background-color: rgb(236, 240, 241);"><td class="align-left" style="border-width: 1px; height: 60.142px;">**Elemento**  
  
</td><td class="align-left" style="border-width: 1px; height: 60.142px;">**Función**</td></tr><tr style="height: 29.7017px;"><td class="align-left" style="border-width: 1px; height: 29.7017px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/1lGimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/1lGimage.png)

</td><td class="align-left" style="border-width: 1px; height: 29.7017px;">Selector para definir la página padre en la que estará anidada.</td></tr><tr style="height: 29.7017px;"><td class="align-left" style="border-width: 1px; height: 29.7017px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/6zyimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/6zyimage.png)

</td><td class="align-left" style="border-width: 1px; height: 29.7017px;">Botón para definir si se deben mostrar enlaces a las páginas hijas cuando esta página tiene descendientes. Activado, en color magenta. Desactivado, en color blanco.</td></tr></tbody></table>

Activar el botón de "Usar Builder" para acceder a la interfaz de maquetación de la página con esta herramienta.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/AjTimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/AjTimage.png)

Al activar especificar nombre para la página, hacer clic en botón "Usar Builder" y hacer clic en el botón "Crear" se accede al editor de la página con el maquetador Builder.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/Sc4image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/Sc4image.png)

En la interfaz de edición con Builder en paginas muestra el botón de autoguardado activado. Lo que significa el botón en este estado no requiere guardar cambio.  
Aparece también un espacio destacado por una línea discontinua con el texto "ANADIR FILA".


<p class="callout warning">  
  
**Importante:** No editar con Buider las páginas;  
  
· Política de privacidad  
· Aviso legal  
· Política de cookies  
· Términos y condiciones  
· Ayuda sobre transportistas  
  
</p>

# B4. Añadir fila - Builder

#####  **1. Añadir fila**

Hacer clic en botón añadir fila.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/26oimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/26oimage.png)

Se crea una fila. No tiene contenido.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/tt4image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/tt4image.png)

##### **2. Interfaz de fila**

<table border="1" class="align-center" id="bkmrk-elemento-funci%C3%B3n-cam" style="border-collapse: collapse; width: 79.1358%; height: 119.545px; border-width: 1px;"><colgroup><col style="width: 20.6223%;"></col><col style="width: 79.3644%;"></col></colgroup><tbody><tr style="height: 60.142px; background-color: rgb(236, 240, 241);"><td class="align-left" style="border-width: 1px; height: 60.142px;">**Elemento**  
  
</td><td class="align-left" style="border-width: 1px; height: 60.142px;">**Función**</td></tr><tr style="height: 29.7017px;"><td class="align-left" style="border-width: 1px; height: 29.7017px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/3VRimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/3VRimage.png)

</td><td class="align-left" style="border-width: 1px; height: 29.7017px;">Botón para que acceder a ajustes de fila.</td></tr><tr style="height: 29.7017px;"><td class="align-left" style="border-width: 1px; height: 29.7017px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/pdBimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/pdBimage.png)

</td><td class="align-left" style="border-width: 1px; height: 29.7017px;">Botón para añadir bloques vacíos en la fila.</td></tr><tr><td class="align-left" style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/z9Jimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/z9Jimage.png)

</td><td class="align-left" style="border-width: 1px;">Pestaña para mover la fila de posición. Hacer clic en la pestaña, mantener y arrastrar hasta nueva posición y soltar clic para completar el reposicionamiento.</td></tr><tr><td class="align-left" style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/lOpimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/lOpimage.png)

</td><td class="align-left" style="border-width: 1px;">Botón para activar Buider. En blanco, desactivado. En magenta, activado.</td></tr><tr><td class="align-left" style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/3g6image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/3g6image.png)

</td><td class="align-left" style="border-width: 1px;">Botón para guardar los cambios. Crea la página y accede al editor de la página con Builder.</td></tr></tbody></table>

Al hacer clic en el botón de tipo icono de la fila se despliega el menú de acciones disponibles las cuales son "Ajustes" y "Eliminar fila".

##### **3. Interfaz de ajustes de fila** 

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/r2Mimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/r2Mimage.png)

**3.1 Fila interfaz &gt; Ajustes &gt; FONDO**

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/PCFimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/PCFimage.png)

<table border="1" class="align-center" id="bkmrk-elemento-funci%C3%B3n-med" style="border-collapse: collapse; width: 79.1358%; height: 119.545px; border-width: 1px;"><colgroup><col style="width: 51.3987%;"></col><col style="width: 48.588%;"></col></colgroup><tbody><tr style="height: 60.142px; background-color: rgb(236, 240, 241);"><td class="align-left" style="border-width: 1px; height: 60.142px;">**Elemento**  
  
</td><td class="align-left" style="border-width: 1px; height: 60.142px;">**Función**</td></tr><tr><td style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/hWgimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/hWgimage.png)

</td><td style="border-width: 1px;">Permite activar o desactivar el ancho completo (full width) para la fila.

Desactivado, en color blanco: la fila mantiene el ancho definido por el contenedor o estructura de la página (ancho estándar).

Activado, en color magenta: la fila en la vista pública se expande para ocupar todo el ancho disponible de la pantalla. La interfaz presenta un nuevo botón llamado, CONTENIDO DE ANCHO COMPLETO DE LA FILA.  
Si se activa el contenido se expande para ocupar todo el ancho disponible de la fila expandida.

</td></tr><tr style="height: 29.7017px;"><td class="align-left" style="border-width: 1px; height: 29.7017px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/51yimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/51yimage.png)

  
</td><td class="align-left" style="border-width: 1px; height: 29.7017px;">Para presentar una como fondo de la fila.  
Hacer clic en botón "Explorar" para cargar la imagen.  
  
También dispone de campo de consulta y edición de la url de la imagen.  
  
  
</td></tr><tr><td style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/ohCimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/ohCimage.png)

</td><td class="align-left" style="border-width: 1px;">Selector para definir el tamaño con el que se renderiza la imagen dentro de la fila.   
Opciones disponibles:

- **initial**: utiliza el tamaño original/por defecto de la imagen.
- **contain**: ajusta la imagen para que se vea completa dentro de la fila, sin recortarse (puede dejar espacios vacíos).
- **cover**: ajusta la imagen para cubrir toda la fila (puede recortar parte de la imagen).
- **Porcentaje (10% – 130%)**: permite establecer manualmente el tamaño del fondo respecto al tamaño del contenedor.
    
    
    - Valores bajos (ej. 50%) reducen la imagen.
    - Valores altos (ej. 120% o 130%) amplían la imagen.

Si la imagen está ampliada, es posible que se recorte dependiendo del área visible y de la posición del fondo. </td></tr><tr><td style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/1okimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/1okimage.png)

</td><td style="border-width: 1px;">Permite activar o desactivar la repetición de la imagen de fondo dentro de la fila.

- **Desactivado**: la imagen de fondo se muestra una sola vez (no se repite).
- **Activado**: la imagen de fondo se repite automáticamente para cubrir toda el área de la fila.

</td></tr><tr><td style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/hEMimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/hEMimage.png)

</td><td style="border-width: 1px;">Permite seleccionar el color de fondo de la fila.

- Al pulsar el botón "Explorar", abre el selector de color.
- Este color puede utilizarse como fondo principal cuando no hay imagen de fondo.
- Si existe una imagen de fondo, el color puede actuar como fondo base en caso de que la imagen no cubra toda la fila.
- Se pueden añadir colores en modo hexadecimal o mediante el botón "·Explorar".   
      
    [![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/I1Mimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/I1Mimage.png)

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/CKximage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/CKximage.png)

</td></tr><tr><td style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/yTIimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/yTIimage.png)

</td><td style="border-width: 1px;">Permite definir la posición de la imagen de fondo dentro de la fila (punto de anclaje).

La selección se realiza mediante una cuadrícula de posicionamiento:

- **Arriba**: fija la imagen en la parte superior.
- **Abajo**: fija la imagen en la parte inferior.
- **Izquierda**: fija la imagen en el lateral izquierdo.
- **Derecha**: fija la imagen en el lateral derecho.
- **Centro** (opción seleccionada por defecto): centra la imagen dentro de la fila.

Nota: la posición del fondo es especialmente relevante cuando se utiliza el tamaño "**cover"**, ya que la imagen puede recortarse. Este ajuste permite decidir qué parte de la imagen se mantiene visible.

</td></tr></tbody></table>

**3.2**  **Fila interfaz &gt; Ajustes &gt; ESPACIADO**   
Permite ajustar el espaciado interior y el margen en vertical respecto a otras filas adyacentes.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/3RCimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/3RCimage.png)

# B5. Interfaz de fila - Builder

#####   


[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/tt4image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/tt4image.png)


<table border="1" class="align-center" id="bkmrk-elemento-funci%C3%B3n-cam" style="border-collapse: collapse; width: 79.1358%; height: 119.545px; border-width: 1px;"><colgroup><col style="width: 20.6223%;"></col><col style="width: 79.3644%;"></col></colgroup><tbody><tr style="height: 60.142px; background-color: rgb(236, 240, 241);"><td class="align-left" style="border-width: 1px; height: 60.142px;">**Elemento**  
  
</td><td class="align-left" style="border-width: 1px; height: 60.142px;">**Función**</td></tr><tr style="height: 29.7017px;"><td class="align-left" style="border-width: 1px; height: 29.7017px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/3VRimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/3VRimage.png)

</td><td class="align-left" style="border-width: 1px; height: 29.7017px;">Botón para que acceder a ajustes de fila.</td></tr><tr style="height: 29.7017px;"><td class="align-left" style="border-width: 1px; height: 29.7017px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/pdBimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/pdBimage.png)

</td><td class="align-left" style="border-width: 1px; height: 29.7017px;">Botón para añadir bloques vacíos en la fila.</td></tr><tr><td class="align-left" style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/z9Jimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/z9Jimage.png)

</td><td class="align-left" style="border-width: 1px;">Pestaña para mover la fila de posición. Hacer clic en la pestaña, mantener y arrastrar hasta nueva posición y soltar clic para completar el reposicionamiento.</td></tr><tr><td class="align-left" style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/lOpimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/lOpimage.png)

</td><td class="align-left" style="border-width: 1px;">Botón para activar Buider. En blanco, desactivado. En magenta, activado.</td></tr><tr><td class="align-left" style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/3g6image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/3g6image.png)

</td><td class="align-left" style="border-width: 1px;">Botón para guardar los cambios. Crea la página y accede al editor de la página con Builder.</td></tr></tbody></table>

Al hacer clic en el botón de tipo icono de la fila se despliega el menú de acciones disponibles las cuales son "Ajustes" y "Eliminar fila".

##### **1. Interfaz de ajustes de fila** 

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/r2Mimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/r2Mimage.png)

**1.1 Fila interfaz &gt; Ajustes &gt; FONDO**

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/PCFimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/PCFimage.png)

<table border="1" class="align-center" id="bkmrk-elemento-funci%C3%B3n-med" style="border-collapse: collapse; width: 79.1358%; height: 119.545px; border-width: 1px;"><colgroup><col style="width: 51.3987%;"></col><col style="width: 48.588%;"></col></colgroup><tbody><tr style="height: 60.142px; background-color: rgb(236, 240, 241);"><td class="align-left" style="border-width: 1px; height: 60.142px;">**Elemento**  
  
</td><td class="align-left" style="border-width: 1px; height: 60.142px;">**Función**</td></tr><tr><td style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/hWgimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/hWgimage.png)

</td><td style="border-width: 1px;">Permite activar o desactivar el ancho completo (full width) para la fila.

Desactivado, en color blanco: la fila mantiene el ancho definido por el contenedor o estructura de la página (ancho estándar).

Activado, en color magenta: la fila en la vista pública se expande para ocupar todo el ancho disponible de la pantalla. La interfaz presenta un nuevo botón llamado, CONTENIDO DE ANCHO COMPLETO DE LA FILA.  
Si se activa el contenido se expande para ocupar todo el ancho disponible de la fila expandida.

</td></tr><tr style="height: 29.7017px;"><td class="align-left" style="border-width: 1px; height: 29.7017px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/51yimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/51yimage.png)

  
</td><td class="align-left" style="border-width: 1px; height: 29.7017px;">Para presentar una como fondo de la fila.  
Hacer clic en botón "Explorar" para cargar la imagen.  
  
También dispone de campo de consulta y edición de la url de la imagen.  
  
  
</td></tr><tr><td style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/ohCimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/ohCimage.png)

</td><td class="align-left" style="border-width: 1px;">Selector para definir el tamaño con el que se renderiza la imagen dentro de la fila.   
Opciones disponibles:

- **initial**: utiliza el tamaño original/por defecto de la imagen.
- **contain**: ajusta la imagen para que se vea completa dentro de la fila, sin recortarse (puede dejar espacios vacíos).
- **cover**: ajusta la imagen para cubrir toda la fila (puede recortar parte de la imagen).
- **Porcentaje (10% – 130%)**: permite establecer manualmente el tamaño del fondo respecto al tamaño del contenedor.
    
    
    - Valores bajos (ej. 50%) reducen la imagen.
    - Valores altos (ej. 120% o 130%) amplían la imagen.

Si la imagen está ampliada, es posible que se recorte dependiendo del área visible y de la posición del fondo. </td></tr><tr><td style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/1okimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/1okimage.png)

</td><td style="border-width: 1px;">Permite activar o desactivar la repetición de la imagen de fondo dentro de la fila.

- **Desactivado**: la imagen de fondo se muestra una sola vez (no se repite).
- **Activado**: la imagen de fondo se repite automáticamente para cubrir toda el área de la fila.

</td></tr><tr><td style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/hEMimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/hEMimage.png)

</td><td style="border-width: 1px;">Permite seleccionar el color de fondo de la fila.

- Al pulsar el botón "Explorar", abre el selector de color.
- Este color puede utilizarse como fondo principal cuando no hay imagen de fondo.
- Si existe una imagen de fondo, el color puede actuar como fondo base en caso de que la imagen no cubra toda la fila.
- Se pueden añadir colores en modo hexadecimal o mediante el botón "·Explorar".   
      
    [![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/I1Mimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/I1Mimage.png)

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/CKximage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/CKximage.png)

</td></tr><tr><td style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/yTIimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/yTIimage.png)

</td><td style="border-width: 1px;">Permite definir la posición de la imagen de fondo dentro de la fila (punto de anclaje).

La selección se realiza mediante una cuadrícula de posicionamiento:

- **Arriba**: fija la imagen en la parte superior.
- **Abajo**: fija la imagen en la parte inferior.
- **Izquierda**: fija la imagen en el lateral izquierdo.
- **Derecha**: fija la imagen en el lateral derecho.
- **Centro** (opción seleccionada por defecto): centra la imagen dentro de la fila.

Nota: la posición del fondo es especialmente relevante cuando se utiliza el tamaño "**cover"**, ya que la imagen puede recortarse. Este ajuste permite decidir qué parte de la imagen se mantiene visible.

</td></tr></tbody></table>

**1.2**  **Fila interfaz &gt; Ajustes &gt; ESPACIADO**   
Permite ajustar el espaciado interior y el margen en vertical respecto a otras filas adyacentes.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/3RCimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/3RCimage.png)

# B6. Añadir columnas introducción - Builder

#####   


##### **1. Opciones de división de fila en columnas** 

La opciones de añadir cantidad de columnas por fila predeterminadas son las siguientes.  
  
  
[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/oCXimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/oCXimage.png)

  
Al eliminar una columna la aplicación indica cuantas columnas se pueden crear en el espacio liberado.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/mluimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/mluimage.png)

##### **2. Añadir más bloques verticales en una columna**

A las columnas se les puede añadir más bloques en la vertical. Para ello la columna tiene que tener al menos un bloque de contenido añadido.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-02/scaled-1680-/PXHimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-02/PXHimage.png)

  
  
 Al poner el cursos en el centro del lado inferior del bloque muestra el siguiente icono.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-02/scaled-1680-/30zimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-02/30zimage.png)

  
Al hacer clic en el se abre la interfaz de elegir tipo de bloque.  
Seleccionar el tipo de bloque

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-02/scaled-1680-/mG6v75image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-02/mG6v75image.png)

Añadir o definir el contenido a mostrar.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-02/scaled-1680-/9Umimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-02/9Umimage.png)

  
Al confirmar la acción el nuevo bloque se ha añadido debajo del anterior.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-02/scaled-1680-/esAimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-02/esAimage.png)

  
  
Se pueden añadir tantos bloques verticales como se considere.

<p class="callout info">  
**Importante.** El alto de la fila lo determina el bloque o columna más alta.  
  
</p>

# B7. Añadir columnas a la fila - Builder

  
Clic en el espacio de la fila para añadir columnas en una fila.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/inIimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/inIimage.png)

  
  
Al hacer clic se abre un modal para seleccionar cuantas columnas se quieren crear en la fila

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/AwCimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/AwCimage.png)

Una vez se selecciona una de las opciones de creación de columnas en la fila se mostrarán las los bloques. En blanco. Están vacías, sin contenido.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/Lz8image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/Lz8image.png)

# B8. Interfaz columna introducción - Builder

Al hacer clic en la fila se abre la interfaz de añadirle bloques.  
Las unidades de ancho máximas para definir el ancho de un bloque son 12. Las unidades de ancho mínimas para definir el ancho de un bloque es 1.

Si las unidades de los bloques suman más de 12, el contenido que supere las 12 unidades se mostrarán en la vista pública en otra fila ya que se produce un salto de línea. Esto no quiere decir que automáticamente se crea otra fila en el gestor de Builder. Es solo un salto de línea del contenido que se desborda en la vista pública.

<p class="callout info">  
El alto de la fila lo definirá el elemento más alto que se presente en un bloque.  
  
</p>

Las divisiones de la fila hasta mencionarán con la palabra "columnas".

[  
![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/G02image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/G02image.png)

Interfaz de una columna que ocupa 6 unidades de ancho de las 12 disponibles. Independientemente de las unidades que ocupe de ancho todas las columnas presentan esta interfaz.

Espacio para hacer clic y abrir selector de tipos de bloques.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/Xwrimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/Xwrimage.png)

Botón tipo icono para acceder a Configuración de columna.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/TsDimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/TsDimage.png)

Botón tipo icono de engranaje que abre un menú desplegable.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/eoTimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/eoTimage.png)

El menú dispone de estos elementos:

- - Ajustes (interfaz)
    - Añadir bloque (acción)
    - Eliminar columna (acción)


Pestaña para cambiar de posición la columna en la fila. Para mover la columna hacer clic en la pestaña, mantener y llevar a la nueva posición y soltar clic.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/5x3image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/5x3image.png)

# B9. Interfaz configuración columna botón icono brocha - Builder

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/AIbimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/AIbimage.png)

  
**1.2 Interfaz configuración de la columna**

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/9T3image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/9T3image.png)

  
  
1.2.1. Interfaz de **FONDO**

<table border="1" class="align-center" id="bkmrk-elemento-funci%C3%B3n-med" style="border-collapse: collapse; width: 79.1358%; height: 119.545px; border-width: 1px;"><colgroup><col style="width: 51.3987%;"></col><col style="width: 48.588%;"></col></colgroup><tbody><tr style="height: 60.142px; background-color: rgb(236, 240, 241);"><td class="align-left" style="border-width: 1px; height: 60.142px;">**Elemento**  
  
</td><td class="align-left" style="border-width: 1px; height: 60.142px;">**Función**</td></tr><tr><td style="border-width: 1px;">  
</td><td style="border-width: 1px;"></td></tr><tr style="height: 29.7017px;"><td class="align-left" style="border-width: 1px; height: 29.7017px;">  
[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/ntXimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/ntXimage.png)

  
  
</td><td class="align-left" style="border-width: 1px; height: 29.7017px;">Para presentar una como fondo de la columna.  
Hacer clic en botón "Explorar" para cargar la imagen.  
  
También dispone de campo de consulta y edición de la url de la imagen.  
  
  
</td></tr><tr><td style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/ohCimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/ohCimage.png)

</td><td class="align-left" style="border-width: 1px;">Selector para definir el tamaño con el que se renderiza la imagen dentro de la columna.  
Opciones disponibles:

- **initial**: utiliza el tamaño original/por defecto de la imagen.
- **contain**: ajusta la imagen para que se vea completa dentro de la columna, sin recortarse (puede dejar espacios vacíos).
- **cover**: ajusta la imagen para cubrir toda la columna (puede recortar parte de la imagen).
- **Porcentaje (10% – 130%)**: permite establecer manualmente el tamaño del fondo respecto al tamaño del contenedor.
    
    
    - Valores bajos (ej. 50%) reducen la imagen.
    - Valores altos (ej. 120% o 130%) amplían la imagen.

Si la imagen está ampliada, es posible que se recorte dependiendo del área visible y de la posición del fondo. </td></tr><tr><td style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/1okimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/1okimage.png)

</td><td style="border-width: 1px;">Permite activar o desactivar la repetición de la imagen de fondo dentro de la columna.

- **Desactivado**: la imagen de fondo se muestra una sola vez (no se repite).
- **Activado**: la imagen de fondo se repite automáticamente para cubrir toda el área de la columna.

</td></tr><tr><td style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/hEMimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/hEMimage.png)

</td><td style="border-width: 1px;">Permite seleccionar el color de fondo de la columna.

- Al pulsar el botón "Explorar", abre el selector de color.
- Este color puede utilizarse como fondo principal cuando no hay imagen de fondo.
- Si existe una imagen de fondo, el color puede actuar como fondo base en caso de que la imagen no cubra toda la columna.
- Se pueden añadir colores en modo hexadecimal o mediante el botón "·Explorar".   
      
    [![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/I1Mimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/I1Mimage.png)

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/CKximage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/CKximage.png)

</td></tr><tr><td style="border-width: 1px;">[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/yTIimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/yTIimage.png)

</td><td style="border-width: 1px;">Permite definir la posición de la imagen de fondo dentro de la columna (punto de anclaje).

La selección se realiza mediante una cuadrícula de posicionamiento:

- **Arriba**: fija la imagen en la parte superior.
- **Abajo**: fija la imagen en la parte inferior.
- **Izquierda**: fija la imagen en el lateral izquierdo.
- **Derecha**: fija la imagen en el lateral derecho.
- **Centro** (opción seleccionada por defecto): centra la imagen dentro de la columna.

Nota: la posición del fondo es especialmente relevante cuando se utiliza el tamaño "**cover"**, ya que la imagen puede recortarse. Este ajuste permite decidir qué parte de la imagen se mantiene visible.

</td></tr></tbody></table>

1.2.2. Interfaz de **ESPACIADO DE COLUMNA**

Permite ajustar el espaciado interior, y el margen respecto al contenedor fila del bloque.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/X2Cimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/X2Cimage.png)

# B10. Columna botón icono engranaje - Ajustes - Ancho columnas - Builder

  
Las columnas disponen también de una interfaz de ajustes.  
Para acceder a la interfaz de ajustes clic en el botón con icono de engranaje.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/1Auimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/1Auimage.png)

  
  
  
Al hacer clic en el icono se abre el menú de las acciones y acceso a interfaz de ajustes de columna.

- Ajustes (interfaz)
- Añadir bloque (acción)
- Eliminar columna (acción)

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/adQimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/adQimage.png)


   
  
La opción del menú llamada, Ajustes, abre la interfaz para ajustar el ancho de la columna.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/Nbgimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/Nbgimage.png)

Para que las columnas de las páginas de contenido hechas con el maquetador Builder se vean bien en diferentes tamaños de pantalla se presenta en ajustes de la columna la siguiente interfaz.

#####   
  
**2. Interfaz por defecto de configuración de ancho de la columna**

Con ajuste de mismo ancho para todas las pantallas activado.

[  
  ](https://kb.wakaprint.com/uploads/images/gallery/2025-11/xUEimage.png)

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/DNgimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/DNgimage.png)

<table border="1" class="align-center" id="bkmrk-elemento-funci%C3%B3n-bot" style="border-collapse: collapse; width: 69.5062%; border-width: 1px; height: 106px;"><colgroup><col style="width: 42.6769%;"></col><col style="width: 57.3074%;"></col></colgroup><tbody><tr style="height: 59.6px;"><td class="align-left" style="border-width: 1px; height: 59.6px;">**Elemento**</td><td class="align-left" style="border-width: 1px; height: 59.6px;">**Función**</td></tr><tr style="height: 46.4px;"><td class="align-left" style="border-width: 1px; height: 46.4px;">Botón "Usar el mismo ancho para todas las pantallas" activado.</td><td class="align-left" style="border-width: 1px; height: 46.4px;">En magenta muestra la columna en el mismo ancho en todos los tamaños de pantalla.   
  
</td></tr><tr><td class="align-left" style="border-width: 1px;">Botón "Usar el mismo ancho para todas las pantallas" desactivado.</td><td class="align-left" style="border-width: 1px;">Abre ajustes para definir ancho que ocupará la columna en los diferentes tamaños de pantalla.  
LG, MD, SM y XS.  
  
  
</td></tr><tr><td class="align-left" style="border-width: 1px;">Botón tipo icono</td><td class="align-left" style="border-width: 1px;">Para eliminar columna  
  
  
</td></tr><tr><td class="align-left" style="border-width: 1px;">Botón "Cerrar" </td><td class="align-left" style="border-width: 1px;">Cierra la interfaz  
  
</td></tr></tbody></table>

#####   
  
 **3. Interfaz de ajustes para diferentes anchos de columna    
  
  


[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2025-11/scaled-1680-/ElWimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2025-11/ElWimage.png)

<table border="1" class="align-center" id="bkmrk-elemento-funci%C3%B3n-tam" style="border-collapse: collapse; width: 69.5062%; border-width: 1px; height: 106px;"><colgroup><col style="width: 19.0311%;"></col><col style="width: 80.9441%;"></col></colgroup><tbody><tr style="height: 59.6px;"><td class="align-left" style="border-width: 1px; height: 59.6px;">**Elemento**</td><td class="align-left" style="border-width: 1px; height: 59.6px;">**Función**</td></tr><tr style="height: 46.4px;"><td class="align-left" style="border-width: 1px; height: 46.4px;">Tamaño de columna LG  
  
</td><td class="align-left" style="border-width: 1px; height: 46.4px;">Ajuste para ancho en vista pantallas grandes (Monitores)</td></tr><tr><td class="align-left" style="border-width: 1px;">Tamaño de columna MD  
  
</td><td class="align-left" style="border-width: 1px;">Ajuste para ancho en vista pantallas medianas (Monitores)</td></tr><tr><td class="align-left" style="border-width: 1px;">Tamaño de columna SM  
  
</td><td class="align-left" style="border-width: 1px;">Ajuste para ancho en vista pantallas pequeñas (Tablets)</td></tr><tr><td class="align-left" style="border-width: 1px;">Tamaño de columna XS  
  
</td><td class="align-left" style="border-width: 1px;">Ajuste para ancho en vista pantallas más pequeñas (Móviles)</td></tr></tbody></table>

<p class="callout info">  
Para vista en pantallas SM y XS se recomienda poner 6 o 12 unidades.   
  
</p>

#####   
  
 **3. Ejemplos de ajustes de vista de columna**

> **Ejemplo 1**. Ajuste del primer bloque. En el ejemplo se ha dividido la fila en 3 columnas.
> 
> - En pantallas LG y MD los tres bloques ocupan cada uno 4 unidades de las 12 máximas. El bloque primero está ajustado en 4 en pantallas LG y MD.
> - En pantallas SM y XS, el bloque está ajustado para que ocupe 6 unidades.  
>       
>       
>     [![image.png](https://kb.wakaprint.com/uploads/images/gallery/2025-11/scaled-1680-/jJWimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2025-11/jJWimage.png)

> **Ejemplo 2.** Ajuste del primer bloque.
> 
> - En pantallas LG y MD los tres bloques ocupan cada uno 4 unidades de las 12 máximas. El bloque primero está ajustado en 4 en pantallas LG y MD.
> - En pantallas SM y XS, el bloque está ajustado para que ocupe 12 unidades.
> 
> [![image.png](https://kb.wakaprint.com/uploads/images/gallery/2025-11/scaled-1680-/QDximage.png)](https://kb.wakaprint.com/uploads/images/gallery/2025-11/QDximage.png)

# B11. Añadir contenido en columnas - Builder

Para añadir contenido a las columnas se hace mediante añadir un tipo de bloque. Hacer clic en el área central del espacio en blanco. Destacado con el icono de "+".

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/Rcrimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/Rcrimage.png)

Al hacer clic se abre un menú para seleccionar el tipo de bloque que se quiere mostrar. Actualmente se puede seleccionar entre los siguientes tipos de bloque:

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/lOEimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/lOEimage.png)


<p class="callout info">  
**En las siguientes páginas de este capítulo se explican sus interfaces.**  
  
</p>

# B12. Tipos de bloques introducción - Builder

##### **1. Añadir bloques**

Para añadir boque hacer clic en la zona central de la columna o clic en el botón de icono de engranaje opción del menú, "Añadir bloque".

<p class="callout success">  
Se pueden añadir múltiples bloques en cada columna.  
  
</p>

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/P5uimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/P5uimage.png)

#####   
  


##### **2. Interfaz general en bloques** 

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/nh5image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/nh5image.png)

<table id="bkmrk-elemento-%C2%A0-funcional" style="width: 100%; height: 319.929px;"><thead><tr style="height: 57.6989px;"><th class="align-left" style="width: 33.9886%; height: 57.6989px;">**Elemento**

</th><th class="align-left" style="width: 66.0001%; height: 57.6989px;">**Funcionalidad**</th></tr></thead><tbody><tr style="height: 29.7017px;"><td style="width: 33.9886%; height: 29.7017px;">Icono izquierdo (arriba izquierda)</td><td style="width: 66.0001%; height: 29.7017px;">Acceder a Accede a opciones avanzadas del elemento.  
  
</td></tr><tr style="height: 46.5057px;"><td style="width: 33.9886%; height: 46.5057px;">Icono Engranaje (segundo arriba izquierda)  
  
</td><td style="width: 66.0001%; height: 46.5057px;">Acceder a la configuración del tipo del elemento.  
  
</td></tr><tr style="height: 46.5057px;"><td style="width: 33.9886%; height: 46.5057px;">Pestaña (icono de tres líneas, arriba derecha)  
  
</td><td style="width: 66.0001%; height: 46.5057px;">Mover bloque en la fila. Reposicionar.</td></tr><tr style="height: 46.5057px;"><td style="width: 33.9886%; height: 46.5057px;">Previsualización  
  
</td><td style="width: 66.0001%; height: 46.5057px;">Muestra el una vista previa del contenido que tiene el bloque.</td></tr><tr style="height: 46.5057px;"><td style="width: 33.9886%; height: 46.5057px;">Botón Papelera (abajo izquierda)</td><td style="width: 66.0001%; height: 46.5057px;">Elimina el bloque. Los bloques eliminados son recuperables.   
  
</td></tr><tr style="height: 46.5057px;"><td style="width: 33.9886%; height: 46.5057px;">Botón EDITAR (abajo derecha)</td><td style="width: 66.0001%; height: 46.5057px;">Abre la edición del elemento para modificar sus datos (nombre, contenido, configuración, etc.).</td></tr></tbody></table>

##### **3. Cambiar un bloque añadido a una columna por otro tipo de bloque**

Hacer clic en el icono de cubo de basura del bloque para eliminarlo. Al hacerlo la columna permanecerá disponible para añadir un bloque.   
  
Los bloques eliminados se quedan guardados para poder ser reutilizados en la sección "Recuperar bloques eliminados". Consultar la página correspondiente de esté capítulo del manual para conocer más detalles.

<p class="callout info">  
En las siguientes páginas de este capítulo del manual se explican cada uno de los tipos.  
  
</p>

# B13. Bloque tipo Editor de texto - Builder

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/x0Ximage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/x0Ximage.png)

#####   


Dispone de una interfaz para dar formato, y estilos a los textos, múltiples tipos de encabezados, listas, colores de tipografías y textos enlazados.

[![image-1665664779822.png](https://kb.wakaprint.com/uploads/images/gallery/2022-10/scaled-1680-/image-1665664779822.png)](https://kb.wakaprint.com/uploads/images/gallery/2022-10/image-1665664779822.png)

#####   


#####  **Detalles interfaz de bloque tipo Texto** 

<table id="bkmrk-elemento-funcionalid" style="width: 100%;"><thead><tr><th class="align-left" style="width: 24.7273%;">Elemento  
  
</th><th class="align-left" style="width: 75.2615%;">Funcionalidad</th></tr></thead><tbody><tr><td style="width: 24.7273%;">Selector de estilo (“Normal”)</td><td style="width: 75.2615%;">Permite elegir el formato del texto (por ejemplo: Normal, Título, Subtítulo, etc.). Cambia el estilo del párrafo actual. A tener en cuenta que el título H1 solo se debe usar una vez por página.  
  
</td></tr><tr><td style="width: 24.7273%;">**B** (Negrita)</td><td style="width: 75.2615%;">Pone el texto seleccionado en **negrita**.  
  
</td></tr><tr><td style="width: 24.7273%;">*I* (Cursiva)</td><td style="width: 75.2615%;">Pone el texto seleccionado en *cursiva*.  
  
</td></tr><tr><td style="width: 24.7273%;">**U** (Subrayado)</td><td style="width: 75.2615%;">Subraya el texto seleccionado.  
  
</td></tr><tr><td style="width: 24.7273%;"><del>S</del> (Tachado)</td><td style="width: 75.2615%;">Tacha el texto seleccionado (útil para indicar información anulada o no válida).  
  
</td></tr><tr><td style="width: 24.7273%;">Alineación (icono de líneas)</td><td style="width: 75.2615%;">Cambia la alineación del texto (izquierda, centrado, derecha o justificado según la configuración del editor).  
  
</td></tr><tr><td style="width: 24.7273%;">Enlace (icono de cadena)</td><td style="width: 75.2615%;">Inserta o edita un enlace (URL) en el texto seleccionado.  
  
</td></tr><tr><td style="width: 24.7273%;">Comillas (icono de “ ”)</td><td style="width: 75.2615%;">Aplica formato de cita o bloque de cita al texto.  
  
</td></tr><tr><td style="width: 24.7273%;">Texto/Color (icono “A”)</td><td style="width: 75.2615%;">Permite cambiar el color del texto (y en algunos editores también el color de fondo/resaltado).  
  
</td></tr><tr><td style="width: 24.7273%;">Lista numerada (icono 1,2,3)</td><td style="width: 75.2615%;">Crea una lista ordenada (numerada).  
  
</td></tr><tr><td style="width: 24.7273%;">Lista con viñetas (icono con puntos)</td><td style="width: 75.2615%;">Crea una lista no ordenada (con viñetas).  
  
</td></tr><tr><td style="width: 24.7273%;">Sangría izquierda (flecha hacia la izquierda)</td><td style="width: 75.2615%;">Reduce la sangría del párrafo o del elemento de lista (mueve el texto hacia la izquierda).  
  
</td></tr><tr><td style="width: 24.7273%;">Sangría derecha (flecha hacia la derecha)</td><td style="width: 75.2615%;">Aumenta la sangría del párrafo o del elemento de lista (mueve el texto hacia la derecha).  
  
</td></tr><tr><td style="width: 24.7273%;">Borrar formato (Tx)</td><td style="width: 75.2615%;">Elimina estilos aplicados al texto seleccionado (negrita, cursiva, colores, etc.) y lo devuelve a formato normal.  
  
</td></tr><tr><td style="width: 24.7273%;">Área de edición</td><td style="width: 75.2615%;">Zona donde se escribe y edita el contenido del texto.  
  
</td></tr><tr><td style="width: 24.7273%;">Mensaje “Los cambios se aplican automáticamente”</td><td style="width: 75.2615%;">Indica que no hace falta guardar manualmente: los cambios se guardan solos.  
  
  
</td></tr><tr><td style="width: 24.7273%;">Botón **CERRAR**</td><td style="width: 75.2615%;">Cierra el editor y vuelve a la pantalla anterior sin necesidad de guardar (porque el guardado es automático).  
  
</td></tr></tbody></table>

#####   

# B14. Bloque tipo Imagen - Builder

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/RvSimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/RvSimage.png)


Permite presentar una imagen, con campo para etiqueta alt, y campo para especificar url del enlace (opcional).

##### **Interfaz de bloque de imagen**  
  


[![image-1665665016817.png](https://kb.wakaprint.com/uploads/images/gallery/2022-10/scaled-1680-/image-1665665016817.png)](https://kb.wakaprint.com/uploads/images/gallery/2022-10/image-1665665016817.png)

<table id="bkmrk-elemento-%C2%A0-funcional" style="width: 100%;"><thead><tr><th class="align-left" style="width: 25.5871%;">**Elemento**

</th><th class="align-left" style="width: 74.4129%;">**Funcionalidad**</th></tr></thead><tbody><tr><td style="width: 25.5871%;">Vista previa de imagen (parte superior)</td><td style="width: 74.4129%;">Muestra una previsualización de la imagen seleccionada o cargada para confirmar que es la correcta antes de guardar/cerrar.  
  
</td></tr><tr><td style="width: 25.5871%;">Fondo cuadriculado (transparencia)</td><td style="width: 74.4129%;">Indica zonas transparentes de la imagen (típico patrón de transparencia).  
  
  
</td></tr><tr><td style="width: 25.5871%;">Campo **SRC**</td><td style="width: 74.4129%;">Contiene la ruta o enlace de origen de la imagen. Es el archivo que se mostrará en el contenido.  
  
</td></tr><tr><td style="width: 25.5871%;">Botón **EXPLORAR**</td><td style="width: 74.4129%;">Abre el explorador/gestor de archivos o biblioteca del sistema para seleccionar o cargar una imagen y rellenar automáticamente el campo **SRC**.  
  
El campo SRC es editable.

</td></tr><tr><td style="width: 25.5871%;">Campo **ALT**</td><td style="width: 74.4129%;">Permite definir el texto alternativo de la imagen (descripción). Se usa para accesibilidad (lectores de pantalla) y cuando la imagen no carga. También ayuda al SEO.  
  
</td></tr><tr><td style="width: 25.5871%;">Campo **URL**</td><td style="width: 74.4129%;">Permite añadir un enlace asociado a la imagen. En algunos sistemas, al hacer clic en la imagen, el usuario será dirigido a esta URL.  
  
</td></tr><tr><td style="width: 25.5871%;">Mensaje “Los cambios se aplican automáticamente”</td><td style="width: 74.4129%;">Indica que cualquier cambio se guarda automáticamente sin necesidad de un botón “Guardar”.  
  
</td></tr><tr><td style="width: 25.5871%;">Botón **CERRAR**</td><td style="width: 74.4129%;">Cierra la ventana de edición y vuelve a la pantalla anterior. Los cambios quedan guardados automáticamente.  
  
</td></tr></tbody></table>

<p class="callout info">  
  
Consultar la página de este capítulo llamada "Builder - Explorador de archivos" para conocer como se suben las imágenes.  
  
  
</p>

# B15. Bloque tipo Lista de iconos - Builder

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/kv9image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/kv9image.png)


  
  
Permite crear una lista de enlaces con iconos.

##### **1. Lista de iconos interfaz de creación** 

[![image-1665665203490.png](https://kb.wakaprint.com/uploads/images/gallery/2022-10/scaled-1680-/image-1665665203490.png)](https://kb.wakaprint.com/uploads/images/gallery/2022-10/image-1665665203490.png)

<table id="bkmrk-elemento-%C2%A0-funcional"><thead><tr><th class="align-left">Elemento

</th><th class="align-left">Funcionalidad</th></tr></thead><tbody><tr><td>Campo TÍTULO DE LA LISTA  
  
</td><td>Permite asignar un nombre o encabezado general a la lista completa de iconos/elementos.</td></tr><tr><td>Tarjeta de elemento (bloque “Lorem ipsum”)  
  
</td><td>Representa un ítem dentro de la lista. Cada ítem puede tener texto, icono/imagen y enlace.</td></tr><tr><td>Título del ítem (“Lorem ipsum”)  
  
</td><td>Nombre identificativo del elemento de la lista. Sirve para reconocerlo rápidamente.</td></tr><tr><td>Campo TEXTO  
  
</td><td>Texto descriptivo que se mostrará dentro del elemento de la lista.</td></tr><tr><td>Campo ICONO o URL</td><td>Permite definir el icono del elemento escribiendo un nombre de icono (por ejemplo de FontAwesome) o una URL de un icono.  
  
</td></tr><tr><td>Botón EXPLORAR (en ICONO o URL)  
  
</td><td>Abre el selector/explorador para elegir un icono o recurso disponible y rellenar automáticamente el campo.   
  
</td></tr><tr><td>Nota “Déjelo en blanco para desactivar…”  
  
</td><td>Indica que si el campo ICONO o URL se deja vacío, el icono se desactiva (no se mostrará).</td></tr><tr><td>Campo ENLACE</td><td>Permite indicar la URL de destino. Al hacer clic en el elemento, llevará a esa dirección (si se configura).  
  
</td></tr><tr><td>Nota “Dejar vacío para desactivar”</td><td>Indica que si el campo ENLACE está vacío, el elemento no tendrá enlace asociado.  
  
</td></tr><tr><td>Botón ELIMINAR</td><td>Borra el elemento actual (“Lorem ipsum”) de la lista.  
  
</td></tr><tr><td>Botón CERRAR (dentro del elemento)</td><td>Cierra la edición de ese ítem y vuelve a la vista principal de la lista.  
  
  
</td></tr><tr><td>Botón + (recuadro punteado)</td><td>Añade un nuevo elemento a la lista de iconos.  
  
</td></tr><tr><td>Mensaje “Los cambios se aplican automáticamente”</td><td>Confirma que los cambios se guardan automáticamente sin necesidad de botón “Guardar”.  
  
  
</td></tr><tr><td>Botón CERRAR (inferior)</td><td>Cierra el editor completo de la lista y vuelve a la pantalla anterior.  
  
</td></tr></tbody></table>

##### **2. Añadir icono interfaz**  
  


<table id="bkmrk-elemento-%C2%A0-explicaci" style="width: 100%;"><thead><tr><th class="align-left" style="width: 22.1183%;">Elemento

</th><th class="align-left" style="width: 77.8817%;">Explicación de la funcionalidad</th></tr></thead><tbody><tr><td style="width: 22.1183%;">Campo ICONO o URL</td><td style="width: 77.8817%;">Permite asignar el icono que se mostrará en el elemento de la lista. El sistema acepta un nombre de icono de Font Awesome (por ejemplo `arrow-alt-circle-right`) o una URL (si se desea usar un icono como imagen).  
  
</td></tr><tr><td style="width: 22.1183%;">Proceso: Cambiar el icono (Font Awesome)</td><td style="width: 77.8817%;">1) Abrir la edición del elemento de la lista.2) Ir al campo ICONO o URL.3) Sustituir el valor actual por el nuevo nombre del icono (solo el nombre, sin etiquetas HTML).Ejemplo: cambiar `arrow-alt-circle-right` por `arrow-right-to-bracket`.4) Los cambios se aplican automáticamente.  
  
</td></tr><tr><td style="width: 22.1183%;">Importante: No usar HTML</td><td style="width: 77.8817%;">En este campo no se debe pegar código como `<i class="fa-solid ..."></i>`. Solo se debe escribir el nombre del icono (por ejemplo: `arrow-right-to-bracket`).  
  
</td></tr><tr><td style="width: 22.1183%;">Botón EXPLORAR</td><td style="width: 77.8817%;">Permite abrir el explorador/selector de recursos para elegir un icono o recurso disponible (si la plataforma lo ofrece) y rellenar automáticamente el campo.   
  
</td></tr><tr><td style="width: 22.1183%;">Nota “Déjelo en blanco para desactivar…”  
  
</td><td style="width: 77.8817%;">Si el campo ICONO o URL se deja vacío, el icono del elemento se desactiva y no se mostrará.  
  
</td></tr><tr><td style="width: 22.1183%;">Confirmación de guardado automático</td><td style="width: 77.8817%;">El sistema guarda el cambio automáticamente, por lo que no es necesario pulsar “Guardar”. Para salir, se puede usar el botón CERRAR.  
  
  
</td></tr></tbody></table>

##### **3. Ejemplos de bloque lista**

> **Ejemplo 1:** Lista de tres elementos con:  
> ·
> 
> - Bloque de 4 unidades de ancho en vista pantalla escritorio.
> - Título de la lista, "Hasta 40% de descuento"
> - Textos de los elementos de la lista que enlazan a los productos. El color de los enlaces lo toma del estilo del tema. Color primario.
> - Icono añadido mediante nombre de [https://fontawesome.com/](https://fontawesome.com/). Nombre del icono "shopping-cart". El color de los iconos lo toma por el estilo del tema. Color primario.
> 
> [![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/MsZimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/MsZimage.png)

> **Ejemplo 2:** Lista de tres elementos con:
> 
> - Bloque de 4 unidades de ancho en vista pantalla escritorio.
> - Título de la lista, "Indicaciones tramitación de pedido".
> - Textos enlazados a videos de Youtube. El color de los enlaces lo toma del estilo del tema. Color primario.
> - Icono añadido mediante nombre de https://fontawesome.com/. Nombre del icono, "question-circle". El color de los iconos lo toma por el estilo del tema. Color primario.
> 
> [![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/jAMimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/jAMimage.png)

> **Ejemplo 3:** Lista de tres elementos con:
> 
> - Bloque de 4 unidades de ancho en vista pantalla escritorio.
> - Título de la lista, "Información sobre el pedido".
> - Textos enlazados a páginas con información.
> - Iconos añadidos mediante botón explorar. Descargados en SVG de [https://fontawesome.com/](https://fontawesome.com/). Convertidos a Imágenes PNG con mismo tamaño de mesa de trabajo y fondo blanco para espaciar en la vertical los elementos de la lista. El color y tamaño de los iconos se puede editar en la creación del PNG.
> 
> [![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/gB4image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/gB4image.png)

# B16. Bloque tipo Producto - Builder

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/pomimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/pomimage.png)

#####   


Permite presentar productos de la tienda con el mismo estilo que en las categorías.

[![image-1665665408589.png](https://kb.wakaprint.com/uploads/images/gallery/2022-10/scaled-1680-/image-1665665408589.png)](https://kb.wakaprint.com/uploads/images/gallery/2022-10/image-1665665408589.png)

#####   
  
**La interfaz para añadir producto es de tipo buscador** 

Presenta un botón llamado "Buscar "para abrir la interfaz de búsqueda de producto.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/gXximage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/gXximage.png)

  
  
  
Escribir mínimo 3 caracteres del nombre que se ha dado a un producto creado. Mostrará los resultados de productos coincidentes.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/myqimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/myqimage.png)

Seleccionar el que se quiera presentar en la columna.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/2wLimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/2wLimage.png)

  
Hacer clic en botón "Cerrar". Los cambios se guardan automáticamente si se tiene activado el Autoguardado en la página.

- Vista pública del bloque producto en una columna de 4 unidades en una fila.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/Zgyimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/Zgyimage.png)

#####   
  


- Vista del bloque desdela página en el gestor.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/oZTimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/oZTimage.png)

# B17. Bloque tipo Categoría - Builder

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/Ujuimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/Ujuimage.png)

Permite mostrar una categoría. Para seleccionar la categoría hacer clic en buscar para acceder al buscador.   
Dispone de dos modos de presentar la categoría. Mostrar árbol completo y/o mostrar imágenes.

[![image-1665665641314.png](https://kb.wakaprint.com/uploads/images/gallery/2022-10/scaled-1680-/image-1665665641314.png)](https://kb.wakaprint.com/uploads/images/gallery/2022-10/image-1665665641314.png)

<table id="bkmrk-elemento-%C2%A0-funcional"><thead><tr><th class="align-left">**Elemento**

</th><th class="align-left">**Funcionalidad**</th></tr></thead><tbody><tr><td>Título Categoría</td><td>Indica que esta ventana sirve para seleccionar y añadir una categoría dentro del bloque.  
  
</td></tr><tr><td>Texto “Sin categoría seleccionada”</td><td>Muestra el estado actual: no hay ninguna categoría elegida todavía. Cuando se seleccione una, aquí aparecerá su nombre.  
  
</td></tr><tr><td>Botón BUSCAR  
  
</td><td>Abre el buscador de categorías para poder localizar y elegir una de las disponibles y presentarla en el bloque.  
  
</td></tr><tr><td>Opción MOSTRAR ÁRBOL COMPLETO (interruptor)</td><td>Activa o desactiva el modo de visualización del árbol completo de categorías (incluyendo categorías descendientes.  
  
</td></tr><tr><td>Interruptor de MOSTRAR ÁRBOL COMPLETO  
  
</td><td>Permite encender/apagar rápidamente esta opción. Normalmente: activado = se muestra toda la jerarquía, desactivado = vista limitada.</td></tr><tr><td>Opción MOSTRAR IMÁGENES (interruptor)  
  
</td><td>Activa o desactiva la visualización de imágenes asociadas a la categoría (si existen).</td></tr><tr><td>Interruptor de MOSTRAR IMÁGENES  
  
</td><td>Permite encender/apagar esta configuración de forma inmediata.</td></tr><tr><td>Mensaje “Los cambios se aplican automáticamente”  
  
</td><td>Indica que las modificaciones se guardan automáticamente sin botón “Guardar”.</td></tr><tr><td>Botón CERRAR  
  
</td><td>Cierra la ventana y vuelve a la pantalla anterior manteniendo los cambios aplicados.</td></tr></tbody></table>

#####   
  
**Ejemplos de presentación de categorías en un bloque** 

> **Ejemplo 1:** Categoría inicio con "Mostrar árbol completo", activado.
> 
> Vista del bloque en la fila desde la página en el gestor.
> 
> [  
> ![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/99iimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/99iimage.png)
> 
>   
>   
> El mismo bloque en la vista publica.
> 
> [![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/GH6image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/GH6image.png)

> **Ejemplo 2:** Categoría imprenta con "Mostrar imágenes" activado.
> 
> Vista del bloque en la fila desde la página en el gestor.
> 
> [![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/9aiimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/9aiimage.png)
> 
>   
>   
>   
> El mismo bloque en la vista publica.
> 
> [![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/gMtimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/gMtimage.png)

# B18. Bloque tipo Editor de código HTML - Builder

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/bNbimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/bNbimage.png)


  
  
Permite crear contenido con lenguajes de programación para diseño web.  
Se añade solo el html necesario para presentar en el bloque lo que interese.  
No se crea la estructura html completa de la página.   
Los estilos han de aplicarse en línea o añadiendo CSS SRC en la herramienta script de terceros.

- [ ](https://kb.wakaprint.com/uploads/images/gallery/2026-01/CT0image.png)Vista desde el gestor del bloque tipo Editor de código HTML, estando vacío.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/CT0image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/CT0image.png)

- Vista desde el gestor del bloque tipo Editor de código HTML, con html.

  
[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/v7jimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/v7jimage.png)

- El bloque está ajustado con, "Usar el mismo fondo para todas las pantallas", desactivado.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/NBPimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/NBPimage.png)

- El bloque desde la vista pública en pantalla escritorio, LG y MD.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/oUWimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/oUWimage.png)

- El bloque desde la vista pública en pantalla tamaños SM y XS .

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/wTOimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/wTOimage.png)

# B19. Bloque tipo Slider - Builder

#####   


[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/TY3image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/TY3image.png)

Permite crear un slider.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/g2dimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/g2dimage.png)

Clic en el espacio destacado con el icono "+" para añadir diapositivas.  
Al hacer clic en la zona reconocible por el signo "+" se abre el explorador de archivos.

<p class="callout info">  
  
Consultar la página de este manual que explica el funcionamiento del Explorador de imágenes de Builder.  
  
**En el bloque tipo Slider se pueden subir múltiples imágenes de una sola vez desde el explorador de imágenes.** En este supuesto seleccionar las imágenes a subir. Para añadirlas hacer clic en el icono de círculo de color verde que se presenta en la esquina superior izquierda.  
  
  
</p>

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/0hCimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/0hCimage.png)

La diapositivas añadidas se previsualizarán en el bloque en modo lista.  
  
Para añadir más diapositivas hacer clic en el espacio destacado con el icono "+".

[![image-1665666230223.png](https://kb.wakaprint.com/uploads/images/gallery/2022-10/scaled-1680-/image-1665666230223.png)](https://kb.wakaprint.com/uploads/images/gallery/2022-10/image-1665666230223.png)

#####   


#####   


##### **1. Interfaz de edición de diapositivas**

Para editar las diapositivas añadidas hacer clic en la fila correspondiente.

<table id="bkmrk-elemento-%C2%A0-funcional" style="width: 100%; height: 447.328px;"><thead><tr style="height: 57.7812px;"><th class="align-left" style="width: 32.9128%; height: 57.7812px;">**Elemento**

</th><th class="align-left" style="width: 66.9637%; height: 57.7812px;">**Funcionalidad**</th></tr></thead><tbody><tr style="height: 63.3906px;"><td style="width: 32.9128%; height: 63.3906px;">Título Opciones del Slider</td><td style="width: 66.9637%; height: 63.3906px;">Indica que esta ventana sirve para configurar el contenido y opciones del slider (carrusel).  
  
</td></tr><tr style="height: 46.5938px;"><td style="width: 32.9128%; height: 46.5938px;">Botón X (arriba a la derecha)  
  
</td><td style="width: 66.9637%; height: 46.5938px;">Cierra la ventana/modal de configuración del slider.</td></tr><tr style="height: 63.3906px;"><td style="width: 32.9128%; height: 63.3906px;">Botón ⚙️ (Configuración)  
  
  
</td><td style="width: 66.9637%; height: 63.3906px;">Accede a opciones avanzadas del slider (por ejemplo: comportamiento, velocidad, paginación, etc.).</td></tr><tr style="height: 46.5938px;"><td style="width: 32.9128%; height: 46.5938px;">Área punteada de carga / inserción</td><td style="width: 66.9637%; height: 46.5938px;">Zona destinada a añadir contenido al slider. Funciona como contenedor de elementos (imágenes) del carrusel.  
  
</td></tr><tr style="height: 46.5938px;"><td style="width: 32.9128%; height: 46.5938px;">Botón + (dentro del área punteada)</td><td style="width: 66.9637%; height: 46.5938px;">Permite añadir una o más imágenes al slider abriendo el selector/explorador de imágenes.  
  
</td></tr><tr style="height: 46.5938px;"><td style="width: 32.9128%; height: 46.5938px;">Texto de ayuda (“Para añadir imágenes…”)  
  
</td><td style="width: 66.9637%; height: 46.5938px;">Indica al usuario cómo usar el botón + para añadir imágenes al slider.</td></tr><tr style="height: 46.5938px;"><td style="width: 32.9128%; height: 46.5938px;">Mensaje “Los cambios se aplican automáticamente”</td><td style="width: 66.9637%; height: 46.5938px;">Confirma que los cambios se guardan automáticamente sin necesidad de botón “Guardar”.  
  
</td></tr><tr style="height: 29.7969px;"><td style="width: 32.9128%; height: 29.7969px;">Botón CERRAR (abajo a la derecha)</td><td style="width: 66.9637%; height: 29.7969px;">Cierra la ventana y vuelve a la pantalla anterior manteniendo los cambios realizados.  
  
</td></tr></tbody></table>

<p class="callout info">  
Dispone de una interfaz de ajustes de opciones de modos de comportamiento del carrusel, velocidad de transición de diapositivas, dirección, e intervalo entre otros.  
  
</p>

  
[![image-1665666408359.png](https://kb.wakaprint.com/uploads/images/gallery/2022-10/scaled-1680-/image-1665666408359.png)](https://kb.wakaprint.com/uploads/images/gallery/2022-10/image-1665666408359.png)

##### **2. Interfaz de ajustes de bloque tipo Slider** 

[![image-1665666290422.png](https://kb.wakaprint.com/uploads/images/gallery/2022-10/scaled-1680-/image-1665666290422.png)](https://kb.wakaprint.com/uploads/images/gallery/2022-10/image-1665666290422.png)

#####   
  


<table id="bkmrk-elemento-funcionalid"><thead><tr><th class="align-left">**Elemento**

</th><th class="align-left">**Funcionalidad**</th></tr></thead><tbody><tr><td>Título Opciones del Slider</td><td>Indica que esta pantalla permite configurar el comportamiento del carrusel/slider de imágenes.  
  
</td></tr><tr><td>Botón ⚙️ Configuración</td><td>Acceso a ajustes avanzados o configuración adicional del componente.  
  
</td></tr><tr><td>Campo TIPO</td><td>Define el tipo de funcionamiento del slider. Ej.: Loop repite el slider en bucle al llegar al final.  
  
</td></tr><tr><td>Campo INICIO</td><td>Indica la diapositiva inicial (número) que se mostrará al cargar el slider.  
  
</td></tr><tr><td>Campo VELOCIDAD</td><td>Define la velocidad de transición entre diapositivas (normalmente en milisegundos). Si es 0, el salto es inmediato.  
  
</td></tr><tr><td>Campo POR MOVIMIENTO</td><td>Determina cuántas diapositivas avanza el slider en cada movimiento (por ejemplo, al deslizar o pulsar siguiente).  
  
</td></tr><tr><td>Campo POR PÁGINA</td><td>Indica cuántas diapositivas se muestran por “página” o vista dentro del slider.  
  
</td></tr><tr><td>Campo FLECHAS</td><td>Activa o desactiva las flechas de navegación (anterior/siguiente).  
  
</td></tr><tr><td>Campo FOCO</td><td>Define qué diapositiva debe quedar enfocada/activa cuando se muestran varias a la vez en la misma página.  
  
</td></tr><tr><td>Interruptor REPRODUCCIÓN AUTOMÁTICA</td><td>Activa o desactiva que el slider avance automáticamente sin interacción del usuario.  
  
  
</td></tr><tr><td>Campo DIRECCIÓN</td><td>Define la dirección en la que se desplaza el slider (ej.: de izquierda a derecha).  
  
</td></tr><tr><td>Campo PAGINACIÓN</td><td>Activa o desactiva los indicadores de paginación (puntos o marcadores del slider).  
  
</td></tr><tr><td>Campo INTERVALO</td><td>Tiempo (en milisegundos) entre cambios automáticos de diapositiva (solo aplica si la reproducción automática está activada).  
  
</td></tr><tr><td>Texto de ayuda bajo campos</td><td>Explica el uso de cada opción (por ejemplo, qué hace “Velocidad”, “Foco” o “Intervalo”).  
  
</td></tr><tr><td>Miniaturas de imágenes (parte inferior)</td><td>Muestran las imágenes incluidas en el slider. Permiten identificar qué contenido forma parte del carrusel.  
  
</td></tr><tr><td>Etiqueta ALT: No definido  
  
  
</td><td>Indica que la imagen no tiene texto alternativo configurado. Se recomienda completarlo por accesibilidad y SEO.</td></tr></tbody></table>

# B20. Bloque tipo Marcas - Builder

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/Nnwimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/Nnwimage.png)

Permite mostrar marcas en modo lista o slider. Para que una marca esté disponible para añadir al bloque ha de crearse antes de la la sección del gestor Ajustes &gt; Catálogo &gt; Marcas.  
  
Si hay marcas creadas las mostrará para activar aquellas que se quiera presentar la imagen de la marca en el bloque.  
Botón en blanco no se muestra. Botón en magenta, se muestra.

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/R3Dimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/R3Dimage.png)

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/xi4image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/xi4image.png)

  
  
En la esquina superior izquierda muestra el botón con icono de engranaje. Clic en el para acceder a la interfaz de ajustes del slider.

Al hacer clic en aparece un nuevo ajuste llamado "Opciones". Permite seleccionar entre dos modos de presentación de las diapositivas.

[![image-1665666807530.png](https://kb.wakaprint.com/uploads/images/gallery/2022-10/scaled-1680-/image-1665666807530.png)](https://kb.wakaprint.com/uploads/images/gallery/2022-10/image-1665666807530.png)

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/bw4image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/bw4image.png)

##### **El modo Slider presenta una interfaz de ajustes**

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/M7Iimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/M7Iimage.png)

<table id="bkmrk-elemento-%C2%A0-funcional" style="width: 100%; height: 943.063px;"><thead><tr style="height: 57.7812px;"><th class="align-left" style="width: 36.1805%; height: 57.7812px;">**Elemento**

</th><th class="align-left" style="width: 63.696%; height: 57.7812px;">**Funcionalidad**</th></tr></thead><tbody><tr style="height: 63.3906px;"><td style="width: 36.1805%; height: 63.3906px;">Título Opciones</td><td style="width: 63.696%; height: 63.3906px;">Indica que esta pantalla corresponde a la configuración del bloque (en este caso, un bloque de marcas).  
  
</td></tr><tr style="height: 46.5938px;"><td style="width: 36.1805%; height: 46.5938px;">Botón ⚙️ (Configuración)  
  
</td><td style="width: 63.696%; height: 46.5938px;">Acceso a opciones avanzadas o ajustes adicionales del bloque.</td></tr><tr style="height: 63.3906px;"><td style="width: 36.1805%; height: 63.3906px;">Campo selector de modo de visualización del TIPO DE BLOQUE DE MARCAS  
  
</td><td style="width: 63.696%; height: 63.3906px;">Define el formato en el que se mostrarán las marcas. En este caso: Slider.</td></tr><tr style="height: 63.3906px;"><td style="width: 36.1805%; height: 63.3906px;">Campo selector de TIPO   
  
</td><td style="width: 63.696%; height: 63.3906px;">Define el comportamiento del slider. Ej.: Loop hace que el carrusel se repita continuamente.  
  
</td></tr><tr style="height: 46.5938px;"><td style="width: 36.1805%; height: 46.5938px;">Campo INICIO  
  
</td><td style="width: 63.696%; height: 46.5938px;">Establece la diapositiva/posición inicial que se mostrará al cargar el slider.</td></tr><tr style="height: 63.3906px;"><td style="width: 36.1805%; height: 63.3906px;">Campo VELOCIDAD</td><td style="width: 63.696%; height: 63.3906px;">Velocidad de transición entre diapositivas (normalmente en milisegundos). Si es 0, el cambio es inmediato.  
  
</td></tr><tr style="height: 46.5938px;"><td style="width: 36.1805%; height: 46.5938px;">Campo POR MOVIMIENTO  
  
</td><td style="width: 63.696%; height: 46.5938px;">Indica cuántas diapositivas avanza el slider en cada desplazamiento (paso).</td></tr><tr style="height: 63.3906px;"><td style="width: 36.1805%; height: 63.3906px;">Campo POR PÁGINA</td><td style="width: 63.696%; height: 63.3906px;">Cantidad de marcas/diapositivas visibles al mismo tiempo por cada “página” del slider.  
  
</td></tr><tr style="height: 29.7969px;"><td style="width: 36.1805%; height: 29.7969px;">Campo FLECHAS  
  
</td><td style="width: 63.696%; height: 29.7969px;">Activa o desactiva las flechas de navegación (anterior/siguiente).</td></tr><tr style="height: 46.5938px;"><td style="width: 36.1805%; height: 46.5938px;">Campo FOCO</td><td style="width: 63.696%; height: 46.5938px;">Determina qué diapositiva queda activa o centrada cuando se muestran varias a la vez.  
  
</td></tr><tr style="height: 29.7969px;"><td style="width: 36.1805%; height: 29.7969px;">Interruptor REPRODUCCIÓN AUTOMÁTICA  
  
</td><td style="width: 63.696%; height: 29.7969px;">Activa/desactiva el avance automático del slider sin interacción del usuario.</td></tr><tr style="height: 46.5938px;"><td style="width: 36.1805%; height: 46.5938px;">Campo DIRECCIÓN  
  
</td><td style="width: 63.696%; height: 46.5938px;">Define el sentido de desplazamiento del slider (por ejemplo, de izquierda a derecha).  
  
</td></tr><tr style="height: 29.7969px;"><td style="width: 36.1805%; height: 29.7969px;">Campo PAGINACIÓN  
  
</td><td style="width: 63.696%; height: 29.7969px;">Activa o desactiva los indicadores del slider (puntos o marcadores de posición).</td></tr><tr style="height: 46.5938px;"><td style="width: 36.1805%; height: 46.5938px;">Campo INTERVALO</td><td style="width: 63.696%; height: 46.5938px;">Tiempo (ms) entre cambios automáticos de diapositiva (solo aplica si la reproducción automática está activada).  
  
</td></tr><tr style="height: 46.5938px;"><td style="width: 36.1805%; height: 46.5938px;">Lista de marcas disponibles (ej. PARKER-1, PIERRE CARDIN-2)</td><td style="width: 63.696%; height: 46.5938px;">Muestra las marcas disponibles para incluir en el bloque.  
  
  
</td></tr><tr style="height: 29.7969px;"><td style="width: 36.1805%; height: 29.7969px;">Interruptor junto a cada marca  
  
</td><td style="width: 63.696%; height: 29.7969px;">Permite activar o desactivar cada marca para que aparezca (o no) en el slider.</td></tr><tr style="height: 29.7969px;"><td style="width: 36.1805%; height: 29.7969px;">Vista previa de logos (columna izquierda)  
  
</td><td style="width: 63.696%; height: 29.7969px;">Muestra miniaturas de las marcas para identificarlas visualmente.</td></tr><tr style="height: 46.5938px;"><td style="width: 36.1805%; height: 46.5938px;">Mensaje “Los cambios se aplican automáticamente”  
  
</td><td style="width: 63.696%; height: 46.5938px;">Confirma que no es necesario guardar manualmente: los cambios se guardan automáticamente.</td></tr><tr style="height: 46.5938px;"><td style="width: 36.1805%; height: 46.5938px;">Botón CERRAR</td><td style="width: 63.696%; height: 46.5938px;">Cierra la ventana y vuelve a la pantalla anterior manteniendo la configuración aplicada.  
  
</td></tr></tbody></table>

# B21. Bloque tipo Recuperar bloques eliminados - Builder

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/vrsimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/vrsimage.png)

Permite restaurar bloques que han sido eliminados previamente dentro del constructor/maquetador. Normalmente muestra una lista de bloques eliminados para poder recuperarlos y volver a insertarlos en la página.

##### **1. Interfaz de bloque tipo "Recuperar bloques eliminados"** 

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/7mlimage.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/7mlimage.png)

<table id="bkmrk-elemento-%C2%A0-funcional"><thead><tr><th class="align-left">**Elemento**

</th><th class="align-left">**Funcionalidad**</th></tr></thead><tbody><tr><td>Opción Recuperar bloques eliminados  
  
</td><td>Abre la herramienta para restaurar bloques eliminados previamente en el constructor/maquetador.</td></tr><tr><td>Ventana Elementos eliminados</td><td>Modal donde se muestran los elementos/bloques borrados para poder gestionarlos (restaurar o eliminar definitivamente).  
  
</td></tr><tr><td>Botón X (arriba a la derecha)  
  
</td><td>Cierra la ventana de “Elementos eliminados”.</td></tr><tr><td>Tarjeta / Contenedor del elemento eliminado</td><td>Zona en donde se presentan los bloques eliminados. Disponibles para recuperar. Incluye una vista previa del contenido.  
  
</td></tr><tr><td>Vista previa (área con fondo cuadriculado)  
  
</td><td>Previsualización del contenido eliminado (el fondo cuadriculado suele indicar transparencia o que no se está mostrando la imagen completa).</td></tr><tr><td>Botón Papelera (abajo a la izquierda)  
  
</td><td>Elimina el elemento de forma definitiva de la lista de elementos recuperables.</td></tr><tr><td>Botón RESTAURAR E INSERTAR</td><td>Recupera el elemento eliminado y lo vuelve a insertar en la página/estructura actual del constructor.  
  
</td></tr><tr><td>Mensaje “Los cambios se aplican automáticamente”  
  
</td><td>Confirma que no es necesario guardar manualmente: los cambios se guardan automáticamente.</td></tr><tr><td>Botón CERRAR (abajo a la derecha)  
  
</td><td>Cierra la ventana/modal y vuelve a la pantalla anterior.</td></tr></tbody></table>

##### **2. Pasos para recuperar un bloque eliminado**

1. Clic en una columna
2. Hacer clic en tipo de bloque,, "Recuperar bloques eliminados".   
    localizar el bloque a recuperar.
3. Hacer clic en botón "RESTAURAR E INSERTAR".  
    El bloque con su contenido se mostrará en la columna en la que se ha hecho la acción.

Los bloques que se encuentran en "Recuperar bloques eliminados", pueden ser eliminados a voluntad.

# B22. Explorador de imágenes interfaz - Builder

  
  
Permite subir, explorar y organizar las imágenes en Builder

**Interfaz Explorador de imágenes**

[![image.png](https://kb.wakaprint.com/uploads/images/gallery/2026-01/scaled-1680-/Fu6image.png)](https://kb.wakaprint.com/uploads/images/gallery/2026-01/Fu6image.png)

<table id="bkmrk-elemento-%C2%A0-funcional-0" style="width: 100%;"><thead><tr><th class="align-left" style="width: 23.6094%;">Elemento

</th><th class="align-left" style="width: 76.3906%;">Funcionalidad</th></tr></thead><tbody><tr><td style="width: 23.6094%;">Botón Subir imagen (icono nube con flecha hacia arriba)  
  
</td><td style="width: 76.3906%;">Permite cargar/subir una imagen desde el dispositivo. Al hacer clic, abre el explorador de archivos para seleccionar una imagen y añadirla a la carpeta/categoría actual.</td></tr><tr><td style="width: 23.6094%;">Botón Menú / Carpetas (icono superior izquierdo)  
  
</td><td style="width: 76.3906%;">Abre el panel de navegación en formato lista (la pantalla con buscador y carpetas creadas. Sirve para cambiar rápidamente de carpeta de imágenes.  
  
</td></tr><tr><td style="width: 23.6094%;">Botón Volver (flecha arriba a la izquierda)</td><td style="width: 76.3906%;">Regresa al nivel anterior del explorador (por ejemplo, salir de una carpeta o volver a la pantalla previa).  
  
</td></tr><tr><td style="width: 23.6094%;">Panel de carpetas  
  
</td><td style="width: 76.3906%;">Muestra las carpetas o secciones disponibles para organizar imágenes. Permite navegar por el repositorio de archivos. Para crear nueva carpeta escribir el nombre en el campo **"New Folder"** y hacer clic en "OK".  
  
A tener en cuenta que para la optimización de SEO los nombres de las carpetas que tengan más de una palabra, **no deben tener espacios en blanco entre ellas.** En su lugar poner guion bajo o medio.  
  
Para **eliminar** una carpeta es requerido que no tenga imágenes. En estas condición se puede eliminar con el botón de icono lapicero.  
  
</td></tr><tr><td style="width: 23.6094%;">Flecha &gt; a la derecha de cada carpeta</td><td style="width: 76.3906%;">Indica que puedes entrar a esa carpeta para ver su contenido. Al pulsarla se abre la carpeta seleccionada.  
  
</td></tr><tr><td style="width: 23.6094%;">Barra de desplazamiento vertical (scroll)  
  
</td><td style="width: 76.3906%;">Permite bajar o subir para ver más carpetas o más imágenes disponibles en el explorador.</td></tr><tr><td style="width: 23.6094%;">Botón Nueva carpeta (icono carpeta con “+”)  
  
</td><td style="width: 76.3906%;">Crea una carpeta nueva dentro de la ubicación actual para organizar imágenes.</td></tr><tr><td style="width: 23.6094%;">Botón Editar (icono de lápiz, arriba a la derecha)  
  
</td><td style="width: 76.3906%;">Activa el modo edición del explorador. En este modo aparecen iconos de papelera sobre las miniaturas para poder eliminar imágenes. Al volver a pulsarlo, se desactiva el modo edición.</td></tr><tr><td style="width: 23.6094%;">Área de galería / miniaturas  
  
</td><td style="width: 76.3906%;">Muestra las imágenes disponibles dentro de la carpeta seleccionada en formato miniatura para elegirlas rápidamente.</td></tr><tr><td style="width: 23.6094%;">Miniatura de imagen</td><td style="width: 76.3906%;">Al hacer clic selecciona la imagen (y normalmente la inserta o la carga en el campo SRC del editor).  
  
</td></tr><tr><td style="width: 23.6094%;">Pantalla de carpetas (vista lista con buscador)</td><td style="width: 76.3906%;">Vista alternativa que se abre desde el icono superior izquierdo. Permite ver todas las categorías disponibles y cuántos elementos contiene cada una.  
  
</td></tr><tr><td style="width: 23.6094%;">Campo Search</td><td style="width: 76.3906%;">Permite buscar carpetas o categorías por nombre para encontrarlas más rápido.  
  
</td></tr><tr><td style="width: 23.6094%;">Contador numérico (ej. 77, 11, 19…)</td><td style="width: 76.3906%;">Indica cuántas imágenes o elementos hay dentro de cada categoría/carpeta.  
  
  
</td></tr><tr><td style="width: 23.6094%;">Nombre de carpetas (Content, Escaparate, etc.)</td><td style="width: 76.3906%;">Al hacer clic se accede directamente a esa categoría para ver sus imágenes.  
  
  
</td></tr></tbody></table>

<p class="callout info">  
Para cerrar el explorador de imagen hacer clic en cualquier espacio fuera de su interfaz  
  
</p>