Un exemple de ce que l’on peut faire avec Gutenberg, le nouvel éditeur de WordPress

agence-wordpress-editeur-gutenberg-gratuit

Ca y est, WordPress 5.0.1 est sorti et c’est la révolution ! Son nouvel éditeur interactif et dynamique va-t-il tenir ses promesses ? Quelques exemples de ce que l’on va pouvoir créer à partir de Gutenberg.


Bien sûr, un joli paragraphes avec des mots dedans.
Et juste au dessus, un séparateur…

On pourra immédiatement attribuer taille de police et couleurs sur n’importe quel paragraphe…

Ca y est, WordPress 5 est sorti et c’est la révolution ! Son nouvel éditeur interactif et dynamique va-t-il tenir ses promesses ? Quelques exemples de ce que l’on va pouvoir créer à partir de Gutenberg.

Avec un texte par dessus !

Je peux changer la couleur
de la BANNIÈRE

Un titre

Un sous-titre

Un sous-sous titre

Un sous-sous-sous titre ? On s'arrêtera là, finalement !
[Ceci est un texte préformaté]

contact-agence-web
Une image simple, avec une légende
contact-agence-web
Miniature

Sur simple demande par mail, nous vous adressons les codes du site
et nous vous expliquons comment faire.


tourisme-site-wordpress-paris-poitiers-bordeaux
L’image est en pleine page
Enfin un joli tableau !Cellule 1Cellule 2Cellule 3
Et tout est automatique LoveLoveLove
Love

Ajouter une galerie d’images

Et enfin, des colonnes pour écrire des textes agréables à lire et non des textes à rallonge qui sont illisibles et peu recommandés pour les personnes handicapées.

Et la magie opère si l’on attribue également un fond de couleur sur l’une des colonnes…

C’est plus agréable de lire sur deux colonnes, vous ne trouvez pas ?
Fluide, fonction du nombre de caractères et lignes…

C’est plus agréable de lire sur deux colonnes, vous ne trouvez pas ?

Avez-vous noté que l’on vient d’enrichir cette histoire… À votre tour, maintenant !

Sur simple demande par mail, nous vous adressons les codes du site
et nous vous expliquons comment faire.

Gutenberg, le nouvel éditeur de WordPress

agence-wordpress-editeur-gutenberg

Avec la sortie de WordPress 5.0.1, c’est la révolution de son éditeur qui est au cœur de cette version tant attendue par les experts. La rédaction des articles et des pages est plus souple, créative et interactive que par le passé. Découvrons-la ensemble…

Le nouvel éditeur de WordPress se veut plus moderne et dans l’air du temps des nouvelles plate-formes de contenus (Medium, Paper de Dropbox, Note…) qui ont désormais le vent en poupe. L’innovation pousse au changement… inexorablement.

Qu’est-ce qui change avec la nouvelle version de WordPress 5.0 ?

Ce nouvel éditeur va vous permettre de gérer et de créer des contenus de façon très visuelle en renforçant la cohérence entre ce que vous concevez en coulisse et ce que vous voyez à l’écran.

Outre les options textuelles traditionnelles (alignement, gras, italique, listes à puces, etc…), ce nouvel éditeur innove grâce à de nombreuses options que l’on utilise à travers le concept de blocs (voir ci-dessous).

Proposition d’insertion d’un élément dans l’article

Qu’apporte ce fameux Gutenberg ?

Les équipes de WordPress ne cessent de travailler sur les modules internes pour rendre la publication de contenus plus fluide et simple pour l’utilisateur.

Par le passé, nous nous sommes souvent arrachés les cheveux à cause de shortcodes et bouts de codes à intégrer, qui rendaient la maintenance de nos pages souvent délicate voire bancale…

La notion de « widgets » devrait disparaître dans le futur pour permettre d’ajouter des contenus intelligents à des endroits mieux choisis et ne pas trouver forcément présentes les éternelles et mêmes informations dans la barre latérale à la lecture d’un article, par exemple. Nous allons pouvoir jouer avec nos blocs et optimiser les informations en fonction des attentes de nos lecteurs et publics.

Une des plus grandes forces de cette mise-à-jour repose sur l’intégration de contenus enrichis, sans devoir passer systématiquement par l’ajout d’extensions, l’enjeu étant de simplifier ainsi la mise-en-avant d’éléments importants : images, galeries, vidéos, tableaux, boutons, tout en ayant la main sur la personnalisation de certains de ces derniers (en cours de développement).

Par exemple : ajouter une lettrine, changer la taille d’une image (une photo à 25%, c’est plus intelligent qu’un calcul en pixels !), ajouter des couleurs sur certains blocs etc…

Un temps d’adaptation nécessaire

Ce joli tableau de l’innovation étant dressé, il est important de rester très prudent et ne pas se précipiter sur le bouton de mise-à-jour de cette nouvelle version et d’attendre quelques temps les éventuels patchs correctifs qui ne tarderont probablement pas à mis en place par les équipes de développement.

Ce nouvel éditeur s’inscrit dans un changement de grande ampleur et il faut s’assurer qu’il ne vienne pas rompre et déstructurer les pages de certains sites WordPress actuels. Cela fait partie du jeu, innover, tester, déployer et tester de nouveau.

Chaque site internet a été construit à partir des besoins et des souhaits différents de nos clients, et chaque site relève d’une combinaison d’extensions et de thèmes étudiée minutieusement. Mettre à jour WordPress demande donc du soin et de l’attention toute particulière et il ne faut pas faire n’importe quoi.

Cependant, il est impossible pour une équipe de tester toutes les configurations existantes et il est d’usage de demander aux utilisateurs de faire remonter les problématiques rencontrées.

Dans notre agence, nous sommes au faîte des différents développements apportés à WordPress et nous ne choisissons jamais les modules intégrés par hasard. Grâce à la communauté des développeurs et grâce aux conférences auxquelles nous assistons (et donnons), nous établissons un périmètre de sécurité et de veille technologique nécessaire afin de garantir une grande réactivité face à ces évolutions.

L’utilisateur final – Vous, Moi – va donc devoir apprendre ces nouvelles notions et adopter ce nouvel éditeur. C’est une étape de l’histoire incontournable tant sur l’évolution des habitudes que dans l’aptitude au changement. Et tout va bien se passer.

Même pas peur !

Rappelons que l’on peut toujours annuler ce que l’on vient de faire (petite flèche en haut à gauche – en mode éditeur), WordPress n’a pas abandonné l’option de révisions des articles (revenir à la version précédente) et lorsque vous rédigez, seule la publication en cours d’édition est concernée, ce n’est pas l’ensemble de votre site qui va être totalement chamboulé, rassurez-vous.

Les grands avantages de cette évolution

À nous de jouer le jeu et de profiter de ces nouvelles options pour enrichir nos contenus : ajout de photos, vidéos, personnalisation des boutons et structure plus nette des articles.

Cela va dans le bon sens (très bon) d’une optimisation de votre présence dans les moteurs de recherche et donc de votre référencement naturel.

Organiser vos contenus et ajouter des éléments à forte valeur ajoutée vous permettra également de mettre en lumière toutes les informations importantes à partager avec vos lecteurs. Ils vous en seront reconnaissants.

Jetez un oeil à cette mise-en-page que nous avons créée pour vous montrer quelques exemples de contenus avec Gutenberg.

Afin de vous accompagner dans cette découverte, Colormyweb vous propose de tester directement Gutenberg. Nous avons conçu un site de démonstration rien que pour vous (sur demande).

Alors n’attendez-plus ! Passez à l’action et découvrez vite le nouvel éditeur de WordPress !

Sur simple demande par mail, nous vous adressons les codes du site
et nous vous expliquons comment faire.

[Revue de presse] Beaver Builder, le constructeur de page WordPress complet

[revue de presse – 26 novembre 2015] – Extension WordPress / outil / front-end

Beaver Builder est un constructeur de pages WordPress qui se démarque de ses concurrents par sa facilité d’utilisation et sa précision. Outre une documentation riche et un support très réactif, l’outil est ergonomique et accessible sans forcément posséder une connaissance approfondie des classes CSS (même si à terme, cette exigence permet d’être plus autonome).

Afin de me concentrer sur mon cœur de métier, je n’ai pas toujours le temps de construire des pages codées et j’ai besoin d’aller à l’essentiel : concevoir et designer. J’ai trouvé l’outil qu’il me faut.

J’ai opté pour Beaver Builder depuis plusieurs mois maintenant et son évolution est exemplaire dans l’écosystème WordPress. L’un de ses points forts, c’est qu’il permet de concevoir des maquettes comme je pourrais le faire pour le print.

Beaver Builder est accessible pour les « débutants plus » déjà un peu à l’aise à utiliser WordPress.  Mais l’outil va aussi beaucoup plus loin et peut servir de base pour des projets de type UX Design, maquettes, prototypages et sites aboutis. Car il est très complet.

découvrir beaver builder

constructeur de page pour WordPress

Caractéristiques

Si vous n’êtes pas encore familier avec les constructeurs de pages, je vous invite à découvrir la vidéo de présentation que j’ai réalisée pour vous.

Sachez qu’une version de démonstration est disponible en ligne et le téléchargement d’une version allégée possible.

Beaver Builder est un outil front-end

Beaver Builder est une extension qu’on installe de façon classique sur un site WordPress.Éditeur front-end, Beaver Builder vous permet de construire votre page en temps réel sur votre site web. Vous pouvez voir les résultats immédiatement.

Net avantage par rapport à ses concurrents qui proposent souvent une mise en page dans les coulisses (appelées communément back-end ou back-office). Tant que vous ne publiez pas le travail en cours, vos modifications ne sont pas enregistrées.

Beaver Builder est compatible avec la majorité des thèmes WordPress

Il est évidement impossible de tester cette compatibilité avec les milliers de thèmes existants mais si votre thème d’origine a une très bonne réputation et que son éditeur a bien codé ce dernier, peu de surprises d’incompatibilité. Et puis le support de Beaver Builder est très réactif. La team a procédé à de très nombreux tests jusqu’à présent très concluants.

Beaver Builder est très complet

Avec une prise en charge de 24 modules et 14 modèles de page d’accueil pré-maquettées ainsi que 13 modèles de page de contenu et bien sur, une page vierge, vous pouvez commencer à travailler. Laissez ensuite votre créativité s’exprimer.

Si vous souhaitez plus de fonctionnalités, Beaver Builder est compatible avec vos autres extensions et un de ses atouts majeurs est la prise en compte de ces fonctionnalités dans sa propre grille d’outils. Ainsi, vous installez WooCommerce, Beaver Builder se charge de récupérer les widgets, il ne vous reste plus qu’à les glisser où vous souhaitez.

Coté contenu, vous pouvez sélectionner le type de publications que vous souhaitez personnaliser avec l’outil : les pages, les articles, les produits.

La force du design : les gabarits, les templates et les modules

L’une des grandes forces de Beaver Builder est sa proposition incluse dans l’outil : les gabarits et templates (ou demos).

Quel bonheur de pouvoir concevoir ses propres gabarits et des les exporter, donc les exploiter ! Grâce à cela, je peux constituer mes propres bibliothèques et fragments de design à utiliser pour un autre site par exemple.

Un petit bémol dans la version actuelle et pour laquelle j’ai proposé à l’équipe une possibilité. En l’état actuel de l’extension, nous devons tout importer/exporter en un seul lot et l’option d’export d’un seul gabarit n’est pas disponible. Il faudra supprimer les gabarits qui ne vous intéressent pas à la main sur le nouveau site, par exemple.

Des homepages adaptées

Par défaut, les pages d’accueil (dites homepage) sont en pleine page.

L’éditeur propose des idées de contenus pour les types classiques de sites : corporate, photographie, e-commerce… Ce sont des propositions et pistes de départ que vous pourrez modifier.

Des fragments sont proposés pour cibler un type de page : à propos, contact, portfolio…

Et vous pouvez tout mixer. Un outil, des possibilités.

Des modules personnalisables

Chaque aspect graphique du module est personnalisable : alignement, images, icônes, liens, animations, padding et marges.

24 modules sont disponibles, classés en trois catégories : Extensions de base (texte, titres, images, vidéos et séparateurs, Extensions avancées et des Widgets WordPress.

Ce qui fait la popularité de l’outil est son panel de fonctionnalités avancées, 19 au total et à titre d’exemple :

  • Call to actions
  • Accordéon
  • Galeries d’images
  • Cartes
  • Tableau de prix
  • Diaporama
  • Témoignages…

Le groupe WordPress Widgets reprend tous les widgets des autres extensions de votre site.

Prix des abonnements

Beaver Builder est disponible sous trois licences annuelles (renouvellement dégressif)

  • Standard – $99 (n’inclut pas le thème proposé)
  • Pro – $199
  • Agency – $399 (marque blanche)

Beaver Builder est également prêt pour le SEO

L’optimisation des sites internet afin de pouvoir être correctement reconnus par les moteurs de recherche est un aspect important à prendre en compte. Vous avez besoin que votre site apparaisse dans les pages de résultats des moteurs de recherche (SERPs).

Builder utilise les meilleurs standards de référencement comme la compression de code et schema.org pour assurer une bonne optimisation.

Après avoir audité et retravaillé des contenus pour des clients et modifié des pages avec ou sans l’outil, aucune différence (donc ni mauvaise) n’a été relevée et aucune incidence sur des éventuels déclassements.

Beaver Builder est traduit en français

Il n’est donc pas nécessaire d’intégrer une extension supplémentaire de traduction.

Beaver Builder est 100% Responsive

À l’heure où Google nous annonce que le volume de recherche sur mobile exploserait en 2015, il est devenu incontournable de réaliser des sites qui s’adaptent à tous les supports.

Beaver Builder déclaré mobile-friendly par Google. Un nouveau bon point pour l’éditeur de cet outil.

Beaver Builder propose une gestion Multisites

Vous gérez un réseau de plusieurs sites Beaver Builder prend en charge les installations multi-sites, ce qui vous permettra d’économiser beaucoup d’effort pour gérer des projets en réseau.

Banner - 468 x 60

Le mot de la fin…

Certains développeurs et codeurs puristes souhaitent tout coder, maitriser chaque ligne. Pourquoi pas.

Il y a 20 ans, on codait tout de A à Z. Puis des process innovants sont apparus, permettant de gagner du temps.

Puis des CMS sont également apparus, comme WordPress balayant les sites codés page par page. Exit Dreamweaver (que je remercie, j’ai beaucoup appris grâce à lui).

Le temps de l’innovation, le temps aussi des questions de fond. À l’heure de la mobilité, d’une abondance de contenus.

Où placer le curseur ?

Je ne souhaite pas entrer dans le débat des développeurs qui dénigrent souvent le potentiel de ce type d’outils.

Certains constructeurs sont lourds, laissent en effet des traces de code et shortcodes au moment de la désinstallation etc… Mais Beaver Builder tient de vraies promesses.

Je leur réponds que ces outils ont pourtant bel et bien été conçus par des développeurs talentueux et non des amateurs et que de l’autre côté du miroir, un code très propre avec un design « dégueulasse » n’est pas souhaitable non plus.

Il est vraiment temps de s’unir sur des problématiques communes d’ergonomie, d’accessibilité pour offrir ce qui me semble être le plus important dans la conception de sites internet : une expérience utilisateur riche. Un site qui fonctionne c’est très bien, un site qui est beau, fluide et qui fonctionne, c’est encore mieux, non ?


Un nouvel article a été publié en tant que billet invité sur le site de http://wpformation.com

[News] Google applique la tendance "Mobile-Friendly" dans sa nouvelle mise-à-jour

Avec la nouvelle mise à jour de son algorithme prévue le 21 avril prochain, Google applique la tendance « Mobile-Friendly », tendance qui aura évidemment des répercussions sur les résultats des SERPs et le référencement naturel.

Selon les spécialistes français et webmasters de Google, cette mise-à-jour devrait avoir un impact encore plus important dans la vie du Web, que les deux précédentes, Panda et Pingouin. Elle marque la compatibilité mobile comme critère de classement.

Vous pouvez découvrir le hangout qui a eu lieu sous forme de questions/réponses. Ci-après, ce qu’on pourra retenir.

 

La mise à jour « Mobile Friendly » va essentiellement se concentrer sur les résultats mobiles. Google souhaite récompenser les sites offrant la meilleure expérience utilisateur aux internautes. Et nous en sommes ravis.

Cela favorisera donc les sites optimisés pour tous leurs écrans.

Ce nouvel algorithme ne privilégiera pas plus les versions dédiées d’un site « spécialement conçues pour mobiles » car ce sont bien les pages en tant qu’items qui sont concernées et mises en avant dans les SERPs, quelque soit la méthode utilisée (responsive-design, applications, sites mobiles dédiés).

À retenir :

1. Une mise à jour mondiale

Le déploiement de la mise-à-jour est prévue dans tous les pays du monde et devrait être assez rapide même s’il faut attendre quelques jours avant d’en ressentir les effets dans les résultats.

2. Ce sont les résultats obtenus dans les recherches passées sur les smartphones qui sont concernés

Toutes les versions de Google Search ne sont pas concernées par cette mise à jour, qui se concentrera sur les recherches passées sur les mobiles et donc les résultats issus de ces recherches.

Aucun changement n’est à prévoir pour les tablettes.

3. Et les sites qui ne sont pas adaptés aux mobiles ?

La mise à jour « Mobile Friendly » ne va pas dévaluer les sites non-responsives. Cependant, l’effet de la MAJ est indirect : les sites qui adoptent une stratégie UX et placent l’utilisateur au centre de leur développement seront gagnantes et par effet domino, celles qui ne le sont pas risquent de dégringoler et être moins visibles.

4. Granularité et logique de contenu…

Le label « Mobile Friendly » ne sera pas attribué à l’intégralité de votre site mais Google continue cette logique de « contenu first » et analysera chaque page afin d’en attribuer le critère.

Aussi et en fonction de votre cœur d’activité, le plus important est de véritablement prendre soin de votre contenu-phare.

5. L’analyse de la page, en temps réel

Google analysera les pages indexées à chaque crawl et le label « Mobile Friendly » sera alors attribué en temps réel.

Conclusion

L’analyse de l’algorithme ne sera pas nuancée : la page est optimisée ou elle ne l’est pas.

Google continue évidemment à prendre en compte la rapidité d’affichage des pages qui demeure un critère très important.

Outils pour vous aider.

Comment vérifier que votre site est « Mobile-Friendly » ?

J’ai vérifié mon propre site et suis heureuse d’annoncer que Google l’aime bien 🙂

Et le votre ?

mobile-friendly-test
Test Google

 

WordPress est-il securisé ?

L’éternelle question fait dire tout et n’importe quoi, personnellement, je ne crois que les développeurs qui sont au cœur de ce CMS fabuleux.

Aussi, je vous invite juste à écouter monsieur Sécurité via l’interview qu’Alexandre a faite sur ce sujet :

http://wpmarmite.com/pat-episode-008/

Julio Potier met bien l’accent sur l’amalgame qu’il faut bien souligner : ce n’est pas WordPress qui n’est pas sécurisé, mais cela peut venir d’un thème ou d’un plugin…

D’où cette précision elle aussi sempiternelle : ne confiez-pas la réalisation de votre site à des rigolos 🙂

Les 11 avantages de WordPress en détails…

Je vous propose de découvrir un résumé des 11 avantages et points forts de la plate-forme. Ils sont détaillés ensuite. Cet article fait suite à mon article précédent, dans lequel je racontais mon retour d’expérience sur cette plate-forme et les raisons qui m’ont convaincue de l’adopter, définitivement.

Lire plus

Infographie pour résumer les différences entre les plates-formes WordPress

Après avoir convaincu l’une de mes clientes de ne pas se faire avoir avec une solution « gratuite », j’ai pris soin de lui rappeler que la véritable gratuité dans ce monde n’existe pas et qu’un jour ou l’autre, dès que l’envie de bouger un peu les choses pointe son nez comme le printemps, les dents se mettent à grincer en voyant la facture annoncée…

Car oui, WordPress est bien une solution gratuite, mais seulement si vous ne vous trompez pas de plate-forme entre WordPress.org et WordPress.com.

L’objet de cet article est essentiellement de résumer les différences entre celles-ci et si vous souhaitez rentrer plus encore dans les détails de ces différences chiffrées, vous pouvez lire notamment l’article sur le site de maniacgeek.net.

wordpress differences plates-formes

Faites le bon choix !


pourquoi-choisir-wordpress

Pourquoi recommander WordPress ? Et pourquoi peut-on défendre ce choix…

Cet article fait suite au précédent que j’ai publié en début de semaine et qui évoquait les arguments en faveur de WordPress.

Je ne savais pas qu’il susciterait autant de réactions.

Toujours à l’écoute des contre-arguments, je ne suis cependant pas disposée à répondre aux piques sans fondement (et puis, on peut être en désaccord sans pour autant être agressif) avancer un argument du type « c’est pas assez ceci ou cela » ou ce n’est pas complet est aussi constructif que de dire qu’une huître est moche.
Beaucoup trop de personnes critiquent  des articles qui ne répondent pas à LEURS attentes, cela ne doit pas forcément remettre en cause la valeur d’un article ou alors, avec des arguments étayés et réfléchis.

Le web est large et très riche en ressources, il est important d’avoir aussi en tête qu’un article n’est pas forcément isolé et peut-être en lien avec d’autres.
Tous les articles de blog n’ont pas la même valeur, certains traitent en profondeur, d’autres servent de rappel, d’autres viennent compléter ou réformer d’autres billets etc…

Je referme cette parenthèse générale sur la valeur des articles.

Parmi les « reproches », l’on me dit que l’infographie issue de l’article est sans plus-value parce qu’elle ne compare pas (avec d’autres plates-formes) ou aurait pu être transposée aux concurrentes.

Je réponds en souriant : on peut passer sa vie à faire des comparatifs ou adopter WordPress.

Il existe de très nombreux dossiers sur cette question (des tableaux probablement désuets aux vues des modifications quasi mensuelles des fonctionnalités) mais mon engagement vis-à-vis de mes lecteurs est d’offrir une vue globale et la plus large possible (chaque projet web est unique, autant dégager l’horizon en amont afin de rentrer ensuite dans les détails).

L’article précédent n’avait pas vocation à comparer ou à devenir un dossier sur les plates-formes de CMS (Content Management System), il avait pour vocation de promouvoir l’une d’entre elles !

Pour défendre un produit, une marque, une idée, on doit étayer son argumentaire, j’ai donc construit le mien à partir de trois axes principaux :

1 – l’axe des données techniques et technologiques, à valeurs égales, WordPress et Joomla sont très proches, Drupal est une « usine à gaz » pour initiés qui ont le temps de décortiquer le mode d’emploi… Et les plates-formes de blogs gratuites (cf. l’article qui présente donc les arguments en faveur de WordPress).

2 – l’axe empirique, rien de tels que les expériences, les essais, les plantages, les ratages et les succès. Lorsqu’on a soi-même testé plusieurs plates-formes, on est en mesure d’avancer certaines connaissances pour étayer ce choix.

Enfin, le dernier axe :

3 – l’intuition accompagnée de la notion de confort : avec quel outil je me sens le mieux, sur quelle plate-forme trouve-je mes marques ?

Les trois axes fonctionnant ensemble, on peut alors sortir de l’axe idiot et simpliste du « j’aime – j’aime pas »…

Au moment de l’écriture de ce billet, je reçois une notification de Twitter (citant l’article dont il est question) :

Les déclarations d’amour, je les réserve heureusement aux membres de ma famille ou à l’humanité dans son ensemble 🙂 je dirais plutôt que je suis séduite et convaincue par la plate-forme WordPress… mais aussi parce qu’elle est accompagnée d’une communauté humaine ouverte et intéressante.

Et puis pourquoi pas évoquer aussi les outils et solutions technologiques depuis un quatrième et dernier axe qui serait l’émotion ?

Toute l’histoire des marques nous le rappelle… cela n’est pas forcément sérieux ?

En France, on confond faire les choses sérieusement et se prendre au sérieux.

Je défends l’idée que l’on peut parler technologie, Web, Twitter avec des étoiles…

Steve Jobs a passé les premières années de sa vie crasseux et pouilleux, arpentant ses bureaux pieds nus, cela ne l’a pas empêché de construire – avec un immense sérieux – l’un des plus gros empires des temps modernes…