DIVI 3 : quelles sont les vraies nouveautés ?

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

Sortie 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 !

Interface d'administration DIVI 2

 

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.

Apparition de la palette de couleur dans l'administration

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"

visual-builder-divi-3

 

  • 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"

Visual Builder côté Front-End

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 :

  1. charger une template à partir de la bibliothèque
  2. sauvegarder votre page dans la bibliothèque
  3. supprimer le modèle
  4. fermer la barre d'options
  5. paramétrer certaines options de la page
  6. revenir sur l'historique de vos modifications
  7. exporter la template dans un autre site

Paramétrage des pages dans le Visual Builder de DIVI 3

 

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 !

Construire sa page avec DIVI 3

 

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

La liste des modules DIVI 3

 

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.

Modification des textes - DIVI 3

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.

Paramétrage du responsive de DIVI 3

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

Divi WordPress Theme

Pour aller plus loin :

A propos de l'auteur...

Lycia Diaz

Freelance WordPress, Rédactrice Web et Webdesigner, je suis passionnée par le monde du web et de l'environnement Apple... Je tiens également un blog qui traite de ces sujets. J'adore découvrir, tester et partager mes expériences mais aussi créer et réaliser de nouveaux projets ! Je suis auteure d'un guide complet sur WordPress.

22 commentaires pertinents à ce jour ;)

  • Lycia dit :
    Merci Fabrice pour cette introduction ! :-)
  • WPFormation dit :

    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 !

  • benoit dit :
    Petit article très bien par contre si je peux me permettre d’ajouter un petit détail:
    « 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é.
  • jasmine dit :
    Bel article, merci Fabrice de me faire découvrir Lycia. J’ai été séduite par Divi depuis un bon moment déjà et la prise en main demande un certain temps. Divi 3 est juste waouw! mais il y a-t-il pas trop d’option?
  • Lycia Diaz dit :
    Bonsoir , merci pour ton commentaire… J’ai réalisé la comparaison avec la version 2.6.1 et dans Divi > Option du thème > onglet Général, la palette de couleur dont je parle n’est pas présente alors qu’elle l’est dans la version 3… Il s’agit de la capture d’écran qui se trouve dans le chapitre « Dans le back-end ». Peut-être ne parlions-nous pas de la même palette ? ;-)
  • WPFormation dit :
    Bonjour
    DIVI est un superbe thème multifonctions et c’est un peu son talon d’achille. Si tu connais l’outil, tu ne seras pas (trop) dépaysée et tu seras bluffée par ses nouvelles fonctions ;)
  • bruno dit :
    Salut,

    Merci pour l’article.
    Il est vrai que cette version est plutôt sympa, surtout en ce qui concerne
    les « Marges » de chaque bloc, maintenant on peut les visualiser et les modifier avec un cliquer/glisser en direct, et voir immédiatement ce que cela donne à l’écran et ça
    c’est vraiment chouette (enfin pour moi).
    ++

  • Azimut dit :
    Bonjour

    Peut on avec DIVI : faire un site web pour toucher une clientèle anglophone avec du contenu donc en anglais et que celui-ci puisse être en référencement naturel ( il y aura donc une version française et anglaise ) mais l’objectif est bien de toucher des prospects anglais ( Grande Bretagne , Amérique du nord, Canada etc …).

    J ‘aurais aussi besoin de mettre sur le site entre 100 et 150 annonces ( style annonces immobilière ).

    Merci d’avance de votre retour.

    Bernard

  • WPFormation dit :
    le problème ici n’est pas le thème car, que ce soit avec DIVI ou un autre, c’est vous qui décidez du contenu et de l’optimisation SEO.

    Pour votre projet, il faut voir du côté des plugins multilangues comme Polylang, WPML ou WeGlot et prévoir un CDN.

  • Benoît dit :
    oui effectivement en cherchant l’ajout (public) est depuis le 30 mars 2016 dans la 2.7 j’oublie toujours que j’ai accès au beta :)
  • Lycia dit :
    Merci pour votre retour ;-)
  • max dit :
    bonjour,

    je me suis décider ce matin à acheter le thème DIVI, mais depuis j’ai passé la journée à essayé de l’installer.

    voila ce qu’on me dit: Le thème parent est manquant. Merci d’installer le thème parent « Divi ».

    Quelqu’un a t’il le même problème et peut-il m’aider ? pour info j’ai installer « divi-builder » et » divi children 2.0.9″.

  • max dit :
    En fait c’est bon je viens de comprendre qu’il y avait et un thème plus un plugin DIVI à installer.
  • Alpha Mamo dit :
    Bon article, mais les nouveautés de cette dernière version ne seraient pas en grande partie ce que fait déjà depuis un moment le Thème X ? ( son concurrent dirons-nous )

    En outre, j’ai acheté il y a un moment le Thème X et j’en suis très satisfait. Je suis ouvert mais y-a-t’il une raison pour que je me laisse tenter par DIVI?

    Merci !

  • Lycia dit :
    Mamo Merci pour ton commentaire… À dire vrai, je n’ai jamais eu entre les mains le Theme X, cependant il m’a l’air bien complet… Par contre, je n’ai pas l’impression qu’il détienne un builder qui lui est propre (si je ne me trompe pas). Visual Composer est embarqué avec, non ? Ce plugin a plus ou moins les mêmes caractéristiques que le DIVI Builder… Après, tout est une question d’affinité et de fonctionnalité :-)
  • Alpha Mamo dit :
    De rien, j’aime bien ce site et ton article ;) En fait, plus exactement, Visual Composer est embarqué mais n’est pas à mon sens le builder principal. Pour moi, un autre est également embarqué et c’est Cornerstone, qui est terrible et tellement intuitif. ( Je n’en ai pas testé beaucoup mis à part les deux cités justement ^^ Du dév front et back end, du drag and drop en mode facile et beaucoup de fonctionnalité, et cornerstone est beaucoup plus esthétique que Visual, qui pour moi comment visuellement à dater )

    Bref, un thème à un coup ( bien qu’on y trouve largement pour son argent on est d’accord ^^ ) mais si je prends DIVI et que c’est du simili Theme X … Je ne vois pas l’intéret ! Peux être pourrais tu faire un article sur le Thème X un de ces quatre?

  • Alpha Mamo dit :
    Et d’ailleurs, ( je n’ai pas trouvé la touche EDIT ^^ ‘ ) Désolé pour les fautes, le correcteur moisi prend le dessus … ^^ et bravo pour ton premier article :)
  • Eric dit :
    Bonjour
    je vais creer mon site pour commencer nmon activite d’osteo, et j’ai deja une petite pratique de la creation de site web perso sur WP avec des themes tel quel Nirvana et autres.
    Je cherche quelques choses de simple et suffisemment ouvert afin de faire migrer le theme dans quelques annees si necessaire. Du coup j’ia un peu peur des systemes cle en main qui peut finir par bloquer une evolution futures. Qu’en pensez-vous. Est-ce que DIVI peut etre interessant pour mon type de besoin ou plutot une usine a gaz?
  • Lycia dit :
    alors en effet, si vous souhaitez évoluer vers un autre theme dans le futur vous risquez d’avoir quelques soucis causés par le Divi Builder qui est propre à la template Divi… Mais c’est le cas de la plupart des thèmes premiums qui sont embarqués avec des builders différents tels que Visual Composer par exemple… Donc que ce soit Divi ou un autre theme vous aurez un peu de travail lors de votre refonte, d’où l’importance de bien choisir son theme dès le départ…
  • David dit :
    j’ai acheter le theme X cet été et même si c’est vrai que son builder cornerstone est vraiment pratique je ne le recommande pas ( du tout ) car le header:menu est tres tres moche donc on aura un design tres basique…et pour rendre votre theme responsive vous allez galerer ( enfin moi j’ai galerer), ou alors il va falloir bidouiller a fond, donc perf et cornerstone ok pour le X mais le rendue final est tres decevant en grande partie a cause du header/menu hideux sauf si on touche en php et en css et que l on peu le modifier mais pour un debutant j’ai ete tres deçu et j ai lacher l’affaire, maintenant je lorgne sur Divi mais mon experience avec le X m a franchement refroidis…est ce que Divi fera l’affaire est ce qu’il s’adresse vraiment au debutant et il est intutif peut on avoir de jolie menu et un jolie site comme chez Wix …la reponse dans quelques mois en ce qui me concerne…sinon je retourne chez Wix dommage qu’il avance si doucement d’ailleurs mais c’est sur le buider de wix il est au top…
  • Runraid dit :
    Nouvel « adhérent  » de Élégant Thèmes, j’ai été séduit par Divi et Extra avec, précision essentielle (pour moi en tout cas), Divi est totalement francisé ce qui n’est pas le cas d’Extra …
    Bientôt une présentation et Tutoriel d’Extra ? ;)
  • WPFormation dit :
    Merci de votre retour !

    En effet, pourquoi pas une présentation d’Extra ;)

Et si vous donniez votre avis ?

Tweet37
Share66
Share18
Buffer4