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