Blocs standard ou Starter Pack

TABLE DES MATIÈRES

🔥
NB : tous les blocs présentent plusieurs champs de contenu. Vous n’avez pas l’obligation de remplir l’intégralité des champs disponibles. Selon les besoins vous pouvez en laisser certains vides. Leur existence est seulement une démonstration du maximum que peut contenir le bloc de contenu.

Hero

Un bloc pour 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.
Hero replié
Hero replié

Le Hero se compose comme suit :

  • un champ Titre
  • un champ Description - un éditeur de texte avec les fonctionnalités d'enrichissement typographique de base (liste à puces, gras, italique...)
  • la possibilité d’ajouter un ou plusieurs CTA* (Call To Action)
  • un champ pour ajouter une grande image (dont la position variera selon ce qui est défini dans le Design System de votre site)
Hero ouvert pour l’édition
Hero ouvert pour l’édition

Texte & image

image
Un bloc affichant un visuel d'un côté et un texte de l'autre. Il offre la possibilité d’alterner droite/gauche.
Texte & Images fermé
Texte & Images fermé

Le Texte & Images se compose comme suit :

  • un champ Titre général
  • un champ Description général - un éditeur de texte avec les fonctionnalités d'enrichissement typographique de base (liste à puces, gras, italique...)
Première partie du Texte & Images
Première partie du Texte & Images

En cliquant sur le bouton “Add a text & image”, vous pouvez ajouter autant de blocs que souhaité, en choisissant d’alterner (ou non) gauche/droite.

Chaque sous-bloc Texte-Images se compose ensuite ainsi :

  • un champ Titre
  • un champ Description - un éditeur de texte avec les fonctionnalités d'enrichissement typographique de base (liste à puces, gras, italique...)
  • un champ pour ajouter une image
  • le choix de la position de l’image (gauche/droite)
Edtieur de chaque Texte & Images
Edtieur de chaque Texte & Images

Colonnes

Un bloc pour diviser le contenu en colonnes séparées.
Colonnes replié
Colonnes replié

Le Colonnes se compose comme suit :

  • un champ Titre général
  • un champ Description général - un éditeur de texte avec les fonctionnalités d'enrichissement typographique de base (liste à puces, gras, italique...)

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).

🤗
Pour des questions de lisibilité générale, le nombre de colonnes est de minimum 2 et de maximum 4 par ligne.
Editeur général (chapeau) du colonnes
Editeur général (chapeau) du colonnes

Pour ajouter des colonnes supplémentaires, cliquez sur le “+” au bas de l’éditeur

image
image

Chaque colonne peut contenir :

  • un titre
  • une description - un éditeur de texte avec les fonctionnalités d'enrichissement typographique de base (liste à puces, gras, italique...)
  • une image à charger ou à récupérer de la médiathèque WordPress
  • un lien : selon les paramètres de votre site, seul le lien au bas de la colonne sera rendu cliquable, ou bien toute la colonne sera cliquable
Editeur de chaque colonne
Editeur de chaque colonne

Chaque colonne porte un numéro, et les flèches en haut à droite du bloc permettent au besoin de réorganiser les colonnes.

Editeur

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

L’Editeur se compose comme suit :

  • un champ Titre
  • un champ Description de tête - pour une courte introduction avec un éditeur de texte avec les fonctionnalités d'enrichissement typographique de base (liste à puces, gras, italique...)
  • un champ Contenu - un éditeur de texte avec les fonctionnalités d'enrichissement typographique de base (liste à puces, gras, italique...)
🤗
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.
Bloc Editeur ouvert
Bloc Editeur ouvert

Vidéo

Ce bloc permet d'ajouter une vidéo unique au sein de votre page - lue directement dans le cadre sur la page.
Bloc Vidéo replié
Bloc Vidéo replié

Le Vidéo se compose comme suit :

  • un champ Titre
  • un champ Description - un éditeur de texte avec les fonctionnalités d'enrichissement typographique de base (liste à puces, gras, italique...)
  • un champ pour ajouter une vidéo via un URL (lien YouTube, DailyMotion, etc.)
🤗
Attention d’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 → l'adresse est tronquée - 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 ⇒ Copiez l'url qui s'affiche dans la barre d'adresse de votre navigateur et retirez les éventuels paramètres.
Vidéo ouvert pour édition
Vidéo ouvert pour édition

Images

Ce bloc permet d'ajouter une seule grande image sur votre page.
Image fermé
Image fermé

Les composants de ce module sont :

  • un champ Titre général
  • un champ Description de tête - pour une courte introduction avec un éditeur de texte avec les fonctionnalités d'enrichissement typographique de base (liste à puces, gras, italique...)
  • un champ Titre contenu - un éditeur de texte avec les fonctionnalités d'enrichissement typographique de base (liste à puces, gras, italique...)
  • un champ Description contenu - un éditeur de texte avec les fonctionnalités d'enrichissement typographique de base (liste à puces, gras, italique...)
  • le plus important, l'image elle-même à charger
Image ouvert pour édition
Image ouvert pour édition

Formulaire

Un bloc pour ajouter un formulaire préalablement créé via le plugin spécifique installé sur votre WordPress.
Form replié
Form replié

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

Ensuite il faut sélectionner le formulaire que vous souhaitez afficher à cet endroit de la page :

  • cochez le formulaire souhaité parmi la liste qui s’affiche dans la partie “Form Selector”
  • s’il y en a trop pour un affichage complet, vous pouvez rechercher celui souhaité en tapant son nom dans le champ “Search for a form”
Form ouvert pour édition
Form ouvert pour édition
⚙
Pour utiliser ce bloc, il faut avoir créé au préalable un ou plusieurs formulaires via l’outil de création de formulaires - accessible via le menu latéral gauche de WordPress.

Posts

Un bloc pour afficher - 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.
Bloc Articles fermé - le bloc affiche automatiquement les Articles existants, ainsi même fermé il présente du contenu
Bloc Articles fermé - le bloc affiche automatiquement les Articles existants, ainsi même fermé il présente du contenu

Le bloc Posts se compose comme suit :

  • un champ Titre
  • un champ Description - un éditeur de texte avec les fonctionnalités d'enrichissement typographique de base (liste à puces, gras, italique...)
Bloc Article ouvert pour édition - Champs introductifs
Bloc Article ouvert pour édition - Champs introductifs
  • un sélecteur de Posts ou Articles qui permet de contrôler l’affichage des articles de façon automatique ou manuelle
    • automatique : le bloc n’affichera que les articles des catégories ou des tags que vous aurez sélectionnés
    • manuelle : vous sélectionnez un par un les articles que vous souhaitez afficher parmi la liste des existants
Sélecteur de posts, manuel ou automatique - vous pouvez utiliser autant de filtres que de catégories établies dans le back office du site
Sélecteur de posts, manuel ou automatique - vous pouvez utiliser autant de filtres que de catégories établies dans le back office du site
  • vous pouvez affiner la sélection en choisissant les témoignages dont les tags sont A, et/ou B, et/ou C, etc.
Choix de l’ordre d’affichage des articles dans le bloc
Choix de l’ordre d’affichage des articles dans le bloc

L’affichage des Articles se fait au choix par ordre alphabétique ou de date, croissant ou décroissant. Vous pouvez choisir le nombre d’Articles affichés. Ils apparaissent sous la forme de lignes de trois colonnes.

Profil utilisateur

Le module Profile permet de mettre en avant une personne parmi celles ayant un compte sur votre site.
Profile fermé
Profile fermé

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.

Sur la page de la personne, 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.

Profile ouvert pour édition
Profile ouvert pour édition

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, et seront affichées en frontend* selon le design défini.

Childs

Un bloc pour afficher les pages “enfant” de la page actuelle, selon la hiérarchie des contenus de WordPress. Ce bloc est uniquement présent pour la solution Ariane.
Bloc Childs fermé
Bloc Childs fermé

Le bloc se compose comme suit :

  • un champ Titre
  • un champ Description - un éditeur de texte avec les fonctionnalités d'enrichissement typographique de base (liste à puces, gras, italique...)
Childs ouvert - Champs d’introduction
Childs ouvert - Champs d’introduction
  • vous pouvez choisir d’afficher les pages “Enfants” de votre page actuelle, ou d’en afficher une autre qui n’est pas hiérarchiquement liée grâce au bouton “use another content”
  • possibilité de trier ces pages par ordre alphabétique ou chronologique, croissant ou décroissant
  • définition du nombre maximum de pages à afficher
  • définition du nombre de pages à afficher sur une même ligne. Exemple : vous souhaitez afficher 12 pages au total, vous pourrez choisir d’avoir 4 lignes de 3 vignettes ou bien 3 lignes de 4 vignettes, etc.
Sélection des champs à afficher pour chaque vignette
Sélection des champs à afficher pour chaque vignette
  • pour l’affichage des pages sélectionnées, vous pouvez le choisir plus ou moins complet en sélectionnant l’un ou l’autre (ou tous les) élément(s) à présenter :
    • titre
    • image
    • description
    • date

L’objectif est de faire un index des pages “enfant” d’une page “Parent”. Par exemple, lister les pages qui parlent de la même thématique, mais sans avoir à créer de taxonomie transversale.

🔥
Vous ne pouvez pas directement choisir quelle(s) page(s) afficher. L’affichage se fait selon la hiérarchie et l’ordre des pages Enfants.

Dans WordPress, la hiérarchisation entre les pages se fait lorsque vous créez ou modifiez une page : dans les paramètres de cette page, vous pouvez choisir de lui attribuer un “Parent” (= une autre page).

image

La page ainsi devenue “Enfant” s’affiche en décalé sous son parent, comme ci-dessous.

Page Parent avec 3 pages Enfants
Page Parent avec 3 pages Enfants

Vous pouvez également définir l’odre dans lequel ces pages s’affichent (en mettant 1, 2, 3, 4, etc. dans le champ “Order” ci-dessus).

Le bloc Childs affichera les pages Enfant selon l’ordre dans lequel elles sont listées sous la page Parent. SI vous choisissez de ne pas toutes les afficher, vous pourrez alors forcer l’affichage de certaines en les ordonnant.