Este recorrido construye un sitio pequeño con un hero, una lista de blog alimentada por el CMS y un formulario de contacto, y luego lo publica. Cada paso enlaza a la guía que lo cubre a fondo.
Construye tu primer sitio
Crea una cuenta y un sitio
Regístrate y luego presiona New site en el dashboard. Ponle un nombre o elige una plantilla para empezar desde un diseño terminado. El editor se abre en la página de inicio.
Dibuja el hero
Presiona F para la herramienta de frame y arrastra sobre la mesa de trabajo de escritorio. Agrega un encabezado con T y una imagen con I. En el inspector, cambia el layout del frame a Stack, céntralo y dale padding.
Mira las mesas de trabajo de tablet y teléfono: se actualizan en vivo. Elige un punto de quiebre en la barra de herramientas para sobrescribir un valor solo en pantallas más pequeñas.
Hazlo consistente
Abre Tokens en el inspector y define el color y las fuentes de tu marca. Selecciona el encabezado, escribe un nombre de clase en la barra de clases (por ejemplo
heading-xl) y reúsala en todas partes. Cambia la clase una vez y todos los encabezados la siguen.Agrega contenido desde el CMS
Abre el espacio de trabajo CMS desde la parte inferior de la barra lateral izquierda, crea una colección Posts con título, slug, imagen de portada y cuerpo, y agrega algunos ítems. De vuelta en el lienzo, inserta una Collection list, apúntala a Posts y enlaza el texto de la tarjeta a
item.title.Agrega un formulario de contacto
Inserta un Form y luego un Input de email y un Text area dentro de él. Los envíos llegan al espacio de trabajo Forms, protegidos por Turnstile y límites de frecuencia.
Anima algo
Selecciona el hero y abre Interactions en el inspector. Elige el preset Fade in on load y presiona ⌘↵ para previsualizarlo.
Publica
Presiona Publish en la barra de herramientas y elige Staging. Tu sitio queda en línea en su dirección de staging en un momento. Cuando estés conforme, publica en Production y conecta tu propio dominio.
A dónde ir después
Pasaste una vez por cada parte de Malla. Cada guía de abajo profundiza más. También puedes revisar los conceptos básicos para conocer el vocabulario.