Le canevas est une surface infinie que vous pouvez zoomer. Chaque page s’affiche sous forme de trois plans de travail côte à côte, desktop, tablette et mobile, et chacun est un rendu en direct de la même page. Modifiez l’un et les autres se mettent à jour instantanément.
Se déplacer
| Action | Comment |
|---|---|
| Se déplacer | Faites défiler avec deux doigts, maintenez Space et faites glisser, ou utilisez l’outil Hand H. |
| Zoomer | Pincez, ou ⌘ + défilement. Le zoom reste centré sur le curseur. |
| Zoom avant / arrière | ⌘= / ⌘- |
| Ajuster à l’écran | ⇧1 |
| Zoom à 100 % | ⇧0 |
Les plans de travail sont de vrais navigateurs
Chaque plan de travail est un cadre isolé (sandbox) aussi large que son point de rupture (1440, 768 et 390 px). Les media queries, position: fixed, les effets de défilement et les polices se comportent exactement comme sur le site en ligne. Les plans de travail des pages s’agrandissent avec leur contenu.
Sélectionner et modifier
- Un clic sélectionne l’élément de premier niveau sous le curseur ; un double-clic descend dans ses enfants. Double-cliquez sur un texte pour le modifier sur place.
- ⇧ + clic ajoute à la sélection. ⌘A sélectionne tout, Esc désélectionne, ⇧↵ sélectionne le parent.
- Faites glisser un élément sélectionné pour le déplacer. Dans une pile, un indicateur de dépôt montre où il va atterrir. Faites glisser les poignées pour redimensionner ; le badge de taille affiche le résultat.
- Les flèches déplacent l’élément par petits pas, ⌥↑ / ⌥↓ déplacent un élément parmi ses frères.
- Faites un clic droit pour le menu contextuel : copier, couper, coller, coller ici, dupliquer, envelopper dans un cadre, envelopper dans un lien (retirer le lien sur un bloc de lien), créer un composant, masquer, verrouiller et supprimer.
Insérer des éléments
Utilisez une touche d’outil, le menu d’insertion ou le menu contextuel. Depuis le menu d’insertion ou le menu contextuel, les nouveaux éléments vont dans le cadre sélectionné, ou dans le corps de la page. Avec un outil, vous les dessinez où vous voulez (voir ci-dessous).
Dessiner pour insérer
Les outils Frame F, Text T et Image I insèrent en trois temps : appuyez sur un plan de travail, tracez une boîte en faisant glisser, puis relâchez. Le nouvel élément est sélectionné et l’outil revient sur Select.
L’endroit où l’élément atterrit dépend de ce dans quoi vous dessinez :
- Le conteneur. L’élément va dans le conteneur non verrouillé le plus profond situé sous le point où vous avez appuyé, et que la boîte ne recouvre pas entièrement. Dessiner tout autour d’une carte insère l’élément à côté d’elle, pas à l’intérieur.
- Piles et grilles. L’élément est inséré dans le flux à la position sous la boîte, et un indicateur de dépôt montre où. La boîte fixe sa largeur et sa hauteur (un texte ne reçoit qu’une largeur). Une boîte qui couvre toute la largeur de contenu d’une pile verticale reçoit
width: 100%. - Cadres libres. L’élément est positionné en absolu, exactement là où vous avez dessiné la boîte.
- Envelopper l’existant. Un cadre dessiné autour de frères existants les enveloppe, en une seule étape d’annulation. Dans un cadre libre, ils gardent leur place à l’écran.
- Un clic sans glisser insère l’élément à sa taille par défaut.
Pendant que vous faites glisser, maintenez ⇧ pour dessiner un carré, ⌥ pour dessiner depuis le centre, ou ⌘ pour désactiver le magnétisme. Appuyez sur Esc pour annuler. L’outil Text passe directement en édition avec le texte d’exemple sélectionné, pour que vous puissiez taper par-dessus.
Liens
Insérez un Link pour un lien texte, ou un Link block pour rendre cliquable un groupe d’éléments. Pour transformer des éléments existants en lien, sélectionnez-les (des frères uniquement), faites un clic droit et choisissez Wrap in link. Sur un bloc de lien, Remove link remet ses enfants à sa place.
Sélectionnez un lien ou un bouton et ouvrez la section Link de l’inspecteur :
| Champ | Rôle |
|---|---|
| Text | Le libellé d’un lien texte. Les blocs de lien affichent leur propre contenu à la place. |
| Bound URL | Cliquez sur pour lier l’URL à une expression. Dans une liste de collection ou sur une page modèle, les choix rapides incluent Item page, la page modèle de l’élément lui-même, et les pages de ses champs de référence, comme Author page. Voir lier les éléments d’une liste. |
| Target | None, Page ou URL. Les nouveaux liens commencent sur None et ne mènent nulle part tant que vous ne choisissez pas de cible. |
| Page | La page à ouvrir. Le lien suit la page quand vous la renommez ou changez son chemin. |
| URL | N’importe quelle adresse https://, mailto: ou tel:. Activez New tab pour l’ouvrir dans un nouvel onglet. |
Un bouton qui a une cible devient un lien stylisé comme un bouton. Un bouton dans un formulaire envoie toujours le formulaire, donc sa section Link se contente de l’indiquer : pour mener à une page depuis un formulaire, ajoutez un lien hors du formulaire.
Calques et pages
L’onglet Layers reflète l’arbre de la page. Faites glisser les lignes pour réordonner ou changer de parent, appuyez sur ↵ pour renommer et utilisez les boutons de la ligne pour masquer (⇧⌘H) ou verrouiller (⇧⌘L) un calque. Les calques verrouillés ne peuvent pas être sélectionnés sur le canevas.
L’onglet Pages liste les pages du site. Une page a un titre et un chemin. Les pages modèles des collections du CMS affichent une page par élément ; voir Pages modèles du CMS.
Copier et coller
⌘C, ⌘X et ⌘V fonctionnent sur les éléments, entre les pages et entre les sites. Coller du texte brut crée un élément texte ; coller une image la téléverse d’abord dans vos ressources. ⌘D duplique sur place.
Aperçu
Appuyez sur ⌘↵ pour lancer l’aperçu. Les interactions se jouent, les liaisons se résolvent avec des données en direct et les workflows client s’exécutent, directement sur les plans de travail. Cliquer sur un lien le suit : un lien de page ouvre cette page, un lien vers la page d’un élément du CMS (comme /blog/hello) affiche aussi cet élément dans l’aperçu, et une URL externe s’ouvre dans un nouvel onglet. Pendant que vous concevez, cliquer sur un lien ne fait que le sélectionner.