Reconception de StevePavlina.com – Part 3

Cet article est le 3^e de la série de 9 articles portant sur la reconception de site StevePavlina.com.

Les constructeurs de page pour la reconception de site

La recherche d’un bon thème de reconception de site se révélait une impasse, alors j’ai relégué cette tâche au second plan et j’ai tourné mon attention vers la recherche de constructeurs de page. Un constructeur de page est un outil d’extension, généralement un plugin WordPress payant qui fournit une interface visuelle pour créer et organiser de nouvelles pages WordPress.

Certains constructeurs de page vous permettent d’éditer des pages sur la partie avant de votre site Web, ce qui vous permet d’activer le constructeur de page directement depuis la barre d’administration lorsque vous visitez une page quelconque de votre site. Ainsi, lorsque vous voyez une chose sur votre site que vous voulez changer, vous n’avez pas besoin d’aller jusqu’au tableau de bord WordPress pour le faire, et vous n’avez pas besoin de modifier les fichiers de thème. Vous pouvez simplement cliquer et faire glisser pour ajouter de nouveaux éléments comme une barre latérale, des photos, des vidéos, des zones de texte, des titres et plus encore.

J’ai vu une démo de Visual Composer lors de ma première rencontre WordPress en aout. Je crois que c’est actuellement le constructeur de page le plus populaire sur le marché. Après avoir entendu parler de VC (Visual Composer), j’ai essayé la démo gratuite en ligne, et j’ai pensé que cet outil pourrait avoir un certain potentiel, tout au moins comme étant outil de prototypage rapide. Au moins un membre du groupe de rencontre semblait être un grand fan de cet outil, mais il était également évident que certains membres n’aimaient pas du tout VC.

la reconception de site pour la communauté des développeurs

Pour le projet de la reconception de site l’utilisation des constructeurs de page est quelque peu controversée dans la communauté des développeurs. Certains développeurs aiment cela, tandis que d’autres ne respectent pas l’utilisation des constructeurs de page. Une objection valable à l’utilisation des constructeurs de page, c’est qu’ils peuvent créer un verrouillage, selon la façon dont ils sont conçus. Cela signifie que si vous utilisez un constructeur de page pour créer votre site, vous devrez peut-être indéfiniment continuer de l’utiliser — il faut aussi préciser que vous serez tenu de payer les frais de licence chaque année pour pouvoir continuer d’utiliser cet outil. Si vous décidez de le désinstaller, cela détruira votre site.

Certains constructeurs de page ne posent pas un gros problème de verrouillage. Si vous les désinstallez, vous devrez peut-être refaire la configuration des pages de votre site, mais votre contenu sera toujours intact et lisible via l’éditeur WordPress. Il se peut qu’il vous faille reformater quelques pages si vous cessez d’utiliser un constructeur de pages ou si vous passez à un autre, mais cela reste raisonnablement faisable, surtout si votre site n’est pas très grand.

D’autres constructeurs de page ne sont pas si gentils, car ils insèrent beaucoup de shortcodes (codes courts) directement dans votre contenu, et ils ne suppriment pas ces codes courts une fois désinstallés. Cela signifie que si vous désinstallez le plugin du constructeur de page, vous vous retrouverez dans ce qu’on pourrait appeler un enfer de shortcodes. Votre contenu sera rempli de codes courts qui seront visibles par les visiteurs de votre site, ce qui rendra votre contenu tronqué jusqu’à ce que vous y mettiez de l’ordre.

Les codes courts

Si vous n’êtes pas familier avec les codes courts, disons simplement qu’il s’agit d’instructions intégrées dans le texte pour indiquer à WordPress comment formater différents éléments. L’utilisation de codes courts n’est pas un problème en soi du moment que beaucoup sont directement pris en charge par WordPress. J’utilise moi-même des shortcodes, par exemple pour intégrer les éléments audio sur la page Audio, mais j’évite de devenir dépendant des shortcodes à moins qu’ils ne fassent partie de WordPress ou Jetpack, c’est-à-dire un logiciel qui est directement maintenu par l’équipe WordPress et dont je peux raisonnablement espérer qu’il sera disponible pendant encore de nombreuses années.

Je n’utilise qu’avec parcimonie d’autres codes courts qui dépendent d’un plugin, de sorte que si j’en venais à désinstaller le plugin, ce ne soit pas un problème de supprimer les shortcodes qui y sont associés. Lorsque vous supprimez un plugin qui utilise des codes courts, ce qui se produit généralement ensuite, c’est que les codes courts associés à ce plugin seront traités comme du contenu normal, et ils seront affichés comme tels aux visiteurs de votre site Web sur les pages sur lesquelles vous les utilisez.

Visual Composer

J’ai aimé certaines choses à propos de Visual Composer, mais j’ai dû faire une croix sur son utilisation en raison d’un potentiel futur problème lié aux codes courts en cas de désinstallation. Je n’appréciais pas l’idée de me retrouver enfermé. J’aimais encore moins le fait qu’il serait pénible de passer à autre chose si jamais cela devenait nécessaire. J’ai également estimé que l’interface et les fonctionnalités n’étaient pas aussi bien exécutées que j’aurais pu m’y attendre pour un outil aussi populaire.

La démo gratuite en ligne s’est plantée à plusieurs reprises alors que je l’utilisais pour créer de modestes pages de test. J’ai eu l’impression que l’équipe derrière cet outil faisait un excellent travail au niveau marketing, mais qu’elle manquait un peu la mise en œuvre technique. Je me sens généralement plus à l’aise avec des outils créés par des informaticiens chevronnés, des outils qui sont souvent moins connus sur le plan marketing.

Mon projet de reconception de site

J’ai aussi testé Divi, Live Composer, Velocity Page, Make Plus et plusieurs autres constructeurs de pages. Tous semblaient présenter des insuffisances dans des domaines clés, ce qui pourrait rendre difficile le maintien de mon site à long terme. En fin de compte, j’ai fait une croix sur la possibilité d’utiliser tous ces services, mais en général j’ai tout de même aimé le fait d’avoir eu recours à un constructeur de page ; j’ai senti que cela pouvait vraiment servir dans mon projet de reconception de mon site. Même si j’ai seulement utilisé cet outil pour faire du prototypage et tester des idées, je reconnais qu’il a le potentiel pour me faire gagner beaucoup de temps.

Ce fut du moins la situation avec les constructeurs de page lorsque je m’y suis intéressé en septembre 2015. Je ne sais pas si les choses ont changé aujourd’hui. De toute évidence, ces outils continueront d’évoluer.

C’était un cas classique de correspondance partielle. J’ai trouvé une partie de ce que je voulais, mais pas assez pour dire oui. Sur une échelle de 1 à 10, j’ai trouvé plusieurs 6 et 7. Je voulais plutôt un 9 ou un 10, et j’aurais même pu me contenter d’un 8 si j’en trouvais.

Beaver Builder pour le reconception de site

Finalement, j’ai trouvé le 10 que je cherchais en continuant mes recherches sur les constructeurs de page. Et il avait également un drôle de nom : Beaver Builder.

Ce constructeur de pages ne semblait pas aussi populaire que quelques-uns parmi ceux que j’ai testés, et il n’avait pas autant de fonctionnalités que Visual Composer, mais quand j’ai essayé la démo gratuite en ligne de Beaver Builder, je l’ai tout de suite aimé. Il avait une interface plus simple et plus élégante, ce qui le rendait plus facile à utiliser. Et il ne s’est pas planté pendant que je l’utilisais — un autre bon signe.

Je l’ai testé en créant un échantillon de la page « À propos » de mon site Web, toujours en utilisant la démo gratuite en ligne. C’était beau, et ce fut un jeu d’enfant de créer la page en question.

J’ai passé plusieurs heures à faire des recherches sur Beaver Builder, à lire la FAQ et à consulter les tutoriels, et à en apprendre davantage sur l’outil. J’ai aimé ce que j’ai vu. Si j’utilisais Beaver Builder, il m’épargnerait les gros problèmes liés aux codes courts parce qu’il enregistre les modifications dans la table wp_postmeta de WordPress et non dans la table wp_posts.

Construire un site Web

J’étais prudemment optimiste. Je me suis dit qu’il s’agissait d’un outil que je pouvais utiliser pour construire un site Web comme je le voulais vraiment. J’ai pu aussi constater qu’une bonne équipe de soutien avait été mise en place. Les développeurs qui avaient conçu le logiciel assuraient eux-mêmes le support. Je n’avais pas affaire à des représentants formés pour le service clientèle, de sorte que je pouvais discuter de programmeur à programmeur si j’avais des problèmes en cours d’utilisation. Cela s’est révélé particulièrement important lorsque j’ai fait quelques personnalisations sur mon site par la suite. Sans l’aide des développeurs en personne, il m’aurait été beaucoup plus difficile d’y parvenir.

J’ai aussi aimé le design et la présentation du site Web de Beaver Builder lui-même. Il n’était pas trop commercial et agressif. Il m’était facile d’obtenir les informations dont j’avais besoin, de comprendre les fonctionnalités et de parcourir de nombreuses maquettes de démonstration.

Cela peut sembler un détail mineur, mais j’ai aussi aimé le nom. Alors que d’autres constructeurs de page utilisaient des noms descriptifs ou techniques, celui-ci se démarquait du lot en utilisant un nom ludique avec la mascotte d’un castor à dents de lapin. Cela m’a volé un sourire. Dans une certaine mesure, cela a rendu l’utilisation de l’outil plus ludique et amusante pour moi ; c’était plus un jeu que du travail. Cela correspond bien à mes valeurs et à ma personnalité. Ce n’était cependant qu’un bonus. Je n’investirais pas dans un constructeur de page juste parce que j’aime son nom. Cela m’a tout de même donné l’impression que l’équipe de développeurs apprécie probablement son travail un peu plus que les autres, ce que j’ai considéré comme un bon signe pour la longévité du site.

Deux parties du Beaver Builder

J’avais des raisons logiques d’aimer Beaver Builder — la liste des fonctionnalités, l’excellent service clientèle, la compétence technique des développeurs, le risque réduit —, mais j’aimais aussi les sensations que je ressentais en l’utilisant. J’ai eu comme une impulsion intuitive disant que c’était le bon choix. Cela a satisfait aussi bien mes filtres mentaux que mes filtres émotionnels.

Ce qui est intéressant, c’est que Beaver Builder comporte deux parties. Le constructeur de page en est une, et il fonctionne comme un plugin WordPress. En plus de cela, Beaver Builder a aussi son propre thème WordPress — un thème très flexible avec un personnalisateur bien développé pour changer les couleurs, les polices et plus. Vous pouvez utiliser le constructeur de page et le thème de manière séparée, ou vous pouvez utiliser les deux de manière simultanée. Au début, je pensais utiliser le constructeur de page et trouver un autre thème de reconception de site, mais quand j’ai jeté un coup d’œil au thème de BB, je l’ai tout de suite aimé. C’était propre, simple, élégant et très utilisable. Je pouvais facilement envisager de l’utiliser pour mon site. J’ai utilisé la démo gratuite en ligne pour jouer avec le personnalisateur de thème, et j’ai fini par conclure : « Ouais, cela va marcher. »

J’ai donc finalement trouvé mon thème de reconception de site d’une manière indirecte. Je suis tombé sur beaucoup de thèmes que je n’ai pas aimés, ce qui m’a aidé à affiner mes gouts, puis j’ai trouvé le bon thème à un moment où je n’étais pas particulièrement à la recherche d’un thème. Je pense que beaucoup de bonnes découvertes se font généralement de cette façon. Dans un premier temps, nous saturons notre esprit de possibilités et d’idées. Puis nous faisons une pause, et le bon choix finit par apparaitre tout seul.

La réalisation du projet de reconception de site

L’abonnement annuel pour Beaver Builder était de 99 $ par an pour le constructeur de page, ou 199 $ par an pour le constructeur de page et le thème ensemble, et le site offre d’importants rabais sur les frais de renouvèlement. Les deux licences pouvaient être utilisées pour un nombre illimité de sites. J’ai acheté le forfait étant donné que le thème et le constructeur de page se complètent bien. Plus tard, au cours de la réalisation du projet de reconception de site, j’ai découvert qu’il était bénéfique d’obtenir de l’aide pour le thème et le constructeur de page du même endroit dans la mesure où certaines de mes personnalisations nécessitaient des modifications aussi bien pour le constructeur de page que pour le thème.

Depuis que j’ai commencé à travailler avec Beaver Builder, l’équipe de développement est passée de trois à six personnes, et le constructeur de page ainsi que le thème de reconception de site ont été mis à jour à plusieurs reprises. Quelques-unes de mes suggestions ont même été prises en compte dans certaines versions — il est bon de voir que l’équipe utilise activement les commentaires des clients pour améliorer le produit.

Après avoir acheté Beaver Builder, j’ai décidé de m’entrainer pour maitriser le logiciel à fond avant de l’utiliser pour créer de vraies pages. J’ai parcouru toutes les fonctionnalités, toutes les fenêtres et toutes les options pour mieux connaitre ses capacités. Je me suis même familiarisé avec des fonctionnalités que je ne m’attendais pas à utiliser, juste pour en prendre connaissance. Cette auto-formation n’a pas pris beaucoup de temps, peut-être un après-midi. Par la suite, je me suis senti bien préparé pour commencer à créer quelques pages.

Rester optimiste pour construire le projet de reconception de site

À ce stade, je me sentais plutôt optimiste. J’avais mon thème, et j’avais un constructeur de page qui accélèrerait le développement. J’ai trouvé que Beaver Builder était assez bon pour être utilisé non seulement pour le prototypage, mais aussi pour la construction du site final et l’entretien de celui-ci après le lancement. Tout cela s’est révélé être vrai. Je suis content de ne pas avoir prématurément opté pour une correspondance partielle.

Ce qui est bien avec Beaver Builder, c’est que vous n’avez pas besoin d’être un programmeur avant de pouvoir l’utiliser. Certains développeurs ont installé Beaver Builder sur les sites de leurs clients afin que ces derniers puissent apporter des modifications aux pages sans avoir à payer un développeur Web pour chaque petite modification.

Le thème enfant

Après avoir installé et configuré le constructeur de page et le thème de Beaver Builder, la chose suivante que j’ai faite a été de tirer un thème enfant du thème principal de Beaver Builder. J’ai entendu parler des thèmes enfants lors des rencontres WordPress, ce qui m’a tout de suite semblé logique. Un thème enfant fonctionne selon le concept d’héritage dans la programmation orientée objet.

Un thème enfant pour le projet reconception de site demande à WordPress de partir d’un thème parent, tel que le thème de Beaver Builder, puis d’appliquer les modifications spécifiées dans le thème enfant. Ainsi, le thème enfant n’a qu’à intégrer les modifications du thème parent. De cette façon, vous pouvez apporter toutes vos modifications au thème enfant, et chaque fois que le thème principal est mis à jour, ces mises à jour n’écraseront pas vos personnalisations. Par conséquent, chaque fois qu’il y a une mise à jour du thème de Beaver Builder, ce qui arrive de temps en temps, je peux l’installer sans qu’elle n’écrase pas mes personnalisations, qui sont stockées dans le thème enfant.

Dans le cas contraire, si vous apportez vos modifications au thème parent lui-même, vous ne pouvez pas le mettre à jour sans perdre vos personnalisations s’il y a une nouvelle version, car la mise à jour écraserait chaque fois vos modifications. WordPress vous avertira même de ne pas faire cela chaque fois qu’il y a une mise à jour du thème. Heureusement, la création d’un thème enfant est très facile et prend environ une minute une fois que vous savez comment vous y prendre.

Changer de thème de la reconception de site

De plus, si jamais il m’arrivait de vouloir changer le thème du projet reconception de site au lieu d’utiliser Beaver Builder, par exemple si les développeurs finissaient par passer à autre chose et cessaient d’offrir un service clientèle, je pourrais changer de thème parent, et avec un peu de travail, mes personnalisations du thème enfant pourraient aussi être appliquées au nouveau thème.

Par conséquent, l’utilisation d’un thème enfant était une évidence. Cela me permettrait de maintenir mon site et de profiter plus facilement des nouvelles fonctionnalités de WordPress.

Une fois que j’ai créé le thème enfant pour le projet reconception de site, j’ai essayé d’utiliser le personnalisateur de Beaver Builder pour créer l’entête et le pied de page du site et pour spécifier les polices, couleurs et tailles. J’ai ensuite montré mon travail à Rachelle, et elle m’a aidé à l’affiner un peu plus. Je ne m’attendais pas à ce que ces réglages initiaux soient définitifs, mais ils m’ont permis de commencer à construire le site. Je savais que je pourrais toujours le peaufiner plus tard, et je l’ai finalement fait, une fois de plus avec l’aide de Rachelle.

Comme j’avais déjà importé la base de données de mon blog, j’ai pu voir à ce stade à quoi ressembleraient les articles présents sur mon blog. Même si je n’avais pas encore fait beaucoup de personnalisations, je trouvais plutôt bons les premiers résultats que j’avais avec le thème personnalisé de Beaver Builder. Il y avait encore beaucoup de travail à faire, mais j’avais pris mon envol.

Continuez avec la Partie 4 de cette série.

Note : Cet article est une traduction de l’article Redesigning StevePavlina.com – Part 3 de Steve Pavlina. C’est donc lui qui s’exprime dans le « je » de cet article !