Alors, vous pensiez que Divi 4 était déjà pas mal ? Eh bien, attachez vos ceintures parce que la nouvelle interface Divi 5 vient de débarquer et ça décoiffe ! Cette nouvelle version ne se contente pas de quelques retouches cosmétiques. Non, non, non. C’est une révolution complète avec un système de mise en page repensé basé sur Flexbox et des outils si intelligents qu’ils pourraient presque créer vos sites à votre place (bon, on n’en est pas encore là, mais presque !).
L’objectif d’Elegant Themes était clair comme de l’eau de roche : vous faire gagner du temps, libérer votre créativité et vous adapter aux exigences du web moderne. Et franchement, mission accomplie ! Dans cet article, on va faire le tour du propriétaire de cette toute nouvelle version 5 du thème Divi, en se concentrant sur le Visual Builder, ce petit bijou qui fait battre le cœur de tous les webdesigners.
Si vous hésitez encore à passer à cette nouvelle version, qui, je le rappelle, est toujours en mode Alpha, je vous recommande de lire l’article « Divi 5 : quand sauter le pas !« . Il vous apportera des éclaircissements adaptés à votre situation et vous aidera à prendre une décision éclairée.
La grande révolution : Flexbox débarque enfin dans Divi 5
Accrochez-vous bien, parce que là, c’est du lourd ! La modification la plus importante de Divi 5, c’est son tout nouveau système de mise en page basé sur Flexbox, qui vient remplacer l’ancien moteur de mise en page par blocs de Divi 4. Ce n’est pas juste une mise à jour technique, c’est un changement de paradigme complet dans la façon de construire et de manipuler vos mises en page.
Flexbox, qu’est-ce que c’est au juste ?
Alors, pour ceux qui se grattent la tête en se demandant « Flexbox, c’est quoi cette bête ? », laissez-moi vous éclairer. Flexbox, ou « Flexible Box Layout » pour les intimes, c’est un module de mise en page CSS unidimensionnel pensé pour organiser vos éléments dans un conteneur. Le truc génial, c’est qu’ils se comportent de manière prévisible, même quand la taille de l’écran change (et croyez-moi, avec tous les écrans qui existent aujourd’hui, c’est un sacré défi !).
Il permet une distribution efficace de l’espace et un alignement puissant des éléments, même quand leur taille joue à cache-cache avec vous. C’est un peu comme avoir un assistant personnel qui réorganise automatiquement votre bureau en fonction de ce que vous y posez.
Avec Divi 5, chaque nouvelle ligne utilise désormais Flexbox par défaut. Pour ceux qui n’ont jamais touché à Flexbox en CSS (et ne vous inquiétez pas, on est tous passés par là), ça demande un petit temps d’adaptation. Flexbox fonctionne différemment des systèmes de blocs traditionnels, mais une fois qu’on a pigé le truc, c’est magique !
Les nouvelles commandes visuelles qui changent la donne
Le système Flexbox de Divi 5 débloque des commandes visuelles si puissantes qu’elles vont faire pleurer de joie tous ceux qui ont galéré avec du CSS personnalisé. Ces commandes éliminent carrément le besoin de bricoler du CSS complexe pour des ajustements de mise en page courants. C’est fini l’époque où il fallait être un magicien du code !
Voici les nouvelles fonctionnalités qui vont révolutionner votre vie de webdesigner :
Habillage (Wrapping) : Contrôlez comment vos éléments se répartissent sur plusieurs lignes ou colonnes si l’espace vient à manquer. Plus besoin de jouer au Tetris avec vos éléments !
Direction : Définissez la direction principale de vos éléments (horizontalement ou verticalement) et leur ordre. C’est comme avoir une baguette magique pour réorganiser vos contenus.
Espacement (Spacing) : Gérez l’espace entre vos éléments et autour d’eux de manière intuitive. Fini les marges et paddings calculés à la calculette !
Ordre (Ordering) : Réorganisez visuellement l’ordre de vos éléments sans toucher à la structure HTML sous-jacente. C’est comme couper-coller, mais en mieux.
Alignement (Alignment) : Alignez précisément vos éléments le long de l’axe principal et de l’axe transversal. Même les perfectionnistes vont être contents !
Ces contrôles intégrés signifient que vous pouvez désormais réaliser des mises en page complexes qui nécessitaient auparavant des « hacks CSS personnalisés » avec Divi 4, et ce, de manière beaucoup plus simple et visuelle. Par exemple, créer des en-têtes Flexbox qui s’adaptent magnifiquement à différentes tailles d’écran est désormais un jeu d’enfant. C’est beau, la technologie !
Du grand ménage de printemps
Avec l’arrivée de Flexbox, certaines fonctionnalités basées sur les blocs de Divi 4, comme les sections spécialisées et pleine largeur, tirent leur révérence. Pourquoi ? Tout simplement parce que Flexbox couvre désormais tous ces cas d’utilisation, offrant une solution plus flexible et unifiée. C’est un peu comme faire du rangement dans son garage : on se débarrasse de ce qui ne sert plus pour faire de la place au nouveau.
Cette simplification rend la structure du constructeur plus cohérente et la conception plus logique. Et ne vous inquiétez pas pour vos anciens projets !
Toutes les fonctionnalités et personnalisations possibles dans Divi 4 restent réalisables dans Divi 5. Vous avez toujours la possibilité d’utiliser les mises en page par blocs, comme c’était le cas par défaut dans Divi 4. Cette approche garantit une transition en douceur pour ceux qui ne sont pas encore prêts à sauter le pas vers Flexbox.
Une expérience Visual Builder repensée pour travailler sans distraction
Divi 5 ne s’est pas contenté de changer le moteur de mise en page. Non, l’équipe a aussi optimisé l’environnement de conception pour une efficacité maximale. Le Visual Builder a été repensé de A à Z pour réduire les distractions et accélérer votre flux de travail. Et croyez-moi, quand on passe sa journée sur un builder, chaque seconde gagnée compte !
Un tableau de bord optimisé et un environnement d’édition flexible
Vous savez ce sentiment quand vous êtes dans votre flow créatif et qu’une petite interruption vient tout gâcher ? Eh bien, Divi 5 s’attaque exactement à ce problème ! Même les interruptions mineures peuvent briser la concentration lors de la mise à jour d’une mise en page. C’est pourquoi l’équipe a créé un environnement d’édition plus flexible.
Voici les améliorations qui vont changer votre quotidien :
Panneaux ancrables (Dock Panels) : Vous pouvez désormais ancrer les panneaux de réglages importants pour les garder visibles pendant que vous travaillez. Fini le ballet incessant ouverture-fermeture de panneaux ! C’est comme avoir plusieurs écrans, mais en mieux organisé.
Modules multiples dans des onglets : Il est possible d’ouvrir plusieurs modules simultanément, chacun apparaissant comme un onglet dans votre panneau d’édition. Cela facilite la comparaison des réglages ou le passage d’un élément à l’autre sans avoir à fermer et rouvrir les réglages à répétition. Votre navigateur web fait pareil avec les onglets, et maintenant Divi aussi !
Navigation sans défilement : Le panneau des calques offre une vue structurelle complète de votre mise en page, permettant de naviguer instantanément vers n’importe quelle section, ligne ou module d’un simple clic. Plus besoin de scroller comme un fou sur les pages longues ou complexes !
Ces changements représentent une rupture totale avec l’ancien flux de travail qui ressemblait souvent à : ouvrir un module, sauvegarder, faire défiler, ouvrir le suivant, et répéter ce cycle jusqu’à l’épuisement. Divi 5 vise à rendre la conception plus fluide et intuitive. Et franchement, c’est réussi !
Le panneau des calques : votre nouvelle boussole de navigation
Le panneau des calques, c’est un peu le GPS de Divi 5. C’est un outil particulièrement puissant qui offre un moyen efficace de naviguer et de gérer tous les éléments de votre page pendant la conception. Et croyez-moi, une fois qu’on y a goûté, on ne peut plus s’en passer !
Un accès facilité à tous vos éléments
Ce panneau fournit un accès rapide et facile à tous les éléments de votre page, qu’il s’agisse de sections, lignes, colonnes ou modules. C’est particulièrement pratique pour les conceptions complexes avec des éléments superposés, des effets de transition ou des marges négatives qui seraient autrement difficiles à sélectionner de manière traditionnelle. C’est un peu comme avoir une vue aérienne de votre chantier !
Réorganisation par glisser-déposer : Dans la vue des calques, vous pouvez glisser-déposer vos éléments, lignes ou sections pour les réorganiser sur votre page. C’est infiniment plus simple que dans le Visual Builder traditionnel. Plus besoin de jongler avec les boutons « Déplacer vers le haut » ou « Déplacer vers le bas » !
Expansion et réduction intelligentes : Les calques peuvent être facilement développés et réduits, soit individuellement, soit tous en même temps, pour contrôler la visibilité des éléments contenus dans chaque section. C’est comme les dossiers sur votre ordinateur, mais en version webdesign.
Filtrage et sélection multiple : Le panneau offre une option de filtrage pour localiser des modules ou des éléments spécifiques. C’est très pratique sur les pages à fort contenu où trouver un élément peut relever de la chasse au trésor. Il permet également la sélection multiple de calques, soit de manière consécutive, soit de manière non ordonnée, en utilisant des combinaisons de touches (Shift + Option/Ctrl ou Shift + Command/Alt).
Renommage personnalisé : Pour une meilleure organisation, vous pouvez renommer vos éléments directement dans la vue des calques. Fini les « Section #42 » qui ne veulent rien dire !
Glisser-déposer de fichiers : la simplicité à l’état pur
Divi 5 étend la fonctionnalité de glisser-déposer bien au-delà des éléments du constructeur. Désormais, vous pouvez glisser-déposer des fichiers d’images, des documents texte, des fichiers web et bien plus encore directement sur n’importe quelle page Divi. C’est comme transformer votre builder en zone de dropbox géante !
Conversion instantanée et automatique
Une fois votre fichier déposé dans le constructeur, la magie opère : il est instantanément converti en module. Divi crée automatiquement une nouvelle section régulière avec une ligne à une colonne en bas de votre page, puis un nouveau module rempli avec le contenu de votre fichier en fonction de son type. C’est de l’intelligence artificielle appliquée au webdesign !
Paramètres automatiques : Pour plus de commodité, la fenêtre modale des paramètres du module s’affiche automatiquement, vous permettant de personnaliser immédiatement la conception de votre contenu. Pas besoin de chercher où aller ensuite, Divi vous guide !
Gestion intelligente du code : Lorsque vous glissez-déposer des extraits CSS, ils sont automatiquement ajoutés au CSS de la page et organisés avec des commentaires pour identifier les blocs de code. De même, les fichiers HTML peuvent être glissés-déposés et intégrés proprement dans votre page.
Conclusion : la nouvelle interface Divi 5, une révolution qui en vaut la peine
En résumé, Divi 5 n’est pas juste une mise à jour, c’est une véritable révolution ! Avec son système Flexbox, son Visual Builder repensé et ses fonctionnalités intelligentes comme le glisser-déposer de fichiers, cette nouvelle version transforme radicalement l’expérience de création de sites web.
L’objectif était ambitieux : permettre aux utilisateurs de travailler plus rapidement, de concevoir plus librement et de s’adapter aux exigences du web moderne. Mission largement accomplie ! Que vous soyez un débutant qui découvre le monde du webdesign ou un expert chevronné, Divi 5 a quelque chose à vous offrir.
Téléchargez la dernière version pour l’essayer.
La transition peut demander un petit temps d’adaptation, surtout si vous n’avez jamais utilisé Flexbox, mais les bénéfices en valent largement la chandelle. Une fois que vous aurez pris en main ces nouveaux outils, vous vous demanderez comment vous avez pu vous en passer.
Les outils recommandés avec l’icône % indiquent qu’ils génèrent une commission d’affiliation si vous les adoptez, sans aucun coût supplémentaire pour vous. Pour plus de détails, vous pouvez consulter la page complète de clause de transparence.
