azuweb specialiste amazon
Chapitre 2

Les outils

Avant de nous plonger dans le tutoriel je veux vous présenter les outils et les méthodes pour être un consultant WordPress ultra performant :

  • Oxygen, un page builder tout simplement révolutionnaire
  • Local, un logiciel pour créer des sites WordPress en 2 clics
  • Pourquoi faire une maquette “graphique” est une perte de temps
  • Pourquoi créer un prototype interactif facilite la validation auprès de vos clients
  • Comment créer un "style guide" dans Figma

Allez, c'est parti !

Flywheel, le site builder du future

Laissez-moi vous présenter ce page builder pas comme les autres.

Oxygen a été développé par Louis Reingold de la société Soflyy et en est à sa 3ème version majeure.

Plus un “site builder” qu’un “page builder”, il se distingue de ses concurrents dans le fait qu’il désactive totalement les thèmes WordPress. Tout les éléments de votre site sont gérés par Oxygen : le header, les menus, le footer, le contenu. Ne soyez donc pas surpris, après l’installation du plugin, d’avoir une page vide sans style ni rien !

Webflow dans WordPress ?

L'interface peut paraître un peu intimidante au départ, mais je vous assure qu'elle est très bien pensé.

Surtout pour construire des pages rapidement.

Je vous fais un petit tour de l'interface la mais on y reviendra plus en profondeur plus tard.

Ce qui frappe la première fois la première que l'on utilise l'éditeur d'Oxygen c'est qu'on a l'impression d'avoir une interface comme Sketch.

Tout commence avec Edit with Oxygen que l'on retrouve sur toute les pages.

Après avoir cliqué sur Edit with Oxygen dans un page WordPress, on sort de WordPress et on entre exclusivement dans l'interface d'Oxygen.

L'interface se divise en 3 parties : à gauche les composants disponible, au centre le site (ou la page) sur lequel on travaille et à droite la structure HTML.

NB : j'utilise le plugin Editor Enhancer for Oxygen ici, qui modifie l'interface original d'Oxygen. Ce plugin fait partie des plugins recommandés plus bas.

Vous avez en haut à gauche un gros bouton Bleu +Add qui permet d'ajouter du contenu à la page et tout à droite un bouton Save pour enregistrer le travaille.

Vous pouvez cliquer et commencer à sasi pour filtrer les composants.

En cliquant sur +Add on ouvre le panneau des composant. (avec le plugin Editor Enhancer for Oxygen, vous pouvez utiliser le raccourcie clavier ⌘ + 1 ou ctrl + 1 pour l'ouvrir)

Le premier panneau de composant regroupe toute sortes de contenu de base :

  • Les sections (qui sert de container)
  • Les textes et Rich texts
  • Les images
  • Les liens et link wrappers
  • Boutons
  • Vidéos
  • etc..

Mais aussi code block qui permet de rajouter du code PHP, CSS ou Javascript. Un block pratique quand on a besoin d'aller plus loin que ce qu'Oxygen propose.

Et enfin Inner Content, qui permet de récupérer le contenu de la page écrit dans WordPress.

Les composants souvent utilisés dans des sites (les helpers) :

  • Carousel
  • Barre de progres
  • Témoignages
  • Popups
  • etc..

Très pratique pour construire des landing pages !

Mais aussi des éléments WordPress :

  • Les menus
  • Les shortcodes
  • Les widgets
  • Les commentaires
  • Un formulaire de recherche
  • etc.

Quand on ajoute un composant ou quand on clique dessus, on se retrouve avec le panneau des propriétés.

Celui-ci se divise en 2 onglets : Primary et Advanced.

Rapprochons-nous pour voir ça de plus prêt... ?

L'onglet Primary permet de modifier les propriétés spécifique du composant en question.

Ex. 1 si on est sur un titre (heading) on va pouvoir changer la police de caractère (font), la couleur du text (text color), la taille du texte (font size), la graisse (font weight), etc.

Ex. 2 si on ajoute une icon, l'onglet Primary permet de choisir l'icon, le style de l'icon, sa couleur, taille, etc.

L'onglet Advanced est super interessant : il offre la possibilité de modifier les propriétés CSS du composant sélectionné. Vous avez accès à tout ce que vous auriez pu mettre dans une feuille de style CSS !

  • les backgrounds
  • les margins et paddings
  • les displays (flex, block, inline, etc)
  • tout ce qui a attrait aux fonts : taille de caractère, couleur, line-height, etc.
  • les ombres, les transitions, les animations, tout y est !
  • et si cela ne vous suffit pas, vous pouvez ajouter votre CSS personnalisé dans Custom CSS...

On abordera ça plus tard en profondeur mais les mises en page créées dans Oxygen utilisent par défaut les propriétés flexbox à chaque fois que vous rajoutez un élément à la page.

C'est clairement plus intuitif et plus rapide pour créer des mise en page.

Pour ceux qui découvre les propriété flexbox, je vous montre ça rapido :

Ci-dessous j'ai rajouté une Section dans lequel j'ai mis 3 divs de couleur. Par défaut Oxygen les empilent l'un en dessous de l'autre et les alignent à gauche.

Vous pouvez changer ça en les empilant l'un à côté de l'autre en cliquant sur le bouton de droite dans Child Element Layout.

Vous pouvez ensuite les disposer comme vous voulez ; ci-dessous j'ai cliqué pour que les divs aient tous le même espace autour d'eux.

⚠️ Important : les propriétés flexbox se définissent sur le parent et ce sont les enfants direct de ce parent qui sont alignés dans tout les sens. Je n'ai pas appliqué ce qu'on vient de voir ci-dessus sur la div verte mais sur la Section qui l'entoure !

Si vous voulez en savoir plus sur les propriété flexbox, lisez cet article de CSS Tricks (en anglais) ou de Open Classrooms (en français).

Les différentes manière de créer des pages dans Oxygen.

Oxygen permet de gérer ses maquettes de différentes façons.

Vous pouvez créer les maquettes directement dans chacune des pages WordPress.

Par exemple vous créez une page d’accueil dans le backend de WordPress, vous cliquez sur le bouton “Edit with Oxygen” et vous rédigez directement le contenu dans Oxygen tout en faisant votre mise en page. Vous pouvez faire en sorte que la page Oxygen soit editable dans l’éditeur Gutenberg.
C’est rapide et direct mais votre contenu est "enfermé" dans Oxygen ce qui peut être problématique pour la portabilité du contenu du site.

L'autre solution est de créer des “templates” où vous créez la mise en page (et les différents block de contenu) et définissez les règles où votre template sera appliqué.

Ensuite vous rédigé votre contenu dans WordPress et ce contenu viendra ensuite "remplir" les blocks du template.

Tout ça peut paraître confusant si vous commencez, je vous en parlerai plus tard. Ce que je veux vous dire c'est qu'Oxygen est super flexible pour la création de template.

Allez, continuons..

La performance

La vitesse d'un site est plus critique que jamais.

Un site lent augmente non seulement le taux de rebond, mais ça nuit à votre classement dans Google.

Si vous vous souciez de la vitesse de chargement des sites de vos client, vous avez probablement fait l'impasse sur les pages builder (c'etait mon cas !).

Mais la ou Oxygen est clairement différent c'est que c'est le premier page builder avec un code au chargement des pages le plus réduit possible : il est léger, propre et rapide.

En retirant le système de thèmes dans WordPress, il retire également tout le "code bloat" de WordPress.

Les pages créées avec Oxygen se chargent rapidement et obtiennent d'excellents résultats dans Google PageSpeed et GT Metrix.

Une capture d'écran du temps de chargement d'une page construite avec Oxygen avec un temps de chargement de 349 millisecondes - sans mise en cache ni plugins d'optimisation. Crédit : Image Soflyy

Et quand je parle qu'il n'y a pas de bloat de code inutile dans Oxygen, regardez ci-dessous :

DIVI fait 1 Mo !!

1 M-E-G-A O-C-T-E-T-S !! ?

Oxygen est vraiment imbattable sur ce sujet. Oxygen is 50x plus petit que Divi, 25x plus petit qu'Elementor, et 10x que Beaver Builder.

Et cette vitesse de chargement vous allez pouvoir la vendre à vos prospect. Un argument qui percute tout de suite auprès de mes clients (surtout la corrélation entre vitesse de chargement et SEO).

Le prix

Oxygen est une extension "premium" que vous ne payer qu'une fois (la license est à vie) et coûte 99$ pour la version "Basic", 149$ pour la version "WooCommerce" et 169$ pour la version "Agency".

La version Basic

Cette version vous donne tout simplement l'extension sans les petits extras.

La version Woocomerce

Cette version offre des blocks supplémentaires pour construire des sites e-commerce avec Woocommerce. C'est un des points forts d'Oxygen : pouvoir mettre en page comme on le souhaite les pages produits, boutique, panier, etc. Vous pouvez par exemple rajouter des témoignages dans la page panier ou encore retirer les onglets d'une page produit pour y mettre des sections de contenu riche en images et textes.

La version "Agency"

Cette version comprend tout ce qui se trouve dans les versions précédentes mais rajoute un petit plus qui sera fort utile pour nos clients : transformer toute votre mise en page en contenu entièrement éditable dans Gutenberg. Cette version permet également de transformer une de vos sections créé dans Oxygen en "block" Gutenberg. C'est tout simplement géniale pour la création de site WordPress pour des clients. Ils auront la flexibilité de créer des pages comme ils le souhaitent (en choisissant la structure de leur page) sans avoir à toucher au design des pages (qui est votre responsabilité).

🙋‍♂️ Ma recommendation : achetez la version "Agency" si vous pouvez. Offrir à vos clients le fait de pouvoir éditer le contenu eux-même dans l'éditeur Gutenberg apporte beaucoup de valeur au projet livré.

Ok c'était un gros morceau tout ça. ?

Mais j'espère vous avoir convaincu qu'Oxygen Builder est vraiment révolutionnaire dans la création de site WordPress.

Passons maintenant à la 2ème brique pour créer votre prototype en 30 minutes.


Local, l'app pour créer un WordPress en 3 clicks

Local est un logiciel développé par l'hébergeur Flywheel. Depuis son acquisition en 2016 (il appartenait à Pressmatic), Local a gagné de nombreux fans, en particulier les développeurs qui en avaient marre de déboguer des environnements de développement sur leur machine. Il leur permet de basculer rapidement entre les versions PHP et MySQL ainsi qu'Apache et nginx.

Mais au-dela de tout ça c'est qu'il nous permet de créer un WordPress en seulement quelques clicks.

Une fois installé, voyez par vous-même :

Ajoutez un nouveau site.

Nommez-le (et laissez tout coché par défaut).

Saisissez des identifiants pour accéder à l'admin de WordPress.

Et voila WordPress est prêt !

Il ne reste plus qu'a installer Oxygen (et tout les autres plugins que je vous recommande ci-dessous) et vous pouvez vous mettre au travail !

Petit bonus au passage : quand vous aurez rajouté vos plugins dans WordPress, retournez sur Local pour enregistrer votre site en "Blueprint".

Cliquez droit sur le site dans la sidebar, puis cliquez sur Save as Blueprint

La prochaine que vous avez un site à monter, sélectionnez ce Blueprint pour commencer le nouveau site directement avec vos plugins et réglages !

Quelques plugins indispensables

J'utilise ces quelques plugins sur quasiment tout mes projets. Nous n'en aurons pas besoin immédiatement dans notre projet mais je pense que vous devriez y jeter un oeil si vous ne les connaissez pas.

  • Gravity Forms est un outil puissant de création formulaire. On peut créer des formulaires connectés à Mailchimp, Active Campaign (pour récupérer les emails), Stripe (pour les paiements), Dropbox, Zapier, etc. Le plugin permet également de créer des conditions pour l'affichage des champs.
  • Code Snippets vous permet de rajouter du code PHP ou du Javascript dans vos pages. Oxygen désactivant les thèmes dans WordPress vous n'aurez plus accès au fichier function.php. C'est dans Code Snippet que vous rajouterez les fonctions.
  • Duplicate Page, un plugin tout simple pour dupliquer des pages. Tout bête mais tellement utile !
  • Safe SVG offre à WordPress le droit d'uploader des fichiers SVG. Vos logos ne sont pas en png j'espère ???!?
  • Simple Image Sizes permet de créer des tailles d'images supplémentaires au delà de Thumbnail, Medium, Large et Full.
  • Advanced Custom Fields est un plugin indispensable pour créer des champs personnalisés dans WordPress.
  • Custom Post Type UI vous permet de créer des types de "post" supplémentaires visuellement. Pratique quand les "Articles" et les "Pages" ne sont pas suffisant pour le projet.

Conclusion

La facilité de monter un site en quelques clics combinée à la performance et la versatilité d'Oxygen me permet de diviser par 2 le temps passé sur la création de nouveaux sites WordPress.

Ce temps gagné je l'utilise pour développer mon activité, prospecter et travailler la partie "commerciale" (chose dont je ne suis pas fan, mais hautement nécessaire).

Mais l'outil ne fait pas l'artisan... et il va falloir quelques bases en marketing pour présenter à votre client un maquette convaincante pour éviter trop d'aller-retour.

Cliquez sur Suivant on va faire un peu de théorie sur les pages d'accueil 👨‍🏫.