La maîtrise du ratio d'or dans la conception

Votre conception semble presque correcte, mais quelque chose se sent éteint. L'espacement semble gênant. Les proportions ne fonctionnent pas. Vous ajustez les marges et le rembourrage, mais ce sentiment de déséquilibre persistant demeure. La pièce manquante pourrait être le rapport doré.

Ce principe mathématique a guidé une grande conception depuis des siècles. Et, nos yeux préfèrent naturellement ces rapports spécifiques. La plupart des concepteurs ignorent les ratios d'or ou les appliquent mal en raison de la difficulté de se fissurer. Cependant, avec un constructeur de pages comme Divi 5, vous pouvez appliquer des proportions parfaites sans calculs complexes.

En découvrons plus.

Quel est le rapport doré?

Le ratio d'or est égal à approximativement

1.618.

D'où vient-il? Vous obtenez ce nombre lorsque vous divisez une ligne en deux parties, où la partie plus longue divisée par la partie la plus courte est égale à la ligne entière divisée par la partie plus longue.

Vous pouvez calculer le rapport doré à l'aide de la séquence Fibonacci. Commencez avec 0 et 1. Ajoutez-les pour obtenir 1. Ensuite, ajoutez 1 et 1 pour obtenir 2. Continuez à ajouter les deux derniers nombres: 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144. Lorsque vous divisez n'importe quel numéro plus grand par le numéro précédent, vous vous rapprochez de 1,618.

Ce ratio apparaît partout dans la nature. Les spirales des graines de tournesol le suivent. Les coquilles de Nautilus se développent en utilisant ces proportions. Même votre visage suit probablement les mesures du rapport doré entre vos fonctionnalités. Lorsque quelque chose suit ce rapport, votre cerveau le reconnaît comme naturellement agréable.

Images gracieuseté: Lucas et Dynamic Wang sur Unsplash et Milena Carolina Dos Santos Mangueira

Le symbole φ (PHI) représente un rapport mathématique unique que les anciens Grecs ont découvert vers 300 avant notre ère. Ils l'ont qualifié de «proportion divine», croyant qu'elle révélait un équilibre visuel et une beauté spéciaux.

Pourquoi ça compte: des anciens bâtiments à la conception Web

Les Grecs ont utilisé ce rapport pour le temple Parthénon, et les pyramides égyptiennes suivent ces mesures. Des artistes comme Leonardo da Vinci ont étudié ces proportions pendant des années. Da Vinci a dessiné le célèbre «homme vitruvien», montrant les rapports d'or dans le corps humain.

Image de représentation

Les concepteurs bien établis utilisent encore cela. Le logo d'Apple utilise les proportions du ratio d'or. L'ancien logo d'oiseaux Twitter a suivi ces mesures. Les magazines placent un contenu important aux points d'or du rapport doré au lieu du droit au centre.

Images gracieuseté: Widewalls & Design Shack

Les scientifiques ont étudié pourquoi les gens aiment les formes du ratio d'or. Les analyses cérébrales montrent plus d'activité dans les zones de plaisir lorsque les gens regardent les rectangles du rapport doré. Ceci est inhérent aux humains car cela se produit dans toutes les cultures et toutes les âges.

Votre cerveau traite ces proportions plus rapidement que les autres rapports, ce qui signifie une meilleure expérience utilisateur. Lorsque les proportions du site Web s'éloignent trop de 1,618, les visiteurs se sentent mal à l'aise et partent plus tôt.

Le ratio crée un équilibre sans être parfaitement uniforme. Une symétrie parfaite peut sembler ennuyeuse sur les sites Web. Le ratio d'or donne juste assez d'asymétrie pour créer un intérêt visuel tout en maintenant le look propre et professionnel que les utilisateurs attendent.

Pourquoi vos conceptions se sentent «éteintes» (et comment les ratios corrigent cela)

Vous venez de passer des heures à perfectionner votre disposition. Les couleurs sont correctes. Les polices travaillent ensemble. Mais quelque chose se sent encore. La barre latérale semble trop large. L'en-tête a l'air un peu exigu. La zone de contenu ne circule pas avec le reste.

C'est une expérience commune. De nombreux concepteurs ajustent les tailles en fonction de ce qui semble juste dans l'instant. Peut-être que vous définissez le contenu principal à 70% et la barre latérale à 30%. Ces chiffres semblent raisonnables, mais ils n'ont pas toujours l'air naturels.

Nos yeux recherchent un équilibre et des modèles familiers. Lorsque les proportions ne sont pas tout à fait correctes, l'ensemble du design est gênant, même si vous ne pouvez pas expliquer pourquoi. Ce n'est peut-être pas une grosse erreur, juste un petit détail qui vous trouble.

Le vrai problème est souvent la proportion. Lorsque les dispositions ignorent ce qui semble équilibré, votre cerveau remarque. Quelque chose se sent éteint, même si vous ne pouvez pas y mettre le doigt.

Comment les mauvais ratios sabotage l'expérience utilisateur

Les mauvaises proportions font que les choses sont étranges. Votre cerveau s'attend à ce que certaines formes et tailles soient bien ensemble. Imaginez une section de héros qui occupe exactement la moitié de votre écran. Il a l'air raide et maladroit.

Maintenant, considérez celui qui utilise 43% ou 67% de l'espace. Cela a l'air déséquilibré et désordonné.

Cela peut nuire à votre site Web. Les gens décident très rapidement s'ils font confiance à ce qu'ils voient. Si la page regarde, ils pourraient penser que votre entreprise n'est pas fiable. Le design désordonné fait croire aux gens que votre travail n'est pas bon.

Le rapport doré peut aider à résoudre ce problème. Au lieu de rendre votre héros section 70%, essayez 61,8%, en laissant la section suivante 38,2% visible.

Ces nombres ne sont pas aléatoires. Ils suivent un modèle spécial appelé 1.618 que vous voyez dans la nature, comme dans les fleurs et les coquilles. Vos yeux connaissent ce schéma et se sentent calme quand ils le voient.

L'astuce est de savoir comment les pièces sont liées les unes aux autres. Tout va bien si la taille de votre en-tête correspond à votre zone de contenu en utilisant le rapport doré. Votre pied de page, le menu et le contenu commencent à s'adapter au lieu de regarder qu'ils se battent pour l'espace.

Comment calculer les proportions des ratios d'or

Vous n'avez pas besoin de mathématiques sophistiquées. N'oubliez pas 62 et 38. Ces chiffres s'ajoutent jusqu'à 100, donc ils fonctionnent en pourcentages.

Divisez n'importe quel espace en donnant 62% à la partie plus grande et 38% à la plus petite partie. Votre site Web mesure 1000 pixels de large. Faites votre contenu principal 620 pixels. Mettez votre barre latérale à 380 pixels. Rapport doré parfait.

J'ai obtenu une section de 500 pixels. Votre zone principale obtient 310 pixels. Le reste reçoit 190 pixels.

Règles rapides pour les pièces du site Web

La section des héros devrait prendre environ 60% de ce que les gens voient en premier. Le reste va à votre principal aperçu de contenu. Faites des cartes 60% aussi hautes que larges. Une carte de 300 pixels de large mesure 180 pixels.

Les boutons fonctionnent de la même manière. Une largeur de 100 pixels signifie une hauteur de 60 pixels. Votre colonne de texte mesure 600 pixels de large. Arrêtez d'ajouter du contenu à environ 370 pixels. Puis ajoutez votre prochaine section.

Cela semble-t-il bien?

Reculez de votre écran. Les pièces devraient se sentir équilibrées maintenant. Vos yeux s'écoulent en douceur de la section à la section. Si vous continuez à regarder un endroit, les proportions pourraient être éteintes.

Les sites Web populaires utilisent ces mêmes divisions 62/38 partout. Vous commencerez à voir le modèle une fois que vous savez quoi rechercher. Les mathématiques restent cachées, mais l'harmonie visuelle se démarque immédiatement.

Erreurs de rapport doré communes que font les concepteurs

La plupart des concepteurs savent que le ratio d'or existe et souhaite l'utiliser. Voici où ils luttent généralement.

La plus grande erreur consiste à appliquer des ratios au hasard sans système. Vous utilisez des ratios d'or pour votre en-tête, les tiers pour votre grille de contenu et les pourcentages aléatoires pour votre pied de page. Choisissez une approche et utilisez-la de manière cohérente sur votre conception.

De nombreux concepteurs tournent 1,618 à des nombres faciles comme 1,5 ou 1,7. Votre cerveau remarque la différence entre 62% et 60%, et ce petit écart affecte l'harmonie visuelle que vous travaillez pour créer.

Un autre problème courant est les éléments de rapport incompatibles. Par exemple, vous pouvez créer une section de héros parfaitement proportionnée, mais ajouter une galerie d'images qui utilise des rapports d'espacement complètement différents. La déconnexion visuelle brise le flux que vous avez établi.

Certains concepteurs appliquent le rapport or au texte sans considérer le confort de lecture. Une longueur de ligne qui suit des proportions mathématiques parfaites pourrait dépasser la largeur de lecture confortable. La lisibilité est prioritaire sur la précision mathématique.

Les concepteurs de sites Web négligent également souvent la réactivité. Les proportions de bureau qui ont l'air équilibrées peuvent se sentir à l'étroit ou étirées sur des écrans plus petits. Les ratios d'or ont besoin d'applications différentes entre les tailles de périphérique.

De nombreux constructeurs de pages par défaut des dispositions arbitraires qui ignorent l'harmonie proportionnelle. Les grilles à trois colonnes standard utilisent des divisions 33/33/33 au lieu de plus de rapports naturels.

L'erreur la plus limitative consiste à abandonner l'approche après des tentatives initiales. Les ratios d'or fonctionnent mieux lorsqu'ils sont appliqués systématiquement à travers votre structure de disposition, et non comme des ajustements isolés.

Pourquoi de nombreux constructeurs de pages ignorent-ils les ratios d'or?

Les constructeurs de pages ont grandi autour de la pensée du programmeur. Les développeurs aiment les nombres qui se divisent proprement. Douze colonnes, quatre sections, cinquante-cinquante divisions.

De nombreuses sociétés de constructeurs pensent vraiment que les utilisateurs devraient contrôler leurs propres choix de conception. Ils ne veulent pas pousser des théories esthétiques spécifiques sur les personnes qui pourraient préférer différentes approches. Certains concepteurs détestent le ratio d'or et préfèrent d'autres systèmes de proportion. Pourquoi forcer un principe mathématique lorsque la créativité prospère sur les options?

Le véritable problème technique est plus compliqué que la philosophie de conception. Les ratios d'or créent des décimales étranges qui se brisent sur des appareils plus anciens. Essayez de construire une grille réactive où une colonne a une largeur de 61,8%. Les pourcentages propres comme 25% ou 33% se comportent de manière prévisible sur chaque appareil.

La plupart des sociétés de constructeurs de pages ont commencé comme des solutions techniques, pas des outils de conception. Ils sont construits autour de dispositions systématiques et logiques qui fonctionnent de manière fiable.

Les utilisateurs se plaignent rarement des proportions. Ils se plaignent de dispositions mobiles cassées et de temps de chargement lents. Les priorités de l'entreprise suivent les commentaires réels des utilisateurs, pas la théorie de la conception.

Certains constructeurs s'inquiètent des débutants écrasants. Les nouveaux utilisateurs sont déjà confrontés à des dizaines de choix de mise en page, et l'ajout de considérations mathématiques pourrait effrayer les gens qui veulent juste quelque chose de propre et de professionnel.

Construire des proportions parfaites avec divi 5

Avant de plonger dans les nitty-gritties de la façon dont Divi 5 transforme la conception du rapport doré d'un mal de tête mathématique en simplicité de points et click, prenons un court détour et comprenons ce qui fait de Divi le choix incontournable pour les concepteurs WordPress qui veulent des résultats professionnels sans le cauchemar codage.

Qu'est-ce que Divi?

Divi est un constructeur de pages WordPress conçu pour les personnes qui se soucient de la conception visuelle sans compromettre les fonctionnalités.

Vous pouvez faire glisser et déposer plus de 200 modules, changer de texte et choisir de nouvelles couleurs. Tout se passe directement sur votre page, donc vous voyez exactement ce que les visiteurs verront.

Le thème est livré avec plus de 2000 dispositions pré-faites. Ce ne sont pas des modèles de base mais des conceptions complètes pour les restaurants, les photographes, les consultants et des dizaines d'autres entreprises. Choisissez celui qui correspond à votre style et personnalisez à partir de là.

Si vous vendez des produits en ligne, Divi comprend plus de 20 modules spécialement conçus pour les magasins. Vos pages de produits seront professionnelles et aideront en fait à convertir les navigateurs en acheteurs.

Créer des sites Web sans les maux de tête

Le constructeur de thèmes vous permet de concevoir chaque partie de votre site. Vous pouvez créer des en-têtes personnalisés qui correspondent à votre marque, créer des dispositions de blog uniques et même rendre vos 404 pages incroyables.

Divi Ai apporte la commodité de l'IA dans votre toile de conception. Vous pouvez générer du texte,

images,

code,

et des sections de pages entières utilisant Divi Ai.

Vous pouvez même modifier vos photos existantes en décrivant simplement ce dont vous avez besoin.

Divi Quick Sites résout le plus gros problème des constructeurs de sites Web auxquels les constructeurs sont confrontés: regarder une page vierge sans savoir par où commencer. Vous pouvez choisir parmi les sites de démarrage professionnels, qui ont des modèles de sites Web professionnels, créés par notre équipe de conception et présente des images et des illustrations uniques que vous ne trouverez nulle part ailleurs.

Ou laissez Divi Ai créer des dispositions personnalisées en fonction de la description de votre entreprise.

Ce site Web généré par l'IA n'est pas seulement un filaire. Il contiendra des en-têtes, des copies et des images pertinents par votre description. Vous pouvez demander à Divi AI de générer toutes les images, d'utiliser un à partir d'un non-splash ou d'utiliser des espaces réservés afin que vous puissiez les remplacer vous-même.

Vous pouvez même présélectionner vos polices et vos couleurs et laisser l'IA courir avec eux. Et bien sûr, les sites Web restent modifiables, tout comme les sites Web réguliers, vous pouvez donc modifier tout ce dont vous avez besoin par votre goût.

Se faire divi

Divi 5: l'étape suivante

La création de sites Web doit être naturelle, comme l'esquisse des idées sur papier. Vous avez une vision et vos outils devraient aider à le donner vie sans vous gêner. C'est exactement ce qui nous a poussés à reconstruire complètement Divi à partir de zéro.

Divi 5, disponible aujourd'hui en alpha et prêt à être utilisé sur de nouveaux sites Web , représente des années d'écoute de ce dont vous avez besoin lors de la création de sites Web. Ce ne sont pas des cloches et des sifflets ou des caractéristiques que personne n'utilise vraiment, mais de réelles améliorations qui rendent votre travail plus rapide et plus agréable. Nous avons gardé tout ce que vous aimez dans Divi et l'avons fait passer au niveau supérieur.

Nous avons tout reconstruit à partir de zéro à l'aide de nouveaux outils Web. Les pages se chargent plus rapidement maintenant et les contrôles fonctionnent mieux. Vous pouvez garder vos conceptions de la même manière sur l'ensemble de votre site sans travail supplémentaire.

Qu'est-ce qui est amélioré? Quoi de neuf?

• Rebuild Framework complet se débarrasse des anciens shortcodes. Tout fonctionne sur un nouveau code basé sur des blocs qui se charge plus rapidement et fonctionne mieux.
• L'édition en un clic vous permet de cliquer sur n'importe quelle partie de votre page pour la modifier immédiatement. Plus de chasse à de petites icônes ou de fouiller dans les menus.
• Les points d'arrêt personnalisables vous donnent sept tailles d'écran avec lesquelles travailler au lieu de trois. Vous pouvez changer chacun pour répondre à vos besoins exacts.
• Advanced Units Support vous permet d'utiliser Calc (), CLAMP (), Min (), Max () et toutes les nouvelles unités CSS directement dans le constructeur.
• Les variables de conception vous permettent d'enregistrer des couleurs, des polices, des tailles, des images, du texte et des liens en un seul endroit. Changez-les une fois et ils mettront à jour partout sur votre site.
• Les préréglages du groupe d'options vous permettent d'économiser et de réutiliser les styles pour les frontières, les polices, les ombres et l'espacement. Ceux-ci fonctionnent dans différentes parties de votre site.
• Les rangées imbriquées vous permettent de mettre des lignes à l'intérieur d'autres rangées. Vous pouvez créer des dispositions complexes sans sections spéciales.
• Les groupes de modules combinent plusieurs modules en une seule unité. Cela rend les dispositions complexes plus faciles à gérer. Vous pouvez également créer vos modules personnalisés.
• L'espace de travail multi-panel vous permet de placer des panneaux où vous les voulez. Vous pouvez travailler avec plusieurs paramètres ouverts en même temps.
• La gestion des attributs vous donne un contrôle exact lorsque vous copiez, cotez et réinitialise les styles, le contenu et les préréglages entre différentes parties.
• Le mode clair / sombre vous permet de choisir le thème plus facile sur vos yeux pendant que vous travaillez.
• La mise à l'échelle de Canvas vous permet de redimensionner votre zone de travail pour voir à quoi ressemble votre site sur différents écrans. Pas besoin de changer de modes d'aperçu.
• Les améliorations des performances facilitent le chargement plus rapidement, affichent plus rapidement et se sentent plus fluide lorsque vous construisez.

Essayez Divi 5 aujourd'hui

Divi 5 est désormais disponible pour de nouveaux projets de site Web. Nous l'avons reconstruit à partir de zéro pour rendre votre flux de travail plus rapide et plus facile. Téléchargez le public Alpha et essayez-le sur votre prochain nouveau site pour voir les améliorations. C'est gratuit pour tous les membres Divi, nouveaux et anciens.

Nous vous suggérons de l'utiliser uniquement pour de nouveaux sites pendant que nous améliorons le système de migration pour les sites Divi 4 existants. Si vous commencez à nouveau, c'est le moment idéal pour essayer l'interface mise à jour et de meilleures performances.

Comment utiliser les ratios d'or en utilisant divi 5

Assez dit. Prenons une plongée profonde et voyons comment nous pouvons mettre en œuvre des ratios Golden dans votre site Web en utilisant Divi 5 et, mieux encore, comment ils peuvent être standardisés afin que vous n'ayez pas à vous précipiter avec les mathématiques chaque fois que vous créez une nouvelle section ou une nouvelle page.

Les variables de conception vous permettent d'économiser et de réutiliser les valeurs sur votre site. Ils forment l'ADN d'identité visuelle de votre site. Divi 5 a six types: couleurs, polices, images, chaînes de texte, liens et nombres. Chacun a un rôle spécifique:

• Les variables de couleur contiennent des couleurs de marque, des arrière-plans, des couleurs de texte et d'autres teintes utilisées à l'échelle du site.
• Les variables de police gardent les polices cohérentes pour les titres, le texte du corps et les éléments spéciaux.
• Les variables d'image stockent des graphiques courants comme des logos ou des modèles d'arrière-plan pour une utilisation facile.
• Variables de chaîne de texte Enregistrer le contenu réutilisable comme les slogans, les contacts et les notes juridiques.
• Les variables de liaison gardent les URL que vous utilisez souvent, comme les médias sociaux ou les pages clés.
• Les variables de nombre gérent les mesures dans les pixels, les pourcentages, les EM, les REM et les unités de la fenêtre et fonctionnent avec des fonctions CSS comme CALC () pour maintenir les proportions directement sur n'importe quel écran.

Configuration de vos variables de rapport doré

Ouvrez votre tableau de bord Divi 5 et trouvez l'icône du gestionnaire variable dans la barre latérale gauche.

Cliquez dessus pour ouvrir le panneau Variables. Ajoutez vos couleurs, polices, images, texte et variables de liaison.

Ensuite, accédez à l'onglet Nombres pour créer vos variables de rapport doré. Commencez par ajouter ces variables de nombre:

Variables de typographie

• Taille H1: pince (47px, 4,7 VW, 76px)
  • 47px Minimum: Même sur les plus petits téléphones (320px de large), votre H1 reste suffisamment grand pour établir la hiérarchie. Tout ce qui perd un impact perd en tant que cap principal.
  • 4.7VW Valeur intermédiaire: Cette unité de largeur de la fenêtre permet une échelle de texte en douceur. À la largeur d'écran de 1000px, 4,7 VW = 47px. À 1600px, il passe à 75px
  • 76px maximum: nous obtenons cela en multipliant 18px × 1,618 trois fois (18 × 1,618 × 1,618 × 1,618 = 76,244px)
• Taille H2: pince (29px, 3,5 VW, 47px)
  • 29px minimum: maintient H2 notablement plus petit que H1 sur mobile tout en restant lisible
  • 3,5 VW Scale: mise à l'échelle proportionnellement plus petite que H1 pour maintenir la hiérarchie
  • 47px maximum: exactement 76px ÷ 1,618 = 47,122px
• Taille H3: pince (18px, 2,9 VW, 29px)
  • 18px minimum: correspond à la taille du texte du corps sur mobile pour économiser l'espace vertical
  • 2,9 VW Scale: se développe plus doucement que les titres plus grands
  • 29px maximum: précisément 47px ÷ 1,618 = 29.124px
• H4 Taille: pince (14px, 2,2vw, 22,4px): Continuez à diviser ~ 29px ÷ 1,618 = 17,994px, mais nous avons défini le minimum à 22,4px pour la lisibilité
• H5 Taille: Clamp (13px, 1,8 VW, 18px): Notre taille de police de base de 18px s'adapte parfaitement à l'échelle ici
• Taille du texte du corps: pince (16px, 1,6 VW, 18px): base standard 18px dont tous les calculs découlent de

La fonction CLAMP () permet de redimensionner le texte en douceur entre les écrans. Il faut trois valeurs: la plus petite taille pour les téléphones, la valeur moyenne pour la mise à l'échelle et la plus grande pour les ordinateurs de bureau. Nous utilisons la largeur de la fenêtre (VW) au milieu, car il fait croître progressivement le texte à mesure que les écrans s'agrandissent. Pas de sauts soudains entre les tailles.

Sur le bureau, nous nous en tenons à des ratios d'or parfaits. Les écrans mobiles ont besoin d'ajustements mineurs pour maintenir le texte lisible. Les calculs purs peuvent suggérer 11px pour certains titres, mais qui attribue les yeux de vos visiteurs. Définir des minimums pratiques comme 14px conserve l'harmonie visuelle du ratio d'or tout en garantissant que tout le monde peut lire confortablement votre contenu. Les relations proportionnelles restent intactes; Ils se sont juste légèrement déplacés pour la lisibilité.

Variables d'espacement

Chaque valeur multiplie le précédent de 1,618 exactement:

• Space XS: pince (8px, 1vw, 10px)
  • POURQUOI BASE 10PX: Il s'agit du plus petit rembourrage cible tactile confortable sur mobile. La sagesse de l'industrie recommande des cibles tactiles minimales 44px et un rembourrage de 10px de tous les côtés, plus le contenu vous y permet. Plus petit que 10px, les éléments se sentent à l'étroit.
  • Pourquoi 8px minimum: sur les téléphones de moins de 360 ​​pix, même 10px peuvent être trop spacieux. Nous passons à 8px pour maximiser l'espace de contenu tout en gardant les éléments distincables.
  • Pourquoi 1VW: augmente l'espacement proportionnellement et vous donne exactement 10px à une largeur d'écran de 1000px
• Espace petit: pince (13px, 1,6 VW, 16.18px): idéal pour le rembourrage de bouton et le formulaire d'espacement des champs.
• Médium d'espace: pince (21px, 2,6 VW, 26.18px): idéal pour l'espacement entre les blocs de contenu connexes.
• Espace grand: pince (34px, 4.2VW, 42.36px): crée une salle de respiration entre les principales sections tout en étant à l'échelle avec la taille de l'écran.
• Space XL: CLAMP (55px, 6,8 VW, 68,54px): Idéal pour le rembourrage supérieur / inférieur sur les sections de héros et les principaux blocs de fonctionnalités. Les sections de héros ont besoin d'un rembourrage substantiel même sur le mobile. En dessous de 50px, Hero Content se sent à l'étroit sur les bords.
• Espace xxl: pince (89px, 11vw, 110.89px): Utilisez avec parcimonie. Peut-être pour des sections spéciales qui ont besoin d'une salle de respiration dramatique.

Variables de mise en page

• Largeur de colonne primaire: 61,803%
  • Comment nous l'obtenons: diviser 1 par 1,618 = 0,61803 (ou 61,803%)
  • Utilisez-le pour votre zone de contenu principale dans toute mise en page à deux colonnes
• Largeur de colonne secondaire: 38,197%
  • Utiliser pour votre colonne de barre latérale dans la même ligne
  • Dérivé de 100% à 61,803% = 38,197%
• Conteneur MAX Largeur: 1165px
  • Le texte devient difficile à lire lorsque les lignes s'étendent au-delà de 72 caractères,
    • et en supposant 10px comme taille de texte minimum, la largeur de lecture optimale (720px) × ratio doré (1,618) = 1165px
  • Appliquer à votre section ou ligne principale qui contient votre contenu
• Ratio de hauteur d'or: calc (100% / 1,618)
  • Cela peut être utilisé comme une valeur dans les hauteurs pour les groupes de modules / modules, tels que des images, des boîtes d'appel à l'action, des sections de héros, des cartes membres de l'équipe, etc.
  • Cela créerait des rectangles au lieu de carrés ou de formes aléatoires. Votre cerveau trouve ces proportions naturellement attrayantes, comme une photo parfaitement encadrée.
  • Comment pouvons-nous obtenir ceci? Le rapport doré indique que si la largeur = 1,618, alors hauteur = 1. Donc, si largeur = 100%, alors hauteur = 100% ÷ 1,618 = 61,8%. Cette formule fait cette mathématiques automatiquement.

Enregistrez ces variables dans le gestionnaire variable de Divi 5. Ensuite, utilisez-les n'importe où en cliquant sur l'icône des variables à côté des champs de largeur, de hauteur ou de largeur maximale. Après la configuration initiale, aucun calcul n'est nécessaire. De plus, aucune de ces étiquettes variables n'est fixe; Vous pouvez échanger les étiquettes avec quelque chose qui a du sens.

Création d'une section de héros avec des ratios d'or

Construisons une section de héros pour la page de destination d'un livre, inspirée par l'une des conceptions de la collection de sites de démarrage, en utilisant les variables du rapport doré que nous venons de créer. Et c'est la partie amusante. Vous pouvez prendre ces variables soigneusement calculées et regarder comment elles affectent une véritable section de héros.

Commencez par créer une nouvelle section dans Visual Builder de Divi 5. Réglez la hauteur à l'aide de votre variable de rapport de hauteur d'or. Cela rend naturel pour votre cerveau de reconnaître comme agréable.

Ajoutez votre variable d'espace XL sur le rembourrage supérieur et inférieur. Cela offre suffisamment de marge de respiration sur le mobile tout en se développant de manière appropriée sur le bureau.

Pour l'arrière-plan de la section, vous avez deux options principales en utilisant vos variables de conception:

Option 1: fond de couleur unie

• Cliquez sur le champ de couleur d'arrière-plan et sélectionnez votre variable de couleur principale dans la liste déroulante. Cela maintient votre section de héros cohérente avec votre identité de marque. Si votre couleur primaire est trop légère pour le contraste de texte, utilisez plutôt votre variable de couleur secondaire. Assurez-vous que la couleur que vous choisissez offre un contraste suffisant pour que votre texte reste lisible. Suite à notre inspiration, nous ajouterons un gradient de l'arrière-plan et des couleurs primaires avec un arrêt de 72% et à 90 °.

Option 2: arrière-plan de l'image

• Appliquez votre variable d'image de héros (si vous en avez créé une) via le champ Image d'arrière-plan. Cliquez sur l'icône des variables à côté du paramètre d'image d'arrière-plan et sélectionnez votre variable d'image enregistrée. Lorsque vous utilisez des images d'arrière-plan, ajoutez une superposition pour la lisibilité au texte. Réglez la couleur de superposition sur votre variable de couleur primaire et ajustez l'opacité à 40 à 60%. Cela assombrit suffisamment l'image pour rendre le texte blanc net et lisible.
• Vous pouvez également utiliser votre variable de couleur secondaire pour la superposition si elle contraste mieux votre image d'arrière-plan choisie.

Création de la disposition à deux colonnes

Ajoutez une ligne avec deux colonnes.

Définissez la largeur de la colonne de gauche sur votre variable de largeur de colonne principale et la colonne de droite sur votre variable de largeur de colonne secondaire. Nous allons également activer l'option «Equaliser les hauteurs de colonne». Ensuite, la variable de largeur maximale du conteneur sera appliquée pour maintenir le contenu lisible sur des écrans plus grands. Cela empêche les lignes de texte de s'étirer trop, en particulier sur les écrans plus larges.

Nous allons également permettre «utiliser la largeur de gouttière personnalisée» et le définir sur 1. Cela nous aidera à utiliser des espacements de rapport doré entre nos modules.

Appliquez votre variable moyenne d'espace à droite de la première colonne et le rembourrage gauche de la deuxième colonne pour ajouter un espace respiratoire entre les colonnes. Cela crée une séparation suffisante entre les colonnes sans les faire se sentir déconnectées.

La plus grande colonne contiendra votre message principal et votre appel à l'action. La plus petite colonne peut contenir une image de héros simple ou rester vide pour une conception propre et axée sur le texte.

Configuration de la typographie qui coule

Dans votre colonne principale, ajoutez deux modules d'en-tête.

Réglez le premier sur H5 et appliquez la variable de taille H5. Dans cet exemple, ce module de texte comporte le contenu «auteur le plus vendu». Nous utiliserons également la couleur secondaire pour ce texte et appliquerons un style de police en majuscules. Nous appliquerons également la police du corps sur le texte pour le rendre distinctif et augmenter son poids en gras.

Réglez le deuxième sur H1 et appliquez votre variable de taille H1. Cela devient votre principal titre. Dans cet exemple, nous utiliserons le nom de l'auteur, qui a été ajouté plus tôt, en tant que variable de conception. Si vous manquez d'idées, vous pouvez utiliser Divi AI pour vous aider avec un excellent texte de cap.

Ci-dessous, ajoutez un module de texte pour votre paragraphe de support. Appliquez votre variable de taille de texte et votre variable de couleur. Gardez cela à 2-3 phrases expliquant votre proposition de valeur fondamentale. Pour cet exemple, nous ajouterons une brève introduction à notre auteur. Vous pouvez également utiliser Divi AI pour vous aider avec la copie ici.

Espacez ces éléments en utilisant votre support d'espace comme marge entre le titre et le paragraphe.

Ensuite, ajoutez un module de bouton sous votre texte. Appliquez vos couleurs. Nous utilisons la variable de conception de couleur primaire et le texte du bouton.

Ajoutez votre variable moyenne d'espace dans le rembourrage gauche et droit et l'espace petit en haut et en bas pour les dimensions du bouton. Cela crée un bouton proportionnel à votre texte sans être surdimensionné. Utilisez votre grande variable d'espace comme marge supérieure pour la séparer du paragraphe.

Le texte du bouton doit utiliser la variable de taille du texte de votre corps pour maintenir la cohérence avec votre texte de paragraphe. Nous appliquerons également la variable de conception des liens de bouton que nous avons ajouté plus tôt.

Styliser la bonne colonne

La colonne de droite peut maintenir n'importe quoi d'une image à un formulaire d'intégration. Si vous utilisez une image dans la plus petite colonne, restez simple. Une photo de votre équipe, de votre bureau ou d'une illustration propre fonctionne bien. Ne pensez pas à la place d'image: le centrez-le normalement dans la colonne. Pour cet exemple, nous inclurons la variable de conception d'image d'un livre récent. Et ajoutez également une ombre de boîte pour le faire ressortir.

Nous allons également ajuster la largeur de l'image à environ 90% afin qu'elle semble plus alignée.

Pour les sites Web de consultation, quitter parfois la bonne colonne vide crée un look plus propre et plus professionnel qui met l'accent sur votre message.

Le résultat

Ce qui suit est le résultat:

Utilisez la mise à l'échelle de Canvas de Divi 5 pour tester l'apparence de votre héros sur différentes tailles d'écran. Les fonctions CLAMP () dans vos variables doivent gérer automatiquement la réactivité.

Bien que les variables du rapport doré fournissent une excellente harmonie proportionnelle, vous pourriez avoir besoin d'ajustements mineurs en fonction de votre contenu spécifique. Les longs titres peuvent nécessiter un texte légèrement plus petit. Des étiquettes courtes et percutantes pourraient gérer des tailles plus grandes. Certains styles de marque nécessitent un espacement plus serré ou plus lâche.

La beauté des variables de conception est que ces changements ne prennent que deux clics. Ouvrez le gestionnaire de variables, ajustez votre taille H1 ou votre grande variable d'espace et regardez le changement s'appliquer instantanément sur l'ensemble de votre site.

Votre H1 doit rester proéminent mais lisible sur mobile (47px minimum). Votre espacement doit être généreux mais pas excessif sur une taille d'écran. La scission à deux colonnes vous donne une disposition professionnelle classique qui fonctionne bien pour les entreprises de services où la confiance et la clarté comptent plus que des éléments de conception flashy.

Maintenir les ratios d'or à l'échelle du site avec des préréglages de groupe d'options

Les variables de conception gèrent les nombres, mais les préréglages du groupe d'options s'assurent qu'ils sont utilisés de manière cohérente sur l'ensemble du site.

Créez votre première section en utilisant les variables que nous avons créées. Obtenez la typographie, l'espacement et la mise en page exactement. Cliquez ensuite sur l'icône prédéfinie à côté de chaque groupe de style (typographie, espacement, bordure, etc.) et enregistrez-les sous forme de préréglages de groupe d'options.

Cela crée des blocs de conception réutilisables qui contiennent déjà vos proportions de rapport doré. Au lieu de partir de zéro, appliquez ces préréglages chaque fois que vous ajoutez une nouvelle section ou un nouveau module.

Lorsque vous devez ajuster les proportions à l'échelle du site, modifiez la variable une fois. Chaque préréglage à l'aide des mises à jour sur l'ensemble de votre site instantanément. Pas de chasse à travers des pages individuelles pour apporter des modifications.

Vos ratios d'or restent cohérents sans le travail manuel.

Mathématiques à un beau design, divi 5 facilite la tâche

Cette sensation lancinante lorsque les dispositions ont l'air «presque correctes» ont enfin du sens. Vous n'étiez pas pointilleux: votre cerveau reprenait des relations proportionnelles qui se sont senties éteintes.

Les ratios d'or vous donnent un point de départ fiable, mais la plupart des constructeurs vous font faire le calcul à chaque fois. Le système de conception des variables de Divi 5 change complètement. Calculez vos proportions 1.618 une fois, enregistrez-les sous forme de variables, puis cliquez pour les appliquer n'importe où sur votre site.

Besoin d'ajuster l'espacement sur cinquante pages? Modifiez une variable au lieu de modifier chaque page individuellement. Vous voulez une typographie cohérente qui suit les ratios d'or? Définissez une fois vos valeurs CLAMP () et regardez-les parfaitement sur tous les appareils.

Les mathématiques fonctionnent partout, mais Divi 5 rend réellement pratique l'utilisation de manière cohérente.