MallaDocs
InicioInicio rápidoAbrir Malla

Construye una landing page

Dibuja un hero, una fila de características y una llamada a la acción, hazlos responsive y publica en staging.

Guía de usuarioNuevo
Principiante20 min

Vas a construir: Un sitio de una sola página con un hero, una fila de características y una llamada a la acción, en línea en una URL de staging

Lee primero: Inicio rápidoRecorrido por el editor

En este tutorial dibujas una landing page en el lienzo, la organizas con stacks, haces que se vea bien en teléfonos y la publicas. Solo necesitas una cuenta y un sitio vacío.

Construye una landing pageEl video llegará pronto. Los pasos escritos a continuación cubren todo.
Construye una landing page· 8 min

Crea el sitio

  1. Empieza un sitio vacío

    En el dashboard, presiona New site y llámalo Landing. El editor se abre en la página de inicio con tres mesas de trabajo: escritorio, tablet y teléfono.

  2. Ubícate

    La barra de herramientas está arriba, las capas y las páginas a la izquierda y el inspector a la derecha. Presiona H o mantén Space y arrastra para desplazarte; pellizca o usa el menú de zoom para acercar y alejar.

Dibuja el hero

  1. Dibuja un frame

    Presiona F para la herramienta de frame y arrastra sobre la parte superior de la mesa de trabajo de escritorio. La página es un stack vertical, así que el frame entra en el flujo; si arrastras a lo ancho de toda la mesa, recibe width: 100%.

    Mantén ⇧ para un cuadrado, ⌥ para dibujar desde el centro, ⌘ para desactivar el ajuste magnético, o presiona Esc para cancelar.

  2. Conviértelo en un stack

    Con el frame seleccionado, abre Layout en el inspector y pon Type en Stack, Direction en Vertical (la flecha hacia abajo) y Align en Center. Dale algo de Padding en la misma sección para que el contenido respire.

  3. Agrega un título y un párrafo

    Presiona T y arrastra dentro del frame. La herramienta de texto selecciona el texto de ejemplo, así que solo escribe tu titular. Agrega un segundo texto para el subtítulo de la misma forma.

  4. Agrega una imagen

    Presiona I y arrastra dentro del frame; luego elige una imagen en la sección Image, o suelta un archivo de la pestaña Assets sobre el lienzo. Aprovecha para escribir el texto alternativo.

Punto de control

El hero muestra un titular centrado, un subtítulo y una imagen en las tres mesas de trabajo.

Agrega una fila de características

  1. Dibuja la fila

    Dibuja un nuevo frame debajo del hero, pon Layout → Type en Stack y Direction en Horizontal (la flecha hacia la derecha). Pon Distribute en Space between.

  2. Crea una tarjeta

    Dentro de la fila, dibuja un frame para la primera característica con un título y un texto corto.

  3. Dale estilo con una clase

    Con la tarjeta seleccionada, escribe feature-card en la barra de clases que está encima de las secciones del inspector. Haz clic en la nueva etiqueta feature-card (o elige Class .feature-card en el menú Style target) para que tus cambios vayan a la clase y no a esta capa. Ahora dale un relleno y un radio de borde.

  4. Duplícala

    Duplica la tarjeta dos veces con ⌘D. Las copias comparten la clase, así que un cambio en la clase cambia el estilo de las tres.

Hazlo responsive

  1. Cambia al punto de quiebre de teléfono

    Elige el punto de quiebre de teléfono en la barra de herramientas. Ahora los cambios de estilo se aplican solo al teléfono, y los puntos de quiebre más grandes conservan sus valores.

  2. Apila las tarjetas

    Selecciona la fila de características y pon Direction en Vertical. Revisa la mesa de trabajo de teléfono: las tarjetas se apilan, mientras que en escritorio siguen una al lado de la otra.

  3. Reduce el titular

    Selecciona el titular y baja su tamaño de fuente en Typography. Las sobrescrituras muestran de qué punto de quiebre viene cada valor.

Agrega una llamada a la acción y publica

  1. Agrega un botón

    Selecciona el frame de la página y luego presiona + en la pestaña Layers (o haz clic derecho en el lienzo) y elige Button. Escribe su etiqueta en el campo Text de la sección Button.

  2. Haz que abra tu email

    Abre la sección Link del botón. Un botón nuevo no tiene destino, así que Target muestra None. Cámbialo a URL y escribe mailto: seguido de tu dirección, por ejemplo mailto:hola@example.com. Ahora el botón se renderiza como un enlace con estilo de botón.

  3. Vista previa

    Presiona ⌘↵ para ver la página con los enlaces y las interacciones funcionando. Presiónalo otra vez para volver a editar.

  4. Publica en staging

    Presiona Publish en la barra de herramientas, deja Staging seleccionado y confirma. Abre el enlace de staging para ver tu página en línea.

Listo

Tu landing page está en línea en su dirección de staging y se reacomoda en tablets y teléfonos.

Lo que aprendiste

  • Las herramientas de inserción dibujan los elementos directamente en el layout, y los frames dibujados alrededor de elementos los envuelven.
  • Los stacks se encargan de la alineación y el espaciado; las clases mantienen consistentes los elementos repetidos cuando le das estilo a la clase y no a la capa.
  • Los puntos de quiebre sobrescriben estilos para pantallas más pequeñas sin tocar el escritorio.
  • La sección Link lleva un botón o un enlace a una página o a una URL, sin necesidad de un flujo de trabajo.

Sigue con los próximos tutoriales o lee las guías en las que se basa este:

Lienzo y mesas de trabajoDesplázate, haz zoom, selecciona e inserta en un lienzo infinito con una mesa de trabajo en vivo por punto de quiebre.Layout y estilosLayouts flex, grid y libres, las secciones de estilo del inspector, los puntos de quiebre y los estados.Clases y tokensClases reutilizables, clases combinadas, tokens de diseño y fuentes que mantienen todo un sitio consistente.PublicaciónStaging y producción, publicaciones instantáneas y cómo se renderizan y cachean las páginas.