Aujourd'hui sur WPFormation, nous accueillons un nouvel auteur, il s'agit de Lycia !
Lycia est freelance, rédactrice web et webdesigner, c'est une fan de WordPress qui aime découvrir avec passion les nouveautés, explorer de nouvelles technologies, chercher des bons plans et des ressources web... C'est pour toutes ces raisons que je lui ai proposé de faire partie de l'aventure WPF.
Pour ce premier article, Lycia a décidé de vous parler de DIVI 3 et des nombreux changements apportés depuis la v2. Vous retrouverez en fin d'article, sa bio, son site web et le lien vers ses réseaux sociaux.
Merci de lui réserver le meilleur accueil ;)
Fabrice de WPF
DIVI 3 is here
Sur les réseaux sociaux et sur la toile, on ne parle que de ça ! La tant attendue sortie de la nouvelle version de DIVI, le thème WordPress phare de la plateforme Elegant Theme.
C'est, pour ainsi dire, l’événement de la rentrée. Intéressée par les nouveautés et autres trouvailles, j'étais curieuse et impatiente de la tester. Je vous propose de découvrir ensemble les vraies nouveautés de DIVI 3...
Comment c'était avant (DIVI 2) ?
Avant de vous parler de DIVI 3, je tenais à revenir rapidement sur la version 2. En effet, si vous n'avez jamais eu l'occasion d'essayer l'ancienne version de DIVI, vous ne pourrez jamais faire la différence...
La version 2 était une version très aboutie de DIVI qui vous permettait de créer rapidement des "blocs" ou des "sections" de manière très intuitive dans la partie ADMIN de votre site WordPress. Il vous suffisait de créer une nouvelle page, d'opter pour l'utilisation du "générateur DIVI" et le tour était joué ! Hop, une nouvelle section, puis hop un nouveau module et enfin on enregistrait la page, on la prévisualisait et on faisait quelques modifications à nouveau dans le back-office si besoin.
C'était déjà une révolution car le DIVI Builder était intégré et simple d'utilisation, ce qui lui a valu son succès !
Et maintenant (DIVI 3) ? La liste des nouveautés...
A présent, la révolution a suivi son cours et l'équipe de développeurs a fait un sacré boulot afin de rendre accessible le DIVI Builder du côté du front-end (côté visiteurs).
C'est la grande nouveauté de cette version !
Dans le Back-End
Côté admin, il n'y a presque rien à signaler... Dans les options de réglages, les onglets sont fidèles et on retrouvera, comme dans la version 2, les divers paramétrages accessibles depuis :
- "options du thème"
- "personnaliseur de thème" (qui est également accessible depuis l'onglet Apparence > Personnaliser)
- "personnaliseur de module"
- "éditeur de rôles"
- "bibliothèque DIVI"
Certains de ces onglets se sont vu dotés de quelques options supplémentaires comme, par exemple, la possibilité de pré-paramétrer des couleurs afin de créer sa propre palette qui sera accessible en Front-End.
Ensuite, un bouton, nommé "Utiliser le Visual Builder", est apparu au niveau des pages et des articles (toujours dans la partie ADMIN)... Il s'agit de l'option supplémentaire qui va vous permettre de passer en mode visuel et de vérifier en temps réel vos modifications !
Dans le Front-End... C'est ici que tout ce passe !
Après avoir paramétré les diverses options habituelles dans la partie ADMIN, vous allez maintenant pouvoir passer à l'utilisation du Visual Builder.
Pour cela, deux solutions s'offrent à vous :
- dans la partie ADMIN, il vous suffira de vous rendre sur une page ou sur un article, de cliquer sur "Utiliser le générateur DIVI" puis sur "Utiliser le Visual Builder"
- du côté visiteur, vous pourrez accéder à ce mode depuis la barre d'administration située en haut de votre page ou de votre article, en cliquant sur "Activer le Visual Builder"
Maintenant que vous avez choisi d'utiliser le Visual Builder, vous pourrez commencer à construire vos pages et/ou articles de la même manière que dans la version 2 mais de façon bien plus visuelle.
Le paramétrage de la page
Tout en bas de votre page se trouvent les options de base qui vous permettront de :
- charger une template à partir de la bibliothèque
- sauvegarder votre page dans la bibliothèque
- supprimer le modèle
- fermer la barre d'options
- paramétrer certaines options de la page
- revenir sur l'historique de vos modifications
- exporter la template dans un autre site
La construction de page
Comme dans l'ancienne version de DIVI, vous pourrez construire tranquillement votre page en ajoutant des sections, des blocs et des modules... Il vous suffira de cliquer sur le "+" et d'insérer à la volée tout ce dont vous avez besoin !
Non seulement vous verrez en temps réel vos modifications mais en plus elles seront enregistrées automatiquement... Si vous n'êtes pas satisfait du résultat, vous pourrez revenir aux versions antérieures en 1 clic !
La liste des modules
Celle-ci n'a pas changé, elle est toujours aussi bien garnie et vous permettra de vous passer d'un bon nombre de plugins... Vous retrouverez tous les modules présents dans la version 2 tels que :
- accordéon
- appel à l'action
- audio
- barre latérale
- bascule
- blog
- boutique
- bouton
- carte
- chercher
- code
- commentaires
- compteur barre
- compteur cercle
- compteur nombre
- compte à rebours
- curseur de défilement des post
- curseur de défilement vidéo
- diapo
- email optin
- formulaire de contact
- galerie
- image
- navigation dans les posts
- onglets
- personne
- portefeuille
- portefeuille flitrable
- résumé
- se connecter
- réseaux sociaux
- séparateur
- tableau des tarifs
- texte
- titre du post
- témoignage
- vidéo
Le paramétrage de chaque module
Très bien pensé, le Visual Builder de DIVI 3 vous permettra de paramétrer, ensuite, chaque module que vous aurez intégré.
Comme une baguette magique, votre clic sur chacun d'entre eux fera apparaître les outils de personnalisation qui lui sont propres.
Les options du responsive
Alors, de ce côté là, c'est très simple et très "friendly" de vérifier les diverses vues de votre site en fonction de la taille des écrans. Un petit menu en bas à gauche est prévu pour vous aider à paramétrer le responsive.
Les autres options de la page
Le Visual Builder de DIVI 3 est très efficace pour construire l'intérieur de votre page ou de votre article... Par contre, il sera inutile de vous acharner à cliquer sur votre menu, votre header, votre footer ou votre sidebar car ces paramètres ne sont pas modifiables de ce côté!
Naturellement, il faudra continuer à passer par votre back-office pour faire ce genre de réglages. Comme avant et comme dans tous les sites WordPress, il faudra toujours vous rendre dans "Apparence > Menu" pour construire le menu de votre site, dans "Apparence > Widgets" pour construire votre sidebar ou votre footer etc...
En conclusion
J'ai testé et ... j'approuve ! Bien sûr qu'il y a encore quelques petits détails à revoir comme, entre autres, certaines fenêtres qui s'ouvrent et vous empêchent de bien visualiser ce que vous êtes en train de faire... Mais l'équipe d'Elegant Theme en est consciente et sort régulièrement des mises à jour pour palier à ces petits dysfonctionnements...
J'ai trouvé l'utilisation très intuitive et le codage en AJAX permet d'obtenir une manipulation très fluide ! Je trouve que c'est une version idéale pour les débutants et ceux qui n'ont pas trop envie de perdre du temps inutilement.
Pour aller plus loin :
- lire un article consacré à DIVI 2 sur WP Formation
- en savoir d'avantage au sujet de DIVI 3 sur le blog d'Elegant Theme.
- pour tout comprendre sur les constructeurs de pages
Avec plaisir ;) Sois la bienvenue sur WPFormation !
Voici un avis utile concernant DIVI 3, et je suis assez d’accord avec Chris Lema : http://chrislema.com/divi-builder-3-first-look/. Trop d’options, tue l’option !
« Certains de ces onglets se sont vu dotés de quelques options supplémentaires comme, par exemple, la possibilité de pré-paramétrer des couleurs afin de créer sa propre palette qui sera accessible en Front-End. »
Le module de définition des couleurs n’est pas nouveau puisqu’il a été ajouté à la 2.4 si je ne me trompe pas. Ce n’est donc pas une nouveauté.