Le Marketing pour les CRÉAteurs de Transformation: Coachs, Thérapeutes, Marketeurs, Commerciaux, RH, Formateurs, Créatifs, Blogueurs
Comment choisir son thème WordPress Gratuit minimaliste personnalisable ou premium complet en 2020 ?
Et trouvez le meilleur thème pour votre site WordPress. Choisir parmi des milliers de designs sélectionnés avec une grande variété de fonctionnalités et d’options ultra personnalisables.
Comment trouver votre thème WordPress WP ? vous avez peut-être déjà regardé des dizaines de template WP tous plus jolis les uns que les autres.
Et vous vous demandez bien quel quel thème WordPress WP est le meilleur pour vous ?
Est-ce qu’il vaut mieux un thème Premium Professionnel payant ou un thème gratuit; sont-il entièrement personnalisables ?
Twenty Seventeen de WordPress, le choix d’un thème minimaliste:
Moi aussi je me suis posé ces questions; alors voici comment je m’y suis pris.
Pourquoi en 2020 j’ai choisi un Thème WordPress de 2017 ? Twenty-seventeen
Twentyseventeen 2017 est le premier thème officiel WordPress orienté entreprise développé par WordPress. Sorti en 2017 avec WordPress 4.7. Les autres thèmes annuels officiels de Worpress sont traditionnellement orienté blog.
Généralement je trouvai les thèmes annuels officiels gratuits de blogs Worpress trop dépouillés.
C’est le cas des thèmes prédécesseurs de WordPress Twenty fifteen 2015, sixteen 2016 ou successeurs twenty eighteen 2018; ou 2019; ou encore celui de 2020.
Dans ce template freeTwentyseventeen, ce qui frappe l’esprit immédiatement ce sont les immenses images pleine largeur (wide).
Ce thème minimaliste responsive fait la part belle au images, de grandes images panoramiques pleine largeur (fullwidth ou wide) faisant office de séparateur de pages, d’articles ou division (div) au sein d’un article. Nous y reviendrons plus bas.
Twentyseventeen pourrait aussi être un thème minimaliste portfolio pour
photographes, pour graphistes, designers, vidéastes, artistes
pour les
professionnels de l’image.
Et son flat design très sobre, responsive, voire minimaliste met bien en valeur le texte, ce qui en fait un thème meilleur pour les copywriters (rédacteurs publicitaires).
Le texte est mis en valeur par de grands espaces blancs en fond de page (background).
Par défaut, ce thème propose Franklin, police simple sans empattement (sans sérif), sans fioriture. nous y reviendrons plus loin.
Le Texte se définit aussi par son contour (background) comme une pièce de murs blancs meublée par du mobilier simple .
La publicité mise en page VISUELLE selon David Ogilvy :
ou comment une bonne mise en page va sublimer votre texte.
On ne présente plus David Ogilvy celui qui inspiré Don Drapper dans la série publicitaire MadMen et a créée l’agence de publicité Ogilvy.
Pour mettre en page ce paragraphe comme Ogilvy,
C’est toujours la photo qui endosse la responsabilité principale, fixer l’œil, faire rêver, enclencher le désir, c’est encore plus vrai pour les lecteurs visuels http://vark-learn.com/methodes/methodes-visuelles/
Voici les 4 éléments, dans l’ordre, du cheminement naturel de l’oeil selon d’après DAVID Ogilvy on lit dans l’ordre en 1) d’abord l’image avec légende, en 2) le titre en 3) le sous-titre 4) et finalement l’article.
L’élément premier, la photo est mise en avant, avant le titre; le titre est relégué au second plan, même en 3ème position après la légende de la photo.
POURQUOI DES IMAGES HD PLEINE LARGEUR ?
Ce qui interpelle immédiatement ce sont les immenses images panoramiques.
Tous ces thèmes officiels annuels de WordPress sont généralement très sobre. Alors que cette fois, ces larges images font la différence avec les thèmes de ses prédécesseurs Twenty sixteen ou successeurs Twenty eighteen ou Twentynineteen. Ces grandes Images participent au design émotionnel et donne tout le charme de ce thème minimaliste responsive au design zen.
J’aime les belles photos pour les émotions qu’elles procurent et leur illustration symbolique. Vous en trouverez dans chacun de mes articles.
Comme le souligne le publicitaire David Ogilvy,
l’image est la première chose sur laquelle le regard se porte, même avant le titre.
D’ou, l’importance des illustrations en rapport avec le texte avec une pointe de décalage pour l’intrigue
Le moteur de recherche Google préfère aussi les images de grandes tailles.
Ces images HD prennent toute leur ampleur en pleine largeur sur les dimensions des écrans d’ordinateur fixe.
De Larges images HD, émotionnelles, pleine largeur (fullwidth) de minmun 2000 pixels sur 1200 px ou mieux 4K, chocs ou reposantes selon les photos du portfolio. (Attention 1950 px est insuffisant pour remplir toute la largeur de l’écran et laissent des bordures à chaque extrémité ce qui a pour effet de briser le charme de ce template).
Des images pleine largeur, moderne, bord à bord comme sur les Smartphones actuels sans bords (Borderless), voir plein écran (full screen).
LISIBILITÉ DU TEXTE
J’ai remplacé la police Franklin par défaut. Cette police sobre sans empattement, sans fioriture me convenait, sauf…
Pourquoi ?
Pour une lisibilité sans forcer, sans fatigue, pour une écriture convaincante (copywriting) efficace,
j’ai choisi une police familière à mes visiteurs, Google utilise cette police roboto dans google maps (et google+ jusqu’en 2019). La police Roboto est une google-font passé en open-source.
L’épaisseur (font-weight) d’une police de caractère varie de 100 fine à 900 super gras.
Mais surtout la police Roboto permet un réglage fin de l’épaisseur de sa fonte pour une bonne lisibilité en regular 400. La différence entre la police de base (regular), le gras et l’italique est bien visible. https://fonts.google.com/specimen/Roboto
Ce n’était pas le cas de la font Franklin par défaut, soit trop fine en épaisseur de 300, ou soit trop épaisse en 400 (semi-bold), dont le gras et l’italique (pas assez incliné) ne se démarquent pas assez de la police de base (regular).
La mode est au polices grises plutôt que noir.
Mais, pour la lisibilité, j’ai préféré renforcer la couleur du texte principal en noir et augmenter l’épaisseur (graisse) de la police en bolder: font-weight: 500; Medium, Bolder au lieu de l’épaisseur Normal de 400.
Mon imprimeur m’expliquait que les polices étaient avec empattement (serif) pour compenser la lisibilité au début de l’imprimerie, car l’encre était fixée par pression (la presse, issue du pressoir à vin); l’encre écrasée sur le papier, bavait comme sur un papier buvard. Les caractères des polices était fondu dans des blocs de fonte (font) pour résister à la pression de la presse.
Aujourd’hui, sur écran les polices se sont simplifiées. Les caractères d’imprimerie à empattement peuvent fatiguer l’oeil sur écran.
Steve Jobs d’apple suivit des cours de calligraphie en tant qu’auditeur libre. En 2005, Steve Jobs déclare:
“Si je n’avais pas suivi ce cours de calligraphie, le Mac n’aurait jamais eu autant de polices d’écriture et des polices à espacement proportionnel”.
Steve Jobs
Le Texte se définit aussi par son contour (background) comme une pièce de murs blancs meublée par de simple mobilier.
L’espace blanc pourrait être considéré comme un espace perdu L’espace blanc (aussi appelé espace négatif) fait référence à l’espace vide autour des éléments d’une mise en page. Les éléments d’espace blanc sont l’espace autour des images, les marges et les capitonnages, l’espacement des lignes et l’espacement des lettres dans le contenu textuel. Certains designers considèrent l’espace blanc comme le reste d’un design pour lequel ils n’ont pas créé de contenu. En conséquence, ils essaient d’ajouter plus de contenu pour remplir la toile vide.
Ou bien en réduisent l’espace blanc (padding) immédiatement sous le menu et (padding) au dessus du premier article.
COMMENT LE MENU EST RÉDUIT À SA PLUS SIMPLE EXPRESSION ?
Le menu est réduit à sa plus simple expression, aucun bouton ni même une esquisse de contour de bouton.
Pourquoi ? ou plutôt comment ce menu fait-il pour exister ?
Ce menu se compose d’un unique ruban de fond blanc pris en sandwich entre l’image d’en tête (header) pleine largeur (fullwidth) et l‘image de la page ou l’image de l’article aussi pleine largeur.
Ainsi la barre de menu se définit uniquement par l’espace entre ces 2 images (ou entre 2 lignes après défilement vertical).
Vous remarquerez qu’il n’y a aucun bouton dans le menu; (le seul et unique véritable bouton est celui d’envoi de commentaire).
La navigation dans la barre du menu consiste simplement à cliquer sur le lien correspondant.
Un site ONE-Page ou Parallaxe oui mais classé par rubrique
Pourquoi ce choix ?
Au lieu d’articles d’un blog classés par ordre chronologique; chaque rubrique thématique du menu se déroule complètement avec les pages selectionnées, dans le bon ordre. Ainsi chaque sous-menu devient un sous-site one page.
Un site One Page est un site constitué d’une seule page web contenant l’ensemble des contenus d’un site web. Cette page est divisée en plusieurs parties, dont les différents contenus sont accessibles en scrollant horizontalement ou verticalement (ou à l’aide de liens internes ancrés).
Dans ce thème entièrement personnalisable on peut activer les commentaires dans les pages (et pas seulement dans les articles par défaut). Aussi on peut utiliser des pages (avec commentaires) à la place des articles. Pourquoi ? Ainsi, on peut bien reclasser par rubriques (seo; mailing…)les différentes pages. Tandis que les articles restent classés par ordre chronologique et nécessitent des catégories et tags pour être reclassés (avec le risque de contenu dupliqué).
Afin d’obtenir l’effet PARRALLAXE ou ONE page sur les images, ajouter une grande image à la une de chaque page.
Les grandes images panoramiques pleine largeur font office de séparateur de pages, d’articles ou de division (div) au sein d’un article.
Pour ne pas être limité à 4 sections par défaut, ajouter des sections dans réglage/apparence/options du thème (cf plus bas).
Qu’est ce que LE DESIGN ?
Qu’entend-on au juste par « design » ?
Comme l’a si bien résumé Steve Jobs en 2003 : « Design is not just what it looks like and feels like. Design is how it works… ». Le Design d’après Steve Jobs d’Apple :
« Design is how it works »
, pour Steve jobs c’est
la fonctionnalité d’abord, l’ergonomie (usibility, UX-design).
Et selon Philippe Starck que j’ai rencontré c’est « la fonction, le matériaux et le trait » (le trait en dernier);
Designer est un anglicisme, ne pas confondre WebDesigner ou UX-Designer qui travaille l’ergonomie qui est l’essence du design
avec Graphic Designer qui est un graphiste.
Ai-je trouvé le thème idéal pour mon usage ?
Ce thème minimaliste responsive donne des sites rapide, simple, efficace et agréable au design flat et léger, dont la navigation est adaptée au mobile et tablette.
Le flat design est opposé au classique design skeuomorphisme (qui essaie de ressembler à des objet de la vie courante). (Les icones des iphones étaient skeuomorphisme jusqu’en Ios 7 en 2013).
L’auteur Aaron Walter Eyrolles Abookappart a défini le terme de Design Émotionnel en ajoutant le coté agréable à l’ergonomie de l’expérience utilisateur.
TWENTY SEVENTEEN LE THEME MINIMALISTE GRATUIT PERSONNALISABLE FAIT ENCORE COULER DE l’ENCRE en 2020
Twenty seventeen n’est pas le thème parfait gratuit le plus complet mais c’est un bon template responsive WP ultra-customisable à souhait, facile à modifier avec son Customizer intégré, et de nombreuses options, tutorial, hacks.
Ce Thème gratuit semble peu répandu, malgré les plus de 3000 téléchargements par jour ! https://fr.wordpress.org/themes/twentyseventeen/
Twentyseventeen fait encore couler de l’encre en 2020 depuis 2017.
Plus de 517 post sur le forum WP pour ce thème: https://wordpress.org/support/theme/twentyseventeen/#new-post https://wordpress.org/search/twentyseventeen+intext%3A%22Theme%3A+Twenty+Seventeen%22/?forums=1
Deux écoles s’affrontent pour le choix d’un thème:
choisir un thème premium le plus complet usine à gaz qui fait tout sauf le café comme Avada mais lourd car chargés en plugins inutilisés et en lignes de codes;
ou au contraire un thème gratuit léger minimaliste responsive à personnaliser sur mesure avec des plugins utiles ou à customiser avec des extraits de code.
L’avantage d’opter pour un thème dans le répertoire de thèmes WordPress est qu’il est officiellement approuvé, ce qui signifie que tout thème soumis au répertoire des thèmes officiel est soumis à un examen rigoureux de plusieurs étapes, compatible avec la plupart des plugins WP.
Aujourd’hui on peut entièrement personnaliser la mise en page de ce thème avec L’éditeur Gutenberg intégré à WP. Gutenberg, le builder officiel de WP est régulièrement mis à jour, son code léger est reconnu par Google. Si vous changez de thème WP, toute le mise en page sera conservée.
Mes principales modifICATIONS OU HACKS DE TWENTY SEVENTEEN:
J’ai essayé de personnaliser sans trop dénaturer ce thème.
Pour ne pas être limité à 4 sections par défaut, ajouter des sections.. dans réglage/apparence/options du thème.
Pour 6 sections; modifier le nombre de sections de la page d’accueil: add_filter( ‘twentyseventeen_front_page_sections’, function(){ return 6; } );
Ajouter des résumés (excerpts) aux articles et pages; et des lire la suite (read more) https://developer.wordpress.org/reference/functions/the_excerpt/#more-information J’ai déplacé la barre latérale (sidebar) à gauche (et même supprimé).
La colonne de droite n’est plus regardée car dédiée à la publicité (zone de lecture eye-tracking en “F”) http://www.capitaine-commerce.com/2010/12/01/26969-7-enseignements-pratiques-tires-du-eye-tracking-le-f-pattern/
Pour le choix de la police de caractères plus lisible, j’en ai parlé plus haut.
Fait assez rare pour être mentionné, Twenty-seventeen possède des plugins de personnalisation spécialement développés pour ce thème ultra-personnalisable :
