Ce parcours crée un petit site avec un hero, une liste d’articles de blog alimentée par le CMS et un formulaire de contact, puis le publie. Chaque étape renvoie au guide qui la couvre en détail.
Créez votre premier site
Créez un compte et un site
Inscrivez-vous, puis cliquez sur New site dans le tableau de bord. Donnez-lui un nom, ou choisissez un modèle pour partir d’un design terminé. L’éditeur s’ouvre sur la page d’accueil.
Dessinez le hero
Appuyez sur F pour l’outil cadre et faites glisser sur le plan de travail desktop. Ajoutez un titre avec T et une image avec I. Dans l’inspecteur, réglez la mise en page du cadre sur Stack, centrez-le et ajoutez-lui du padding.
Regardez les plans de travail tablette et mobile : ils se mettent à jour en direct. Choisissez un point de rupture dans la barre d’outils pour remplacer une valeur uniquement sur les petits écrans.
Rendez-le cohérent
Ouvrez Tokens dans l’inspecteur et définissez la couleur et les polices de votre marque. Sélectionnez le titre, tapez un nom de classe dans la barre de classes (par exemple
heading-xl) et réutilisez-la partout. Modifiez la classe une fois et tous les titres suivent.Ajoutez du contenu depuis le CMS
Ouvrez l’espace de travail CMS en bas de la barre latérale gauche, créez une collection Posts avec un titre, un slug, une image de couverture et un corps, puis ajoutez quelques éléments. De retour sur le canevas, insérez une Collection list, pointez-la vers Posts et liez le texte de la carte à
item.title.Ajoutez un formulaire de contact
Insérez un Form, puis un Input e-mail et un Text area à l’intérieur. Les soumissions arrivent dans l’espace de travail Forms, protégées par Turnstile et une limitation de débit.
Animez quelque chose
Sélectionnez le hero et ouvrez Interactions dans l’inspecteur. Choisissez le préréglage Fade in on load et appuyez sur ⌘↵ pour l’afficher en aperçu.
Publiez
Cliquez sur Publish dans la barre d’outils et choisissez Staging. Votre site est en ligne à son adresse de préproduction en quelques instants. Quand le résultat vous convient, publiez en Production et connectez votre propre domaine.
Pour aller plus loin
Vous êtes passé une fois par chaque partie de Malla. Chaque guide ci-dessous va plus loin. Vous pouvez aussi parcourir les concepts clés pour le vocabulaire.