L'éditeur¶
L'éditeur Silex est organisé en zones : un canevas central où vous concevez, une barre latérale gauche avec les outils, un panneau droit pour le style et une barre d'outils supérieure pour les actions rapides.
Savoir où trouver chaque outil rend la conception plus rapide et plus intuitive. Cette page est une visite guidée.
Le canevas (centre)¶
La grande zone blanche au milieu est le canevas — votre surface de conception. Tout ce que vous créez apparaît ici.
Ce que vous pouvez faire : - Glisser des éléments depuis la barre latérale gauche (Blocs, Symboles) - Cliquer sur des éléments pour les sélectionner (un contour bleu apparaît) - Double-cliquer sur des éléments texte pour modifier le contenu directement - Déplacer des éléments en les faisant glisser pour les repositionner - Utiliser la barre d'outils supérieure pour prévisualiser sur différentes tailles d'écran
Le canevas affiche votre page en temps réel. Lorsque vous ajustez les couleurs, l'espacement ou la mise en page dans le panneau droit, les changements apparaissent instantanément.
La barre latérale gauche¶
La barre latérale gauche est une bande verticale de boutons à icônes. Cliquez sur une icône pour ouvrir son panneau ou déclencher son action. De haut en bas :
| Bouton | Raccourci | Description |
|---|---|---|
| + (Ajouter un élément) | Menu d'ajout rapide pour insérer des éléments | |
| Blocs | Shift+A | Éléments HTML glissables |
| Symboles | Shift+S | Composants réutilisables |
| Pages | Shift+P | Liste et gestion des pages |
| Calques | Shift+L | Arborescence des éléments de la page courante |
| Polices | Alt+F | Gestion des polices |
| Variables CSS | Propriétés personnalisées CSS | |
| Paramètres | Alt+S | Boîte de dialogue des paramètres du site et de la page |
| Raccourcis clavier | Shift+H | Référence des raccourcis |
| Notifications | Shift+N | Messages, erreurs, progression |
| Tableau de bord | Retour à la liste des projets | |
| Documentation | Ouvre la documentation Silex | |
| Déconnexion | Vous déconnecte de Silex |
Blocs¶
Le panneau Blocs contient tous les éléments disponibles organisés en catégories :
- Basics : Text, Container
- Media : Image, Video
- Components : Map, Custom Code
- Forms : Form, Input, Textarea, Select, Button, Label, Checkbox, Radio
- Eleventy : Shortcode, select, option (pour l'intégration build awesome)
Pour ajouter un élément : glissez-le du panneau Blocs sur le canevas. Pour changer la balise HTML d'un élément (par ex., transformer un bloc Text en titre H1), sélectionnez-le et changez le Tag name dans les Element settings (icône engrenage dans le panneau droit).
Chaque bloc est livré avec des valeurs par défaut cohérentes (un bloc texte a du padding, un conteneur a une hauteur minimale), pour que vous ne partiez pas de zéro.
Symboles¶
Les symboles sont des composants réutilisables. Une fois que vous avez créé un symbole (comme un en-tête ou un pied de page réutilisable), les instances de ce symbole apparaissent ici. Vous pouvez les glisser sur n'importe quelle page, et les modifications du symbole mettent à jour toutes les instances en même temps.
En savoir plus dans Symboles.
Pages¶
Liste toutes les pages de votre site. Cliquez sur le nom d'une page pour y accéder. Cliquez sur + pour créer une nouvelle page. Chaque ligne de page comporte des icônes d'action : supprimer, cloner et paramètres.
Votre page d'accueil doit être nommée index — c'est une convention web standard.
Calques¶
Le panneau des calques affiche une arborescence de tous les éléments de la page courante — chaque Div, titre, image et bloc de texte, imbriqués tels qu'ils apparaissent dans le HTML.
Utilisez ce panneau quand :
- Votre page est chargée et cliquer sur les éléments est difficile — cliquez plutôt sur le nom de l'élément dans les Calques
- Vous voulez comprendre la structure (quels éléments sont à l'intérieur de quels conteneurs)
- Vous voulez sélectionner le parent d'un élément sans cliquer plusieurs fois
Développez et réduisez les éléments pour voir leurs enfants. L'arborescence correspond à la hiérarchie de votre HTML.
Polices¶
Gère les familles de polices de votre site. Cliquez sur + Ajouter une police pour importer une police (depuis Google Fonts ou en téléversant la vôtre). Une fois ajoutée, la police apparaît dans la section Typographie du Style Manager quand vous sélectionnez du texte.
Variables CSS¶
Stocke et gère les propriétés personnalisées CSS (variables). Créez une variable comme --primary-color: #007bff et utilisez-la dans tout votre site. Modifiez la variable une seule fois, et chaque élément qui l'utilise se met à jour.
En savoir plus dans Variables CSS.
Paramètres¶
Ouvre la boîte de dialogue des paramètres du site et de la page. Ici vous configurez :
- Paramètres du site : nom du site, langue, favicon, métadonnées SEO, code personnalisé (comme Google Analytics)
- Paramètres de la page : titre de la page, slug d'URL, surcharges SEO par page
Les paramètres s'appliquent à l'ensemble de votre site ou à une seule page selon l'onglet sur lequel vous vous trouvez.
Raccourcis clavier¶
Affiche la liste de tous les raccourcis clavier disponibles dans l'éditeur. C'est un panneau de référence — utilisez-le pour apprendre les raccourcis comme Shift+A (Blocs), Shift+L (Calques), Ctrl+Z (Annuler), Ctrl+C/V (Copier/Coller).
Notifications¶
Affiche les messages de Silex : progression du téléversement, état de la publication, erreurs ou avertissements. Si quelque chose ne va pas (comme un conflit de style), vous le verrez ici.
Le panneau droit¶
Le panneau droit a deux vues, accessibles via les icônes en haut à droite :
- Style Manager (icône pinceau) — propriétés CSS de l'élément sélectionné
- Element settings (icône engrenage) — attributs HTML, tag name, paramètres de lien, et liaisons de données CMS (States, Attributes, Properties)
Style Manager¶
C'est ici que vous contrôlez l'apparence visuelle des éléments sélectionnés en utilisant du CSS.
Quand vous sélectionnez un élément, le Style Manager affiche les propriétés pertinentes organisées en sections :
- General — mode de mise en page (Flex, Block), display, position, overflow
- Flex — propriétés de conteneur et d'élément flex (direction, wrap, justify, align, gap)
- Dimension — width, height, tailles min/max, margin, padding
- Typography — font family, size, weight, line height, color, alignement du texte
- Decorations — background, borders, border-radius, box-shadow, opacity
- Extra — transforms, filters, transitions et autres propriétés avancées
Chaque propriété que vous voyez ici est du CSS standard. Ajustez les valeurs et voyez le résultat sur le canevas immédiatement.
Element settings¶
Cliquez sur l'icône engrenage en haut du panneau droit (ou sélectionnez un élément et appuyez sur l'engrenage) pour voir :
- ID — l'identifiant unique de l'élément
- Title — une étiquette optionnelle pour l'élément
- Tag name — changer la balise HTML (par ex., DIV -> H1, SECTION, NAV, HEADER, FOOTER, etc.)
- Link — transformer l'élément en lien (URL, email ou page interne)
- Unwrap content — supprimer le conteneur mais conserver le contenu à l'intérieur
Sous les paramètres de l'élément, vous trouverez les sections de données CMS (si une source de données est connectée) :
- States — expressions nommées réutilisables qui exposent des données aux composants enfants
- Attributes — lier les attributs HTML (href, src, alt) à des données dynamiques
- Properties — lier innerHTML, conditions de visibilité et données de boucle
En savoir plus dans CMS et données.
La barre d'outils supérieure¶
La barre d'outils tout en haut de l'éditeur contient les actions rapides.
Prévisualisation par appareil¶
Un menu déroulant affichant différentes tailles d'écran : Desktop, Tablet, Mobile Landscape et Mobile Portrait. Sélectionnez-en un pour prévisualiser votre design sur cet appareil. Le canevas se redimensionne pour correspondre au breakpoint, afin que vous voyiez comment votre mise en page apparaît sur les petits écrans.
Cela ne modifie pas votre design — c'est uniquement un outil de prévisualisation. Pour rendre votre site responsive, vous ajustez les styles aux différents breakpoints (voir Design responsive).
Annuler / Rétablir¶
Boutons pour annuler et rétablir vos actions récentes. Les raccourcis clavier fonctionnent aussi : Cmd+Z (Mac) ou Ctrl+Z (Windows) pour annuler, Cmd+Shift+Z / Ctrl+Shift+Z pour rétablir.
Publier¶
Le bouton Publier commite votre design dans le dépôt Git de votre site et déclenche le pipeline de publication. Votre site est alors reconstruit et déployé sur votre hébergement (GitLab Pages, FTP, etc.).
Cliquez dessus quand vous êtes prêt à passer en ligne — ou pour pousser des mises à jour sur un site en production.
Flux de travail courant¶
Voici comment les designers utilisent typiquement ces panneaux ensemble :
- Barre latérale gauche, panneau Blocs : Glissez des éléments sur le canevas
- Canevas : Cliquez pour sélectionner un élément
- Panneau droit, Style : Ajustez l'apparence de l'élément
- Barre latérale gauche, Calques : Trouvez les éléments dans les mises en page complexes
- Barre d'outils supérieure, Prévisualisation par appareil : Testez la réactivité
- Barre d'outils supérieure, Publier : Passez en ligne
L'avantage de cette disposition est que tout ce dont vous avez besoin pour une tâche est visible. Vous n'avez pas à cliquer en profondeur dans des boîtes de dialogue ou à chercher des options.
Conseils pour l'efficacité¶
- Utilisez les Calques pour naviguer dans les structures complexes. Si votre page a beaucoup de Divs imbriquées, cliquer dans les Calques est plus rapide que de cliquer sur le canevas.
- Valeurs par défaut pour les nouveaux éléments. Silex donne aux nouveaux blocs des valeurs de Padding et d'espacement par défaut, pour que vous passiez moins de temps à ajuster les bases.
- Gardez le Style Manager ouvert. Si vous faites beaucoup de modifications de style, gardez l'onglet Style ouvert dans le panneau droit — vous n'avez pas besoin d'y revenir sans cesse.
- Utilisez les raccourcis clavier. Ouvrez le panneau Raccourcis clavier (barre latérale gauche) et apprenez ceux que vous utilisez le plus (Dupliquer, Copier, Coller, Tout sélectionner).
- Symboles pour les motifs répétitifs. Si vous avez un en-tête ou un pied de page qui apparaît sur plusieurs pages, transformez-le en Symbole une fois — mettez-le à jour à un seul endroit, et toutes les pages reflètent le changement.
Ce qui n'est pas dans la barre d'outils¶
Quelques choses à savoir sur ce que vous ne trouverez pas dans l'interface (volontairement) :
- Pas d'animations ni d'interactions. Silex n'inclut pas d'animations basées sur une timeline ni d'effets déclenchés au défilement. Vous pouvez styliser les états hover/focus via les pseudo-classes CSS dans le système de sélecteurs. Votez pour Interaction Designer sur la feuille de route pour le support des animations et interactions.
- Pas d'outils e-commerce. Silex est fait pour les sites de contenu et marketing, pas pour les boutiques en ligne avec panier. (Le e-commerce n'est pas une priorité actuelle.)
- Pas de glisser-déposer pour réordonner dans tous les panneaux. Les panneaux Blocs et Symboles ne supportent pas le glisser-déposer pour mettre en favoris — tous les éléments sont toujours disponibles.
Il vous manque une fonctionnalité ? Consultez la feuille de route pour voter ou proposer des idées. Vous pouvez aussi contribuer pour aider à construire ce qui manque. Par exemple, votez pour Bring Your Own AI Key pour utiliser votre propre clé API pour les fonctionnalités IA.
Quiz¶
Q1 : Vous êtes sur une page complexe avec 20 éléments imbriqués et cliquer sur le canevas est difficile. Où allez-vous ?
- A) Barre latérale gauche, panneau Calques — cliquez sur le nom de l'élément dans l'arborescence
- B) Panneau droit, Element settings — recherchez l'élément
- C) Barre d'outils supérieure, Prévisualisation par appareil
Réponse
A) Barre latérale gauche, panneau Calques — Le panneau Calques affiche une arborescence de tous les éléments, facilitant la sélection d'éléments spécifiques sans cliquer sur le canevas.
Q2 : Vous voulez changer la couleur de fond de votre page. Où allez-vous ?
- A) Barre latérale gauche, Paramètres
- B) Panneau droit, Style Manager, puis Decorations
- C) Barre d'outils supérieure, Publier
Réponse
B) Panneau droit, Style Manager, puis section Decorations — Tout le stylage visuel se fait dans le Style Manager. L'arrière-plan se trouve dans la section Decorations.
Q3 : Vous voulez prévisualiser l'apparence de votre site sur un téléphone. Sur quoi cliquez-vous ?
- A) Barre latérale gauche, Blocs — filtrer par « Mobile »
- B) Panneau droit, Element settings
- C) Barre d'outils supérieure, Prévisualisation par appareil — sélectionnez Mobile Portrait
Réponse
C) Barre d'outils supérieure, Prévisualisation par appareil — Sélectionnez Mobile Portrait pour voir votre design à la largeur d'un téléphone. C'est un outil de prévisualisation uniquement ; il ne modifie pas votre design.
Q4 : Vous créez un en-tête réutilisable qui apparaît sur chaque page. Où le stockez-vous pour pouvoir le réutiliser ?
- A) Barre latérale gauche, panneau Symboles
- B) Barre latérale gauche, panneau Blocs
- C) Panneau droit, onglet Données
Réponse
A) Barre latérale gauche, panneau Symboles — Créez un Symbole une fois, puis glissez ses instances sur d'autres pages. Les modifications du Symbole mettent à jour toutes les instances.
Q5 : Vous voulez connecter votre blog WordPress à Silex et afficher des articles sur votre site. Où se trouve ce panneau ?
- A) Panneau droit, onglet Données (Sources de données)
- B) Barre latérale gauche, panneau Blocs
- C) Barre d'outils supérieure, Publier
Réponse
A) Panneau droit, onglet Données — Le panneau Sources de données est l'endroit où vous connectez les API CMS et liez les états des composants aux champs de données.