Comment construire un site Web avec Divi 5 (rejoindre tôt et aller de l'avant)

Réfléchissez à votre première réalisation de la rapidité avec laquelle vous pouviez assembler un beau site Web avec Divi. Cela ressemblait à l'équilibre parfait entre la créativité et la simplicité. Divi 4 a donné à tout le monde des outils de conception fantastiques et un constructeur visuel lisse, mais nous, chez Elegant, n'allons pas nous installer.

Nous avons écouté attentivement vos commentaires et travaillé dur pour améliorer Divi. Divi 5 prend tout ce que vous avez aimé et le rend plus rapide, plus lisse et plus puissant. Il est conçu pour vous aider à créer avec moins d'efforts et plus de possibilités et être prêt pour l'avenir.

Si vous voulez voir ce qui est nouveau ou démarrer votre prochain site, ce guide vous aidera à créer un tout nouveau site Web, étape par étape avec Divi 5, et en cours de route, partagez des conseils pratiques sur la façon d'en tirer le meilleur parti. Allons-y!

Divi 5 est prêt à être utilisé sur de nouveaux sites Web, mais pas entièrement prêt à migrer les existants.

Qu'est-ce qui rend Divi 5 différent?

Divi 5 représente le plus grand changement de notre générateur de pages depuis que nous l'avons lancé pour la première fois. Nous l'avons reconstruit à partir de zéro avec des normes Web modernes à l'esprit. Ce n'est pas seulement un lifting. Nous avons complètement repensé la façon dont les sites Web devraient être construits avec Divi.

Le Web continue d'évoluer, la navigation mobile en croissance et les attentes des utilisateurs augmentant. Divi s'est toujours adapté à ces changements, et Divi 5 poursuit cette tradition en embrassant les dernières normes.

Lors de l'ouverture de Divi 5, vous pourriez penser: «Cela a l'air frais.» Ensuite, vous commencez à construire, et c'est à ce moment que vous le remarquez.

«Attendez, cette section est-elle chargée instantanément?»

Oui, ça l'a fait. Et c'est juste le début.

Divi 5 maintient ce qui a fonctionné dans Divi 4 mais corrige les frustrations avec lesquelles vous avez probablement appris à vivre. Nous l'avons construit parce que le bien n'était plus assez bon, pas pour nous, et certainement pas pour vous. Les sites que vous construisez aujourd'hui doivent faire plus et charger plus rapidement.

Explorons les principaux points forts de ce que l'alpha actuel de Divi 5 est livré avec:

De Shortcodes à la structure basée sur les blocs

Divi 4 stocké vos dispositions sous forme de shortcodes: ces bits de code entre crochets que WordPress lit pour créer vos pages. Ils ont travaillé, mais n'étaient pas parfaits.

Dans Divi 5, nous avons reconstruit la façon dont votre contenu est stocké. Plus de codes shortcodes cachés dans votre base de données! Nous utilisons maintenant une approche propre et basée sur des blocs qui correspond mieux à la direction de WordPress.

Vous ressentirez la différence lorsque vous modifierez les pages. Cliquez sur quelque chose et il répond tout de suite. Il n'y a pas de décalage, pas d'attente pour que les shortcodes soient traités. Vos modifications se produisent.

Bien que nous ayons changé presque tout sous le capot, vous n'aurez pas besoin de réapprendre comment construire. L'expérience visuelle reste familière. Nous venons de rendre ce qui se passe dans les coulisses beaucoup plus rationalisé et moderne.

La nouvelle interface Divi 5

Divi 5 introduit une interface plus propre qui remet l'accent sur votre travail de conception. Le constructeur visuel dispose désormais de panneaux latéraux au lieu de boîtes flottantes qui couvraient votre contenu. Ce changement fera une énorme différence dans la façon dont vous travaillez avec Divi.

La barre d'outils a été réorganisée. Les actions courantes sont maintenant à portée de main, tandis que les outils spécialisés restent accessibles sans encombrer votre espace de travail.

Les cueilleurs de couleurs, les commandes de typographie et les ajustements d'espacement apparaissent contextuellement en cas de besoin.

L'édition de texte est plus naturelle dans cette version. Vous pouvez formater le contenu directement sur la page avec des contrôles simples qui apparaissent lorsque vous sélectionnez du texte. Cette approche directe accélère considérablement le processus d'écriture et de formatage.

Nous avons également amélioré la façon dont les paramètres sont organisés. Les options connexes sont regroupées logiquement, en réduisant votre temps à rechercher dans les onglets et les menus. L'ensemble du système se sent plus cohérent et utile. De plus, les options de mode clair et sombre sont des touches réfléchies qui rendent les longues séances de conception plus confortables à vos yeux.

Ces améliorations d'interface peuvent sembler subtiles au départ, mais après avoir construit quelques pages, vous remarquerez combien vous pouvez travailler plus rapidement lorsque les outils restent hors de votre chemin.

Espace de travail multi-panel

Le Divi 5 rafraîchi apporte une nouvelle prise sur la façon dont vous interagissez avec vos créations. Alors que Divi 4 nous a donné une interface utilisateur intuitive, la nouvelle disposition de la nouvelle panneau dans Divi 5 les organise de manière plus naturelle pour le travail de conception.

Les paramètres accostent désormais soigneusement les côtés de votre écran, vous donnant une vue imprenable de votre page. Vous pouvez voir que des changements se produisent en temps réel sans avoir besoin de fermer les panneaux ou de les déplacer. Cette vue claire facilite le fonctionnement de la précision lors de l'espacement ou de l'alignement affinés.

La nouvelle configuration multi-panels vous permet de garder vos outils répartis mais toujours à portée de main.

Vous pouvez ouvrir vos paramètres de texte d'un côté tout en peaufinant l'espacement de l'autre. Vous n'aurez pas besoin de fermer une chose pour travailler sur une autre.

La chapelure vous aide à naviguer rapidement entre les éléments. Cliquez pour sauter d'un bouton à sa ligne ou une section parent. Cela économise d'innombrables clics lorsque vous êtes profondément dans l'édition de dispositions complexes.

Certains concepteurs préfèrent les paramètres à droite et d'autres à gauche. Vous n'avez pas à vous contenter de l'option que vous ne préférez pas. Divi 5 vous permet de choisir ce qui vous semble le plus confortable. Vous pouvez également les empiler dans des onglets, ce qui aide à jongler avec de nombreux éléments.

Cela peut ne pas sembler significatif, mais cela pourrait être pratique lors de la création de dispositions complexes comme des en-têtes, où vous devez basculer entre les paramètres du logo, le style de menu et les propriétés des boutones.

Nous avons conçu les panneaux pour faire partie de votre espace de travail, pas des interruptions. Avec l'interface utilisateur de Divi 5, vous pouvez vous concentrer sur son appartement: sur votre toile de conception Web.

Transition des lignes fixes aux lignes imbriquées

Dans Divi 4, lorsque vous essayez de construire quelque chose de complexe, vous frappez soudainement les murs avec la structure de la colonne de rangs de section et devez dépendre de sections spécialisées ou de CSS personnalisés. Divi 5 fixe ce mal de tête avec des lignes imbriquées. Cela peut sembler simple, mais ce changement ouvre complètement ce que vous pouvez créer sans pirater ensemble des solutions de contournement.

Vous pouvez maintenant cliquer à l'intérieur de n'importe quelle ligne et ajouter une nouvelle structure de ligne là-dedans - pas besoin de sections spécialisées ou d'écriture de CSS personnalisés pour regrouper logiquement votre contenu.

Ce système de rangs imbriqué n'est que le début de notre moteur de mise en page amélioré. Nous travaillons sur les commandes Flexbox et les nouveaux modèles de lignes qui rendront les sections spécialisées obsolètes. Bientôt, l'implémentation de Flexbox rendra les conceptions réactives encore plus simples tout en vous offrant un meilleur contrôle sur la façon dont le contenu s'aligne et distribue à travers les écrans.

Autres fonctionnalités notables

Au-delà des principaux changements structurels, Divi 5 a de nouvelles fonctionnalités qui rendent la construction de sites Web plus lisse et plus intuitive. Examinons certains ajouts hors concours dans l'alpha actuel qui changera la façon dont vous travaillez:

• Les variables de conception centralisent vos choix de style et font des changements à l'échelle du site un jeu d'enfant. Définissez une fois les couleurs, les polices, les tailles, les images et autres éléments, puis appliquez-les sur tout votre site. Besoin de mettre à jour les couleurs de votre marque? Modifiez la variable et chaque instance met à jour automatiquement.
• L'édition en un clic rend interagissant avec votre contenu sans effort. Cliquez simplement sur n'importe quel module pour le modifier. Plus de chasse à de minuscules icônes d'équipement ou de paramètres. Ce petit changement sauve d'innombrables clics tout au long de votre journée de travail.
• La mise à l'échelle du canevas vous permet de voir à quoi ressemble votre conception sur différentes tailles d'écran sans changer de vue. Faites glisser le bord de la toile pour le redimensionner et regarder votre disposition s'adapter en temps réel - parfait pour vérifier le comportement réactif sans commutation d'onglet constante.
• Le support des unités avancées ouvre de nouvelles possibilités pour des conceptions précises et réactives. Utilisez des fonctions CSS comme calc (), clamp () et min () / max () directement dans les champs de paramètres de Divi pour créer des dispositions de fluide qui s'adaptent parfaitement à n'importe quelle taille d'écran.
• Amélioration des performances en évitant de charger des scripts et des modules inutiles
• Les points d'arrêt personnalisables s'étendent de seulement trois (bureau, tablette, mobile) à sept options réglables. Ce contrôle affiné vous aide à élaborer des dispositions parfaites pour tout, des petits téléphones aux moniteurs ultrairs.

Construire un site Web avec Divi 5: un guide étape par étape

Maintenant, passons à la viande de ce guide: une procédure pratique qui vous emmène de la toile vierge au site Web fini en utilisant les fonctionnalités puissantes de Divi 5. Nous décomposerons chaque phase du processus en étapes gérables qui s'appuient les uns sur les autres

1. Installation de divi 5

Obtenir la course Divi 5 ne fait que quelques pas. Téléchargez la dernière version alpha dans la zone de vos membres, téléchargez-la sur WordPress via la section du thème et activez-la comme vous le feriez normalement.

2. Personnalisation de votre espace de travail

La première chose que vous remarquerez lors de l'ouverture de Visual Builder de Divi 5 est la propreté et la propreté. Les panneaux flottants ne bloqueront pas votre vue comme avant. Au lieu de cela, vous trouverez une disposition plus réfléchie avec des panneaux dockables qui restent hors de votre chemin. Prenez quelques minutes pour configurer votre espace de travail comme vous l'aimez.

Vous pouvez basculer entre le mode clair et sombre en fonction de votre préférence ou de votre temps de travail.

Créer un espace de travail qui fonctionne pour vous

Divi 5 offre plus que des panneaux de déplacement. Vous pouvez regrouper des panneaux connexes dans des onglets, ce qui maintient votre espace de travail organisé même lors de la gestion des paramètres complexes.

Ouvrez deux panneaux de paramètres différents et faites glisser l'un sur l'autre. Ils se combineront dans une disposition à onglets, vous permettant de basculer entre eux en un clic.

Si vous préférez une configuration classique, vous pouvez toujours faire flotter des panneaux n'importe où sur votre écran. Faites glisser un panneau loin des bords pour le détacher et placez-le où vous le souhaitez.

Pour les projets plus grands, le mode radiographie de la barre d'outils gauche peut être utile. Il décrit chaque élément avec une bordure subtile, ce qui facilite le départ des sections et des modules. Ce guide visuel vous aide à rester orienté lorsque vous travaillez avec des dispositions détaillées.

Accélérer votre flux de travail

Les raccourcis clavier peuvent accélérer considérablement votre processus de conception dans Divi 5. Appuyez sur l'option (?) Pour accéder au menu d'aide, où vous trouverez une liste complète des raccourcis. L'apprentissage de quelques combinaisons clés peut raser des heures de congé de plus grands projets.

Lorsque vous modifiez des éléments imbriqués (comme un bouton à l'intérieur d'une ligne à l'intérieur d'une ligne), la chapelure montre votre position exacte dans la hiérarchie. Cliquez sur n'importe quelle partie de la piste du fil pour sauter directement aux paramètres de cet élément sans chasser les couches.

Cliquez sur l'icône du panneau Calques dans la barre d'outils de gauche pour en profiter. Il vous donne une vue de l'ensemble de votre structure de page en tant que liste imbriquée, ce qui facilite la sélection des éléments spécifiques lorsque vous travaillez avec des mises en page complexes.

2. Configuration des variables dynamiques

Les variables de conception en divi 5 modifient la façon dont vous gérez les éléments visuels de votre site Web. Ils vous donnent un endroit central pour contrôler la conception de votre site et simplifier la mise à jour. Considérez-les comme des raccourcis que vous pouvez utiliser sur votre site Web.

Pour commencer à utiliser des variables de conception, ouvrez le constructeur visuel et recherchez l'icône du gestionnaire de variables dans la barre latérale gauche. Lorsque vous cliquez dessus, vous verrez des options pour créer différents types de variables: couleurs, polices, chiffres, images, texte et liens.

Configuration des couleurs globales

Tout d'abord, configurez des variables de couleur. Cliquez sur l'onglet Couleurs, ajoutez vos couleurs et nommez-leur quelque chose de mémorable comme «Brand Blue» ou «Couleur primaire». Cliquez sur Enregistrer et vous avez créé votre première variable.

Faites de même pour vos couleurs secondaires, vos nuances d'arrière-plan et vos couleurs de texte. Avoir toutes les couleurs de votre marque enregistrées en variables signifie que vous n'aurez plus jamais besoin de vous souvenir de codes hexadécimaux.

Création de variables de police et de nombre

Ensuite, configurons votre système de typographie. Sous l'onglet Fonts, créez des variables pour vos polices de cap et de corps. Cela maintient votre texte cohérent sur l'ensemble du site.

Pour les variables de nombre, pensez à des mesures courantes comme:

• Rembourrage standard (peut-être 30px pour les sections)
• Radius frontalier (si vous voulez des coins arrondis)
• Largeurs maximales pour les conteneurs de contenu
• Tailles de police

La création de ces variables prend quelques minutes à l'avance mais permet d'économiser des heures. Lorsque les clients veulent des modifications, vous n'aurez pas besoin de chasser à travers chaque page, ajustant chaque élément. Mettez simplement à jour la variable une fois.

Vous devez également créer des variables de texte pour le contenu qui pourrait changer plus tard, tels que votre numéro de téléphone, les heures d'ouverture ou le slogan de l'entreprise.

Créez des variables de liens avec des URL que vous pouvez réutiliser sur votre site, qui sont parfaites pour gérer les liens couramment utilisés, tels que les profils de médias sociaux, les URL d'affiliation ou un bouton «Rendre en contact».

De même, ajoutez des variables d'image pour les images couramment utilisées, telles que les logos.

En utilisant des variables avec des unités avancées

Divi 5 devient encore plus puissant lorsque vous combinez des variables de conception avec des unités CSS avancées. Créez une variable numérique à l'aide de fonctions CSS comme CLAMP () pour une typographie réactive qui évolue entre les tailles d'écran.

Par exemple, créez une variable de taille d'en-tête avec: pince (36px, 5vw, 72px).

Cela définit votre texte au moins 36 pix sur de petits écrans, évolue de manière fluide sur les écrans moyens et les plafonds à 72px sur de grands écrans. Appliquez ceci à vos modules de cap pour un texte qui semble toujours proportionnel quel que soit l'appareil.

La combinaison de variables et d'unités avancées supprime une grande partie du travail fastidieux de conception réactive. Votre texte et votre espacement s'ajustent automatiquement sans définir plusieurs points d'arrêt manuellement.

3. Construire des pages et des modèles avec divi

Maintenant que vous avez personnalisé votre espace de travail et créé vos variables de conception, il est temps de créer votre première page avec Divi 5. Le constructeur visuel vous donne plusieurs façons de commencer à créer du contenu.

Option 1: Créez votre site Web avec Divi Ai

Avec Divi Quick Sites + Divi AI, vous pouvez créer instantanément un site Web de travail avec plusieurs pages, des dispositions de constructeur de thème, des paramètres de conception universels, une barre de navigation prête à l'emploi et des configurations WordPress optimisées en fournissant une invite de texte de base.

Lorsque vous construisez un site Web avec Divi AI, accédez à votre tableau de bord WordPress et cliquez sur l'icône Divi dans le menu. Recherchez la case Divi Quick Sites et appuyez sur le bouton «Générer un nouveau site».

Sélectionnez l'option «Générez votre site avec l'IA» et fournissez des informations détaillées sur votre entreprise. Plus vous incluez de détails sur vos services, votre style et votre public, mieux les résultats vous obtiendrez. N'oubliez pas que vous aurez besoin d'un abonnement Divi AI pour utiliser cette fonctionnalité.

Si vous avez des produits à vendre, vérifiez l'option Installer WooCommerce pendant la configuration et Divi créera automatiquement vos pages de magasin avec tous les composants nécessaires.

Pour les images, vous pouvez choisir l'option Divi Quick Sites pour accéder à la collection d'Unsplash, laissez Divi créer des images personnalisées en fonction de la description de votre entreprise, ou sélectionnez «Utilisez l'espace réservé» si vous prévoyez d'ajouter vos propres photos plus tard.

Vous pourrez ensuite personnaliser les couleurs et les polices. Vous pouvez soit sélectionner manuellement les couleurs et la typographie de votre marque si vous avez des exigences spécifiques, soit laisser Divi proposer des combinaisons complémentaires.

Une fois que Divi a construit votre page, remplacez toutes les valeurs de couleur fixe par vos variables de conception. Cela relie vos sections générées par l'IA directement à votre système de conception. Si votre client veut un bleu plus foncé plus tard, vous n'avez qu'à le mettre à jour une fois.

Si vous ne vous êtes pas installé sur les couleurs de la marque et que vous laissez Divi choisir pour vous, et que vous aimez le résultat, assurez-vous de transformer ces couleurs en variables de conception. Créez également des préréglages d'options globaux à partir de ces couleurs. De cette façon, vos pages restent flexibles et cohérentes et correspondent toujours au style visuel de votre site.

Une fois que vous êtes satisfait de vos sélections, appuyez sur le bouton «Générer et publier» et attendre quelques minutes pendant que Divi fonctionne sa magie. Votre nouvelle page d'accueil apparaîtra, prête à accueillir les visiteurs de votre site.

Ajout de nouvelles sections à vos pages en utilisant l'IA

Utilisez la section «Générer avec l'IA» pour générer rapidement une nouvelle section. Vous pouvez décrire ce dont vous avez besoin pour diviser AI, et cela générera une section pour vous.

Affiner les sections générées par l'AI

Une fois que Divi a créé votre contenu, vous pouvez facilement l'adapter pour répondre à vos besoins. Chaque partie de votre site reste entièrement personnalisable via les outils Divi habituels. Changez n'importe quel texte, échangez des images, ajustez l'espacement et utilisez les couleurs de votre marque avec les variables de conception.

Ces dispositions vous donnent un point de départ fort, en suivant les normes actuelles de conception Web. Au lieu de commencer par une page vide, vous travaillez à partir d'un modèle bien construit qui a juste besoin de votre entrée unique. Cela permet d'économiser du temps et des efforts sur les choix de conception tout en vous permettant de garder le contrôle total de l'apparence et de la sensation.

Avec les fonctionnalités de montage améliorées de Divi 5 et la puissance de l'IA, la construction d'un site Web devient plus rapide et plus simple. Vous obtenez rapidement des résultats de qualité et vous avez toujours la liberté de tout personnaliser, ce qui le rend idéal pour lancer des sites professionnels en moins de temps.

Option 2: Créez votre site Web à l'aide de dispositions préalables

Pour ajouter l'un des plus de 2000 conceptions prêtes à l'emploi à votre page, appuyez sur le bouton bleu plus dans le coin supérieur gauche de votre écran et choisissez «Préparez la disposition». Une fenêtre apparaîtra affichant toutes vos options.

Choisissez un pack de design que vous aimez. Pour trouver quelque chose de plus rapide, utilisez les filtres ou tapez ce dont vous avez besoin dans la zone de recherche. Cliquez sur n'importe quel pack qui attire votre attention, puis choisissez le style de page que vous souhaitez. Vous pouvez faire défiler à gauche pour voir le design complet avant de décider.

Lorsque vous avez trouvé «celui», cliquez sur «Utiliser cette mise en page». Vous pourriez voir un message demandant l'importation de schémas de couleurs. Décochez cela si vous n'en voulez pas.

Le seul inconvénient? Vous devrez répéter ceci pour chaque page que vous construisez. Mais il y a une meilleure façon. Avec des sites divi rapides (pas d'IA nécessaire), vous pouvez accélérer considérablement cela. La meilleure partie est que chaque utilisateur Divi peut accéder à des sites rapides et à toutes ses conceptions de démarrage sans payer de plus pour un abonnement IA.

Regarder notre collection de sites de démarrage vaut votre temps. Chacun propose des photos et des illustrations uniques que vous ne verrez pas ailleurs.

Rendez-vous à Divi, cliquez sur l'onglet des sites rapides, appuyez sur «Générez un nouveau site» et choisissez «Utiliser le site de démarrage pré-fait» cette fois. Parcourez les conceptions jusqu'à ce que vous en repérez une qui correspond à votre vision. Ajoutez vos informations, choisissez vos couleurs et vos polices et laissez le système fonctionner sa magie.

Une fois une disposition appliquée…

Après avoir appliqué ou importé une disposition pré-même, si vous n'avez pas sélectionné les couleurs de votre marque et simplement utilisé les couleurs et les polices par défaut qui sont livrées avec la disposition, passez par la conception et remplacez les codes de couleur fixe par vos variables de conception et vos préréglages de groupe d'options.

Si vous avez sélectionné les couleurs et les polices mais que vous n'avez pas encore créé les préréglages, transformez ces couleurs en variables de conception également. Créez également des préréglages de groupe d'options à partir de ces couleurs.

Cela garantit que tout le contenu de la mise en page suit vos styles prédéfinis, de sorte que les éléments comme les boutons restent cohérents sur chaque page. De même, vous obtenez la commodité des conceptions prêtes à l'emploi qui sont facilement maintenables et alignées sur le langage visuel de votre marque.

Vous aurez un site Web fini en quelques minutes. Tout s'intègre parfaitement: couleurs, polices, tout le package. Une fois que c'est en place, vous pouvez ajuster tout ce que vous voulez, tout comme avec n'importe quel site Divi.

Option 3: Créez votre site Web à partir de zéro

Lorsque vous ouvrez une nouvelle page, vous verrez une toile propre avec une section par défaut ajoutée. Comme Divi 4, vous pouvez cliquer sur le bouton vert (+) pour ajouter une nouvelle ligne et commencer à construire à partir de zéro.

Tout comme Divi 4, il existe une collection de modules prêts à l'emploi avec Divi 5.

La fonction de lignes imbriqués est inestimable pour les dispositions complexes. Besoin d'une section à trois rangées dans une rangée d'une disposition à deux rangées? Aucun problème. Cliquez dans votre ligne, ajoutez une ligne et choisissez votre structure de ligne. Divi 5 gère cette nidification sans transpirer, vous offrant des possibilités de mise en page pratiquement illimitées.

Voyons comment cela pourrait fonctionner pour une mise en page de blog. Commencez avec une configuration standard à deux rangées: une zone de contenu large et une barre latérale plus étroite. Dans la ligne principale, déposez votre module de blog.

Avez-vous besoin de messages en vedette dans une grille au-dessus des articles réguliers? Nest Nid une autre ligne en bas avec une seule ligne avec un e-mail opt-in, puis une structure à trois rangées pour les boîtes d'information. La même structure aurait nécessité un code personnalisé dans Divi 4.

Pour votre barre latérale, vous voudrez peut-être différents widgets empilés avec différents arrière-plans. Avec les lignes imbriquées, chaque élément de barre latérale obtient sa propre ligne avec un style personnalisé. Promotions en un regard, l'introduction de l'auteur dans un autre et, un témoignage dans le troisième, tous soigneusement contenus dans la ligne de la barre latérale.

Cette nouvelle liberté structurelle modifie la façon dont vous abordez complètement les dispositions. Vitrine de produit avec des lignes de texte / image en alternance, puis une section de fonctionnalité à trois rangées, surmontée de témoignages pleine largeur? Le tout dans un conteneur fluide sans combattre le constructeur.

Créer des préréglages de groupe d'options

Une fois que vous stylisez votre première page, il devient impératif de dupliquer ces choix de style sur chaque page de votre site Web. Cependant, cela pourrait être très long et, plus important encore, ennuyeux. Divi 5 présente les préréglages du groupe d'options pour accélérer votre processus de conception. Ils fonctionnent comme des extraits de style réutilisables que vous pouvez appliquer n'importe où sur votre site. Voyons comment les configurer et les utiliser.

Commencez par cliquer sur n'importe quel module que vous avez ajouté à votre page. Lorsque vous êtes dans le panneau Paramètres, regardez les options de conception. Des choses comme les frontières, la typographie ou les ombres. Survolez près du coin supérieur droit de ces blocs de paramètres, et vous verrez une petite icône prédéfinie apparaître.

Cliquez sur cette icône prédéfinie et choisissez «Nouveau préréglage dans les styles actuels». Donnez-lui un nom qui vous a du sens. Quelque chose comme des «coins ronds» pour un préréglage de la frontière ou un «gros titre» pour le style de texte.

Le panneau changera de couleur pour montrer que vous travaillez sur un préréglage maintenant, pas seulement l'élément actuel. Cela vous aide à garder une trace de ce que vous faites. S'il s'agit d'un style que vous utiliserez souvent, cochez la case «Attribuer par défaut» afin que les nouveaux éléments l'utiliseront automatiquement.

Lorsque vous enregistrez, vous avez créé votre premier groupe de groupes d'options! La beauté est que vous pouvez appliquer ce même style exactement à tout élément qui utilise ce groupe d'options: modules de texte, images, boutons ou même sections complètes.

Combinant des préréglages de groupe d'options avec des variables de conception

Voici où Divi 5 devient vraiment puissant. Lors de la création de préréglages, n'utilisez pas seulement des couleurs ou des tailles statiques - utilisez vos variables de conception à la place.

Dites que vous faites un préréglage de bouton. Au lieu de choisir une couleur spécifique, cliquez sur l'icône Variables dans le sélecteur de couleurs et sélectionnez votre variable «Brand Blue». Maintenant, votre préréglage utilisera toujours la couleur de votre marque, et si vous modifiez cette couleur plus tard, tous les boutons utilisant ce préréglage se mettront à jour automatiquement.

Il en va de même pour chaque type de variable que vous avez créé. Besoin d'espacement différent? Prenez simplement vos numéros d'espacement enregistrés. Appliquer des polices? Vos variables de typographie sont là en attente. Votre site reste cohérent.

En cas de besoin, mettez simplement à jour la variable une fois, et elle mettra à jour chaque instance à elle seule, sans le mal de tête de traquer chaque élément lorsque le client veut que «ce bleu soit un peu plus sombre».

Divi 5 vous permet également d'inclure des unités avancées dans n'importe quel champ de taille. Vous voulez une section qui n'est jamais plus large que 1200px mais se rétrécit sur le mobile? Tapez «min (1200px, 90%)» dans la case largeur. Fait. Le conteneur restera à 90% de largeur jusqu'à ce qu'il dépasse 1200px, puis arrête de croître. Aucun CSS personnalisé n'est nécessaire. Ces unités avancées peuvent également être appliquées à des variables dynamiques.

Préréglages des éléments de construction

Après avoir configuré des préréglages de groupe d'options, vous voudrez créer des préréglages d'élément pour enregistrer des modules, des lignes ou des sections entièrement stylisés. Considérez-les comme des packages de conception complets que vous pouvez réutiliser sur votre site.

Pour en créer un, stylisez complètement un module, et lorsqu'il a l'air parfait, cliquez sur l'icône prédéfinie dans l'en-tête du module (pas à l'intérieur d'un groupe d'options spécifique). Sélectionnez «Nouveau préréglage parmi les styles actuels», donnez-lui un nom comme «Carte Feature» ou «Team Bio» et enregistrer.

Lorsque vous ajoutez de nouveaux modules, cliquez simplement sur la liste déroulante Preset dans l'en-tête du module pour appliquer votre conception enregistrée instantanément. Tous les paramètres seront appliqués en un seul clic.

Créez d'autres pages en fonction de votre système de conception (variables et préréglages)

Une fois que vous avez établi votre système de conception avec des variables et des préréglages, la création de pages supplémentaires devient beaucoup plus efficace. Avec Divi 5, vos fondations sont en place, vous pouvez désormais étendre votre site Web tout en maintenant une cohérence parfaite.

Commencez par créer une nouvelle page et activez le constructeur visuel. Lorsque vous ajoutez des modules à cette nouvelle page, vous remarquerez immédiatement comment votre système prédéfini accélère les choses. Au lieu de styliser des éléments à partir de zéro, appliquez simplement vos préréglages d'éléments enregistrés.

Par exemple, lors de l'ajout d'un nouveau module de texte, cliquez sur la liste déroulante Preset dans l'en-tête du module et sélectionnez votre préréglage «Texte du corps». Tous les styles, y compris les choix de polices, les tailles et les couleurs, sont appliqués instantanément. Il en va de même pour les boutons, les images, les témoignages ou tout autre élément pour lequel vous avez créé des préréglages.

Construisez vos modèles

Avec le constructeur de thème de Divi, vous pouvez créer et personnaliser chaque coin et coin de votre site Web. En-têtes, pieds de page, modèles de publication, modèles de type post personnalisé, pages de magasin, vous l'appelez.

Accédez au constructeur de thème de Divi en naviguant dans votre tableau de bord WordPress: Divi → Builder de thème. En haut, vous trouverez votre modèle par défaut - ce modèle gère l'apparence globale de l'ensemble de votre site Web. Cliquez sur la section Ajouter un en-tête global et choisissez «Créer un en-tête global» pour ouvrir votre espace de travail. De même, vous pouvez sélectionner Ajouter un pied de page mondial pour concevoir les pieds de page de votre site Web.

Avec les lignes imbriquées, les en-têtes et les pieds de page, le bâtiment devient beaucoup plus facile. Besoin de cet en-tête de fantaisie avec différentes dispositions de lignes dans chaque section? Ajoutez une ligne à l'intérieur d'une autre rangée, choisissez votre disposition de la ligne et continuez à construire.

Créer des modèles de type de contenu personnalisés

Au-delà des en-têtes et des pieds de page, vous pouvez concevoir des modèles spécialisés pour différents types de contenu à l'aide de thème Builder.

Comme la façon dont les articles de blog diffèrent des profils des membres de l'équipe ou des pages de produits, chacun mérite sa propre mise en page optimisée.

Créez un modèle pour les articles de blog avec un espacement approprié pour la lisibilité, le placement d'images en vedette et les informations sur les auteurs. Les pages de produits peuvent nécessiter des dispositions de galerie et des tables de tarification.

La beauté de ce système est qu'une fois que ces modèles sont affectés à leurs types de contenu respectifs, ils s'appliquent automatiquement. Par exemple, si vous ajoutez un nouvel article de blog, le modèle gère instantanément le formatage. Cela supprime le travail répétitif et maintient tout visuellement connecté.

Lors de la construction de ces modèles, tirez parti de vos préréglages de groupe d'options et des variables de conception. Les paramètres de typographie que vous avez établis plus tôt garantissent que les titres et le texte du corps restent cohérents. Vos variables de couleur maintiennent l'identité de la marque sur tous les types de modèles.

Utilisation de Divi Ai pour la conception du modèle

Divi Ai coupe le temps de construction de modèles d'heures à quelques minutes. Dans le constructeur de thèmes, choisissez ce dont vous avez besoin - un en-tête, un pied de page, une disposition de blog ou une page de produit.

Appuyez sur le bouton bleu + dans Visual Builder et sélectionnez «Générer la section avec AI».

Votre description compte le plus. Soyez précis sur ce dont vous avez besoin:

• En-tête: en-tête propres avec logo aligné gauche, menu de navigation horizontale (maison, à propos, blog, boutique) et un bouton de contact clair à droite. Réactif avec une icône de hamburger pour mobile.
• Perfeteur: pied de page à trois colonnes: informations sur l'entreprise et icônes sociales, liens utiles et coordonnées (adresse, téléphone, e-mail). Effacer les en-têtes de section, mise en page simple.
• Modèle de blog: Disposition de publication unique avec une grande image en vedette, un titre de publication, une date, une zone de contenu et une barre latérale droite avec des articles et catégories récents.
• Page de l'atelier: Affichage du produit avec galerie d'images, nom de produit, prix, description, sélecteur de quantité et un bouton d'achat proéminent. Produits connexes illustrés ci-dessous.

Plus il y a de détails, plus les résultats sont plus joints. Une fois que Divi a créé votre modèle, prenez une minute pour remplacer toutes les valeurs codées durs par vos préréglages de groupe d'options pour des éléments comme les boutons, les blocs de texte et les bordures. Cela intègre le contenu généré par l'IA avec votre système prédéfini, de sorte que vos boutons semblent identiques sur toutes les pages, qu'elles soient construites manuellement ou avec l'IA.

Cette méthode vous donne des modèles prêts à l'emploi qui se sentent sur mesure, tout en gardant tout lié au langage visuel de votre site. Lorsque les changements de conception viennent plus tard, vos sections construites par l'IA se mettent à jour avec tout le reste.

Gagnez du temps avec des fonctionnalités de modèle avancé

Les modèles deviennent encore plus puissants lorsque vous ajoutez une logique conditionnelle. Vous voulez différents en-têtes pour les pages de votre boutique par rapport à votre blog? Définissez les conditions d'affichage qui appliquent des modèles en fonction des catégories de page ou des modèles d'URL.

N'oubliez pas que les modèles fonctionnent main dans la main avec votre système prédéfini pour créer un cadre de conception complet qui rend la création de sites Web plus rapide, plus cohérente et finalement plus professionnelle.

4. Maîtriser la conception réactive

La conception réactive de Divi 5 introduit des améliorations significatives par rapport aux versions précédentes. Le nouveau système fournit un contrôle supplémentaire sur la façon dont votre site Web s'adapte à différentes tailles d'écran.

Divi 5 introduit un système de point d'arrêt avancé qui fournit un contrôle sans précédent sur la réactivité du site Web. Les sept points d'arrêt personnalisables permettent un ciblage de conception précis sur différents appareils:

• Téléphone: <767px couvre la plupart des tailles d'écran du smartphone
• Téléphone large: <860px couvre la plupart des écrans de téléphone en mode paysage
• Tablette: <980px est bon pour la plupart des écrans de tablette en mode portrait
• Tablet large: <1024px est standard pour la vue du paysage dans la plupart des iPads et des tablettes Samsung.
• Écran large: > 1280px est une bonne largeur pour la plupart des ordinateurs portables plus petits
• Ultrawide: > 1440px couvre les écrans de bureau plus grands

Ces points d'arrêt sont méticuleusement conçus pour aborder le paysage diversifié des appareils modernes. Cette approche permet aux concepteurs de créer des sites Web qui semblent parfaits, qu'ils soient consultés sur un smartphone compact ou un vaste moniteur ultra-large. Chaque point d'arrêt n'est pas seulement un seuil technique; C'est l'occasion de créer une expérience utilisateur sur mesure.

De plus, lorsque vous en avez besoin, vous pouvez ajuster les points d'arrêt selon vos besoins.

5. Obtenez, définissez, lancez!

Votre site Web Divi 5 est construit, optimisé et prêt à épater les visiteurs. Passons aux dernières étapes pour prendre votre site en direct en toute confiance.

Exécutez une visite rapide de votre site sur différents appareils. Les capacités de conception réactives de Divi 5 ont déjà effectué la plupart des lourds le travail, ce qui devrait simplement confirmer que tout a l'air super. Grâce aux points d'arrêt personnalisables, votre conception s'adapte de manière transparente des téléphones aux moniteurs ultra-larges.

Vérifiez vos éléments interactifs. Cliquez sur les liens de navigation, soumettez les messages de test via des formulaires de contact et essayez toutes les fonctionnalités spécialisées que vous avez ajoutées. La structure du code propre de Divi 5 aide à s'assurer que ces éléments fonctionnent de manière fiable.

Touches de polissage finales

Passez en revue votre contenu avec des yeux nouveaux. Recherchez des fautes de frappe ou un phrasé maladroit qui aurait pu être négligé pendant le processus de construction. À ce stade, l'accent devrait être mis sur les petits raffinements, pas les changements majeurs. En cas de besoin, Divi AI est complètement intégré dans Divi 5 et peut être utilisé à tout moment pour générer, modifier ou améliorer tout texte ou images.

Divi vous donne le pouvoir de créer des conceptions parfaites de pixels, alors prenez un moment pour apprécier la cohésion de votre site avant le lancement. L'utilisation de vos variables de conception et vos préréglages de modules devraient créer un look unifié poli et unifié.

Après le lancement, Divi 5 continue d'offrir des avantages. Les améliorations de la vitesse de son cadre moderne contribueront à la visibilité des moteurs de recherche, et les utilisateurs apprécieront les temps de chargement rapides et les interactions lisses.

Regardez quelles pages obtiennent le plus de trafic et d'engagement. Utilisez ces informations pour affiner votre conception ou développer des sections de contenu populaires. La structure flexible de Divi 5 rend ces ajustements simples.

La combinaison de votre créativité avec le framework puissant de Divi 5 produit un site Web visuellement impressionnant construit sur les normes Web modernes. Votre site est prêt à offrir de grandes expériences aux visiteurs tout en vous offrant une base flexible pour une croissance future.

Créez des sites Web plus rapides et meilleurs avec Divi 5

Divi 5 marque un nouveau chapitre pour les créateurs de sites Web. Le système reconstruit maintient ce qui a fonctionné tout en fixant ce qui ne l'a pas fait. Vous remarquerez la différence par rapport au premier jour: chargement plus rapide, édition plus fluide et liberté de conception qui était simplement hors de portée auparavant.

Votre prochain site Web ne sera pas simplement mieux, vous apprécierez le construire. C'est ce que Divi 5 offre: des sites Web qui fonctionnent pour vous et vos visiteurs, sans les maux de tête.

Prêt à l'essayer? Téléchargez le public Alpha aujourd'hui et voyez quel pourrait être votre prochain projet.

Divi 5 est prêt à être utilisé sur de nouvelles versions de site Web. Attendez la version complète avant de migrer les sites existants.