Notes
Lors de la rédation, noter qu’un changement de paragraphe [Maj+Enter] force un changement de bloc (Module). Avec un changement de ligne [Enter] on reste dans le même module.
En général, se fier sur le formatage du texte (police, grandeur, couleur…) qui est décidé d’avance pour tout le site.
Pour les sous-titres, utiliser « Paragraphe » >>> « Heading 3 ».
Si vous voulez mettre de l’emphase sur une Rangée (bloc vert) ou un Module (bloc noir), vous pouvez grossir la police ou mettre une couleur de fond à ce bloc.
Les Images et les écrans
Les images doivent toujours être en PNG, JPG ou GIF et à une résolution de 72 ppp. Choisir une grandeur au moins égale à la dimension qu’on veut afficher et pas trop grande afin de minimiser le temps de chargement des pages. Déposer les images dans la « Médiathèque », qui est accessible par le Tableau de bord de WordPress sous « Médias ». Cliquer sur « Téléverser le fichier ». WordPress s’occupe de faire des copies de chaque image en différentes tailles pour usage dans les différents appareils (cellulaire, tablette, portable…). C’est généralement l’écran du visiteur qui décide de la taille à afficher.
Par défaut, le site utilise une « Image mise en avant » qui prend toute la largeur de l’article et se place entre le titre de l’article et le début du texte. Pour utiliser un autre format d’image, veuillez suivre les instruction de Utilisation autre qu’une photo « Image mise à la une » plus bas.
« Image mise en avant » : Privilégier [1080 px X 675 px ]. Les photos plus petites seraient agrandies par le navigateur, ce n’est pas souhaitable. Le rapport largeurs / hauteur est de 100 % X 62,5 % ou 8/5. L’image ne dépasse jamais 1080 px et si la hauteur est de plus de 675 px, elle sera coupée on ne sait où. L’image d’aperçu s’affiche dans un écran d’ordinateur au même rapport de 62,5 % soit 400 px c 250 px. Dans une tablette ou un cellulaire, le navigateur du visiteur choisira la taille optimisée pour l’écran en question.
Créer un article
Dans le tableau de bord de WordPress, cliquer sur Articles > Ajouter un article.
En haut de la page, saisir le titre désiré puis ajuster les paramètres de l’articles dans la colonne de droite.
Colonne de droite
La date de création de l’article et le nom de son auteur s’inscrivent automatiquement et peuvent être modifiés maintenant ou plus tard.
Choisir les catégories selon l’endroit où l’on veut afficher l’article. Il y a 3 cases à cocher :
- Accueil, Accueil actualités, Actualités OU
- Accueil, Accueil événements, Événements
Cliquer sur « Définir l’image mise en avant ». Vous serez dirigé dans la bibliothèque « Médias » pour faire votre choix.
Quand on insère une image mise en avant dans un article, il se crée automatiquement des miniatures (thumbnails) qui seront utilisée dans les liste d’actualités ou d’événements.
Si on ne veut pas d’image mise en avant, cocher « Affiche l’image mise en avant uniquement dans les listes d’articles, pas dans l’article lui-même ».
« Rédiger un extrait » de l’article de moins de moins de 20 mots sinon l’application utilisera les 55 premiers caractères. Cet extrait paraîtra en accueil et dans la page « Évènements » ou dans la page « Articles ».
Dans le centre de la page, cliquer sur « Utiliser Divi Builder ».
Choisir « Construire à partir de zéro » et vous serez dirigé vers le Visual Builder.
Choisir le nombre de colonnes pour l’article, habituellement deux colonnes, une pour une photo et l’autre pour le texte, mais libre à vous.
On vous demandera « Insérer un module ». Ça pourra être un module « Texte », un module « Image » mais d’autres modules peuvent être utilisés.
Dans « Texte Paramètres », l’onglet « Contenu », remplacez le texte par défaut en saisissant votre texte. Si vous copiez collez du texte [Ctrl + v] à partir d’une autre application, après collage, surlignez tout ce texte puis cocher le bouton [T] prévu pour déformater le texte provenant de Word et ainsi prendre le format par défaut pour les articles.
Cliquer sur le √ vert pour sauvegarder le module.
Vous pouvez maintenant insérer une image dans l’autre colonne.
Cliquer sur le √ vert pour sauvegarder le module.
Sauvegarder l’article en cliquant sur [ … ] au bas de la page puis sur « Enregistrer le brouillon » si l’article n’est pas terminé, sinon « Publier ».
Page de l’équipe
https://eacat.ca/equipe/
Afin de garder une uniformité j’ai créé un modèle dans la bibliothèque que j’ai nommé Équipe.
C’est le module « Personne » qui a servi à créer ce modèle.
Ça inclus une photo et 2 champs texte.
J’ai fait une mise en page (un bloc) pour facilité l’ajout de membres.
Préparation à faire pour les photos.
Nom des fichiers photos :
Choisir des noms courts, sans espace, sans accent sans ponctuation et déburant par « eq… ». ex. : eqRPiche.jpg
De mettre « eq » comme premières lettres permettra un regroupement naturel des photos d’équipe dans un tri alphabétique de Médias.
Dimensions à choisir : 417 px X 625 px.
La dimensions d’affichage sera : 200 px X 300 px.
Idéalement, il serait sage d’uniformiser la hauteur de corps des personnes. Orévoir la même espace de vide au dessus de la tête, couper au même entroit du buste et couper la largeur d’épaules de façon uniforme.
Ajouter un document interne
Copier le titre du document que vous voulez afficher dans votre presse papier. Déposer le document dans « Médias », la médiathèque de WordPress. Cliquer sur « Modifier », à droite de l’icône, puis coller le contenu du presse papier dans la 1re ligne de cette page.
Aller dans eacat.ca/docs. Choisir la colonne où l’on veut ajouter le document et cliquer sur le [ + ] noir au bas du premier document de la colonne.