MallaDocs
HomeQuickstartOpen Malla

Build a landing page

Draw a hero, a feature row and a call to action, make them responsive and publish to staging.

User guideNew
Beginner20 min

You will build: A one-page landing site with a hero, a feature row and a call to action, live on a staging URL

Read first: QuickstartTour of the editor

In this tutorial you draw a landing page on the canvas, lay it out with stacks, make it look good on phones and publish it. You only need an account and an empty site.

Build a landing pageVideo coming soon. The written steps below cover everything.
Build a landing page· 8 min

Create the site

  1. Start an empty site

    On the dashboard, press New site and name it Landing. The editor opens on the home page with three artboards: desktop, tablet and phone.

  2. Find your way around

    The toolbar is at the top, the layers and pages on the left, the inspector on the right. Press H or hold Space and drag to pan; pinch or use the zoom menu to zoom.

Draw the hero

  1. Draw a frame

    Press F for the frame tool and drag across the top of the desktop artboard. The page is a vertical stack, so the frame lands in the flow; drag across the full width and it gets width: 100%.

    Hold ⇧ for a square, ⌥ to draw from the center, ⌘ to turn snapping off, or press Esc to cancel.

  2. Make it a stack

    With the frame selected, open Layout in the inspector and set Type to Stack, Direction to Vertical (the down arrow) and Align to Center. Give it some Padding in the same section so the content breathes.

  3. Add a heading and a paragraph

    Press T and drag inside the frame. The text tool selects the placeholder, so just type your headline. Add a second text for the subtitle the same way.

  4. Add an image

    Press I and drag inside the frame, then pick an image in the Image section, or drop a file from the Assets tab onto the canvas. Write the alt text while you are there.

Checkpoint

The hero shows a centered headline, a subtitle and an image on all three artboards.

Add a feature row

  1. Draw the row

    Draw a new frame under the hero, set Layout → Type to Stack and Direction to Horizontal (the right arrow). Set Distribute to Space between.

  2. Build one card

    Inside the row, draw a frame for the first feature with a title and a short text.

  3. Style it through a class

    With the card selected, type feature-card in the class bar above the inspector sections. Click the new feature-card chip (or pick Class .feature-card in the Style target menu) so your edits go to the class, not to this layer. Now give it a fill and a border radius.

  4. Duplicate it

    Duplicate the card twice with ⌘D. The copies share the class, so a change to the class restyles all three.

Make it responsive

  1. Switch to the phone breakpoint

    Pick the phone breakpoint in the toolbar. Style edits now write to phone only, and larger breakpoints keep their values.

  2. Stack the cards

    Select the feature row and set Direction to Vertical. Check the phone artboard: the cards stack, while desktop still shows them side by side.

  3. Shrink the headline

    Select the headline and lower its font size in Typography. Overrides show which breakpoint a value comes from.

Add a call to action and publish

  1. Add a button

    Select the page frame, then press + in the Layers tab (or right-click the canvas) and choose Button. Type its label in the Text field of the Button section.

  2. Make it open your email

    Open the Link section of the button. A new button has no target, so Target shows None. Set it to URL and enter mailto: followed by your address, for example mailto:hello@example.com. The button now renders as a link styled like a button.

  3. Preview

    Press ⌘↵ to preview the page with links and interactions running. Press it again to go back to editing.

  4. Publish to staging

    Press Publish in the toolbar, keep Staging selected and confirm. Open the staging link to see your page live.

Done

Your landing page is live on its staging address, and it reflows on tablets and phones.

What you learned

  • Insert tools draw elements straight into the layout, and frames drawn around elements wrap them.
  • Stacks handle alignment and spacing; classes keep repeated elements consistent when you style the class, not the layer.
  • Breakpoints override styles for smaller screens without touching desktop.
  • The Link section sends a button or a link to a page or a URL, with no workflow needed.

Keep going with the next tutorials, or read the guides behind this one:

Canvas and artboardsPan, zoom, select and insert on an infinite canvas with one live artboard per breakpoint.Layout and stylingFlex, grid and free layouts, the style sections of the inspector, breakpoints and states.Classes and tokensReusable classes, combo classes, design tokens and fonts that keep a whole site consistent.PublishingStaging and production, instant publishes and how pages are rendered and cached.