Le Magazine Digitale

Déroulé
Formation
Exemples
Aide
Notes Graphisme

Se connecter

Se connecter

Email ou NomWiki

Mot de passe
Mot de passe perdu ?
Se souvenir de moi

S'inscrire
Aide
Passotheque
Gestion du site
Tableau de bord
Base de données

Formation WordPress

Joindre / Insérer un fichier

Annuler Échoué

Télécharger le fichier

Texte du lien de téléchargement

Alignement de l'image

align-left

Gauche

align-center

Centre

align-right

Droite

Taille de l'image

Miniature (140x97) Moyenne (300x209) Large (780x544) Taille originale

Texte de la vignette

Paramètres avancés

Lien associé

Effets graphiques

Bord blanc Ombre portée Agrandissement au survol

Texte de remplacement

Annuler cet envoi

======Module 5 - Organiser son site Wordpress : 
les étapes indispensables======
//Durée du cours : 2H//

""<div class="well">""**Faire moins mais mieux. Notre ennemi, l'infobésité -> chercher la sobriété.**
Un beau site est un site bien pensé.
L'organisation des menus et des pages reflète la clarté du projet.""</div>""

=====Navigation / fil de fer=====
====Travailler sur l'ergonomie en partant de l'arborescence====
===Travail sur les menus et contenus===
    
**Le site : pour qui ? (coté utilisateur), pour quoi (coté entreprise)**

**Definition du cadre general et des objectifs du site**
//Ouvrir un pad et lister au fur et à mesure//
 - pour repondre à ces objectifs "Un site, pour qui ? Pour quoi ?", de quoi a t on besoin de fournir comme information ? 
 - en fonction du type d'information : plusieurs choix vont se présenter
 - contact > pas besoin d'un menu, emplacements à respecter liés à des usages sociaux culturels
        - information importante ? choix du cadre, de la page d'accueil
        - information à developper : choix d'une page ?
 - Regle d'OR : simplifier !
        
Une fois l'arborescence trouvée, on cherche un template qui repond à nos enjeux et objectifs.

=====Thème Wordpress=====
**Zoom sur l'importance de l'ergonomie (règles d'usages qui facilitent la navigation et la compréhension**
Vidéo (4min) :Comprendre la notion de style (style css etc) : https://www.youtube.com/watch?v=ZhsqhUxbr5s
    
===Où trouver des templates et comment les choisir===
Vidéo (7min) :	https://www.youtube.com/watch?v=--DPZxdd6MY

Où chercher et trouver des thèmes :
- https://themeforest.net/category/wordpress : permet de prévisualiser le résultat
- Sur la plateforme wordpress, dans le menu thème, accès aux bibliothèques de thèmes
   
 - Chercher le thème le plus proche de son besoin
Aller repérer des sites qui nous plait et regarder leurs extensions
Approches différentes :
- Plutôt agence de comm 
- Plutôt épuré, de type "informaticien"

**Critères de choix du template :**
- Popularité du site-son nombre de téléchargement : car sera plus maintenu, moins de bug
- Les notes indiquées par wordpress
- Les mises à jour : régulières ou non?
- La compatibilité avec sa proptre version de WP
- Prix
	- Que recouvrent les fonctionnalités des versions gratuites? 
	- Souvent la version de base va devenir payante au bout d'un moment
	- Parfois plus intéressant d'acheter un thème : entre 40 et 150 €
	- Vérifier que les mises à jour sont gratuites et non payantes
- Thème disponible en plusieurs langues 
- Responsive
- Vérifier qu'il fonctionne seul (avec Gutemberg) ou avec des modèles de mises en page (Deevy ou elementor)
- Documentation complète
- Lire les retours utilisateurs

=====Graphisme Wordpress=====

===Adapter le theme wordpress à sa charte graphique===

- Avez vous une charte graphique : logo et couleurs (avec code cmjn, rgb ou web ?)...
 - Connaitre et Installer https://www.colorzilla.com/

- Vous n'avez pas de charte graphique et souhaitez construire votre palette de 5 couleurs référentes
Utiliser https://color.adobe.com/fr/create/color-wheel
    
La signification des couleurs :
- jaune : bonheur, lumière, gaieté, optimisme, créativité, soleil
- orange : énergie, confort, vitalité, fruit, dynamisme, feu
- rouge : passion, amour, sensualité, passion, danger, colère, sang, chaleur
- violet : créativité, spiritualité, imaginaire, délicatesse, modestie
- vert : calme, détente, nature, chance, espérance
- bleu : responsabilité, confiance, fraîcheur, ciel, calme, froid
- brun : calme, terroir, philosophie
- blanc : pureté, neige, fraîcheur, innocence
- gris : neutralité, respect
- noir : sobriété, mystère, élégance, luxe, tristesse
- marron : nature, fiabilité, nature
- crème : calme, élégance, pureté

Prenons un exemple avec une palette de 5 couleurs :
- couleur 1 : dominante, pour le gros titre
- couleur 2 : secondaire, pour le corps du texte
- couleur 3 : background (fond)
- couleurs 4 et 5 : accents ou détails graphiques (couleurs contrastées les plus visibles)
 
=====Trouver des ressources pour illustrer son contenu=====
https://source.animacoop.net/?Module8TrouverMediasLibres
 
=====Modifier des images=====
Dans l'ideal utiliser Gimp... mais cela est réservé aux utilisateurs avertis.
Aussi d'autres possibilités plus simples existent :
 - Fotor.com : https://www.fotor.com/photo-editor-app/editor/basic
 -

=====Organiser ses ressources=====
Reprendre l'arborescence de notre menu et y ajouter les ressources par catégorie

{{attach file="Menutypewordpress.png" desc="image Menutypewordpress.png (22.6kB)" size="large" class="left"}}

======Notes Graphisme pour Wordpress======

** Calibrer correctement son écran :** 
 - http://yannbaboo.free.fr/baboo/5/test%20ecran/calibration-ecran.htm#:~:text=Si%20le%20moniteur%20(%C3%A9cran)%20est,de%20votre%20%C3%A9cran%20sont%20exceptionnels.
 - https://www.guide-gestion-des-couleurs.com/comment-calibrer-ecran-sans-sonde-sous-windows.html
{{attach file="Etalonnage_de_lecran.png" desc="image Etalonnage_de_lecran.png (0.2MB)" size="medium" class="left"}}

** Trouver des photos : libres de droits ou payantes, trouver des vectoriels** 
			- https://undraw.co/illustrations : illustrations
			- https://www.flickr.com/creativecommons
   		- https://tablericons.com/
		   - https://www.vecteezy.com/

**Quand choisir un site one page ?**
Vidéo (11min) : https://www.youtube.com/watch?v=qsszBwOkkt8&feature=youtu.be

Thème

Protection anti-spam active

Éditer la page Modifiée le : 16.11.2023 à 11:38:40 Partager

×

Apparence de la page GraphismeWordpress

Thème

Squelette

Style

Configurations graphiques

Jaune
Bleu
Rouge

Créer sa configuration graphique

Image de fond

‹ ›

Paramètres avancés

Langue de la page

Choisir une page pour:

le menu horizontal

les raccourcis en haut à droite

l'entête (bandeau)

le pied de page

le menu vertical

Configuration graphique ×

Couleur primaire

Couleur secondaire 1

Couleur secondaire 2

Couleur du texte

Couleur bordures

Couleur de fond

Police principale

Annuler Appliquer