# Constructor

El constructor es el editor de la tienda con arrastrar y soltar. Con él armas toda la
tienda a tu manera (encabezado, pie, cada página), cambias colores, fuentes y textos, sin
escribir código. El resultado es el diseño **Personalizado**.

Para abrirlo: **Personalización > Apariencia de la Tienda**, pestaña **Diseño**, botón
**Abrir el constructor**.

![El constructor: bloques a la izquierda, la tienda en el centro y las opciones del bloque a la derecha](shots/appearance-builder.webp)

## Las partes de la pantalla

- **A la izquierda**, las herramientas: **Bloques** (lo que puedes poner en la página),
  **Capas** (la estructura de la página), **Páginas** y **Tema de la tienda**.
- **En el centro**, tu tienda real, en modo edición, con tus productos.
- **A la derecha**, las opciones de lo que esté seleccionado, en dos pestañas:
  **Contenido** y **Estilo**.
- **Arriba**, la página en edición, el idioma de los textos, el tamaño de pantalla
  (**Computadora**, **Tablet** o **Celular**), el modo claro u oscuro, deshacer y rehacer,
  el **Enlace de vista previa** y **Publicar**.

## Empezar el sitio

Al abrir el constructor por primera vez, elige un modelo:

| Modelo | Qué trae |
| --- | --- |
| En blanco | Solo el encabezado y el pie. El resto queda a tu cargo |
| Vitrina | Portada del servidor, productos, meta, ranking y novedades, ya colocados |
| A partir del Clásico, Aurora, Celeste o Prisma | Empieza igual al diseño listo, para cambiar lo que quieras |

## Armar la página

1. En **Bloques**, arrastra un bloque a la tienda, o haz clic para agregarlo cerca de lo
   que esté seleccionado. Hay bloques de estructura (**Sección**, **Columnas**, **Espacio**,
   **Divisor**) y de contenido (**Título**, **Texto**, **Imagen**, **Botón**, **Ícono**,
   **Video**, **Lista**, **Tarjeta**, **Galería**, **Testimonio**, **Cuenta regresiva**,
   **Preguntas y respuestas** y los de la tienda).
2. En **Secciones listas**, arrastra una sección ya armada y con estilo, como **Portada con
   imagen de fondo**, **Productos destacados**, **Tres ventajas** o **Llamado a Discord**, y
   cambia los textos.
3. Haz clic en un bloque para ver sus opciones a la derecha. Con doble clic en un texto
   vas directo a él.
4. En la pestaña **Estilo**, cambia el color, el espaciado y la alineación de ese bloque.

> [!TIP]
> El constructor guarda solo en cada pausa: **Borrador guardado** aparece arriba. Nada
> llega a los jugadores hasta que hagas clic en **Publicar**.

## Páginas

**Páginas** tiene las páginas de la tienda (Inicio, Tienda, Foro, Soporte y las demás) y
**Tus páginas**, que creas con **Nueva página**. La dirección sale del nombre, y **Mostrar
en el menú** agrega la página a los menús.

El encabezado y el pie valen para todas las páginas. Al hacer clic en el encabezado aparece
dónde queda: arriba, a la izquierda o a la derecha.

## Tema de la tienda

**Tema de la tienda** reúne lo que vale para toda la tienda:

- **Paletas listas** y **Colores de la marca**;
- **Claro y oscuro**: los modos de la tienda y en cuál abre;
- **Fuentes**: de títulos y de texto;
- **Botones, tarjetas y campos**: esquinas y estilo;
- **Fondo de la tienda** y **Ancho y animaciones**;
- **Encabezado y menú**: dónde queda, su estilo y si sigue el desplazamiento.

## Textos en otros idiomas

El selector **PT**, **EN**, **ES** cambia el idioma de los textos que estás editando.
Cuando faltan textos en un idioma, el aviso dice cuántos. **Traducir lo que falta** usa IA
para traducir de un idioma a otro; revisa antes de publicar.

## Publicar y usar en la tienda

1. Usa el **Enlace de vista previa** para ver el borrador en la dirección de la tienda y
   enviárselo a alguien. La tienda en línea sigue igual.
2. Haz clic en **Publicar**. Si hay un problema en el borrador, la pantalla muestra los
   avisos arriba.
3. La primera vez, responde **Usar en la tienda ahora** para que la tienda empiece a abrir
   con el sitio que armaste.

Cada publicación se vuelve una versión en **Versiones publicadas**; **Restaurar** trae una
versión anterior de vuelta al borrador.

> [!NOTE]
> Volver a un diseño listo en **Apariencia de la Tienda > Diseño** mantiene el sitio
> guardado: puedes regresar a él después. Mientras la tienda usa el tema en código, el
> constructor queda apagado.

> [!WARNING]
> Si el mismo sitio se guarda en otra pestaña o por otra persona, aparece el aviso **El
> borrador cambió en otro lugar**, y nada se guarda hasta que elijas: **Usar la versión
> guardada** carga la almacenada, y **Mantener la mía** escribe la de esta pestaña encima.