Comment modifier votre site

Guide pratique | Guide de style | Styles de contenu | Conseils pour l’accessibilité | Blocs de pages

Table des matières

  • Pages
    • Création et modification de pages
      • Permaliens (URL)
      • Attributs de page
      • Options d’en-tête de page
      • Options CTA en bas de page
      • Yoast SEO
    • Blocs de page
    • Blocs de pages réutilisables
    • Éditeur de contenu (WYSIWYG)
    • Styles de contenu
  • Types d’articles personnalisés
    • Articles (articles de blog)
  • Médiathèque
  • Formulaires
  • Menus
    • Menus d’édition
    • Menu des réseaux sociaux
    • Méga-menu

Pages

Création et modification de pages

Pour créer une nouvelle page, rendez-vous sur : Pages > Add New (Ajouter une nouvelle) Pour modifier une page existante, rendez-vous sur : Pages > recherchez la page que vous souhaitez modifier > Edit (Modifier)

  • Entrez un titre dans le champ « Add Title » (Ajouter un titre).
    • Ce sera le H1 de votre page.
  • Cliquez sur l’icône représentant une roue dentée dans le coin supérieur droit pour ouvrir les paramètres du document. À partir de là, vous pouvez mettre à jour l’URL et les attributs de la page.
  • Permalink (Permalien) — C’est ici que vous pouvez mettre à jour l’URL de la page. Remarque : Lors de l’enregistrement du brouillon ou de la publication de la page, une URL sera générée automatiquement en fonction de ce qui est saisi dans le champ de titre. Si vous souhaitez modifier cette URL, vous pouvez le faire dans la section « Permalink ».
  • Page Attributes (Attributs de page) — C’est ici que vous pouvez attribuer une page parent.
    • Si vous attribuez une page à une page parent, cela modifiera la structure de l’URL de la page.
    • Si « nouvelle page » est attribuée à « ancienne page », son URL deviendra ancienne page/nouvelle page.
    • Vous pouvez définir l’ordre des pages dans la navigation visuelle dans Appearence (Apparence) > Menus. (instructions ci-dessous)
  • Options d’en-tête de page — Faites défiler la page vers le bas de la page jusqu’à la section « Banner » (Banner), où vous devriez voir les options pour les champs suivants :
      • H1 override (remplacement de H1) (qui remplace la valeur H1 définie dans le titre de la page)
      • Intro paragraph copy (Copie du paragraphe d’introduction)
      • Hero image (Image du héros)
      • CTA link (Lien CTA)
  • Options CTA en bas de page — Faites défiler la page vers le bas de la page jusqu’à la section « Page Level CTA » (CTA au niveau de la page).
    • Ici, vous devriez voir les options suivantes :
      • Display Global CTA (Afficher le CTA global) (affiche le CTA global modifié sous Options > Global CTA)
      • Hide (Masquer) (pour les pages qui ne devraient afficher aucun CTA en pied de page)
      • Overwrite (Remplacer) (ce qui vous permettra de spécifier un CTA de pied de page unique pour cette page particulière)
  • Yoast SEO — Faites défiler la page vers le bas de la page jusqu’à la section « Yoast SEO ». Vous devriez voir ici les options qui permettent de modifier le titre et la méta-description du référencement.
    • Ajoutez un titre SEO spécifique et une méta-description pour la page.
    • Utilisez l’onglet de partage social de Yoast pour définir un contenu spécifique pour Facebook et Twitter.
    • Vous pouvez également masquer des pages dans le plan du site et dans la recherche Google :
      • Accédez à l’onglet « Paramètres avancés » dans Yoast.
      • Sélectionnez les paramètres Non (Index) et Non (Suivre) pour masquer les pages du plan du site et de la recherche Google

Blocs de page

Une fois votre page configurée, vous pouvez commencer à créer votre page à l’aide de blocs de page.

  • Cliquez sur l’icône noire + située sous le titre de la page.
  • Vous devriez voir ici quelques options permettant de choisir les blocs de page à ajouter à la page. Vous pouvez choisir parmi les 6 derniers blocs de page utilisés ou sélectionner « Browse All » (Tout parcourir) pour voir toutes les options de vos blocs de page.
  • Ajoutez le style de bloc de page souhaité.
  • Chaque bloc de page aura des options différentes en fonction de son style.
  • Dans l’onglet settings (paramètres) :
    • Modifiez les paramètres de ce bloc de page en particulier
    • Les paramètres varient en fonction du type de bloc de page que vous avez choisi. En règle générale, les paramètres incluent la couleur d’arrière-plan, les options de colonne et les options de style de mise en page.
  • Dans l’onglet content (contenu) :
    • Ajoutez le contenu en conséquence.
    • À l’instar de l’onglet des paramètres, la disposition de l’onglet de contenu varie en fonction du style de bloc de page que vous avez choisi.
  • Vous pouvez modifier l’ordre des blocs de page à l’aide des icônes ∧ et ∨.

Blocs de pages réutilisables

Pour certains blocs de page, comme un CTA de pied de page, vous pouvez créer un bloc réutilisable. Un bloc réutilisable est un bloc individuel que vous pouvez ajouter à plusieurs pages avec le même contenu dans toutes les instances. Si vous mettez à jour un bloc réutilisable à un seul endroit, il sera mis à jour partout. Pour créer un bloc réutilisable :

  • Rendez-vous sur : Gutenblocks > Reusable Blocks (Blocs réutilisables) > Add new (Ajouter un nouveau)
  • Vous serez redirigé vers un éditeur Gutenberg où vous pourrez ajouter et créer un bloc réutilisable, comme vous le feriez pour n’importe quel autre bloc.
  • Une fois que le contenu est présenté comme vous le souhaitez, donnez un nom au bloc.
  • Publiez le bloc.

Pour ajouter un bloc réutilisable à une page :

  • Accédez à la page sur laquelle vous souhaitez placer le bloc réutilisable.
  • Cliquez sur l’icône orange + dans le coin supérieur gauche, comme vous le feriez pour saisir un bloc normal.
  • Passez à l’onglet « Reusable » (Réutilisable).
  • Sélectionnez le bloc que vous souhaitez ajouter.
  • Vous remarquerez que le bloc réutilisable est entouré d’une bordure jaune vif et d’un message d’avertissement. Ceci est juste pour vous rappeler que le bloc est un bloc réutilisable et qu’il peut exister ailleurs sur le site.

Éditeur de contenu (WYSIWYG)

Saisie de contenu dans l’éditeur de contenu :

  • Vous pouvez saisir du contenu directement dans l’éditeur WYSIWYG ou copier/coller à partir d’un traitement de texte.
  • Si vous copiez et collez du contenu, utilisez toujours le bouton « Clear Formatting » (Effacer la mise en forme) après le collage. Vous pouvez également « paste as plain text » (coller en texte brut).
  • Utilisez le bouton « Special Characters » (Caractères spéciaux) (Ω) pour remplacer les caractères spéciaux du contenu collé. Dans le cas contraire, le codage peut être différent.

Styles de contenu

Pour plus d’informations sur les différents styles de contenu possibles pour votre site, rendez-vous sur votre page Styles de contenu.

  • Styles d’en-tête
    • Différents styles d’en-tête sont préchargés dans le menu déroulant « Paragraph » (Paragraphe) et sont étiquetés (Header 1, Header 2, etc.)
    • Vous n’aurez jamais à sélectionner h1 car la modification du nom de la page ou du titre créera automatiquement le h1 pour cette page.
    • Surlignez le texte, puis sélectionnez le style d’en-tête souhaité.
  • Styles de format
    • Différents styles de format sont préchargés dans le menu déroulant « Formats ».
    • Ajoutez un style de texte d’introduction en surlignant le texte et en sélectionnant « Intro Text » (Texte d’introduction) dans la liste déroulante.
    • Transformez les liens en boutons en surlignant le texte du lien et en sélectionnant « Button » (Bouton) ou « Button Secondary » (Bouton secondaire) dans la liste déroulante.

Types d’articles personnalisés

Articles (articles de blog)

Pour créer un nouvel article, rendez-vous sur : Posts (Articles) > Add New (Ajouter un nouveau) Pour modifier un article existant, rendez-vous sur : Posts (Articles) > recherchez l’article que vous souhaitez modifier > Edit (Modifier)

  • Création et modification d’articles de blog
    • Entrez le titre de l’article dans le champ « Add Title » (Ajouter un titre).
    • Entrez tout le contenu dans l’éditeur de contenu (WYSIWYG).
    • Yoast SEO — Définissez le titre et la méta-description du référencement dans la section « Yoast SEO ».
    • Catégories et tags — Ajoutez des catégories et des tags selon vos besoins dans la barre latérale droite.
      • Vous trouverez ci-dessous des notes sur la création et la modification de catégories et de tags de blog.
    • Définissez l’image sélectionnée qui apparaîtra sur la page des articles de toutes les ressources sous forme de miniature pour cet élément de publication.
    • Enregistrez et mettez à jour l’article.
  • Catégories de blog Pour créer et/ou modifier une catégorie de blog, rendez-vous sur : Posts (Articles) > Categories (Catégories).
    • Si vous souhaitez modifier une catégorie qui existe déjà, vous pouvez le faire au même endroit.
    • Modifiez/ajoutez une catégorie comme bon vous semble. Pour qu’une catégorie apparaisse sur la page d’accueil du blog, vous devez d’abord appliquer cette catégorie à un article de blog publié.
  • Tags de blog Pour créer et/ou modifier un tag de blog, rendez-vous sur : Posts (Articles) > Tags.
    • Si vous souhaitez modifier un tag qui existe déjà, vous pouvez le faire au même endroit.
    • Modifiez/ajoutez le tag comme bon vous semble.

Médiathèque

Remarque : Les images doivent être recadrées et compressées avant d’être ajoutées à la médiathèque. Il est recommandé que les images ne dépassent pas 250 Ko (bien que cela soit parfois inévitable). Vous devez recadrer l’image à la dimension appropriée avant de la compresser. Le site tinypng.com peut être utile pour compresser la taille des fichiers pour les images de grande taille. Pour consulter la médiathèque, rendez-vous sur : Media (Médias) > Library (Bibliothèque)

  • Pour ajouter de nouvelles images et de nouveaux fichiers, cliquez sur le bouton « Add New » (Ajouter un nouveau) en haut de la page. Cliquez ensuite sur « Select Files » (Sélectionner les fichiers) ou glissez-déposez simplement un fichier dans la fenêtre.
  • Vous pouvez ajouter des fichiers directement dans un dossier spécifique ou les glisser-déposer ultérieurement dans le dossier approprié.
  • Vous pouvez cliquer sur n’importe quel élément multimédia pour modifier les champs suivants :
    • Alternative Text (Texte alternatif)
    • Title (Titre)
    • Caption (Légende)
    • Description
    • File URL (URL du fichier)
  • Les images utilisées à des fins autres que la décoration doivent voir leur titre supprimé et inclure un texte alternatif décrivant l’image afin qu’un lecteur d’écran puisse informer l’utilisateur du contenu de l’image (par exemple, une femme au téléphone à son bureau). Le texte alternatif de l’image doit décrire l’image et ne doit pas contenir de caractères spéciaux. Exemple de texte alternatif
  • Pour plus d’informations sur la façon d’ajouter un texte alternatif, consultez notre page sur l’accessibilité.
  • Si vous modifiez un PDF, le champ « File URL » (URL du fichier) est le lien que vous utiliserez pour créer un lien direct vers le PDF.

Remarque : La médiathèque peut être filtrée par type ou par date et est consultable par titre.

Formulaires

Pour créer et modifier des formulaires, rendez-vous sur : Ninja Forms > Dashboard (Tableau de bord)

  • Ici, vous devriez voir tous les formulaires de votre site.
  • Cliquez sur l’icône représentant une roue dentée à côté de votre formulaire pour le modifier, le dupliquer, le prévisualiser et le supprimer. Vous pouvez également consulter les soumissions à cet endroit.
  • Cliquez sur « Add New » (Ajouter un nouveau) ou modifiez un formulaire existant.
  • Accédez aux « Form Fields » (Champs du formulaire).
    • Ajoutez les champs de formulaire que vous souhaitez à l’aide de l’icône bleue + dans le coin inférieur droit.
    • Une fois que les champs de formulaire souhaités sont ajoutés ; Cliquez sur « Publish » (Publier). Remarque : Ce bouton indiquera toujours « Publish » (Publier), même si le formulaire a déjà été publié.
  • Accédez à l’onglet « E-mail et actions ».
    • Modifiez les paramètres de redirection, d’administration des e-mails et d’utilisateur de messagerie pour chaque formulaire.
      • Redirect (Redirection) — Redirige vers la page de remerciement
      • Email admin (Administration des e-mails) — Vous pouvez personnaliser la façon dont chaque soumission arrive dans votre boîte de réception : nom, adresse, e-mail (très important), objet et champs.
    • Les paramètres avancés situés sous la fenêtre HTML permettent d’ajouter des paramètres de messagerie supplémentaires. Si un e-mail de réponse automatique, des adresses e-mail CC ou d’autres adresses e-mail doivent être ajoutées au formulaire, cela peut être fait ici plutôt que de créer de nouvelles adresses e-mail.
    • Une fois le formulaire rempli, copiez le code court et collez-le dans un éditeur de contenu.

Menus

Pour modifier les menus, accédez à Appearance (Apparence) > Menus Remarque : Le menu des réseaux sociaux dans le pied de page se trouve à un autre emplacement. Voir ci-dessous.

Menus d’édition

  • Accédez à la liste déroulante « Select a menu to edit » (Sélectionnez un menu à modifier) et choisissez le menu que vous souhaitez modifier.
  • Utilisez les menus pour organiser la manière dont vous souhaitez que les différents menus s’affichent.
  • Adding Menu Items (Ajouter des éléments de menu) —
    • Trouvez la page (ou tout autre type d’élément de menu) que vous souhaitez ajouter à votre menu dans la zone de sélection « Add Menu Items » (Ajouter des éléments de menu) sur la gauche.
    • Sélectionnez « Add to Menu » (Ajouter au menu) et la page apparaîtra en bas de ce menu.
    • Glissez et déposez la page que vous avez ajoutée à l’endroit du menu où vous souhaitez qu’elle apparaisse.
    • Pour définir un élément comme élément de menu enfant, faites glisser la page de manière à ce qu’elle apparaisse en retrait sous la page principale.
    • Cliquez sur la flèche sur le côté droit de l’élément de menu pour accéder à d’autres options. Dans cette zone, vous pouvez modifier les éléments suivants :
      • Navigation Label (Étiquette de navigation) (le texte qui apparaît dans le menu lui-même)
      • Title Attribute (Attribut de titre)
      • Une case à cocher pour ouvrir des liens dans un nouvel onglet
      • CSS Classes (Classes CSS) (facultatif)
  • Une fois que vous avez obtenu le menu que vous souhaitez, cliquez sur le bouton « Save Menu » (Enregistrer le menu) dans le coin supérieur gauche.

Menu des réseaux sociaux

Pour modifier le menu des réseaux sociaux, rendez-vous sur : Options > Footer (Pied de page) > Social Media (Réseaux sociaux)

  • Entrez les liens dans les champs appropriés classés par application.
  • Mettez à jour la page pour enregistrer les modifications.

Mega Menu (méga-menu)

Pour modifier les méga-menus, rendez-vous sur : Appearance (Apparence) > Menus >filtrez pour Primary Menu (Menu principal)

  • .Disposez d’abord tous les liens de page dont vous aurez besoin pour les menus et imbriquez-les de manière appropriée. (Pour des instructions plus détaillées à ce sujet, consultez la section « Editing Menus » [Menus d’édition] ci-dessus).
    • Remarque : La mise en page des pages que vous placez dans cette vue sera la même que ces pages/liens apparaissent dans les menus des appareils mobiles.
  • Une fois les liens de page disposés, passez la souris sur la page parent du méga-menu que vous souhaitez modifier. Vous devriez voir apparaître un bouton bleu « Mega Menu ». Cliquez dessus pour ouvrir l’éditeur de méga-menus
  • Dans l’éditeur de méga-menus, vous devriez voir :
    • La structure en colonnes du méga menu sur les
    • widgets à l’avant qui correspondent aux différentes zones de texte et aux pages enfants de ce méga menu.
  • Pour ajuster la structure des colonnes, vous devriez voir des flèches dans les coins supérieurs droits des colonnes de votre méga menu. L’utilisation de ces flèches vous permettra d’ajuster le nombre de colonnes (sur les 12) que chaque colonne du méga menu occupe.
  • Pour réorganiser les pages enfants, il suffit de faire glisser les widgets de chaque page enfant dans la colonne appropriée du méga menu.
  • Pour modifier les widgets « text » (text) du méga menu, cliquez sur le méga menu (bouton bleu mentionné ci-dessus), développez le widget avec la flèche de droite et modifiez le texte dans le WYSIWYG
  • Pour modifier le texte situé sous chaque élément de menu, rendez-vous sur Appearance (Apparence) > Menus. Ensuite, en haut de votre écran, dans le coin supérieur droit, sélectionnez le menu déroulant « Screen Options » (Options d’écran). Assurez-vous que la « description » est activée ; vous devriez pouvoir développer chaque élément de menu individuel pour ajouter sa description.