Divi 3.0 dispose d'un incroyable générateur de front-end pour votre boutique WooCommerce

Divi est notre thème WordPress de choix en ce qui concerne WooCommerce, et le nouveau Divi 3.0 introduit un nouveau «générateur visuel» complet (également appelé «éditeur frontal») qui a été reconstitué à partir de rien en utilisant React, une bibliothèque JavaScript moderne pour les interfaces utilisateur. Ce nouveau générateur permet aux utilisateurs d’éditer leurs pages WordPress sur le front-end de leur site Web en utilisant des commandes visuelles simples et belles. Lorsque vous activez le générateur, vous voyez votre page exactement comme elle apparaîtrait sur le front-end de votre site Web.

Avec le générateur actif, la page devient modifiable à l'aide de la vaste gamme d'éléments de contenu et de paramètres de conception de Divi. Vous pouvez cliquer sur un paragraphe et commencer à taper, surligner du texte et ajuster sa police, sa taille et son style, ou ouvrir les paramètres de n'importe quel élément et modifier son contenu, son apparence et son positionnement. Glisser, déposer, redimensionner, copier, coller, supprimer et dupliquer des éléments est également facile.

La page devient vivante et chaque élément est tangible car vous pouvez tout manipuler de manière naturelle et intuitive. Lorsque vous modifiez une conception ou ajoutez un nouveau contenu à une page, ces modifications apparaissent instantanément. Cela est dû au fait que le nouveau générateur visuel ne repose pas sur le chargement traditionnel, il est donc nécessaire de rafraîchir les pages ou de mettre en place des barres de chargement Ajax pendant la majeure partie de l'expérience du générateur. C'est l'avenir de WYSIWYG.

Ajouter un nouveau contenu des modules 40 + de Divi

L'ajout de nouveau contenu dans Divi 3.0 est simple. Survolez l’emplacement souhaité sur la page et cliquez sur le bouton «+» pour ajouter un nouvel élément. Vous êtes accueilli avec une liste de modules de contenu 40 + de Divi qui peuvent être utilisés pour créer n'importe quel type de site Web. Il n'est pas nécessaire de glisser-déposer du contenu depuis un dock central car l'info-bulle de Divi est toujours disponible lorsque vous en avez besoin.

Éditeur en ligne-1

Personnalisez facilement tout

La beauté de Divi 3.0 devient évidente lorsque vous commencez à ajuster la conception de votre contenu. Tout peut être personnalisé et vous pouvez voir ces changements apparaître en temps réel:

  • Choisissez parmi des dizaines de polices personnalisées.
  • Ajustez la couleur du texte, la taille, la hauteur de la ligne et l'espacement des lettres.
  • Ajouter un remplissage et des marges personnalisés.
  • Changez les structures de colonne et les hauteurs de ligne.
  • Ajoutez des couleurs et des images d'arrière-plan.
  • Activer les arrière-plans de parallaxe et les arrière-plans vidéo.
  • Faites glisser, déposez, copiez et collez des éléments de contenu.
  • Appliquez différents paramètres de conception pour chaque point d'arrêt sensible.
  • Faites glisser pour ajuster les hauteurs et les largeurs des lignes.
  • Profitez d'une belle expérience d'édition en ligne

Lorsque le nouveau générateur visuel est actif, tout le texte de la page devient modifiable. Il n'est pas nécessaire d'ouvrir les paramètres d'un élément pour ajuster son contenu textuel. Cliquez simplement sur n'importe quel paragraphe et commencez à taper pour ajouter du texte, ou mettez en surbrillance n'importe quel texte pour ajuster sa police, sa taille, son style et son espacement. Ils ont créé leur propre interface utilisateur d'éditeur en ligne qui est super fluide et merveilleuse à utiliser. Si vous avez déjà été frustré par l'interface standard de TinyMCE, vous allez être agréablement surpris lorsque vous utilisez Divi 3.0.

Vivez une vitesse incroyable

Le générateur visuel de Divi 3.0 est probablement l'expérience de création de sites Web en ligne la plus rapide que vous ayez jamais utilisée. Il y a peu ou pas de rafraîchissements de pages ou de barres de chargement Ajax. En fait, il n'y a aucun chargement traditionnel d'aucune sorte pendant la majeure partie du processus de construction. En effet, JavaScript alimente le générateur et l'expérience de création se produit entièrement dans votre navigateur.

Au lieu de compter sur la communication entre votre navigateur et votre serveur pour que les changements se produisent, le constructeur Divi 3.0 n'a qu'à attendre le temps qu'il faut à l'application pour calculer chaque changement. Lorsqu'il est utilisé avec un ordinateur décent et un navigateur moderne, vous bénéficierez de mises à jour presque instantanées à mesure que vous ajoutez et ajustez du contenu. La charge de votre serveur, la vitesse du serveur et la vitesse Internet ne sont plus un facteur.

L'interface de constructeur «invisible» et personnalisable

Interface-2 personnalisable

Ils ont nommé la conception du nouveau constructeur visuel «Interface invisible». Cela représente l'une de leurs principales philosophies de conception, à savoir que «un bon design passe souvent inaperçu». La meilleure interface utilisateur est celle qui ne vous gêne pas et qui prédit vos intentions et vous propose des solutions. C'est ce que signifie pour une interface d'être vraiment «intuitive». Divi 3.0 ne vous bombarde pas avec des grilles, des lignes et des boutons inutiles. Il n'y a pas d'en-têtes ou de barres latérales flottantes pour voler votre espace d'écran ou de superpositions pour obscurcir votre vision. Lorsque vous chargez le générateur pour la première fois, vous ne savez peut-être même pas qu'il est là, mais lorsque vous commencez à explorer la page avec votre souris, les commandes deviennent apparentes.

Le générateur visuel de Divi 3.0 est le premier générateur de pages WordPress à offrir une interface personnalisable. Cela signifie que vous n'êtes pas intégré à certaines conventions de l'interface utilisateur en ce qui concerne l'affichage des contrôles du constructeur. Vous pouvez choisir que ces paramètres apparaissent dans une fenêtre contextuelle modale ou vous pouvez aligner cette fenêtre sur le côté de la page et entrer en mode «sidebar». Vous pouvez ajuster
la taille et la position de la fenêtre contextuelle et de la barre latérale pour optimiser votre espace en fonction de la taille de votre écran ou du contenu de votre page.

Catalin Zorzini

Je suis un blogueur en conception de sites Web et j'ai lancé ce projet après quelques semaines de difficultés à trouver la meilleure plateforme de commerce électronique pour moi-même. Découvrez mon courant top Constructeurs de sites de commerce électronique 10.