Construire votre cadre de conception avec Divi 5

Si vous avez déjà travaillé avec des cadres CSS comme Bootstrap, vous comprenez pourquoi c'est si populaire. Un cadre de conception vous donne une base réutilisable pour concevoir des dispositions rapides et cohérentes, vous ne construisez donc pas à partir de zéro chaque fois que vous cachez une page.

Bien que la plupart des cadres reposent sur des classes pré-écrites, ils s'attendent toujours à ce que vous écriviez des CSS personnalisés pour une personnalisation plus profonde, ce qui les rend délicats pour les non-codeurs. C'est là que Divi 5 diffère.

Il prend une approche visuelle d'abord, remplaçant CSS par des outils tels que des variables de conception, des préréglages de groupe d'options et des préréglages d'éléments. Vous obtenez toute la puissance d'un cadre, sans écrire une seule ligne de CSS. Dans cet article, nous vous montrerons comment construire visuellement un cadre de conception sans code à l'aide de Divi 5.

Divi 5 est prêt à être utilisé sur de nouveaux sites Web , mais nous ne recommandons pas encore de migrer les existants.

Comment divi 5 vous permet de construire un cadre de conception sans code

Divi 5 est reconstruit à partir de zéro pour rendre la conception Web avancée accessible à tous. Peu importe votre niveau de codage, il vous permet de construire visuellement les dispositions modernes et personnalisées. La construction d'un cadre de conception n'est pas différente.

Abonnez-vous à notre chaîne YouTube

Les variables de conception vous permettent de définir les valeurs de conception globale

Les variables de conception vous permettent de définir des valeurs reproductibles comme les couleurs, les polices, l'espacement de votre marque, et plus encore dans un endroit central. Une fois enregistré, vous pouvez réutiliser ces valeurs sur tout votre site Web pour lui donner une apparence visuelle cohérente et de marque.

À l'intérieur du constructeur visuel, trouvez le gestionnaire de variables pour définir et stocker différents types de variables (nombres, texte, images, liens, couleurs et polices) de manière organisée.

Les variables de conception sont comme une version sans code des propriétés personnalisées CSS, mais ont beaucoup plus de flexibilité. Par exemple, vous déclarez généralement des variables CSS telles que : root {–primary-color: # 1A73E8; } , mais avec les variables de conception de Divi, vous n'enregistrez que la couleur comme couleur primaire .

Vous verrez leur vrai pouvoir tout en faisant des mises à jour. Il n'est pas nécessaire de passer par votre feuille de style; Modifiez simplement la valeur de variable enregistrée une fois dans Variable Manager pour mettre à jour toutes les instances du site Web. Ils vous permettent de visualiser rapidement vos idées sans chasser à travers plusieurs règles de style.

En outre, vous pouvez définir des éléments de contenu couramment répétés tels que l'adresse, les e-mails, les liens, les motifs d'arrière-plan, etc., comme variables de contenu. Vous n'avez pas à les insérer manuellement plusieurs fois; Un clic et ces éléments apparaissent sur votre page. Par exemple, enregistrez et utilisez l'adresse de votre entreprise comme variable de texte.

Pour appliquer une variable de conception, survolez l'option et recherchez l'icône de contenu dynamique.

Apprenez tout sur les variables de conception

Enregistrer les combinaisons de style commun avec les préréglages du groupe d'options

Les préréglages du groupe d'options vous permettent d'économiser et de réutiliser les paramètres de conception fréquemment utilisés, tels que l'espacement, les bordures, les ombres, les styles de texte et les arrière-plans, sans avoir à les reconstruire à chaque fois. Ils se concentrent sur un groupe spécifique d'options à l'intérieur d'un module, vous pouvez donc styliser simplement cette partie et l'appliquer n'importe où en un clic.

Par exemple, disons que vous utilisez toujours le même rembourrage de 40px et la marge 10px sur toutes vos sections de témoignage. Enregistrez ces paramètres en tant que préréglage d'espacement . Lorsque vous ajoutez un nouveau module de témoignage, sélectionnez le préréglage et c'est fait.

Ce qui rend les préréglages de groupe d'options puissants, c'est que vous pouvez les mélanger avec des variables de conception . Si votre couleur principale est enregistrée en tant que variable, vous pouvez l'utiliser dans un préréglage d'arrière-plan, donc si la couleur de la marque change jamais, l'ensemble du préréglage se met à jour. Les arrière-plans sur toutes vos pages changent en un seul clic.

Les préréglages du groupe d'options ne remplacent pas l'intégralité de votre module, ils s'appliquent uniquement au groupe de style que vous choisissez. Mais vous pouvez toujours remplacer les préréglages avec des paramètres spécifiques au module pour personnaliser des modules spécifiques. Cela vous permet de garder votre mise en page et votre contenu unique tout en garantissant un style visuel cohérent sur votre site.

Apprenez tout sur les préréglages du groupe d'options

Économisez des éléments entièrement conçus avec des préréglages élémentaires

Si vous avez été un utilisateur Divi, vous connaissez déjà les préréglages des éléments. Ils vous permettent d'économiser tous les styles personnalisés d'un module, y compris du texte, de l'espacement, des couleurs, des icônes, des effets de survol, en tant que préréglage d'élément, afin que vous puissiez le réutiliser n'importe où sans construire à partir de zéro. Vous créez essentiellement une version prêt à l'emploi de vos modules les plus utilisés.

Voici un cas d'utilisation rapide: personnalisez et enregistrez un préréglage du texte de présentation, puis appliquez-le à d'autres fleuves non utilisées pour les styliser rapidement.

Comment ces outils se reflètent dans le frontage HTML

Divi 5 peut ressembler à un outil sans code, mais il écrit en fait du code structuré propre en arrière-plan. Lorsque vous ajustez visuellement les paramètres, comme choisir un préréglage d'espacement ou appliquer les couleurs de votre marque auprès du gestionnaire de variables, vous ne contentez pas seulement un module. Vous écrivez également le code.

Chaque décision de conception que vous prenez est traduite en sortie frontale appropriée. Divi gère la partie de codage pendant que vous vous concentrez sur la conception.

Pour vous montrer à quel point cela est puissant, nous comparerons le flux de travail visuel d'abord dans Divi 5 avec une approche manuelle en utilisant un cadre CSS traditionnel comme Bootstrap.

Premier bootstrap:

Construire un système de conception manuellement avec du code en bootstrap

Pour notre exemple, j'ai utilisé une configuration WordPress avec le thème Understrap installé.

Dans un flux de travail typique basé sur le code, vous commencerez par définir vos valeurs de conception globales en tant que variables CSS. Voici le nôtre:

:root {
 --primary-color: #e91e63;
 --border-radius: 6px;
 --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

Disons que nous construisons une disposition simple de page de contact avec un formulaire de contact et un bouton de style personnalisé. Pour garder tout cohérent et réutilisable, nous utiliserons un mélange de cours d'utilité de bootstrap et de nos propres variables CSS.

Tout d'abord, nous ajoutons du code personnalisé pour un formulaire de contact à l'aide des classes de formulaire intégrées de Bootstrap pour gérer la mise en page et le style d'entrée.

Ensuite, nous ajoutons le code pour notre bouton stylé. Ici, nous avons combiné des cours d'utilité bootstrap avec nos variables CSS personnalisées pour l'arrière-plan, le rayon de bordure et l'ombre. Cela nous donne un contrôle total sur l'apparence. Si nous voulons apporter des modifications, nous pouvons mettre à jour nos variables.

Comme vous pouvez le voir, c'est génial et efficace, mais tout est construit manuellement. Nous avons défini les variables, appliqué les classes et rédigé le code entier par nous-mêmes. Et c'est une disposition simple, imaginez construire des pages complexes en utilisant cette approche!

Maintenant, créons la même page en utilisant Divi 5 sans codage.

Recréer la même page visuellement avec Divi 5

Nous commençons par définir nos variables de conception globales qui font partie de notre système de conception à l'échelle du site. Tout d'abord, vous allez à Variable Manager> Couleurs . Ensuite, écrivez le code hexadécimal pour la couleur primaire (# E91E63) et enregistrez.

De même, vous pouvez également enregistrer des variables de nombre pour le rayon de bordure {6px} et l'espacement. Ensuite, j'ajoute le module de formulaire de contact et personnalise le bouton Soumettre à mon style préféré:

Maintenant, j'enregistre ces paramètres de bouton en tant que préréglage de bouton pour une utilisation ultérieure.

Si j'ajoute un autre bouton et sélectionne le préréglage du bouton , voyez ce qui se passe? Il est stylé automatiquement.

Pour appliquer un préréglage du groupe d'options, survolez le paramètre et recherchez l'icône des paramètres .

De plus, avez-vous remarqué comment nous avons appliqué plusieurs styles personnalisés à un bouton en un clic sans toucher une seule ligne de code? C'est ce que nous voulons dire lorsque nous disons que vous enregistrez visuellement vos préférences de conception. C'est le type de workflow divi 5 pour. C'est rapide, cohérent et entièrement visuel.

Ce qui se passe dans les coulisses est magique. Divi n'est pas seulement des styles d'empilage à l'aveugle. Chaque variable de conception, préréglage et réglage que vous appliquez est organisée en code propre et efficace rendu à l'avant.

La source de la page de la page divisée ci-dessus montre que la couleur primaire est enregistrée dans la section racine, tout comme les variables CSS:

Et sur le frontend, vos préréglages de groupe d'options sont automatiquement enregistrés et sortent en tant que CSS propres ciblant les classes appropriées (.et_pb_button, .et_pb_contet_submit).

Les deux pages se ressemblent, mais la façon dont ils ont été construits et entretenus sont complètement différents.

Dans Bootstrap, nous avons bénéficié de ses classes de services publics mais nous avons encore dû écrire du code. Mais avec Divi 5, nous avons obtenu le même résultat sans toucher une ligne de code, uniquement en utilisant ses fonctionnalités puissantes telles que les variables de conception et les préréglages de groupe d'options.

Chaque modification a été appliquée en quelques clics, sans risque d'incohérences, et pourtant le code du frontend est resté propre. Divi stocke vos styles dans un format structuré et réutilisable sans ajouter de balisage inutile ou de style en ligne.

Comment construire votre cadre de conception avec divi 5

Divi 5 vous donne tous les outils pour construire un système de conception évolutif, mais tout comme dans le développement traditionnel, l'ordre dans lequel vous utilisez ces outils est important. Profitons des marches et, plus important encore, comprenons pourquoi:

1. Définissez vos variables de conception globales

Avant de concevoir une page, commencez par définir vos variables de conception globales. Ce sont les valeurs fondamentales sur lesquelles votre site entier comptera, comme vos couleurs, polices, tailles, unités d'espacement, etc. Une fois que vous avez défini les blocs de construction de votre site, vous pouvez les réutiliser partout pour garder tout cohérent, propre et facile à gérer.

Dans Divi 5, vous avez le gestionnaire variable pour les créer et les organiser.

Voici comment les types de variables en surbrillance jouent un rôle:

• Couleurs: Enregistrez les couleurs primaires, secondaires et accentuées de votre marque afin que vous n'ayez pas à taper les codes hexadécimaux ou à faire correspondre les nuances. Enregistrez vos variables de couleur et appliquez-les en un seul clic.
• Fonts: Définissez les polices exactes que vous utilisez pour les titres, le texte du corps ou les témoignages. Au lieu de reélectionner les poppins en gras chaque fois que vous créez un H2, enregistrez-le en variable de police . Vous pourrez réutiliser facilement ce même style à travers les modules.
• Numéros: Stockez vos valeurs de conception incontournables, telles qu'un rayon de bordure 8px pour les cartes ou un rembourrage de 32px pour les modules d'image, comme variables de nombre . Vous pouvez également utiliser des unités avancées à l'intérieur des variables de nombre pour fabriquer des conceptions dynamiques.

Une fois vos variables de base définies, chaque préréglage et page que vous construisez s'appuieront sur eux. Et si votre direction de conception change plus tard (par exemple, vous souhaitez ajuster votre espacement de base) , vous n'avez qu'à mettre à jour la variable en un seul endroit.

Après avoir défini correctement vos variables de conception, pas besoin de chasser et de modifier chaque instance. Changez simplement la valeur une fois dans le gestionnaire de variables lui-même.

2. Économisez du contenu récurrent à l'échelle mondiale

En utilisant Variable Manager , vous pouvez également enregistrer des valeurs de contenu comme les liens, le texte et les images qui se répètent souvent sur votre site. Vous copiez et colleriez normalement ces valeurs à chaque fois, mais Divi 5 vous permet de les définir une fois et de les réutiliser n'importe où.

Cela est particulièrement utile pour enregistrer les liens sur les réseaux sociaux, les coordonnées de votre entreprise et d'autres contenus récurrents qui doivent être ajoutés manuellement.

Vous pouvez enregistrer du contenu via les trois variables restantes:

• Texte: Supposons que l'adresse de votre entreprise apparaisse dans le pied de page, sur la page de contact et dans la section héros de votre page d'accueil. Enregistrez-le sous forme de variable de texte et sélectionnez-le partout où vous souhaitez que l'adresse apparaisse.
• Liens: Enregistrez les URL vers votre page à propos, les collections de produits, les profils sociaux ou les termes et conditions en tant que variables de liaison.
• Images: Si vous utilisez le logo de votre marque ou une image d'arrière-plan sur plusieurs pages, enregistrez-la en tant que variable d'image . Imaginez remplacer les images d'espace réservées sur les modèles en clics!

Divi 5 vous permet de traiter le texte, les liens et les images comme des blocs de construction réutilisables. Ces variables de contenu peuvent sembler faibles, mais ont un impact important sur la vitesse, la précision et la maintenance à long terme. Vous gagnez du temps, réduisez les erreurs et gardez votre site régulièrement mis à jour.

3. Créez et enregistrez les styles de base avec des préréglages de groupe d'options

Une fois vos variables de conception en place, votre prochaine étape consiste à définir les modèles de style de base de votre site à l'aide de préréglages de groupe d'options. Enregistrez les paramètres de conception couramment utilisés en tant que préréglages et réutilisez-les sur n'importe quel module.

Voici comment tirer le meilleur parti des préréglages du groupe d'options:

1. Économisez des préréglages pour les styles communs

Commencez par enregistrer des préréglages pour les paramètres que vous utilisez le plus souvent, comme le rayon de bordure, les couleurs d'arrière-plan ou l'espacement. Disons que j'utilise toujours un rembourrage supérieur 40px et une marge inférieure 10px pour les témoignages, j'ai donc enregistré ces valeurs comme un préréglage d'espacement.

Je peux instantanément appliquer cet espacement à mes témoignages (et à d'autres modules si je veux) . Faites cela pour chaque groupe de réglage que vous réutilisez régulièrement: bordures, ombres de boîte, arrière-plans des bouton, etc., afin que vous puissiez les réutiliser lors de la construction de pages.

2. Mélanger les variables de conception avec les préréglages

Ensuite, renforcez votre cadre en combinant des variables de conception avec des préréglages de groupe d'options. Disons que vous avez enregistré un rayon de bordure 6px en tant que variable numérique et l'avez utilisé tout en créant votre groupe d'options préréglé. Si vous modifiez la variable ultérieurement, vos préréglages se mettront également à jour sur le site automatiquement.

De même, vous pouvez créer une typographie fluide avec une valeur clamp () pour le texte réactif. Enregistrez-le à l'intérieur d'un préréglage H1 et appliquez-le de manière cohérente aux titres tout au long de votre disposition. Cette combinaison de préréglages et de variables est l'endroit où votre cadre visuel commence vraiment à devenir modulaire, évolutif et facile à entretenir.

Vous pouvez également enregistrer les préréglages du groupe d'options en par défaut , ce qui signifie que les styles sont également appliqués automatiquement à de nouveaux modules. Appliquez des valeurs par défaut dans vos préréglages communs afin que vous n'ayez même pas à sélectionner un préréglage à chaque fois.

4. Créer des préréglages d'élément

Les préréglages des éléments complètent votre cadre de conception. Après avoir enregistré vos styles préférés en tant que préréglages, vous devez également enregistrer les styles de modules sous forme de préréglages d'élément.

Ceci est particulièrement utile pour les modules que vous utilisez souvent, comme les CTA, les témoignages, les teinbres et les formulaires de contact. Par exemple, si vous avez stylé un bouton CTA avec la couleur de votre marque, une ombre douce et un rembourrage spécifique, vous pouvez enregistrer toute cette conception en tant que préréglage appelé Primary Light. Plus tard, appliquez-le instantanément à tout nouveau bouton en un seul clic.

Définir les préréglages des éléments en par défaut

Vous pouvez également définir n'importe quel préréglage d'élément par défaut, donc chaque nouveau module de ce type suit automatiquement les styles de conception enregistrés. Enregistrant le préréglage du bouton de lumière primaire ci-dessus par défaut, vous verrez le nouveau bouton hériter de son style:

Les défauts accélèrent votre flux de travail et vous pouvez toujours les remplacer si nécessaire. Mais dans la plupart des cas, avoir des préréglages bien définis réduit le travail répétitif et supprime les conceptions de conception. Avec ces trois fonctionnalités combinées, vous suivez un cadre de conception basé sur prédéfini qui rend la création de sites Web complètement sans code.

Concevoir de nouvelles pages en fonction de votre cadre de conception

Maintenant que j'ai enregistré toutes mes variables de conception préférées, les préréglages de groupe d'options et les préréglages d'éléments, testons notre cadre.

La construction de nouvelles pages est devenue une expérience beaucoup plus rapide et plus facile. Je n'ai pas besoin de partir de zéro ou de restauration manuellement chaque module. Tout ce dont j'ai besoin est déjà mis en place.

Comme vous pouvez le voir, j'ai appliqué plusieurs modifications de conception en quelques clics. Oui, j'ai importé une disposition de divi pré-faite, mais je l'ai personnalisée en quelques secondes avec mon cadre enregistré en place.

Au lieu de sélectionner les polices, d'ajuster l'espacement ou de peaufiner les couleurs manuellement, j'ai simplement appliqué mes préréglages enregistrés. La conception de bouton, la tailles de texte, les styles d'arrière-plan et les bordures d'image ont tous suivi les paramètres du framework que j'ai construits plus tôt.

Appliquer ces styles manuellement sur un seul module pourrait ne pas être un gros problème. Mais lorsque vous personnalisez une page entière, la différence est claire. Vous pouvez remarquer la facilité et la vitesse avec lesquelles j'ai apporté toutes ces modifications. C'est le véritable avantage de la création d'un cadre de conception: il accélère votre flux de travail sans sacrifier la qualité ni la cohérence.

La meilleure partie vient en faisant des mises à jour. Si mes valeurs globales changent, je n'ai qu'à modifier mes variables de conception enregistrées via le gestionnaire de variables. Je peux également modifier mon groupe d'options et mes préréglages d'élément en cliquant sur l'icône des petits paramètres.

Ceci est le pouvoir Divi 5 vous apporte. Il vous permet de créer, enregistrer et personnaliser l'intégralité de votre cadre de conception sans toucher une seule ligne de code.

Construire votre cadre de conception sans code visuellement

La création d'un cadre de conception n'est plus uniquement pour les développeurs. Avec les bons outils, n'importe qui peut le faire, même si vous n'avez jamais touché de code auparavant. Comme vous l'avez vu tout au long de cet article, il suffit de quelques étapes intelligentes pour créer votre propre système de conception. Comment? En utilisant divi 5.

Divi 5 vous donne les outils pour y arriver

Divi 5 gère la complexité et vous donne un contrôle total à travers ses caractéristiques avancées. Vous pouvez construire plus rapidement, rester cohérent et faire des mises à jour globales sans jamais quitter le constructeur visuel. Cool, non? Mais ce n'est que la pointe de l'iceberg, et nous ne faisons que commencer!

Nous avons beaucoup plus de fonctionnalités incroyables alignées pour la sortie, et nous avons hâte que vous les essayiez. Téléchargez le public Alpha aujourd'hui et créez votre propre cadre de conception sans codage de restrictions.

Divi 5 est prêt à être utilisé sur de nouveaux sites Web , mais nous ne recommandons pas encore de migrer les existants.