barre

INTRODUCTION

Sommaire

  1. À propos du thème
  2. Introduction sur le thème
  3. Remplacer un fichier média
  4. Traduire un fichier média

À PROPOS DU THÈME

Informations et ressources utiles

Une particularité du thème: le constructeur de page

Le thème DIVI a la particularité de proposer un constructeur de page. Un constructeur de page est une application qui permet de mettre en page du contenu en évitant de passer par le code. Autrement dit, c’est une interface de création.

Le constructeur de page de DIVI porte plusieurs noms dans le site. Vous le trouverez sous ces deux noms: « Générateur DIVI » ou « Visual Builder ». Dans ce wiki, le terme « éditeur visuel » sera utilisé pour désigné l’un ou l’autre, à moins qu’une précision soit nécessaire.

En plus de ce constructeur de page, le thème permet l’utilisation de l’éditeur classique de WordPress, aussi appelé « éditeur standard ». Cependant, l’ensemble du site a été mis en page avec l’éditeur visuel. C’est donc l’outil à utiliser!

Éditeur classique ou éditeur standard

Éditeur visuel ou Générateur Divi

main

alerteATTENTION! Les deux éditeurs (classique et visuel) sont proposés à chaque ajout ou modification de page et article. Si vous choisissez d’utiliser l’éditeur classique, la mise en page construite avec l’éditeur visuel sera perdue.
Rassurez-vous! Si vous cliquez au mauvais endroit, une fenêtre d’alerte va s’ouvrir. Il suffira de cliquer sur la croix pour revenir en arrière.

UNE CONSTRUCTION PAR BLOCS

Des blocs en poupées russes

poupées russes

Les pages et articles sont bâtis à partir de blocs qui agissent comme des poupées russes. Un bloc est dans un bloc qui est lui-même dans un  bloc. Il y a toujours trois niveaux avec l’éditeur visuel :

  • Le bloc SECTION (qui apparait en bleu)
  • Le bloc LIGNE (qui apparait en vert)
  • Le bloc MODULE (qui apparait en noir)

Ainsi, un bloc MODULE est dans un bloc LIGNE qui est dans un bloc SECTION. Ces empilements de blocs permettent de structurer les contenus, en évitant de passer par du code.

Le rendu des blocs

Si l’empilement des blocs n’est pas encore clair, ça viendra avec la pratique et surtout avec la visualisation du rendu. En effet, l’éditeur visuel a deux modes: un mode back-end et un mode front-end.

  • Le mode back-end permet de voir la structure des blocs (comme les architectes)
  • Le mode front-end permet de voir le rendu des blocs (comme les designers)

Mode BACK-END (structure)

Mode FRONT-END (rendu)

blocs front end

Le basculement entre les modes

Il est utile de basculer d’un mode à l’autre. Voici comment faire :

Aller du BACK-END au FRONT-END

Depuis le back-end, cliquer sur Construire sur le front end

Aller du FRONT-END au BACK-END

Depuis le front-end, cliquer sur Modifier la page

LE RÉGLAGE DES BLOCS

Les paramètres essentiels

Chaque bloc propose les mêmes paramètres de base. Seules les couleurs varient selon le type de bloc. Les paramètres des modules sont noirs, ceux des lignes sont verts et ceux des sections sont bleus.

Voici à quoi servent les plus utiles :

Déplacer un bloc

Modifier un bloc

Dupliquer un bloc

Supprimer un bloc

Ajouter un bloc

main

ASTUCE : Avant de modifier un bloc, le dupliquer vous permettra de retrouver ses paramètres d’origine, au besoin.

Les modules essentiels

Permet l’ajout des titres, sous-titres, paragraphes et listes à puce. Bref, de tout type de texte!

Permet l’ajout de tout contenu provenant de la bibliothèque média (sauf les vidéos). Pour les vidéos, utiliser le module « Vidéo »

Permet l’ajout d’une citation selon un format personnalisé

Permet l’ajout de boutons et de listes dont la puce est une icône. Bien que le module « Bouton » existe, il n’est pas utilisé car il ne permet pas l’utilisation des icônes Oxfam.

Les vues à vérifier

Vous travaillez depuis votre ordinateur. Mais, avant toute publication, il faut aussi vérifier l’affichage sur téléphone et tablette.

Pour cela, depuis le FRONT-END :

  1. Aller tout en bas de votre page puis cliquer sur le bouton avec les 3 points options du front end
  2. Des options vont apparaître à gauche, cliquer sur l’un des trois appareils pour vérifier l’affichage vues appareil
  3. Selon la vue choisie, la page active va changer d’apparence

Mode BACK-END

Les blocs sont nommés automatiquement.

Mode FRONT-END

Les blocs sont signalés par des couleurs au passage de la souris et en cliquant sur la zone.

Le rendu des blocs

Éditeur classique ou éditeur standard

Éditeur visuel ou Générateur Divi

main

alerteATTENTION! Les deux éditeurs (classique et visuel) sont proposés à chaque ajout ou modification de page et article. Si vous choisissez d’utiliser l’éditeur classique, la mise en page construite avec l’éditeur visuel sera perdue.
Rassurez-vous! Si vous cliquez au mauvais endroit, une fenêtre d’alerte va s’ouvrir. Il suffira de cliquer sur la croix pour revenir en arrière.

Remplacer un fichier média

Publié le 7 juin 2021 par Cindy

Cette procédure permet de remplacer une image dans la médiathèque. Elle évite donc de téléverser une nouvelle image puis de supprimer la première.
❗ Utile quand un fichier téléversé n’est pas au bon format ou n’a pas été renommé 

  1. Depuis le tableau de bord, aller dans Médias puis Médiathèque

  2. Parmi les résultats proposés, choisir l’image voulue puis cliquer sur Téléverser un nouveau fichier
  3. Cliquer sur Choisir un fichier puis sélectionner l’image de remplacement
  4. Choisir l’une des options proposées puis cliquer sur Téléverser

Traduire un fichier média

Publié le 7 juin 2021 par Cindy

Cette procédure permet d’utiliser une seule image pour des contenus disponibles en plusieurs langues. Elle évite donc de téléverser une seconde image afin d’y ajouter une traduction.

  1. Depuis le tableau de bord, aller dans WPML puis Media Translation
  2. Parmi les résultats proposés, choisir l’image voulue puis cliquer surpour ajouter une traduction ou sur ✏️ pour modifier une traduction
    ? Utiliser les filtres de recherche pour réduire le nombre de résultats!
  3. Remplir les champs à traduire puis cliquer sur Sauvegarder la traduction de fichiers médias

  4. Depuis la page traduite, le fichier média sera disponible dans la langue correspondante de la page

WIKI

Ligne éditoriale

Noms officiels : Oxfam-Québec, Marche Monde et Magasin du Monde

  • Oxfam-Québec s’écrit toujours de la même façon (tel un nom propre)
    ➜ Cette règle s’applique quelque soit la langue
    ➜ Les variantes sont interdites : OXFAM-Québec, OXFAM Quebec, Oxfam Québec, Oxfam Quebec, etc.
  • Oxfam-Québec est un nom féminin par convention
    ➜ On dira par exemple : Oxfam-Québec est fière d’agir pour l’égalité!
    ➜ Pour éviter une certaine confusion, reformuler quand c’est possible.
        Par exemple : Oxfam-Québec agit pour l’égalité, avec fierté!
  • Marche Monde et Magasin du Monde s’écrivent ainsi, même au pluriel (tels des noms propres)
    ➜ On écrira par exemple: Les Magasin du Monde rassemblent des jeunes agissant pour l’économie équitable.
    ➜ En anglais, on traduit Marche Monde par World Walk et Magasin du Monde par World Shop

Écriture non sexiste

  • Utiliser l’écriture épicène ou la féminisation syntaxique
    ➜ L’écriture épicène est une formulation non marquée par le genre
         ✎ Par exemple: le personnel (au lieu des employées et employés) ou les droits de la personne (au lieu des droits de l’Homme)
    ➜ La féminisation syntaxique inclut le genre féminin dans les formulations
         ✎ Par exemple: les employées et employés (au lieu des employés) ou celles et ceux (au lieu de ceux)
  • Ne pas utiliser la formulation tronquée
    ➜ La formulation tronquée n’est pas admise, car elle nuit à la lisibilité des personnes et des robots
         ✎ Par exemple: les participant-e-s ou les jeunes engagé-e-s

Appel à l’action

  • Mettre les appels à l’action au « je », le plus souvent possible
    ➜ Cela permet aux personnes utilisatrices de se sentir plus impliquées
         ✎ Par exemple: Je fais un don
  • Préférer l’expression « changer des vies » ( à celle de « sauver des vies ») pour renforcer nos valeurs et notre crédibilité
    ➜ Cette formulation a l’avantage d’interpeler en évitant de véhiculer des idées patriarcales et colonialistes. Elle permet aussi de rester plus proche de la réalité quant à l’impact de nos actions.

Règles de ponctuation

  • Dans les listes, aucun signe de ponctuation marque la fin du texte afin d’alléger le contenu
    ➜ Pas de points virgules, de virgules ou de points
    ➜ Ne s’applique pas si le contenu est une question ( ? ) ou une exclamation ( ! )
    ➜ Ne s’applique pas si les éléments de la liste sont des phrases (exemple: dans les notes des communiqués de presse)
    ➜ Ne s’applique pas non plus si le contenu annonce une sous-liste avec des deux-points ( : )
  • La forme italique doit être utilisée pour signaler un mot dans une autre langue
    ➜ C’est le seul cas dans lequel la forme italique est admise. À ne pas utiliser dans les citations, sauf si un mot d’une autre langue y est citée
  • Le soulignement doit être utilisée pour signaler un lien hypertexte uniquement
    ➜ C’est le seul cas dans lequel la forme soulignée est admise. À ne pas utiliser pour mettre en valeur des mots. Préférer le gras!
  • Différences à observer en anglais et en français :

    Ponctuation en français

    CITATION : Utiliser les guillemets français avec des espaces et sans utiliser la forme italique
     « Être ou ne pas être, telle est la question. »

    DEUX-POINTS : Mettre un espace avant et après le signe de ponctuation
    ✎ Être ou ne pas être : telle est la question.

    MONNAIE : Placer le symbole après la valeur exprimée, en y ajoutant un espace
    ✎ 500 $

    Ponctuation en anglais

    CITATION : Utiliser les guillemets anglais sans espace et sans utiliser la forme italique
    “To be, or not to be, that is the question.”

    DEUX-POINTS : Mettre un espace après le signe de ponctuation seulement
    To be, or not to be: that is the question.

    MONNAIE : Placer le symbole avant la valeur exprimée sans espace
    ✎ $500

    CHOIX DES PHOTOS

    Droits d’auteur

    « Lorsque vous choisissez une image, pensez : CRÉDIT » (Brand Book, Oxfam, 2021, p. 40)

    Chaque photo doit contenir les crédits qui lui sont associés. Cette exigence a deux finalités : l’une morale et l’autre pratique.

    • Finalité morale : L’utilisation d’images sans légende ou crédit « peut contribuer à la perpétuation de stéréotypes visuels et n’est pas respectueux des contributeurs ou du public. » (Ethical Content Guidelines, Oxfam, 2020, p. 36)
    • Finalité pratique : Indiquer le nom du photographe et de l’organisation permet de retrouver plus facilement la photo d’origine, en cas de besoin
    grains de café

    Types de photos

    « L’objectif principal de notre travail est l’humain » (Brand Book, Oxfam, 2021, p. 40)

    Privilégier des photos montrant, avec respect et dignité, des personnes, dans leur environnement.

    Formats des images

    Trois formats sont prévus pour le site web :

    • Image des pages : 1920 x 540 pixels
    • Image des articles : 1200 x 630 pixels
    • Image d’illustration : 1080 x 1080 pixels
    • Portraits : 350 x 350 pixels

    Extensions des images

    Trois extensions sont utilisées sur le site web:

    • JPG : à privilégier pour les photos car plus léger
    • PNG : lorsque des éléments transparents doivent apparaître
    • SVG : pour les icones car flexible et plus léger
    info

    Des gabarits pour la suite Adobe ou pour le logiciel GIMP sont à votre disposition dans ce dossier BOX. Ils comprennent les emplacements pour le crédit photo et des repères pour utiliser la règle des tiers.

    UTILISATION DES COULEURS

    Couleurs Oxfam et leur valeur HEX (hexadécimal)

    COULEUR Valeur HEX
    Blanc #FFFFFF
    Beige #EAEADE
    Gris #545454
    Bourgogne #630235
    Rouge foncé #A20011
    Rose #E43989
    Rouge #E70052
    Rouge vif #FF1D34
    Orange #F16E22
    Jaune #FBC43A
    Vert clair #BECE45
    Vert #44841A
    Vert foncé #336114
    Bleu clair #0B9CDA
    Bleu foncé #065E84
    Violet #53297D
    Noir #000000

    Couleurs et thématiques associées

    Parmi les couleurs d’Oxfam, certaines sont liées à des thématiques sur le site web et ailleurs. Il est important de conserver les mêmes.

    COULEUR THÉMATIQUE
    Bourgogne Gouvernance
    Rouge foncé Campagne
    Rouge vif Urgence humanitaire
    Vert foncé Justice climatique
    Bleu clair Eau potable et hygiène (WASH)
    Bleu foncé Justice économique
    Violet Justice de genre

    Couleurs complémentaires

    Dans la palette d’Oxfam, voici les couleurs qui se marient bien ensemble. Par exemple : le blanc avec le noir, le violet avec le jaune, le vert avec le rouge, le bleu avec l’orange…

    Blanc Noir
    Beige Gris
    Vert clair Bourgogne
    Vert Rouge foncé
    Vert foncé Rouge
    Bleu Rouge vif
    Bleu foncé Orange
    Violet Jaune

    POLICE DE CARACTÈRES

    FONCTION POLICE COULEUR TAILLE

    Titre des pages

    Oxfam Title Font Blanc ou vert 35 px

    Sous-titre

    Oxfam Tstar Bold Orange par défaut 26 px
    Paragraphe Roboto Noir par défaut 12 px
    Lien Roboto Vert et souligné par défaut 12 px
    Share This