Créer une landing page

Dans ce tutoriel, vous dessinez une landing page sur le canevas, vous l’organisez avec des piles, vous la rendez agréable sur téléphone et vous la publiez. Il vous suffit d’un compte et d’un site vide.

Créer le site

1. Démarrer un site vide

   Sur le tableau de bord, cliquez sur New site et nommez-le Landing. L’éditeur s’ouvre sur la page d’accueil avec trois plans de travail : ordinateur, tablette et téléphone.

2. Repérer les éléments de l’interface

   La barre d’outils est en haut, les calques et les pages à gauche, l’inspecteur à droite. Appuyez sur H ou maintenez Space enfoncée et faites glisser pour vous déplacer ; pincez ou utilisez le menu de zoom pour zoomer.

Dessiner le hero

1. Dessiner un cadre

   Appuyez sur F pour l’outil cadre et faites glisser en haut du plan de travail ordinateur. La page est une pile verticale, donc le cadre s’insère dans le flux ; faites glisser sur toute la largeur et il reçoit width: 100%.

   Maintenez ⇧ pour un carré, ⌥ pour dessiner depuis le centre, ⌘ pour désactiver le magnétisme, ou appuyez sur Esc pour annuler.

2. En faire une pile

   Le cadre sélectionné, ouvrez Layout dans l’inspecteur et réglez Type sur Stack, Direction sur Vertical (la flèche vers le bas) et Align sur Center. Ajoutez un peu de Padding dans la même section pour que le contenu respire.

3. Ajouter un titre et un paragraphe

   Appuyez sur T et faites glisser à l’intérieur du cadre. L’outil texte sélectionne le texte provisoire : tapez directement votre titre. Ajoutez un second texte pour le sous-titre de la même façon.

4. Ajouter une image

   Appuyez sur I et faites glisser à l’intérieur du cadre, puis choisissez une image dans la section Image, ou déposez un fichier de l’onglet Assets sur le canevas. Profitez-en pour écrire le texte alternatif.

Ajouter une rangée d’atouts

1. Dessiner la rangée

   Dessinez un nouveau cadre sous le hero, réglez Layout → Type sur Stack et Direction sur Horizontal (la flèche vers la droite). Réglez Distribute sur Space between.

2. Créer une carte

   Dans la rangée, dessinez un cadre pour le premier atout, avec un titre et un court texte.

3. La styliser via une classe

   La carte sélectionnée, tapez feature-card dans la barre de classes au-dessus des sections de l’inspecteur. Cliquez sur la nouvelle pastille feature-card (ou choisissez Class .feature-card dans le menu Style target) pour que vos modifications s’appliquent à la classe et non à ce calque. Donnez-lui ensuite un remplissage et un arrondi d’angle.

4. La dupliquer

   Dupliquez la carte deux fois avec ⌘D. Les copies partagent la classe : modifier la classe restylise les trois cartes.

Rendre la page responsive

1. Passer au point de rupture téléphone

   Choisissez le point de rupture téléphone dans la barre d’outils. Les modifications de style ne concernent plus que le téléphone, et les points de rupture plus grands gardent leurs valeurs.

2. Empiler les cartes

   Sélectionnez la rangée d’atouts et réglez Direction sur Vertical. Regardez le plan de travail téléphone : les cartes s’empilent, alors que l’ordinateur les affiche toujours côte à côte.

3. Réduire le titre

   Sélectionnez le titre et diminuez sa taille de police dans Typography. Les remplacements indiquent de quel point de rupture vient une valeur.

Ajouter un appel à l’action et publier

1. Ajouter un bouton

   Sélectionnez le cadre de la page, puis cliquez sur + dans l’onglet Layers (ou faites un clic droit sur le canevas) et choisissez Button. Tapez son libellé dans le champ Text de la section Button.

2. Lui faire ouvrir votre messagerie

   Ouvrez la section Link du bouton. Un nouveau bouton n’a pas de cible, donc Target affiche None. Réglez-le sur URL et saisissez mailto: suivi de votre adresse, par exemple mailto:hello@example.com. Le bouton s’affiche maintenant comme un lien stylisé comme un bouton.

3. Prévisualiser

   Appuyez sur ⌘↵ pour prévisualiser la page avec les liens et les interactions actifs. Appuyez de nouveau pour revenir à l’édition.

4. Publier en préproduction

   Cliquez sur Publish dans la barre d’outils, laissez Staging sélectionné et confirmez. Ouvrez le lien de préproduction pour voir votre page en ligne.

Ce que vous avez appris

• Les outils d’insertion dessinent les éléments directement dans la mise en page, et un cadre dessiné autour d’éléments les enveloppe.
• Les piles gèrent l’alignement et l’espacement ; les classes gardent les éléments répétés cohérents, à condition de styliser la classe et non le calque.
• Les points de rupture remplacent les styles pour les petits écrans sans toucher à l’ordinateur.
• La section Link envoie un bouton ou un lien vers une page ou une URL, sans workflow.

Continuez avec les tutoriels suivants, ou lisez les guides sur lesquels celui-ci s’appuie :