B. Builder

• B1. Introducción - Builder
• B2. Activar en elementos del menú - Builder
• B3. Activar en páginas de contenido - Builder
• B4. Añadir fila - Builder
• B5. Interfaz de fila - Builder
• B6. Añadir columnas introducción - Builder
• B7. Añadir columnas a la fila - Builder
• B8. Interfaz columna introducción - Builder
• B9. Interfaz configuración columna botón icono brocha - Builder
• B10. Columna botón icono engranaje - Ajustes - Ancho columnas - Builder
• B11. Añadir contenido en columnas - Builder
• B12. Tipos de bloques introducción - Builder
• B13. Bloque tipo Editor de texto - Builder
• B14. Bloque tipo Imagen - Builder
• B15. Bloque tipo Lista de iconos - Builder
• B16. Bloque tipo Producto - Builder
• B17. Bloque tipo Categoría - Builder
• B18. Bloque tipo Editor de código HTML - Builder
• B19. Bloque tipo Slider - Builder
• B20. Bloque tipo Marcas - Builder
• B21. Bloque tipo Recuperar bloques eliminados - Builder
• B22. Explorador de imágenes interfaz - 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:





Ejemplo de de página de instrucciones de archivo creada con página de contenido con Builder activado:

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:

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:

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".

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.

Elemento	Función
	Nombre e ID del elemento del menú principal.
	Botón activar el maquetador Builder. En blanco desactivado. En magenta, Activado
	Botón  para cerrar el menú de ajustes.

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.

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

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".

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.

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.

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 > Páginas.

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. 

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

Elemento	Función
	Campo para escribir nombre de la página. El nombre es tomado como meta título de la página.
	Campo para escribir descripción de la página. Es tomado como meta descripción de la página.
	Botón para que definir el estado de la página.  En blanco, está publicada. En magenta, no está publicada.
	Botón para activar Buider. En blanco, desactivado. En magenta, activado.
	Botón para guardar los cambios. Crea la página y accede al editor de la página con Builder.

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.

Elemento	Función
	Selector para definir la página padre en la que estará anidada.
	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.

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

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.

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". 

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

B4. Añadir fila - Builder

1. Añadir fila

Hacer clic en botón añadir fila.

Se crea una fila. No tiene contenido.

2. Interfaz de fila

Elemento	Función
	Botón para que acceder a ajustes de fila.
	Botón para añadir bloques vacíos en la fila.
	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.
	Botón para activar Buider. En blanco, desactivado. En magenta, activado.
	Botón para guardar los cambios. Crea la página y accede al editor de la página con Builder.

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

3.1 Fila interfaz > Ajustes > FONDO

Elemento	Función
	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.
	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.
	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.
	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.
	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".
	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.

3.2  Fila interfaz > Ajustes > ESPACIADO

Permite ajustar el espaciado interior y el margen en vertical respecto a otras filas adyacentes.

B5. Interfaz de fila - Builder

Elemento	Función
	Botón para que acceder a ajustes de fila.
	Botón para añadir bloques vacíos en la fila.
	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.
	Botón para activar Buider. En blanco, desactivado. En magenta, activado.
	Botón para guardar los cambios. Crea la página y accede al editor de la página con Builder.

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

1.1 Fila interfaz > Ajustes > FONDO

Elemento	Función
	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.
	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.
	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.
	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.
	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".
	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.

1.2  Fila interfaz > Ajustes > ESPACIADO

Permite ajustar el espaciado interior y el margen en vertical respecto a otras filas adyacentes.

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.

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

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.

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

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

Añadir o definir el contenido a mostrar. 

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

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

Importante. El alto de la fila lo determina el bloque o columna más alta.

B7. Añadir columnas a la fila - Builder

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

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

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. 

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.

El alto de la fila lo definirá el elemento más alto que se presente en un bloque.

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

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.

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

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

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.

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

1.2 Interfaz configuración de la columna

1.2.1. Interfaz de FONDO

Elemento	Función
	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.
	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.
	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.
	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".
	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.

1.2.2. Interfaz de ESPACIADO DE COLUMNA

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

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. 

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)
  
  
  

 

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

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.

Elemento	Función
Botón  "Usar el mismo ancho para todas las pantallas"  activado.	En magenta muestra la columna en el mismo ancho en todos los tamaños de pantalla.
Botón  "Usar el mismo ancho para todas las pantallas"  desactivado.	Abre ajustes para definir ancho que ocupará la columna en los diferentes tamaños de pantalla. LG, MD, SM y XS.
Botón tipo icono	Para eliminar columna
Botón "Cerrar"	Cierra la interfaz

3. Interfaz de ajustes para diferentes anchos de columna   

Elemento	Función
Tamaño de columna LG	Ajuste para ancho en vista pantallas grandes (Monitores)
Tamaño de columna MD	Ajuste para ancho en vista pantallas medianas (Monitores)
Tamaño de columna SM	Ajuste para ancho en vista pantallas pequeñas (Tablets)
Tamaño de columna XS	Ajuste para ancho en vista pantallas más pequeñas (Móviles)

Para vista en pantallas SM y XS se recomienda poner 6 o 12 unidades. 

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.
  
  
  
  

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.
  
  

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 "+".

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:

En las siguientes páginas de este capítulo se explican sus interfaces.

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". 

Se pueden añadir múltiples bloques en cada columna.

2. Interfaz general en bloques

Elemento	Funcionalidad
Icono izquierdo (arriba izquierda)	Acceder a Accede a opciones avanzadas del elemento.
Icono Engranaje (segundo arriba izquierda)	Acceder a la configuración del tipo del elemento.
Pestaña (icono de tres líneas, arriba derecha)	Mover bloque en la fila. Reposicionar.
Previsualización	Muestra el una vista previa del contenido que tiene el bloque.
Botón Papelera (abajo izquierda)	Elimina el bloque. Los bloques eliminados son recuperables.
Botón EDITAR (abajo derecha)	Abre la edición del elemento para modificar sus datos (nombre, contenido, configuración, etc.).

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.

En las siguientes páginas de este capítulo del manual se explican cada uno de los tipos.

B13. Bloque tipo Editor de texto - Builder

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. 

Detalles interfaz de bloque tipo Texto

Elemento	Funcionalidad
Selector de estilo (“Normal”)	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.
B (Negrita)	Pone el texto seleccionado en negrita.
I (Cursiva)	Pone el texto seleccionado en cursiva.
U (Subrayado)	Subraya el texto seleccionado.
S (Tachado)	Tacha el texto seleccionado (útil para indicar información anulada o no válida).
Alineación (icono de líneas)	Cambia la alineación del texto (izquierda, centrado, derecha o justificado según la configuración del editor).
Enlace (icono de cadena)	Inserta o edita un enlace (URL) en el texto seleccionado.
Comillas (icono de “ ”)	Aplica formato de cita o bloque de cita al texto.
Texto/Color (icono “A”)	Permite cambiar el color del texto (y en algunos editores también el color de fondo/resaltado).
Lista numerada (icono 1,2,3)	Crea una lista ordenada (numerada).
Lista con viñetas (icono con puntos)	Crea una lista no ordenada (con viñetas).
Sangría izquierda (flecha hacia la izquierda)	Reduce la sangría del párrafo o del elemento de lista (mueve el texto hacia la izquierda).
Sangría derecha (flecha hacia la derecha)	Aumenta la sangría del párrafo o del elemento de lista (mueve el texto hacia la derecha).
Borrar formato (Tx)	Elimina estilos aplicados al texto seleccionado (negrita, cursiva, colores, etc.) y lo devuelve a formato normal.
Área de edición	Zona donde se escribe y edita el contenido del texto.
Mensaje “Los cambios se aplican automáticamente”	Indica que no hace falta guardar manualmente: los cambios se guardan solos.
Botón CERRAR	Cierra el editor y vuelve a la pantalla anterior sin necesidad de guardar (porque el guardado es automático).

B14. Bloque tipo Imagen - Builder

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

Interfaz de bloque de imagen

Elemento	Funcionalidad
Vista previa de imagen (parte superior)	Muestra una previsualización de la imagen seleccionada o cargada para confirmar que es la correcta antes de guardar/cerrar.
Fondo cuadriculado (transparencia)	Indica zonas transparentes de la imagen (típico patrón de transparencia).
Campo SRC	Contiene la ruta o enlace de origen de la imagen. Es el archivo que se mostrará en el contenido.
Botón EXPLORAR	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.
Campo ALT	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.
Campo URL	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.
Mensaje “Los cambios se aplican automáticamente”	Indica que cualquier cambio se guarda automáticamente sin necesidad de un botón “Guardar”.
Botón CERRAR	Cierra la ventana de edición y vuelve a la pantalla anterior. Los cambios quedan guardados automáticamente.

Consultar la página de este capítulo llamada "Builder - Explorador de archivos" para conocer como se suben las imágenes.

B15. Bloque tipo Lista de iconos - Builder

Permite crear una lista de enlaces con iconos.

1. Lista de iconos interfaz de creación

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

2. Añadir icono interfaz

Elemento	Explicación de la funcionalidad
Campo ICONO o URL	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).
Proceso: Cambiar el icono (Font Awesome)	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.
Importante: No usar HTML	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).
Botón EXPLORAR	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.
Nota “Déjelo en blanco para desactivar…”	Si el campo ICONO o URL se deja vacío, el icono del elemento se desactiva y no se mostrará.
Confirmación de guardado automático	El sistema guarda el cambio automáticamente, por lo que no es necesario pulsar “Guardar”. Para salir, se puede usar el botón CERRAR.

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/.  Nombre del icono "shopping-cart". El color de los iconos lo toma por el estilo del tema. Color primario.
   

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.
  
  
  

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/.  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.
  
  

B16. Bloque tipo Producto - Builder

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

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.

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

Seleccionar el que se quiera presentar en la columna.

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.
  
  
  

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

B17. Bloque tipo Categoría - Builder

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.

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

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.

El mismo bloque en la vista publica.

Ejemplo 2: Categoría imprenta con "Mostrar imágenes" activado.

Vista del bloque en la fila desde la página en el gestor.

El mismo bloque en la vista publica.

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

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.

•  Vista desde el gestor del bloque tipo Editor de código HTML, estando vacío.

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

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

 

 

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

 

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

B19. Bloque tipo Slider - Builder

Permite crear un slider.

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.

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.

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 "+".

1. Interfaz de edición de diapositivas

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

Elemento	Funcionalidad
Título Opciones del Slider	Indica que esta ventana sirve para configurar el contenido y opciones del slider (carrusel).
Botón X (arriba a la derecha)	Cierra la ventana/modal de configuración del slider.
Botón ⚙️ (Configuración)	Accede a opciones avanzadas del slider (por ejemplo: comportamiento, velocidad, paginación, etc.).
Área punteada de carga / inserción	Zona destinada a añadir contenido al slider. Funciona como contenedor de elementos (imágenes) del carrusel.
Botón + (dentro del área punteada)	Permite añadir una o más imágenes al slider abriendo el selector/explorador de imágenes.
Texto de ayuda (“Para añadir imágenes…”)	Indica al usuario cómo usar el botón + para añadir imágenes al slider.
Mensaje “Los cambios se aplican automáticamente”	Confirma que los cambios se guardan automáticamente sin necesidad de botón “Guardar”.
Botón CERRAR (abajo a la derecha)	Cierra la ventana y vuelve a la pantalla anterior manteniendo los cambios realizados.

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.

2. Interfaz de ajustes de bloque tipo Slider

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

B20. Bloque tipo Marcas - Builder

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 > Catálogo > 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.

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.

El modo Slider presenta una interfaz de ajustes

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

B21. Bloque tipo Recuperar bloques eliminados - Builder

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"

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

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

Elemento	Funcionalidad
Botón Subir imagen (icono nube con flecha hacia arriba)	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.
Botón Menú / Carpetas (icono superior izquierdo)	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.
Botón Volver (flecha arriba a la izquierda)	Regresa al nivel anterior del explorador (por ejemplo, salir de una carpeta o volver a la pantalla previa).
Panel de carpetas	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.
Flecha > a la derecha de cada carpeta	Indica que puedes entrar a esa carpeta para ver su contenido. Al pulsarla se abre la carpeta seleccionada.
Barra de desplazamiento vertical (scroll)	Permite bajar o subir para ver más carpetas o más imágenes disponibles en el explorador.
Botón Nueva carpeta (icono carpeta con “+”)	Crea una carpeta nueva dentro de la ubicación actual para organizar imágenes.
Botón Editar (icono de lápiz, arriba a la derecha)	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.
Área de galería / miniaturas	Muestra las imágenes disponibles dentro de la carpeta seleccionada en formato miniatura para elegirlas rápidamente.
Miniatura de imagen	Al hacer clic selecciona la imagen (y normalmente la inserta o la carga en el campo SRC del editor).
Pantalla de carpetas (vista lista con buscador)	Vista alternativa que se abre desde el icono superior izquierdo. Permite ver todas las categorías disponibles y cuántos elementos contiene cada una.
Campo Search	Permite buscar carpetas o categorías por nombre para encontrarlas más rápido.
Contador numérico (ej. 77, 11, 19…)	Indica cuántas imágenes o elementos hay dentro de cada categoría/carpeta.
Nombre de carpetas (Content, Escaparate, etc.)	Al hacer clic se accede directamente a esa categoría para ver sus imágenes.

Para cerrar el explorador de imagen hacer clic en cualquier espacio fuera de su interfaz