De nouvelles fonctionnalités pour Gutenberg avec Editor Plus

/

De nouvelles fonctionnalités pour Gutenberg avec Editor Plus

Cet article prend environ 5 minutes à lire en intégralité.

W WordPress évolue et ajoute régulièrement de nouvelles fonctionnalités.

Le Full Site Editing offre, par exemple, de belles perspectives.

Cependant, tu peux te retrouver bloqué quand tu crées une page.

Editor Plus ajoute de nouvelles options à Gutenberg pour libérer ta créativité :

  • Mise en page pour les mobiles
  • Gestion précise des marges
  • Animations Lotties
  • Compteur
  • Icônes

Découvre comment lever les limitations de l’éditeur de WordPress avec cette extension.

La qualité de cette extension est impressionnante pour un plugin récent. La bonne nouvelle est qu’il est entièrement gratuit car il est lié à un service de design de compositions de page (qui honnêtement ne casse pas trois pattes à un canard).

Attention : Comme pour les constructeurs de page (Elementor, Oxygen ou Divi), je te recommande de ne l’utiliser que pour ta page d’accueil et tes pages de vente. Cela t’évitera de refaire tous tes articles si tu ne souhaites plus utiliser ce plugin.

Une alternative à Editor Plus sera GenerateBlocks. Le maniement est un peu plus technique mais un champ des possibles quasi infini avec seulement 4 blocs. Malheureusement, il est optimisé pour GeneratePress et n’est pas compatible avec tous les thèmes.

Installe et découvre Editor Plus

Tu actives Gutenberg Blocks Library & Toolkit – Editor Plus by Extendify.

extension editor plus

La première chose que tu remarques est l’apparition de nouvelles options dans tes réglages des blocs.

nouvelles options editor plus

Une des options les plus appréciables est que tu disposes de réglages spécifiques pour les tablettes et les mobiles.

réglages mobile

Tu peux désormais disposer de marges adaptées spécialement pour les mobiles par exemple.

Des textes justifiés

Les options de style sont semblables aux nouvelles fonctionnalités de Gutenberg (cachées dans les options)

  • Le poids de la fonte
  • Sa taille
  • La hauteur de ligne
  • L’interlettrage
  • Le style
typographie

La seule différence notable est la possibilité de justifier tes textes qui n’est pas disponible dans Gutenberg.

justifier textes dans gutenberg

La gestion des arrières plans

Tu appliques une couleur ou un dégradé en fond quel que soit le bloc choisi.

couleur du fond

Tu ajoutes une image de fond.

Ajouter un visuel en arrière-plan dans gutenberg

Les réglages :

  • Taille (automatique, couverture globale en largeur ou image entière contenue dans l’espace disponible)
  • La répétition pour contain (répété, aucune répétition, répétition en largeur et répétition en hauteur)
  • L’effet parallaxe avec Fixed
  • L’image est positionnée au dessus du fond de couleur avec Front
réglages image fond

Cet effet se cumule avec les fonds de couleur. Tu ajoutes un filtre de couleur avec un fond semi-transparent ou tu superposes un dégradé.

exemple texte image

L’effet de police transparent est intéressant à tester également pour tes titres.

transparence textes
effet titre inspirant

Les effets d’ombre

Tu donnes du relief à tes boutons ou tes images avec des ombrés.

effet d'ombre dans gutenberg avec editor plus
ombre bouton

Tu disposes des options suivantes :

  • Affichage à l’extérieur du bloc ou à l’intérieur
  • Couleur de l’ombre
  • Largeur
  • Hauteur
  • Intensité du flou
  • Étalement
ombre bloc

Les bordures

Tu choisis l’épaisseur de ta bordure, sa forme et sa couleur.

options de bordures dans gutenberg avec Editor Plus

Les différents styles de bordures.

styles de bordures dans editor plus

Tu règles chaque côté indépendamment dans Advanced.

bordures avancées
bordures asymétriques

Le padding que nous verrons ensuite évite que tes textes ne touchent ta bordure.

Arrondi de bordure

Tu appliques un arrondi à ta bordure.

effet arrondi bordures
arrondi bordures editor plus

Tu joues avec des arrondis asymétriques dans Advanced pour des formes plus audacieuses.

arrondis assymetriques bordure

Les options de formes irrégulières des images sont une autre option pour apporter de la variété à tes designs.

nouvelles formes images

Les marges

Les marges externes (Margin)

Le réglage fin des marges est utile pour aérer les colonnes ou pour espacer des éléments sur mobiles.

Tu disposes des réglages de chaque côté dans Advanced.

Les marges négatives permettent les chevauchements d’éléments. Tu coches pour appliquer les marges automatiques.

effet recouvrement
recouvrement elements superposition

Les marges internes (Padding)

Tu évites ainsi que tes textes ne touchent tes bordures ou pour aérer tes boutons.

Padding 0 px

bouton sans padding

Padding 30 px

padding bouton

Un padding asymétrique pour un rendu plus harmonieux

padding advanced editor plus
bouton padding asymétrique

Règle la taille des éléments

Préciser la taille du visuel est utile pour afficher une bannière en entier quand tu superposes du texte où pour les sections d’entrée sur le site. Tu adaptes les dimensions pour les mobiles.

  • Largeur
  • Largeur maximale
  • Hauteur
  • Hauteur maximale
taille element

L’index Z pour les superpositions

Tu précises la priorité d’un élément dans les superpositions (le chiffre le plus élevé est au-dessus).

z index gutenberg

Le bloc du centre de valeur plus basse est ainsi masqué dans cet exemple.

recouvrement elements superposition

Dynamise tes pages avec les animations

Tu as le choix entre 7 animations.

  • Apparition progressive
  • Glissement
  • Rebond
  • Zoom
  • Rotation
  • Étirer et retourner
  • Pivot
7 types d'animations d'editor plus pour gutenberg

Tu disposes d’un lecteur pour visualiser le résultat et tu précises :

  • La durée de l’effet
  • Le délai avant qu’il ne s’exécute
  • Si la vitesse est linéaire
  • La répétition ou non
réglages animations

8 nouveaux blocs : notes, compteur, progression…

Les blocs supplémentaires sont rassemblés dans Editor Plus Blocks.

blocs supplémentaires

La notation avec les étoiles

notation

Tu sélectionnes la note que tu souhaites afficher entre 1 et 5 (tu ne peux pas compléter un chiffre avec une virgule). Tu affiches du texte avant et après ta notation. Tu changes le visuel.

options de la notation

Quand, tu sélectionnes les étoiles, tu personnalises les couleurs,

couleurs des étoiles

la taille

taille des visuels

et l’espacement entre les pictos.

séparation entre les éléments

Tu retrouves les options de typographie quand tu cliques sur un titre.

options des polices de la notation

Le compteur

compteur

Tu choisis le chiffre de départ et d’arrivée du défilement, si souhaites du texte avant et après les nombres qui défilent et la durée de l’animation.

options du compteur

La barre de progression

barre de progression

Tu définis le remplissage de la barre et les textes à afficher : titre, texte dans la barre et le pourcentage.

options de la barre de progrès dans Editor Plus

Le texte dépliable

accordéon

Tu choisis tes icônes (je ne vois pas l’intérêt), tu décides s’il ne peut en avoir qu’un seul d’ouvert à la fois et si le premier est déplié par défaut.

options accordéon

Les onglets

Tu ajoutes tes onglets puis tu complètes les textes et les visuels.

ajout d'un nouvel onglet

Les icônes

icône dans editor plus

Tu sélectionnes ton visuel avant de passer au design.

choix de l'icône

J’ai rencontré une erreur quand j’ai voulu changer la couleur.

Le décompte

décompte

Tu sélectionnes ta date et ton heure de fin de décompte.

réglages du décompte

Les animations Lottie

Tu indiques le lien de ton fichier (externe ou sur ton serveur.

charger lottie

Ajoute des designs et de nouveaux blocs

Tu disposes de compositions de pages ou d’éléments payants (dont 5 gratuits par mois sans inscription) dans Add Template.

C’est sympa mais je ne trouve pas que les designs soient suffisamment aboutis.

ajout template

Conclusion

Je trouve cette extension très pratique pour accroître les capacités de Gutenberg sans passer par un constructeur de page.

Les blocs proposés manquent cruellement à Gutenberg en particulier pour les accordéons.

Une extension qui lève les limitations de Gutenberg : accordéon, marges, superpositions, animations… Cliquez pour tweeter

Bien manier Gutenberg est indispensable pour tirer le meilleur de cette extension. Je te propose un guide complet qui t’aidera à exploiter l’éditeur de WordPress.

signature de Jean du site pour pas un rond

Les articles qui peuvent t’intéresser :

Retrouve tous les articles pour Créer seul ton site

bannière pour l'inscription à la newsletter
portrait jean

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.

Jean

Comment gérer l’affichage mobile avec Gutenberg sur WordPress ?

L’éditeur de WordPress ne gère pas des réglages spécifiques pour les mobiles en natif mais il est possible de rajouter cette option avec l’extension Editor Plus.


Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

NEWSLETTERReçois les meilleurs conseils pour ton site et pour développer ton activité.

Tu découvres, tous les lundis, les derniers articles et vidéos pour créer ta marque, construire ton site et faire grandir ton entreprise.