Protégé : Blocs WordPress

Titre

Permet de « chapitrer » son contenu. Très conseillé pour aider à la lecture et à la hiérarchisation de l’information en SEO (optimisation du référencement dans les moteurs de recherche)

Ne pas écrire en majuscule, c’est le thème qui transformera votre texte selon les emplacements¹.

Bien respecter la hiérarchie des titres dans la page. Toujours commencer par le H2, puis H3, etc. Pas de titre isolé : si 1 H2 est inséré alors il est attendu au moins un 2e H2.

• H2
• H2
  • H3
    • H4
    • H4
      • H5
        • H6
        • H6
      • H5
  • H3
• H2

---

Paragraphe

Paragraphe style chapo

Il conviendra aux introductions des articles d’appliquer le style chapo : depuis la liste déroulante Style de bloc dans les paramètres du bloc.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.

paragraphe style fond coloré

Ce style permet une mise-en-forme visuelle². Ne pas surcharger votre page avec trop d’éléments mis-en-avant : cela annulerait l’effet voulu et noierait votre lecteur dans trop de sollicitations.

Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.

paragraphe style source biblio

Ce style permet une mise-en-forme visuelle pour les sources

Unde Rufinus ea tempestate praefectus, praetorio ad discrimen, pp. 250-282, Trusus Estultimum.

Liens

• Possible de faire des liens dans tous les blocs de contenus sauf titre
• Entrer une url
• Ou taper les mots clefs d’une page, d’un article, d’un événement du site

Voici un lien vers une page du site et un lien qui sort du site.

Liste (à puces)

• N°1
• N°2
• N°3
  • N°3.5
    • N°3.55

---

Colonnes

Plusieurs configurations de colonnes sont possibles. Choisir la plus adaptée à la page et au contenu. Pour cet exemple, c’est un double colonnage de largeur égale.

Attention : plus les colonnes sont nombreuses, plus il est difficile de lire

---

Image

Insertion

2 choix possibles :

• Téléverser l’image dans la médiathèque depuis votre ordinateur = ne pas oublier de renommer l’image et l’insérer dans le dossier correspondant
• Cliquer sur Médiathèque lorsque votre image est déjà présente dans la médiathèque

Réglages

Les poignées autour de l’image permettent de diminuer sa taille si besoin.

La proportion de taille d’affichage peut être rapidement ajustée par la liste déroulante :

La résolution peut être réglée par la liste déroulante :

Alignement à gauche ou à droite

In venenatis sodales nulla at elementum. Praesent eu dictum lectus. Quisque sed lectus tempus, tempus augue ac, auctor massa. Fusce tempus elit hendrerit, pretium augue ac, vehicula ipsum. Pellentesque interdum placerat rhoncus. Mauris rhoncus mi libero, et posuere elit fermentum quis. Suspendisse hendrerit felis id facilisis sodales. In purus sem, maximus sit amet efficitur sed, congue molestie ante. Donec dictum mi ac diam luctus vulputate. Integer ornare nunc id mauris ullamcorper maximus.

Pellentesque eu ex vehicula, consequat nulla a, pulvinar neque. Sed et dictum leo. Praesent nec est vel quam faucibus pellentesque lacinia at tellus. Etiam condimentum ac est at posuere. Duis a pharetra arcu, eu feugiat nisl. Nam pulvinar leo nec risus mollis, sed varius erat ullamcorper. Vestibulum volutpat, erat ut eleifend volutpat, enim dolor luctus risus, sed tristique nunc erat sed ante. Nam in enim at libero congue eleifend. Suspendisse potenti. Phasellus in massa sed ante tempor laoreet. Curabitur in molestie lorem.

---

Média & texte (image + texte à côté)

Tableau

---

---

Fichier

Lorsque ce bloc est utilisé, le fichier s’ouvre par défaut directement dans la page. Il faut désactiver « Afficher le contenu embarqué en ligne » qui se trouve à droite dans les réglages PDF.

Vous pouvez utiliser le bloc « Fichier » si votre pdf se trouve seul sur une ligne (pas au milieu d’un texte). Inutile de taper le nom du lien, cela se fait automatiquement.

1. il faut d’abord insérer votre fichier dans la médiathèque
2. le renommer (titre) car, par défaut, il prend le nom du fichier *
3. cliquer sur « dossier » et l’associer au bon item (à condition d’avoir créé en amont les items dans la médiathèque)
4. mettre à jour
5. cliquer sur joindre pour associer votre fichier à la page sur laquelle il se trouve (bien vérifier que vous êtes en mode liste et pas en mode grille (sous le titre Médiathèque) ; s’il se trouve sur plusieurs pages, il faut choisir la plus pertinente
6. retourner sur la page où doit être inséré le fichier et cliquer sur le bloc « Fichier »

Exemple :

---

Vous pouvez régler le curseur sur « Afficher le contenu embarqué en ligne » seulement s’il s’agit d’une plaquette, brochure, etc.

---

Groupe

Le bloc « Groupe » sert à mettre en valeur un texte dans un contenu. Il peut être utilisé pour mettre en avant des coordonnées, des infos importantes, etc.

Groupe style mise-en-avant (groupe)

Le bloc « Groupe » va ajouter une barre verticale à côté du texte et va décaler l’ensemble sur la droite.

1. taper le texte et le mettre en forme (titres, activer les liens, ajouter une icône si besoin, etc.)
2. sélectionner l’ensemble des éléments à mettre en valeur
3. cliquer sur la 1re icône et choisir « Groupe »
4. aller dans les réglages (colonne de droite) et cliquer sur « Mise en avant (groupe) » dans liste déroulante « Styles de blocs »

Voici un exemple :

Groupe style fond coloré

Ceci est une information à distinguer.

---

Boîte d’icône (ancien nom « Icon box »)

Par défaut, l’icône et le texte sont centrés, il faut tout mettre à gauche (charte graphique). Les réglages se font dans la colonne de droite :

• Icon : modifier l’icône qui, par défaut, est l’icône WordPress
  • dérouler le menu icône, show from all
  • saisir un mot clef en anglais : (XOXO insérer exemples XOXO)
  • sélectionner l’icône choisie
• Layout : cocher « Align icon left »
• Content Alignment : Left
• dans l’onglet « Style », régler Icon size = la taille de l’icône à 25 px

---

Groupe de boutons (ancien nom « Button group »)

Par défaut, WordPress propose 2 boutons.
S’il y en a besoin que d’un bouton, en sélectionner un (contour bleu) et supprimer.

Pour régler sa taille, cliquer un pourcentage et prévisualiser pour voir si la largeur est correcte.

Pour ajouter un lien, il est inutile de sélectionner le texte, le lien se fait sur l’ensemble du bouton.

---

Ouvrir/Fermer (cliquer/dérouler, ancien nom « Toggle »)

Le bloc Ouvrir/Fermer est un système de cliquer / dérouler. Il permet de construire une FAQ (questions, réponses) par exemple, ou de réduire certaines parties de votre contenu qui serait secondaire ou n’intéresserait qu’une partie de vos visiteurs. La page se trouve alors moins longue à parcourir et le public détermine à l’avance ce qu’il souhaite lire en prenant connaissance des intitulés thématiques qu’il faudra prendre soin de rédiger clairement.

1. Création :
   • choisir le nombre d’items (vous pourrez le modifier par la suite)
   • cliquer sur « Create »
2. Édition :
   • cliquer sur un item et modifier le titre (ils peuvent être stylés dans les paramètre du bloc complet) puis écrire les réponses
   • cliquer sur le bloc complet et modifier les icônes par défaut (sélectionner le bloc = contour bleu) : rester cohérent en choisissant des icônes de même nature pour le haut et le bas) par exemple le + et -, les chevrons ▽△ ou flèches ↓↑ etc. Les harmoniser si plusieurs blocs ouvrir/fermer dans la page.
   • Icon Position = préférez à droite

---

Détails

Ce bloc est utile lorsque vous souhaitez proposer un complément d’information qui sera par défaut caché. Pour le lire, l’utilisateur devra cliquer sur un texte l’y invitant (typiquement « Lire la suite », « En savoir plus », « Toutes les informations »)

En savoir plus

Mon contenu qui est rabattu par défaut.

---

Onglets (cliquer / afficher, ancien nom « Tabs »)

Onglets est également un système de cliquer / dérouler. Par défaut, le 1er item est ouvert, mais vous pouvez personnaliser l’onglet par défaut ouvert.
Le titre peut être stylé. Les items peuvent être déplacés, dupliqués, supprimés et pour en ajouter, cliquer sur +
Tabs peut être horizontal ou vertical.

ATTENTION : pour que l’affichage soit optimum sur un mobile, il ne faut pas dépasser 2 items à l’horizontal.
En revanche, pas de restrictions pour l’affichage vertical.

Onglets à l’horizontal

Onglets à la verticale

---

Code court (pour toute insertion de vidéo)

Le code court est utilisé pour insérer les vidéos : YouTube, Canal-U et médiathèque pédagogique UNICAEN.

Code court vidéo Youtube

Copier l’URL de la vidéo directement dans le champ « code court » sans crochet (insérer directement l’url dans un paragraphe fonctionnera également)

https://www.youtube.com/watch?v=iySp28wFyOw&list=PLL6NPM8xJXnVFRzqEbAF8vi6Ex2JrvGZg

Code court vidéo Canal-U

Copier l’URL de la vidéo* entre les 2 crochets [] canal-u et /canal-u dans le champ « code court » (pas de majuscule)

* attention le lien à copier doit être de la forme https://www.canal-u.tv/chaines/cemu/embed/97577 : c’est le lien qu’on trouve dans le menu Partager puis Intégrer de Canal-U.

[canal-u]https://www.canal-u.tv/chaines/dessine-moi-l-eco/embed/46877[/canal-u]

Code court vidéo Médiathèque pédagogique UNICAEN

Copier l’URL de la vidéo entre les 2 crochets [] media-pedago et /media-pedago dans le champ « code court »

[media-pedago]https://mediatheque-pedagogique.unicaen.fr/video/2321-unicaen-gaming-lab-actualites-et-revue-de-projets/[/media-pedago]

---

Person (trombinoscope)

Il faut d’abord ajouter un colonage (2 ou 3) puis insérer le bloc « person » dans chaque colonne. Régler la photo sur Thumbnail – 250 x 250 ; laisser crop image ; mettre le nom de la personne et sa fonction en-dessous ; supprimer les icônes des réseaux sociaux s’ils ne sont pas nécessaires et n’ont aucun lien associé.

---

Real media library gallery (galerie photos)

Il faut d’abord créer une galerie d’images dans la médiathèque et y mettre toutes les photos désirées. Cela créée un dossier dans lequel se trouvent toutes les images sélectionnées. Cette galerie d’images peut être appelée à l’intérieur d’un contenu (page, article) en cliquant sur Real Media Library Gallery, puis dossier (réglages de colonne de droite). Cliquer sur le dossier correspondant.

Il est possible de faire qu’au clic, l’image soit ouverte en grand. Pour cela, dans les options du bloc Real media library gallery dans Link to choisir Media.

• 

• 

• 

• 

• 

• 

• 

• 

---

Citation

Ce bloc est réservé aux citations, merci de ne pas le détourner et de nous contacter si votre besoin est particulier.

Rappel : ce que vous voyez dans l’éditeur n’est pas la mise en forme affichée sur le site web

Contenu de la citation, qui peut être plus ou moins long.

Source de la citation, essayer d’être concis : Prénom Nom, fonction – statut

---

Citation en exergue

Ce bloc fera une mise en forme différente de la citation.

Rappel : ce que vous voyez dans l’éditeur n’est pas la mise en forme affichée sur le site web.

Contenu de la citation, qui peut être plus ou moins long.

Source de la citation, essayer d’être concis : Prénom Nom, fonction – statut

---

Témoignage

Ce bloc vous est proposé par défaut avec une image et du texte, mais vous pouvez laisser le bloc image vide sans soucis³.

avec image remplie

sans image remplie

---

Notes de bas de page