Page "mémo" pour les éditeur·rice·s
Sous-titre (facultatif), pratique pour garder un grand titre court et un sous-titre plus long

Le titre (et sous-titre facultatif), le texte ainsi que l’image d’introduction sont les seuls éléments fixes des pages. Ensuite, comme des legos, on construit sa page avec des blocs que l’on peut déplacer et empiler à sa guise.

  • Ici c’est l’espace pour le texte d’introduction qui apparaîtra avant l’image. Si on laisse cet espace vide le bouton « Introduction » disparaît du menu d’ancre à droite ->
  • Ci-dessous il est possible de rajouter une image d’introduction.
  • Il est également possible ci-dessous de masquer la navigation des ancres si la page (ou l’article) est trop vide. Le layout va alors d’adapter pour prendre toute la largeur du bloc.
  • Ci-contre à droite, dans le bloc « Attributs de page » il est nécessaire d’attacher votre page à un parent afin que votre page reprenne les couleurs définies de chaque secteur. Les parents sont les pages principales (Institution, formation initiale, etc.).
  • Une fois que vous avez fait les modifications nécessaires n’oubliez pas d’enregistrer votre page en cliquant sur « Publier » ou « mettre à jour » dans le bloc « Publier » à droite. Il est également possible d’enregistrer votre page ou article en brouillon. Un message d’avertissement apparaîtra si toutefois vous essayer de quitter la page sans avoir enregistré.

 

L'interface de Wordpress

Il y a deux façon de travailler et de modifier les pages et articles dans WordPress soit via le frontend (ce que les utilisateurs voient) soit via le backend (ce que uniquement les éditeur·trice·s voient).

En Frontend:

Lorsque vous est connecté avec votre compte vous pouvez naviguer normalement sur le site de la Hep. Il y juste cette petite barre noire que vous pouvez observer tout en haut de la page.

  • Si vous cliquez sur « Haute Ecole Pédagogique Fribourg » vous allez basculer vers le backend
  • Si vous venez avec votre pointeur sur « Créer » vous aurez le choix entre une page, un article ou un fichier média
  • Si vous cliquez sur « Modifier la page » (ou « Modifier l’article » si vous êtes sur un article), vous pourrez modifier la page sur laquelle vous êtes présentement
  • « Purger le cache » ne sert à rien

En Backend:

La barre noire du haut est toujours présente et là seule différence est que « Modifier la page » s’est changé en « Voir la page » et qu’un onglet « Français » ou « Deutsch » a fait son apparition. Si vous survolez ce dernier vous pourrez voir les langues disponibles et basculer vers l’interface d’une de ces langues.

  • Le tableau de bord ne sert pas à grand chose, il est là par défaut sur tous les sites WordPress
  • « Articles » vous permettra de voir tous les articles, d’en créer et de modifier et gérer les catégories
  • « Médias » sert à gérer tous les médias du site, que ce soit des images, des vidéos, des pdf ou autre. Il fait l’objet d’un article ici (article à créer).
  • « Pages » permet de voir les pages, de les filtrer, d’en rajouter ou de les modifier
  • « Contacts » si votre fiche personnelle a déjà été activée vous pourrez trouver votre profil à cet endroit
  • « Profil » vous permet de modifier vos informations personnelles ou de changer votre mot de passe

Gestion des langues

Comme le site est bilingue il est possible de créer des pages dans les 2 langues et de les lier.

Pour ce faire, et une fois que vous avez fait votre page dans une des 2 langues, il vous faut cliquer sur le + de la langue partenaire dans le bloc « Langues » tout en haut à droite.
La page sera alors dupliquée à l’identique et il « suffira » de remplacer les textes dans l’autre langue. Ne pas oublier également de changer le titre tout en haut ainsi que le permalien qui va reprendre le nom de la première langue.

Une fois l’opération faite les 2 pages sont liées et vous pouvez en tout temps basculer d’une page à l’autre en cliquant sur le petit crayon dans ce même bloc.

Il est possible de lier une page ou un article qui existe déjà en faisant une recherche dans le champ de recherche dans ce blocs.

Recommendations de rédaction

Seulement 10 à 20% des internautes adoptent une lecture totalement linéaire de l'intégralité d'un contenu.

Baptiste Cochard
Collaborateur technique
baptiste.cochard@edufr.ch

Il est donc primordiale de rester concis et d’aller à l’essentiel. En 2020, Norman Nielsen a publié les résultats de sa deuxième étude sur le sujet. Les internautes continuent de scanner les pages web plutôt que de les lire. Ainsi un texte d’introduction ne devrait pas dépasser les 500 caractères.

Si il y a un besoin de mettre beaucoup de contenu il alors préférable de le « ranger » dans des articles ou un Pdf à télécharger.

Les images et vidéos attirent le regard et peuvent donc guider plus rapidement l’internaute vers l’information recherchée.

Recommendations pour les images

Les images au format portrait sont à proscrire du site de la Hep car elles prennent une place beaucoup trop importante. Il faut donc absolument privilégier les images en mode paysage.

Les dimensions recommandées pour le site: 2000 pixels de large. La hauteur est variable mais afin de ne pas prendre trop de place il faudra préférer les images panoramiques plutôt qu’en 4/3 par exemple. La résolution de l’image doit être de 72dpi idéalement. Les images ne doivent pas faire moins de 900 pixels de large car ensuite elles seront pixelisées.

Vous n’avez pas le droit de prendre une image sur Google images par exemple et de la publier sur notre site. Si vous avez besoin d’images nous avons accès à des banques d’images comme Adobe Stock et pouvez nous transmettre le numéro de référence afin que nous vous la téléchargions.

Les modules (ici le module titre)

Les titres vont automatiquement se ranger dans le menu d'ancres ->

Ceci est un module texte.
Il y a plusieurs options de style de texte dans ce module que vous pouvez retrouver juste ci-dessus: Gras, italique, souligné, barré, liste à puces, liste à numéros, annuler, rétablir, lien hypertexte (qui a lui-même des options et qui est pratique pour ouvrir un lien dans un nouvel onglet lorsque l’on sort du site de la Hep.) et la petite gomme qui permet de nettoyer le texte. Très utile lorsque l’on copie/colle du texte de Word par exemple.

En bas de chaque module il est possible de le masquer ou non. Cela peut-être utile lorsqu’une info est en préparation ou qu’un message revient régulièrement mais dois parfois être caché.

Pour rajouter un module il y a trois options (Voir les captures dans le slider ci-dessous) :

  • Soit en cliquant sur le petit + sur la barre de ce module. Le nouveau module va alors se positionner en dessus de celui-ci;
  • Soit en cliquant sur le bouton « Ajouter un module » en bas de cette page. Le nouveau module va alors s’insérer tout en bas de la page;
  • Il est possible également de dupliquer un module en cliquant sur les 2 petits carrés dans la barre de ce module. Ainsi le module et son contenu seront dupliqués;

Le module média (ci-dessus et ci-dessous)

Le module « Média » permet de rajouter.. un média. Il y a plusieurs possibilités. On peut y mettre une image, un slider (donc plusieurs images qui peuvent défiler avec les flèches ou en « swipant »), une vidéo qui n’est pas sur un service comme Youtube ou Vimeo mais qui sera stocké en « local » et, finalement, un embed qui peut, par exemple, être une vidéo stockée sur Youtube ou Vimeo.

En bas du module Média vous avez la possibilité d’afficher ce dernier en mode normal ou wide. Cette dernière option va afficher l’image ou la vidéo sur toute la largeur du site.

Pour le média « Video » il est possible de cocher l’option « Autoplay – loop » afin qu’elle démarre automatiquement et tourne en boucle. Il faut cependant que la vidéo soit dépourvue de son.

Le module collection

Le module articles

Les articles sont des sortes de mini-pages que l’on peut afficher dans une page. L’inverse n’étant pas possible. On utilise les articles pour des événements, des informations brèves, une « publication », une page temporaire, etc.

Les articles ont les mêmes options de modules que les pages.

On utilise ce module pour afficher les vignettes des articles dans une page.

Il est possible de laisser WordPress afficher automatiquement les articles par catégories mais on peut également choisir manuellement quel/s article/s nous souhaitons montrer.

D’autres informations concernant les articles sont disponibles dans les articles ci-dessous.

Memo

Comment catégoriser un article?

Il est nécessaire de catégoriser les articles afin qu’ils prennent la couleur de la catégorie mais aussi pour pouvoir les afficher dynamiquement dans une page. Pour cela il suffit de cocher la catégorie désirée dans le bloc à droite...
Lire la suite
Memo

Comment créer un article?

Il y a deux façons de créer un article. Soit en allant avec sa souris tout en haut sur « Créer » et cliquer sur article (astuce: par défaut si on clique directement sur « Créer » il va créer un article et non une page). Soit en allant...
Lire la suite

Le module tableau

Entête Colonne 1 Colonne 2
Ligne 1 On peut rajouter des colonnes en cliquant sur les + On peut choisir si le tableau a une entête ou non
Ligne 2 On peut rajouter des lignes en cliquant sur les + Il est possible de choisir si la largeur est automatique ou égale
Ligne 3 On peut supprimer lignes et colonnes avec les moins Il n'est pas possible de rajouter des styles dans les cellules

Le module timeline

Dans le module Timeline on peut y mettre ou non une introduction. Ce module est pratique pour afficher des dates mais peut être utilisé également pour d’autres usages. Il ne peut cependant pas, à l’instar du tableau, avoir plus de 2 colonnes.

Parfois, et en fonction de son contenu, il est préférable de choisir la largeur en 1/3 – 2/3 ou en 1/2 – 1/2.

En cliquant sur « Ajouter un élément » on rajoute une ligne au module

  1. Une première date
  2. Une deuxième date
  3. Une troisième date
  4. Une quatrième date
  5. Une cinquième date

Il est également possible de rajouter une conclusion

Le module message

Le module message

Ce module permet de mettre en avant une information importante.

Le module Citation a été conçu pour afficher une citation et d'y attacher un·e auteur·trice du carnet d'adresse.

Blob
Représentant qualité
blob@edufr.ch

Le module chiffres clés

Le module chiffre clef est intéressant si on désire communiquer des chiffres intéressants

25
informations relatives
115
informations intéressantes
136
caractères disponibles
78
paragraphes

Le module contact

Le module permet comme son nom l’indique de rajouter un ou plusieurs contacts. En cliquant sur « Ajouter un contact » il est possible de choisir dans le carnet d’adresse la personne désirée. On peut également choisir si on veut aller piocher dans le carnet d’adresse ou rentrer les données manuellement (pour une personne externe par exemple).

Il est possible aussi de rajouter tout un secteur en cliquant sur « Selection par catégorie » ou de mettre carrément tous les contacts (mais je ne pense pas que ce soit très pertinent pour une page 😉)

On peut ré-organiser les contacts en cliquant-déposant la fiche depuis la barre grisée à droite. C’est également là qu’on peut rajouter ou supprimer un contact.

Blob
On peut soit laisser la fonction inscrite dans le carnet d'adresse soit en rajouter une manuellement

Le module liste de liens

Animation Lottie

Les animations Lottie sont des animation vectorielles très légères et responsives. Elles peuvent être réalisées avec Adobe After effects et exportées avec le plugin Bodymovin.

On a le choix entre une version desktop et une version mobile.

Il est possible de mettre l’animation en boucle (loop)

Trucs et astuces pour les modules

  • Pour rajouter un espace insécable dans un module il faut supprimer l’espace et le remplacer par un Alt + Espace sur Mac ou Ctrl+Maj+Espace sur PC
  • En cliquant sur la barre du module cela va avoir comme effet de réduire le module afin de pouvoir mieux visualiser et organiser les modules. En re-cliquant sur la barre le module va se re-déployer.
  • Pour supprimer rapidement un module il suffit de cliquer 2x sur le – (moins) sur la barre du module.
  • Il est possible de rajouter des ancres directement dans le texte pour diriger l’utilisateur·trice soit sur une autre page de la Hep à un endroit précis soit sur la page présente. Pour cela aller sur la page voulue et faites un clic-droit dans le menu d’ancres et copier l’adresse (Ex.: https://hepfr.ch/institution/edition/#les-modules-ici-le-module-titre) puis dans votre texte faites un hyperlien avec cette adresse.

Contacts