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 (Blocks, Symbols) - 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 |
|---|---|---|
| Blocks (icône +) | Shift+A | Éléments HTML glissables |
| Symbols | Shift+S | Éléments réutilisables |
| Pages | Shift+P | Liste et gestion des pages |
| Layers | Shift+L | Arborescence des éléments de la page courante |
| Fonts | Alt+F | Gestion des polices |
| CSS Variables | Propriétés personnalisées CSS | |
| Settings (icône à deux engrenages) | Alt+S | Boîte de dialogue des paramètres du site |
| Keyboard Shortcuts | Shift+H | Référence des raccourcis |
| Notifications | Shift+N | Messages, erreurs, progression |
Blocks¶
Le panneau Blocks contient tous les éléments disponibles organisés en catégories :
- Basics : Text, Container
- Media : Image, Video
- Elements : Map, Custom Code
- Forms : Form, Input, Textarea, Select, Button, Label, Checkbox, Radio
Pour ajouter un élément : glissez-le du panneau Blocks 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 réglages de l'élément (icône engrenage en haut du panneau de droite).
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.
Symbols¶
Les symboles sont des éléments 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.
Layers¶
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 le panneau Layers
- 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.
Fonts¶
Gère les familles de polices de votre site. La fenêtre liste les Google Fonts : cliquez sur Installer la police sous celle que vous voulez. Une fois ajoutée, la police apparaît dans la section Typographie du Style Manager quand vous sélectionnez du texte.
Pour utiliser une police absente de Google Fonts (un fichier auto-hébergé, ou un service comme Adobe Fonts), chargez-la via le code du head du site. Voir Code personnalisé.
CSS Variables¶
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.
Settings¶
Le bouton Settings (icône à deux engrenages) ouvre les Paramètres du site : où le site est stocké et publié, langue, titre, description, favicon, partage sur les réseaux sociaux, code personnalisé (comme Google Analytics) et sources de données du CMS.
Les réglages de la page (nom de la page, SEO, partage et code propres à la page) s'ouvrent par l'icône engrenage à côté de la page dans le panneau Pages. Le nom du site se change depuis le tableau de bord, avec l'icône Rename du site.
Keyboard Shortcuts¶
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 (Blocks), Shift+L (Layers), Ctrl+Z (Undo), Ctrl+C/V (Copy/Paste).
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é
- Réglages de l'élément (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 :
- Layout — display et mode de mise en page (block, flex), position, overflow
- Flexbox — apparaît quand Display vaut
flex: direction, wrap, justify, align - Size — width, height, tailles min/max, margin et padding
- Typography — font family, size, weight, line height, color, alignement du texte
- Backgrounds & Borders — background, borders, border-radius et box-shadow
- Effects — opacity, transforms, filters, transitions, Column gap et Row Gap
Certaines sections n'apparaissent que pour des éléments ou sélecteurs précis — par exemple Content, Object ou List.
Chaque propriété que vous voyez ici est du CSS standard. Ajustez les valeurs et voyez le résultat sur le canevas immédiatement.
Réglages de l'élément¶
Cliquez sur l'icône engrenage en haut du panneau droit 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 ces champs, 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 éléments 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).
Aperçu des données¶
Ces deux boutons, à gauche de la barre, servent aux sites qui affichent du contenu venu d'un CMS (voir CMS et données).
- L'icône tableau (
Ctrl+Alt+V) active et désactive l'aperçu des données. L'aperçu affiche sur le canevas le vrai contenu de votre source de données : un élément répété apparaît une fois par entrée de la liste (voir Boucles et listes). Son infobulle indique Disable data source preview quand l'aperçu est actif, Enable data source preview quand il est désactivé. Désactivez-le quand une liste est vide et que vous voulez quand même designer l'élément, ou quand une liste est si longue que les nombreuses copies gênent. - L'icône flèches en cercle, Refresh data sources (
Ctrl+Alt+R), recharge le contenu de votre source de données. C'est rarement nécessaire : seulement quand vous avez modifié du contenu dans votre CMS et que le canevas ne le montre pas encore.
View components¶
Le bouton View components (icône carré) affiche ou masque un contour en pointillés autour de chaque élément du canevas. Laissez-le actif pour voir et sélectionner les conteneurs vides ; désactivez-le pour voir la page telle qu'elle sera en ligne.
Preview¶
Le bouton Preview ouvre votre page telle qu'un visiteur la verrait — contours et poignées d'édition masqués — pour vérifier le résultat sans publier.
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.
Copier / Coller¶
Copy (Cmd+C sur Mac, Ctrl+C sur Windows) copie l'élément sélectionné. Paste (Cmd+V / Ctrl+V) ajoute la copie après l'élément sélectionné ; le bouton reste grisé tant que vous n'avez rien copié. La copie garde son contenu et ses styles.
Publish¶
Le bouton Publish 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.
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 Blocks : 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, Layers : 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, Publish : 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 le panneau Layers pour naviguer dans les structures complexes. Si votre page a beaucoup de Divs imbriquées, cliquer dans le panneau Layers 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 Keyboard Shortcuts (barre latérale gauche) et apprenez ceux que vous utilisez le plus (Duplicate avec Ctrl+D, Copy, Paste).
- 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 Blocks et Symbols 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 Layers — cliquez sur le nom de l'élément dans l'arborescence
- B) Panneau droit, réglages de l'élément — recherchez l'élément
- C) Barre d'outils supérieure, Prévisualisation par appareil
Réponse
A) Barre latérale gauche, panneau Layers — Le panneau Layers 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, Settings
- B) Panneau droit, Style Manager, puis Backgrounds & Borders
- C) Barre d'outils supérieure, Publish
Réponse
B) Panneau droit, Style Manager, puis section Backgrounds & Borders — Tout le stylage visuel se fait dans le Style Manager. L'arrière-plan se trouve dans la section Backgrounds & Borders.
Q3 : Vous voulez prévisualiser l'apparence de votre site sur un téléphone. Sur quoi cliquez-vous ?
- A) Barre latérale gauche, Blocks — filtrer par « Mobile »
- B) Panneau droit, réglages de l'élément
- 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 Symbols
- B) Barre latérale gauche, panneau Blocks
- C) Panneau droit, onglet Données
Réponse
A) Barre latérale gauche, panneau Symbols — 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 Blocks
- C) Barre d'outils supérieure, Publish
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 éléments aux champs de données.