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.

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

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

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

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

La gestion des arrières plans

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

Tu ajoutes une image de fond.

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

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é.

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

Les effets d’ombre

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

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

Les bordures

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

Les différents styles de bordures.

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

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

Arrondi de bordure

Tu appliques un arrondi à ta bordure.

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

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

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.

Les marges internes (Padding)

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

Padding 0 px

Padding 30 px

Un padding asymétrique pour un rendu plus harmonieux

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

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).

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

Dynamise tes pages avec les animations

Tu as le choix entre 7 animations.

• Apparition progressive
• Glissement
• Rebond
• Zoom
• Rotation
• Étirer et retourner
• Pivot

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

8 nouveaux blocs : notes, compteur, progression…

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

La notation avec les étoiles

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.

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

la taille

et l’espacement entre les pictos.

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

Le 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.

La barre de progression

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

Le texte dépliable

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.

Les onglets

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

Les icônes

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

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

Le décompte

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

Les animations Lottie

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

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.

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.

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.

Les articles qui peuvent t’intéresser :

• 103 formules de titres d’articles
• Réduis le poids des images de ton site
• Crée des visuels personnalisés en 3 minutes avec un générateur de mockups
• Réalise facilement la page d’accueil de ton site

Retrouve tous les articles pour Créer seul ton site

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