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

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 constructeur visuel est actif, tout le texte de la page devient éditable. Il n'est pas nécessaire d'ouvrir les paramètres d'un élément pour ajuster son contenu de texte. Cliquez simplement sur n'importe quel paragraphe et commencez à taper pour ajouter du texte, ou mettez en surbrillance un texte pour ajuster sa police, sa taille, son style et son espacement. Ils ont créé leur propre interface utilisateur d'édition en ligne, extrêmement fluide et agréable à utiliser. Si vous avez déjà été frustré par l'interface standard occupée de TinyMCE, vous serez agréablement surpris par l'utilisation de 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.

Plutôt que de s’appuyer sur la communication entre votre navigateur et votre serveur pour que les modifications se produisent, le générateur Divi 3.0 doit simplement attendre que le temps nécessaire à l’application pour calculer chaque modification. Utilisé avec un ordinateur correct et un navigateur moderne, vous bénéficierez de mises à jour presque instantanées à mesure que vous ajoutez et ajustez le contenu. La charge de votre serveur, la vitesse du serveur et la vitesse d'Internet ne sont plus un facteur.

L'interface de constructeur «invisible» et personnalisable

Interface-2

Ils ont baptisé «interface invisible» la conception du nouveau concepteur visuel. Ceci représente l'une de leurs philosophies de conception fondamentales, selon laquelle «une bonne conception passe souvent inaperçue». La meilleure interface utilisateur est celle qui ne vous gêne pas. celui qui prédit vos intentions et vous propose des solutions. C’est ce que cela signifie pour une interface d’être réellement «intuitive». Divi 3.0 ne vous bombarde pas de grilles, de lignes et de boutons inutiles. Il n'y a pas d'en-têtes flottants ou de barres latérales pour dérober votre écran ou les superpositions pour obscurcir votre vision. Lorsque vous chargez le générateur pour la première fois, il se peut que vous ne sachiez même pas qu’il est là, mais lorsque vous commencez à explorer la page avec votre souris, les commandes deviennent évidentes.

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.