Starter Pack

TABLE DES MATIÈRES

Hero

Le Hero est un module qui permet de communiquer via un grand visuel et un court texte d'accroche. Il est généralement utilisé en introduction ou en haut d'une page, sous le menu général.

image
  • Le champ Titre est le titre principal du widget, il est notamment visible quand celui-ci est fermé (dans la liste des widgets de vos pages, dans le dashboard de votre site).
  • Le champ Description est un éditeur de texte qui vous permet de disposer de fonctionnalités d'enrichissement typographique : liste à puces, gras, italique...
  • Le bouton Add an image vous permet de charger l'image principale du widget généralement diffusée en fond (prévoyez une taille minimum de 1000px de large).
  • Le bouton Add a Call to action vous permet d'ajouter un nombre illimité de boutons au sein du hero.
image

Texte & image

Le Texte & image est un module qui permet de communiquer via un visuel d'un côté et un texte de l'autre. Il permet d'alterner plusieurs blocs avec tantôt l'image à gauche et le texte à droite, tantôt l'image à droite et le texte à gauche.

image
  • Le champ Titre est le titre principal du widget, il est notamment visible quand celui-ci est fermé.
  • Le champ Description est un éditeur de texte qui vous permet de disposer de fonctionnalités d'enrichissement typographique : liste à puces, gras, italique, niveaux de titre, liens... Il apparaît en vis-à-vis de l'image, tantôt à gauche ou à droite en fonction de l'option choisie.
  • Le bouton radio image sur le côté gauche ou image sur le côté droit permet de positionner l'image par rapport au texte de description.
  • Le bouton Ajouter une image permet de choisir une l'image à utiliser depuis la médiathèque de WordPress.
image

Colonnes

Le Colonnes est un module qui permet de répartir son contenu en colonnes.

image

Comme les autres modules (voir-ci-dessus), il y a d'abord une série de champs d'introduction (titre, description, bouton). Pour ce widget, il faut impérativement indiquer le nombre de colonnes à afficher sur une ligne (si le nombre de colonnes créées dépasse ce chiffre, elles se répartiront sur plusieurs lignes).

image
image
🔥
Attention Le nombre de colonnes est limité à 6 mais pour des questions de lisibilité, préférez un maximum de 4 colonnes sur une ligne dans un environnement large écran.

Pour ajouter des colonnes supplémentaires, vous pouvez soit dupliquer la colonne existante (et son contenu) via le bouton en bas à droite du bloc, soit Ajouter une colonne (bloc au-dessous).

image

Dans chaque colonne, vous pouvez configurer :

  • un titre
  • un texte via un éditeur de texte qui vous permet de disposer de fonctionnalités d'enrichissement typographique : liste à puces, gras, italique...
  • une image à charger ou à récupérer de la médiathèque WordPress.
  • une URL : celle-ci fera l'objet tantôt d'un lien sur l'image tantôt de l'ajout d'un bouton/lien avec un label type Lire plus selon la configuration de votre site web.

Editeur

L'Editeur est un simple éditeur de texte disposant de toutes les fonctionnalités d'enrichissement typographique : liste à puces, gras, italique, niveaux de titres, etc.

image
📢
Conseil Chaque style de texte a son importance tant pour votre SEO que pour l'accessibilité de l'information. Structurer votre contenu avec des titres et des sous-titres améliore également son taux de lecture. Pensez ainsi à la sémantique que vous souhaitez mettre en place en fonction des outils de mise en page disponibles.
image

Vidéo

Le module Vidéo, comme son nom l'indique, permet d'ajouter une vidéo au sein de votre page.

image

Les composants de ce module sont :

  • le titre principal
  • le texte introductif ('Description')
  • le titre associé à la vidéo ('Sous-titre')
  • le texte descriptif de la vidéo (dans certains cas, il peut servir de retranscription du contenu sonore ou visuel de la vidéo pour des questions d'accessibilité)
  • le plus important - la vidéo elle-même : il suffit d'ajouter le lien provenant de votre plateforme vidéo préférée : YouTube, DailyMotion, Viméo
  • l'image permet de définir un visuel personnalisé qui apparaît dans le cadre de la vidéo avant celle-ci ne démarre (quand on clique sur l'icône play)
🔥
Attention Soyez attentif à utiliser le "bon" code pour la vidéo : il s'agit du code complet (pas de shortcode) et sans paramètres. Exemple pour YouTube : - le bon code est https://www.youtube.com/watch?v=knzsyZWbN7g - le shortcode proposé par YouTube lors du partage est https://youtu.be/knzsyZWbN7g → Remarquez comme l'adresse est tronquée, raccourcie. Pas bon ! - ceci est un mauvais code car il y a un paramètre ajouté après l'identifiant de la vidéo (commence par `&`) https://www.youtube.com/watch?v=knzsyZWbN7g&ab_channel=KEXP Conseil : copiez l'url qui s'affiche dans la barre d'adresse de votre navigateur et retirez les éventuels paramètres.
image

Images

Le module Images est très semblable au module Vidéo : il permet d'ajouter une image au sein de votre page.

image

Les composants de ce module sont :

  • le titre principal
  • le texte introductif ('Description')
  • le titre associé à l'image ('Sous-titre')
  • le texte descriptif de l'image
  • le plus important, l'image elle-même : il suffit de l'ajouter depuis la médiathèque de WordPress ou de la charger en cliquant sur Add an image
image

Formulaire

Le module Formulaire vous permet d'ajouter un formulaire préalablement créé via le module de contenu spécifique installé sur votre WordPress.

image

Comme les autres modules (voir-ci-dessus), il y a d'abord une série de champs d'introduction (titre et description).

Ensuite il faut sélectionner le formulaire que vous souhaitez afficher à cet endroit de la page - en cliquant sur le menu déroulant au bas du bloc.

image

Les champs titre et description du widget permettent d'ajouter un contexte particulier à votre formulaire - par exemple un avertissement sur la collecte de données (RGPD).

🔥
Attention Il est impératif d'avoir créé au minimum un formulaire depuis le module de contenu spécifique, accessible via le menu latéral gauche de WordPress.
image

Articles

Le module Articles permet d'afficher - le plus généralement en colonnes - des articles rédigés et publiés au sein de WordPress depuis le module de contenu du même nom.

image

Comme les autres modules (voir-ci-dessus), il y a d'abord une série de champs d'introduction (titre et description).

Il y a ensuite plusieurs paramètres pour définir quels articles faire apparaître à cet endroit :

  • l'Ordre permet de définir la chronologie d'affichage : du plus récent au plus ancien, ou l'inverse
  • en mode automatique, le nombre d'articles (donc de colonnes)
  • en mode automatique, éventuellement une catégorie d'articles si vous avez défini des catégories et que vous avez lié vos articles à celles-ci
  • en mode automatique, la sélection permet de partir des derniers articles encodés ou de choisir aléatoirement des articles dans la liste complète
  • en mode manuel, vous accédez à un petit moteur de recherche qui vous permet de faire une sélection manuelle de vos articles
image

Profil utilisateur

Le module Profile permet de mettre en avant une personne spécifique parmi les différents utilisateurs de votre site.

image

Par exemple, vous pourrez préciser que pour avoir plus d’informations sur tel ou tel service présenté sur la page, il est nécessaire de contacter telle personne.

Les informations qui s'affichent dans le module ne sont pas à saisir dans le module lui-même, mais sont liées à celles encodées au préalable dans le dashboard de votre site.

Pour cela, allez dans le menu latéral gauche de WordPress, cliquez sur 'Comptes', puis sur 'Tous les comptes' si vous avez déjà paramétré les différents membres de votre équipe ; sur 'Ajouter' si ce n'est pas le cas et/ou que vous souhaitez en ajouter un nouveau.

image

Sur la page de l'utilisateur, vous pouvez renseigner une adresse email, une photo, une biographie, un profil de réseau social, un numéro de téléphone, une adresse postale, etc., selon les besoins.

En ajoutant ensuite le widget Profile dans votre page lors de sa création, il vous suffira de sélectionner dans la liste déroulante quelle personne afficher. Toutes les informations encodées dans les champs concernés se mettront automatiquement en position.