Pages

Créez et organisez les pages de votre site web.

Chaque page dans Silex devient un fichier HTML distinct lors de la publication. Les pages sont les conteneurs de premier niveau pour le contenu — considérez-les comme des écrans séparés : une page d'accueil, une page à propos, une page de contact. Depuis le panneau Pages dans la barre latérale gauche, vous gérez toutes les pages : créer, renommer, supprimer, réordonner et naviguer entre elles.

Deux modèles mentaux à garder en tête :

• Nom de la page = nom du fichier. Une page nommée about devient /about.html (ou /about/ selon votre hébergement). La page d'accueil est toujours index.
• Chaque page est indépendante. Les styles, le contenu et les paramètres spécifiques à une page n'appartiennent qu'à cette page. Pour partager un composant entre les pages, utilisez les Symboles.

Note : Votre page d'accueil doit être nommée index. Les serveurs web l'exigent pour servir correctement votresite.com/. Si vous n'avez pas de page index, les visiteurs verront une erreur 404. Les liens internes entre les pages doivent utiliser des chemins relatifs commençant par ./ — voir la section sur les liens internes ci-dessous.

Créer une page

Pour ajouter une nouvelle page :

1. Dans la barre latérale gauche, cliquez sur le bouton Pages (ou appuyez sur Shift+P)
2. Cliquez sur le bouton + en haut du panneau
3. Une nouvelle page est créée avec un nom par défaut
4. La page est ajoutée à votre liste de pages et automatiquement sélectionnée

Les noms de pages font partie de votre URL. Utilisez des noms courts, descriptifs, en minuscules et sans espaces. Silex les convertit : une page nommée « About Us » devient /about-us/ à la publication. De bons noms de pages sont simples : about, contact, services, blog.

Renommer une page

Pour changer le nom d'une page après sa création :

1. Dans le panneau Pages, cliquez sur l'icône engrenage (⚙) à côté du nom de la page
2. Dans la boîte de dialogue des paramètres, modifiez le champ Nom de la page
3. Cliquez sur Apply

Silex met automatiquement à jour tous les liens internes (liens créés via le menu déroulant Page dans l'attribut Lien) pointant vers l'ancien nom de page — vous n'avez pas besoin de les corriger manuellement. Cependant, si vous avez utilisé un lien codé en dur comme ./ancien-nom, vous devrez le mettre à jour avec le nouveau nom.

Supprimer une page

Pour supprimer une page :

1. Dans le panneau Pages, cliquez sur l'icône de suppression (🗑) à côté du nom de la page
2. Confirmez la suppression

Vous ne pouvez pas supprimer votre seule page — chaque site doit avoir au moins une page. Si la page supprimée était votre page d'accueil (nommée index), Silex désigne automatiquement la première page restante comme index.

Cloner une page

Pour dupliquer une page :

1. Dans le panneau Pages, cliquez sur l'icône de clonage (carrés superposés) à côté de la page
2. Silex crée une copie exacte avec un suffixe « copy » (par ex., « about copy »)
3. La page clonée inclut toute la mise en page, les composants, les styles et le contenu de l'originale

Après le clonage, renommez la nouvelle page et mettez à jour son contenu. C'est plus rapide que de construire une nouvelle page de zéro quand vous souhaitez des mises en page similaires.

Réordonner les pages

Glissez les pages dans le panneau Pages pour les réordonner :

1. Survolez une page — une poignée de préhension (points verticaux) apparaît à gauche
2. Cliquez et faites glisser la page vers une nouvelle position
3. Relâchez pour la déposer

L'ordre dans le panneau Pages est pour votre confort dans l'éditeur — il n'affecte pas la structure d'URL ni la navigation du site publié. Le réordonnancement est purement organisationnel.

La page d'accueil : toujours nommée index

Votre page d'accueil est celle servie quand quelqu'un visite votresite.com/. Les serveurs web exigent un fichier index.html à la racine. Si votre page d'accueil porte un autre nom, les visiteurs verront une erreur 404.

Assurez-vous que votre page d'accueil est nommée index :

• Quand vous créez votre première page, nommez-la index
• Si vous renommez votre page d'accueil autrement, renommez immédiatement une autre page en index pour la remplacer
• Vous ne pouvez avoir qu'une seule page index

Paramètres de la page

Chaque page a sa propre configuration pour les métadonnées, le SEO, le partage social et le code personnalisé. Les paramètres spécifiques à une page remplacent les paramètres globaux du site lors de la publication.

Pour accéder aux paramètres de la page :

1. Dans le panneau Pages, cliquez sur l'icône engrenage (⚙) à côté du nom de la page
2. La boîte de dialogue des paramètres de la page s'ouvre avec ces onglets :
3. Nom — nom de la page et permalien personnalisé optionnel
4. SEO — titre (70 caractères), description (150-160 caractères), surcharges par page des paramètres globaux
5. Social — titre Open Graph, description, image pour les aperçus de partage social
6. Code — HTML personnalisé dans le <head> (scripts analytics, polices, pixels de suivi, etc.)

Exemple : votre page d'accueil pourrait avoir le titre « Bienvenue dans Mon Studio », tandis que votre page à propos a « À propos de moi ». Le titre, la description et l'image de chaque page apparaissent quand la page est partagée sur les réseaux sociaux ou indexée par les moteurs de recherche.

Liens internes : créer des liens entre les pages

Pour créer un lien d'une page à une autre de votre site, utilisez des chemins relatifs commençant par ./.

Lors de l'ajout d'un lien :

1. Sélectionnez l'élément (bouton, texte, image ou conteneur) qui doit être cliquable
2. Dans le panneau droit, cliquez sur l'icône engrenage pour ouvrir les Element settings
3. Trouvez la section Link et définissez le menu déroulant Type sur Page
4. Sélectionnez la page cible dans la liste

Silex crée automatiquement le format de lien correct. Par exemple, un lien vers votre page « about » produit ./about. Ce chemin relatif fonctionne quel que soit votre domaine d'hébergement ou sous-répertoire.

Ne codez jamais en dur des chemins absolus comme /about ou https://votresite.com/about — ils se cassent quand le site est déplacé vers un autre domaine ou hébergement. Utilisez toujours le menu déroulant Page pour générer des liens relatifs.

Quand vous renommez une page, tous les liens créés via le menu déroulant Page se mettent à jour automatiquement. Les chemins codés en dur ne se mettent pas à jour.

Exemple pratique : lancer un portfolio de trois pages

Vous construisez un site portfolio avec : page d'accueil, exemples de travaux et contact.

1. Configurer les pages :
2. Créez/renommez votre première page en index (page d'accueil)
3. Ajoutez une page nommée work

4. Ajoutez une page nommée contact

5. Ajouter la navigation sur la page d'accueil :

6. Créez un Div avec trois liens texte : « Accueil », « Travaux », « Contact »
7. Sélectionnez le texte « Accueil », définissez le Lien sur Page: index -> ./index
8. Sélectionnez le texte « Travaux », définissez le Lien sur Page: work -> ./work

9. Sélectionnez le texte « Contact », définissez le Lien sur Page: contact -> ./contact

10. Réutiliser la navigation sur toutes les pages :

11. Au lieu de copier la navigation sur chaque page, convertissez le Div de navigation en Symbole
12. Quand vous modifiez le Symbole, les changements apparaissent automatiquement sur toutes les pages

13. Voir Symboles pour les détails

14. Configurer les paramètres de page :

15. Pour la page d'accueil : définissez le titre SEO sur « Portfolio », la description sur « Présentation de mes travaux »
16. Pour la page travaux : définissez le titre SEO sur « Mes Travaux », la description sur « Projets sélectionnés et études de cas »

17. Pour la page contact : définissez le titre SEO sur « Me Contacter », la description sur « Formulaire de contact et liens »

18. Publier :

19. Tous les liens fonctionnent à travers votre site
20. Les moteurs de recherche et les réseaux sociaux voient les titres et descriptions corrects de chaque page
21. Les visiteurs peuvent naviguer facilement entre les pages

Erreurs courantes

• Ne pas nommer votre page d'accueil index. Sans page index, l'URL racine affiche une 404. Créez ou renommez une page en index en premier.
• Utiliser des chemins absolus pour les liens internes. Écrivez ./about, pas /about ou https://votresite.com/about. Les chemins relatifs fonctionnent partout.
• Coder les chemins de liens en dur au lieu d'utiliser le menu déroulant Page. Taper ./about manuellement ne se mettra pas à jour si vous renommez la page. Utilisez le menu déroulant Page pour que Silex mette à jour les liens automatiquement.
• Essayer de supprimer votre seule page. Créez d'abord une nouvelle page, puis supprimez l'ancienne.
• S'attendre à des changements globaux depuis une seule page. Les styles et le contenu spécifiques à une page n'affectent pas les autres pages. Utilisez les Symboles ou les variables CSS si vous voulez un design partagé.

En savoir plus

• Structure de la page — HTML sémantique et hiérarchie correcte des titres dans chaque page
• Symboles — composants partagés entre les pages avec mise à jour automatique
• Paramètres du site — nom global du site, langue, favicon
• SEO — titre, description par page et bonnes pratiques
• Partage social — Open Graph et images d'aperçu social
• Publication — convertir les pages en fichiers HTML publiés

---

Avancé : fonctionnement interne des pages

Chaque page Silex est un objet Page de GrapesJS. Les pages sont stockées dans le fichier de votre projet et rendues sous forme de fichiers HTML distincts lors de la publication. Le composant principal de la page est l'élément <body> — tout ce que vous voyez sur le canevas se trouve à l'intérieur.

Le panneau Pages utilise ces commandes en interne : pages:add, pages:remove, pages:clone, pages:select, pages:rename, pages:list. Ces commandes sont disponibles pour les plugins et le code personnalisé.

Quand vous clonez une page, Silex effectue un clonage en profondeur du composant body et de tous ses enfants, puis copie les propriétés personnalisées de la page (en excluant les identifiants internes). Les styles associés sont reportés sur le clone.

---

Quiz

Q1 : Vous avez publié votre site, mais les visiteurs voient une erreur 404 à la racine de votre domaine. Vous avez trois pages : home, about et contact. Quel est le problème ?

• A) Votre site n'est pas configuré chez l'hébergeur
• B) Votre page d'accueil est nommée home au lieu de index
• C) La page about est manquante

Réponse

B) Votre page d'accueil est nommée home au lieu de index — les serveurs web cherchent index.html à la racine. Renommez une page en index.

Q2 : Vous créez un lien interne depuis votre page d'accueil vers votre page de contact. Quel doit être le lien ?

• A) https://votresite.com/contact
• B) /contact
• C) ./contact

Réponse

C) ./contact — utilisez des chemins relatifs. Ils fonctionnent sur n'importe quel domaine, sous-domaine ou hébergement local. Utilisez le menu déroulant Page dans la section Link des Element settings (icône engrenage) pour les générer automatiquement.

Q3 : Vous avez renommé une page de « portfolio » à « work » via les paramètres de la page. Les liens internes vers cette page se cassent-ils ?

• A) Oui, vous devez mettre à jour chaque lien manuellement
• B) Non, Silex met automatiquement à jour les liens créés via le menu déroulant Page
• C) Uniquement si la page est un Symbole

Réponse

B) Non, Silex met automatiquement à jour les liens créés via le menu déroulant Page — c'est pourquoi utiliser le menu déroulant Page (et non des chemins codés en dur) est important.

Q4 : Vous voulez une nouvelle page « services » avec la même mise en page que votre page « work ». Quel est le moyen le plus rapide ?

• A) Recréer la mise en page de zéro sur la nouvelle page
• B) Copier les éléments de work vers services un par un
• C) Cloner la page work, puis la renommer en services et mettre à jour le contenu

Réponse

C) Cloner la page work, puis la renommer en services et mettre à jour le contenu — le clonage préserve toute la mise en page, les styles et les composants.

Q5 : Vous essayez de supprimer votre seule page, mais le bouton de suppression est désactivé. Que devez-vous faire ?

• A) Créer d'abord une nouvelle page, puis supprimer l'ancienne
• B) Contacter votre hébergeur
• C) Vider le cache de votre navigateur

Réponse

A) Créer d'abord une nouvelle page, puis supprimer l'ancienne — Silex exige qu'au moins une page existe.