---
url: "/es/weblify/build/site-builder.md"
description: "Crea páginas de Weblify a partir de plantillas, secciones, elementos y estructuras de diseño responsive."
---

# Crear un sitio web en Figma

> Crea páginas de Weblify a partir de plantillas, secciones, elementos y estructuras de diseño responsive.

Las pestañas **Add**, **Navigator** y **Style** de Weblify crean y editan páginas web como capas de Figma editables. Las capas generadas conservan los metadatos de Weblify para que el plugin pueda previsualizarlas, auditarlas y exportarlas como un sitio web estático.

## Crear una página {#start-a-page}

1. Abre la pestaña **Navigator**, escribe un nombre en **New page name** y selecciona **Add page**. O abre la pestaña **Add**, elige **Templates** y selecciona una plantilla para añadirla como una página nueva con el nombre de la plantilla.
2. Selecciona la página generada en el lienzo de Figma, o en **Navigator**, antes de añadir contenido.

Si no hay nada seleccionado, Weblify usa la primera página de Weblify que encuentra o crea una página llamada **Home**. La línea que hay debajo de los filtros de la pestaña **Add** indica dónde se insertará el contenido nuevo.

## Añadir secciones y elementos {#add-sections-and-elements}

La pestaña **Add** es una única biblioteca en la que puedes buscar. Usa los filtros **Templates**, **Sections**, **Elements** y **Layouts**, o busca por nombre. Usa **Sections** para áreas completas de la página, como la navegación, el hero, el contenido, los precios, los formularios y los pies de página. Usa **Elements** para componentes individuales. Selecciona un elemento para insertarlo.

Selecciona una página, sección o columna de Weblify antes de insertar un elemento. Así Weblify tiene un elemento padre previsible y la estructura exportada se mantiene intacta.

Marca un elemento con una estrella para añadirlo a **Favourites**. Para reutilizar una de tus propias secciones, abre su menú **⋯** en **Navigator** y elige **Save to My sections**; a partir de ahí aparece en **My sections**, en la pestaña **Add**.

## Editar la estructura {#edit-the-structure}

La pestaña **Navigator** muestra tus páginas y las secciones de la página actual. Puedes:

- Añadir páginas, arrastrar páginas y secciones para reordenarlas, y usar el menú **⋯** para renombrarlas, duplicarlas, ocultarlas o eliminarlas, o para definir la página de inicio.
- Seleccionar el botón **⚙** que hay junto a una página para editar su URL y sus metadatos para buscadores, y después seleccionar **Save page**.
- Usar el menú **⋯** de una sección para mostrarla en todas las páginas como cabecera o pie de página.

Los metadatos de la página incluyen el título, la descripción, la URL canónica, los campos para compartir en redes sociales, el favicon, el tipo de tarjeta de Twitter y el ajuste para buscadores.

Para configurar cómo se adapta en tablets y móviles la sección, fila, cuadrícula o columna seleccionada, abre la pestaña **Style** y despliega **Responsive**.

## Aplicar estilos e imágenes {#apply-styles-and-images}

Abre la pestaña **Style** y despliega **Brand styles** para revisar los temas, colores, tipografía y radio de las esquinas que usa el contenido generado. Despliega **Images** para ver la lista de imágenes de marcador de posición y sustituirlas por URL de imágenes reales antes de exportar.

Abre la pestaña **Preview** para comprobar el sitio web actual sin salir del plugin.