Table des matières

  • Pages
    • Créer et modifier des pages
      • Permalinks (URLs)
      • Attributs de la page
      • Options d’en-tête de page
      • Options de CTA en bas de page
      • Yoast SEO
    • Blocs de pages
    • Blocs de pages réutilisables
    • Éditeur de contenu (WYSIWYG)
    • Styles de contenu
    • Tableaux
  • Types de messages personnalisés
    • Produits
    • Articles de blog (Color Science Essentials)
    • Histoires de clients**
    • Cours**
    • Événements**
    • FAQs**
    • Communiqués de presse**
    • Bios de l’équipe**
    • Emplacements**
  • Médiathèque
  • Menus
    • Modifier les menus
    • Menu médias sociaux
    • Mega Menu**
    • Menu Solutions d’affaires vs. Menu du site de l’entreprise**

Pages

Créer et modifier des pages

Pour créer une nouvelle page, allez à Pages > Ajouter une nouvelle Pour modifier une page existante, allez sur : Pages > trouver la page que vous souhaitez modifier > Modifier

  • Entrez un titre dans le champ qui dit « Ajouter un titre ».
    • Ce sera le H1 de votre page.
  • En cliquant sur l’icône d’engrenage dans le coin supérieur droit, vous ouvrez les paramètres du document. À partir de là, vous pouvez mettre à jour l’URL et les attributs de la page.
  • Permalink – C’est ici que vous pouvez mettre à jour l’URL de la page. Remarque : lors de l’enregistrement du projet ou de la publication de la page, une URL sera générée automatiquement en fonction de ce qui a été saisi dans le champ du titre. Si vous souhaitez modifier ou ajuster cette URL, vous pouvez le faire dans la section « Permalink ».
  • Attributs de la page – C’est ici que vous pouvez attribuer une page parent.
    • Si vous attribuez une page à une page parente, la structure URL de la page sera modifiée.
    • Si la « nouvelle page » est attribuée à l' »ancienne page », son URL deviendra « ancienne-page/nouvelle-page ».
    • Vous pouvez définir l’ordre des pages dans la navigation visuelle dans Apparence > Menus. (instructions ci-dessous)
  • Options d’en-tête de page – Faites défiler la page jusqu’à la section « Bannière », où vous devriez voir des options pour les champs suivants :
      • H1 override (qui remplace le H1 défini dans le titre de la page)
      • Copie du paragraphe d’introduction
      • Image du héros
      • Lien CTA
  • Options CTA de pied de page – Faites défiler la page jusqu’à la section « CTA de niveau page ».
    • Ici, vous devriez voir les options suivantes :
      • Afficher le CTA global (affiche le CTA global qui est édité sous Options > CTA global)
      • Masquer (pour les pages qui ne doivent pas afficher de CTA en bas de page)
      • Écraser (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 jusqu’au bas de la section « Yoast SEO ». Ici, vous devriez voir des options pour modifier le titre SEO et la méta-description.
    • Ajoutez un titre et une méta-description spécifiques au référencement de 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 les pages du plan du site et de la recherche Google :
      • Allez dans l’onglet « Paramètres avancés » de Yoast.
      • Sélectionnez les paramètres No (Index) et No (Follow) pour masquer les pages du plan du site et de la recherche Google.

Blocs de pages

Une fois que votre page est configurée, vous pouvez commencer à la développer à l’aide de blocs de page.

  • Cliquez sur l’icône noire + sous le titre de la page.
  • Ici, vous devriez voir quelques options pour choisir les blocs de page à ajouter à la page. Vous pouvez choisir parmi les six blocs de pages les plus récemment utilisés ou sélectionner « Tout parcourir » pour voir toutes les options de blocs de pages.
  • Ajoutez le style de bloc de page que vous souhaitez.
  • Chaque bloc de page dispose de différentes options en fonction de son style.
  • Dans l’onglet « Paramètres » :
    • Modifier les paramètres de ce bloc de page particulier
    • Les paramètres varient en fonction du type de bloc de pages que vous avez choisi. En général, ces paramètres comprennent la couleur de fond, les options de colonne et les options de style de mise en page.
  • Dans l’onglet « Contenu » :
    • Ajoutez le contenu en conséquence.
    • Tout comme l’onglet « Paramètres », la présentation de l’onglet « 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 endroit, il sera mis à jour partout.

Pour créer un bloc réutilisable :

  • Aller à : Gutenblocks > Blocs réutilisables > Ajouter nouveau
  • Vous serez dirigé vers un éditeur Gutenberg où vous pourrez ajouter et construire un bloc réutilisable, comme vous le feriez pour tout autre bloc.
  • Une fois que le contenu est disposé comme vous le souhaitez, donnez un nom au bloc.
  • Publier le bloc

Pour ajouter un bloc réutilisable à une page :

  • Naviguez jusqu’à 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 entrer dans un bloc ordinaire.
  • Passez à l’onglet « Réutilisable ».
  • Sélectionnez le bloc que vous voulez 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)

Saisir du contenu dans l’éditeur de contenu :

  • Vous pouvez saisir le contenu directement dans l’éditeur WYSIWYG ou le copier/coller depuis un traitement de texte.
  • Si vous copiez et collez du contenu, utilisez toujours le bouton « Effacer le formatage » après le collage. Vous pouvez également « coller en tant que texte brut ».
  • Utilisez le bouton « Caractères spéciaux » (Ω) pour remplacer tous les caractères spéciaux du contenu collé. Si ce n’est pas le cas, le codage peut être différent.

Styles de contenu

Pour plus d’informations sur les différents styles de contenu possibles pour votre site, consultez la page des styles de contenu.

  • Styles d’en-tête
    • Différents styles d’en-tête sont préchargés dans le menu déroulant « Paragraphe » et sont étiquetés (En-tête 1, En-tête 2, etc.).
    • Vous n’aurez jamais à sélectionner h1 car le nom de la page ou le remplacement du titre créera automatiquement le h1 pour cette page.
    • Mettez le texte en surbrillance, 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 le style du texte d’introduction en mettant en surbrillance le texte et en sélectionnant « Texte d’introduction » dans la liste déroulante.
    • Transformez les liens en boutons en mettant en surbrillance le texte du lien et en sélectionnant « Bouton » ou « Bouton secondaire » dans la liste déroulante.

Tableaux

Des tableaux sont utilisés à de nombreux endroits sur le site. Vous avez trois options pour la création de tableaux, en fonction de l’emplacement :

  • Tableaux WYSIWYG
  • TablePress Tables
  • Table Gutenburg Tables-blocs

Note : Toutes les tables doivent recevoir le même style. Vous pouvez utiliser les shortcodes et pour obtenir les symboles de la coche et du X pour les tableaux de comparaison.

Les tableaux WYSIWYG sont ceux que nous avons utilisés sur les pages de détail des produits. Ceux-ci peuvent être créés dans n’importe quel WYSIWYG du site. Exemple sur cette page.

  • Dans le WYSIWYG, sélectionnez l’icône du tableau dans l’éditeur.
  • Sélectionnez le nombre de colonnes et de lignes que vous souhaitez.
  • Saisissez votre contenu dans chaque champ/cellule du tableau.
  • Donnez un style au contenu en conséquence
  • Pour obtenir un fond rouge sur une ligne, vous devez l’assigner comme ligne d’en-tête. Pour ce faire :
    • Placez votre curseur dans l’une des cellules de la ligne d’en-tête.
    • Ensuite, allez à Table > Row > Table Row Properties dans le menu WYSIWYG en haut de la page.
    • Ensuite, vous devriez voir une option pour attribuer le type de ligne comme « en-tête ».
  • Si vous devez attribuer une couleur d’arrière-plan différente (par exemple, un arrière-plan gris pour les sous-titres des tableaux) :
    • Mettez en surbrillance les cellules de la ligne que vous souhaitez mettre à jour.
    • Ensuite, pour aller Table > Row > Table Row Properties > Advanced
    • Mettez à jour la couleur d’arrière-plan à partir de l’outil de sélection des couleurs.

TablePress Tables

  • Les tableaux TablePress peuvent être utilisés à la place des tableaux WYSIWYG. Ce serait un bon outil pour les tableaux particulièrement complexes.
  • Pour créer un nouveau tableau TablePress, allez sur TablePress > Add New Table
  • Créez le tableau comme d’habitude (il héritera du style du tableau du site).
  • Une fois le tableau construit, prenez le code court dans le champ « Code court » en haut de la page et placez-le dans le WYSIWYG à l’endroit où vous voulez que le tableau se trouve.

Table Gutenburg Tables-blocs

  • Les tables Gutenburg sont celles que nous avons utilisées sur les pages de comparaison des produits, comme celle-ci. Notez que ces éléments sont configurés comme un bloc et non comme un WYSIWYG. Ils ne peuvent donc pas être utilisés dans les sections d’onglets des pages de produits. Vous pouvez en voir un exemple sur cette page.
  • Pour ajouter l’un de ces tableaux à une page, cliquez sur l’icône + orange dans le coin supérieur gauche pour ajouter un nouveau bloc et sélectionnez le type de bloc « Tableau ».
  • Sélectionnez le nombre de colonnes et de lignes
  • Il est possible de donner un style supplémentaire à ces tableaux en cliquant sur les trois points dans les contrôles du bloc et en choisissant « Afficher plus de paramètres ». Ici, vous pouvez attribuer des styles de tableau et définir une ligne d’en-tête (rouge).
  • Pour les blocs de comparaison, vous pouvez également inclure des shortcodes d’identification de produit dans des cellules de tableau afin de faire apparaître des informations sur les produits, notamment l’image, le nom, les informations de demande et les fiches techniques.
    • Pour trouver l’ID d’un produit, naviguez jusqu’à l’arrière-plan du produit auquel vous voulez vous lier.
    • Ensuite, dans l’URL de votre navigateur, vous devriez voir une partie de l’URL qui dit « post= » ; le chiffre suivant est le numéro d’identification de ce produit.

Types de messages personnalisés

Produits

Pour créer un nouveau produit, allez sur Produits > Ajouter un nouveau Pour modifier un produit existant, allez sur : Produit > trouver le produit que vous souhaitez modifier > Modifier

  • Créer et modifier des produits
    • Saisissez le titre du billet dans le champ « Ajouter un titre ».
    • Saisissez tout le contenu dans l’éditeur de contenu (WYSIWYG).
    • Yoast SEO – Définissez le titre SEO et la méta-description dans la section « Yoast SEO ».
    • Catégories – Attribuez la catégorie de ce produit dans la barre latérale de droite. (Voir ci-dessous pour plus d’informations sur les catégories de produits)
      • Remarque : l’attribution d’une catégorie à un produit signifie également que le « CTA produit » de cette catégorie apparaîtra sur la page du produit, sous les images ou la galerie du héros. Pour ce produit, par exemple, c’est en l’affectant à la catégorie Benchtop que l’on charge le « Vous ne savez pas par où commencer ? » sous l’image. Vous trouverez plus d’informations sur la manière de modifier ce contenu dans la section ci-dessous consacrée à la modification des catégories de produits.
    • Définissez l’image vedette qui apparaîtra dans le héros et dans les blocs de flux de ressources en tant que vignette pour ce produit.
    • Sauvegarder et mettre à jour le produit.
    • Une fois que les informations de base sur le produit sont définies, allez jusqu’à la section « Contenu supplémentaire de la page du produit » en bas. Ici, vous devriez voir trois onglets :
      • Onglet Contenu – Dans cet onglet, vous trouverez les options pour modifier les champs suivants
        • Fiche technique
        • Court extrait
        • Contenu principal
        • Contenu principal (corps du texte)
      • Onglet Carrousel d’images – Dans cet onglet, vous trouverez les options pour modifier et ajouter au carrousel d’images + légendes dans la zone des héros. Notez que la première image du carrousel sera toujours l’image vedette que vous avez définie dans la barre latérale. Vous n’avez pas besoin de saisir l’image vedette dans les champs du carrousel.
      • Onglet Onglets – Dans cet onglet, vous trouverez les options permettant de modifier les champs suivants
        • « Ajouter un onglet » pour ajouter un onglet supplémentaire au produit
        • Étiquette de l’onglet
        • Contenu de l’onglet (Ce WYSIWYG est l’endroit où la plupart des tableaux seront construits pour les produits).
  • Produits de liens offsite
    • Certains produits seront hors site et nécessiteront donc un ensemble de liens externes au lieu d’une page de renvoi.
    • Pour ce faire, créez un produit comme d’habitude, avec le nom, l’image vedette et les extraits.
    • Ensuite, dans la barre latérale de droite, vous devriez voir une section intitulée « Page Links To ». Dans cette section, sélectionnez l’option « Une URL personnalisée » pour que le produit pointe vers un autre lien plutôt que vers une page détaillée.
  • Créer et modifier des catégories de produits
    • Pour créer une nouvelle catégorie de produits, allez sur : Produits > Catégories de produits. Pour modifier un produit existant, allez sur Produits > Catégories de produits > trouver la catégorie que vous souhaitez modifier > Modifier.
    • Définir le nom et le slug de la catégorie
    • Pour modifier le « CTA produit » d’un produit qui apparaît sur les pages de détail du produit, vous devez vous rendre dans la catégorie de produit en question et modifier le texte dans le champ « CTA produit » à l’arrière-plan.

Articles de blog (Color Science Essentials)

Pour créer un nouveau message, allez sur : Posts > Add New Pour modifier un post existant, allez sur : Messages > trouver le message que vous souhaitez modifier > Modifier

  • Créer et éditer des articles de blog
    • Saisissez le titre du billet dans le champ « Ajouter un titre ».
    • Saisissez tout le contenu dans l’éditeur de contenu (WYSIWYG).
    • Yoast SEO – Définissez le titre SEO et la méta-description dans la section « Yoast SEO ».
    • Catégories et balises – Ajoutez des catégories et des balises selon vos besoins dans la barre latérale de droite.
      • Voir ci-dessous les notes sur la création et la modification des catégories et des balises de blog.
    • Définissez l’image vedette qui apparaîtra sur la page de tous les messages de ressources en tant que vignette pour cet élément de message.
    • Sauvegarder et mettre à jour le poste.
  • Catégories de blog Pour créer et/ou modifier une catégorie de blog, allez à :
    Posts > Catégories.

    • Si vous essayez de modifier une catégorie qui existe déjà, vous pouvez le faire au même endroit.
    • Modifiez/ajoutez des catégories comme bon vous semble. Pour qu’une catégorie apparaisse sur la page de destination 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, allez sur : Articles > Tags.
    • Si vous essayez de modifier une balise qui existe déjà, vous pouvez le faire au même endroit.
    • Modifiez/ajoutez le tag comme bon vous semble.

Témoignages de clients

Cours

Événements

FAQs

Communiqués de presse

Biographies des équipes

Sites

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 kb (bien que cela soit parfois inévitable). Vous voudrez recadrer l’image à la dimension appropriée avant de la compresser. Ce site, tinypng.com, peut être utile pour compresser la taille des fichiers d’images de grande taille. Pour consulter la médiathèque, allez sur : Médias > Bibliothèque

  • Pour ajouter de nouvelles images et de nouveaux fichiers, cliquez sur le bouton « Ajouter nouveau » en haut de la page. Cliquez ensuite sur « Sélectionner les fichiers » ou faites simplement glisser et déposer un fichier dans la fenêtre.
  • Vous pouvez ajouter des fichiers directement à un dossier spécifique ou les faire glisser et les déposer ultérieurement dans le dossier approprié.
  • Vous pouvez cliquer sur n’importe quel élément du média pour modifier les champs suivants :
    • Texte alternatif
    • Titre
    • Légende
    • Description
    • URL du fichier
  • Si vous modifiez un PDF, le champ « URL du fichier » est le lien que vous utiliserez pour accéder directement au PDF.

Note : 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, allez à : Ninja Forms > Tableau de bord

  • Ici, vous devriez voir tous les formulaires de votre site.
  • Cliquez sur l’icône en forme d’engrenage à côté de votre formulaire pour modifier, dupliquer, prévisualiser et supprimer votre formulaire. Vous pouvez également consulter les soumissions à cet endroit.
  • Cliquez sur « Ajouter un nouveau » ou modifiez un formulaire existant.
  • Allez dans les « 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 « Publier ». Remarque : Ce bouton indiquera toujours « Publier », même si le formulaire a déjà été publié.
  • Allez dans l’onglet « Email & Actions ».
    • Modifiez les paramètres de redirection, d’administration et d’utilisateur de l’e-mail pour chaque formulaire.
      • Redirect – Redirige vers la page de remerciement
      • Administration des courriels – Vous pouvez personnaliser la façon dont chaque soumission arrive dans votre boîte de réception : nom, adresse, courriel (très important), objet et champs.
    • Les paramètres avancés, situés sous la fenêtre html, permettent d’ajouter des paramètres supplémentaires pour l’envoi d’e-mails. S’il s’agit d’un courriel de réponse automatique, il faut ajouter des adresses de courriel CC ou supplémentaires au formulaire. 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, allez à Apparence > Menus Remarque : le menu des médias sociaux dans le pied de page se trouve à un autre endroit. Voir ci-dessous.

Modifier les menus

  • Allez dans la liste déroulante « Sélectionnez un menu à modifier : », et choisissez le menu que vous voulez modifier.
  • Utilisez les menus pour organiser la façon dont vous souhaitez que les différents menus s’affichent.
  • Ajout d’éléments de menu –
    • Trouvez la page (ou un autre type d’élément de menu) que vous souhaitez ajouter à votre menu dans la zone de sélection « Ajouter des éléments de menu » située à gauche.
    • Sélectionnez « Ajouter au menu », et la page apparaîtra au bas de ce menu.
    • Faites glisser et déposez la page que vous avez ajoutée à l’endroit du menu où vous voulez qu’elle apparaisse.
    • Pour définir un élément en tant qu’élément de menu enfant, faites glisser la page pour qu’elle apparaisse en retrait sous la page principale.
    • Cliquez sur la flèche située à droite de l’élément de menu pour obtenir plus d’options. Dans cette zone, vous pouvez modifier les éléments suivants :
      • Étiquette de navigation (le texte qui apparaît dans le menu lui-même)
      • Attribut de titre
      • Une case à cocher pour ouvrir les liens dans un nouvel onglet
      • (facultatif) Classes CSS
  • Une fois que vous avez le. Si vous voulez que le menu soit comme vous le souhaitez, cliquez sur le bouton « Enregistrer le menu » dans le coin supérieur gauche.

Menu médias sociaux

Pour modifier le menu des médias sociaux, allez sur : Options > Footer > Social Media

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

Mega Menu