Beherrschen des goldenen Verhältnisses im Design

Ihr Design sieht fast richtig aus, aber etwas fühlt sich aus. Der Abstand scheint unangenehm. Die Proportionen funktionieren nicht. Sie passen Margen und Polsterung an, aber dieses nörgende Gefühl des Ungleichgewichts bleibt bestehen. Das fehlende Stück könnte das goldene Verhältnis sein.

Dieses mathematische Prinzip leitet seit Jahrhunderten großes Design. Und unsere Augen bevorzugen diese spezifischen Verhältnisse natürlich. Die meisten Designer überspringen die goldenen Verhältnisse oder fällen sie falsch, weil es so schwer ist, zu knacken. Mit einem Seitenbauer wie Divi 5 können Sie jedoch perfekte Proportionen ohne komplexe Berechnungen anwenden.

Lassen Sie uns mehr herausfinden.

Was ist das goldene Verhältnis?

Das goldene Verhältnis entspricht ungefähr

1.618.

Woher kommt es? Sie erhalten diese Zahl, wenn Sie eine Linie in zwei Teile unterteilen, wobei der längere Teil durch den kürzeren Teil der gesamten Linie geteilt durch den längeren Teil entspricht.

Sie können das goldene Verhältnis mit der Fibonacci -Sequenz berechnen. Beginnen Sie mit 0 und 1. Fügen Sie sie hinzu, um 1 zu erhalten. Fügen Sie 1 und 1 hinzu, um 2 zu erhalten. Fügen Sie die letzten beiden Zahlen weiter hinzu: 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144. Wenn Sie eine größere Zahl durch die vorherige Zahl teilen, kommen Sie näher an 1,618.

Dieses Verhältnis erscheint überall in der Natur. Sonnenblumensamenspiralen folgen ihm. Nautilus -Schalen wachsen mit diesen Proportionen. Sogar Ihr Gesicht folgt wahrscheinlich den Messungen des goldenen Verhältnisses zwischen Ihren Merkmalen. Wenn etwas diesem Verhältnis folgt, erkennt Ihr Gehirn es als natürlich ansprechend.

Bilder mit freundlicher Genehmigung: Lucas und Dynamic Wang auf Unsplash und Milena Carolina dos Santos Mangueira

Das Symbol φ (PHI) stellt ein einzigartiges mathematisches Verhältnis dar, das die alten Griechen um 300 v. Chr. Entdeckten. Sie bezeichneten es als den „göttlichen Anteil“ und glaubten, dass es eine besondere visuelle Balance und Schönheit enthüllte.

Warum es wichtig ist: Von alten Gebäuden bis hin zum Webdesign

Die Griechen verwendeten dieses Verhältnis für den Parthenon -Tempel, und die ägyptischen Pyramiden folgen diesen Messungen. Künstler wie Leonardo da Vinci studierten jahrelang diese Proportionen. Da Vinci zog den berühmten „Vitruvianer“ und zeigte die goldenen Verhältnisse im menschlichen Körper.

Repräsentationsbild

Gut etablierte Designer verwenden dies immer noch. Das Apple -Logo verwendet die Proportionen des Goldenen Verhältnisses. Das einstige Twitter -Bird -Logo folgte diesen Messungen. Zeitschriften platzieren wichtige Inhalte an Golden Ratio -Spots anstatt in der Mitte.

Bilder mit freundlicher Genehmigung: Widewalls & Design Shack

Wissenschaftler untersuchten, warum Menschen goldenes Verhältnisformen mögen. Gehirnscans zeigen mehr Aktivitäten in Vergnügungsbereichen, wenn Menschen das goldene Verhältnis -Rechtecke betrachten. Dies ist dem Menschen inhärent, da dies in allen Kulturen und Altersgruppen geschieht.

Ihr Gehirn verarbeitet diese Proportionen schneller als andere Verhältnisse, was eine bessere Benutzererfahrung bedeutet. Wenn die Website -Proportionen zu weit von 1.618 entfernt sind, fühlen sich die Besucher unwohl und gehen früher.

Das Verhältnis schafft ein Gleichgewicht, ohne perfekt gleichmäßig zu sein. Perfekte Symmetrie kann auf Websites langweilig aussehen. Das goldene Verhältnis bietet gerade genug Asymmetrie, um visuelles Interesse zu wecken und gleichzeitig die sauberen, professionellen Look -Nutzer zu erwarten.

Warum sich Ihre Designs „aus“ anfühlen (und wie Verhältnisse dies beheben)

Sie haben gerade Stunden damit verbracht, Ihr Layout zu perfektionieren. Die Farben sind genau richtig. Die Schriftarten arbeiten zusammen. Aber etwas fühlt sich immer noch aus. Die Seitenleiste scheint zu breit. Der Header sieht etwas beengt aus. Der Inhaltsbereich fließt nicht mit dem Rest.

Dies ist eine häufige Erfahrung. Viele Designer passen die Größen anhand dessen an, was sich im Moment richtig anfühlt. Vielleicht setzen Sie den Hauptinhalt auf 70 Prozent und die Seitenleiste auf 30 Prozent. Diese Zahlen klingen vernünftig, aber sie sehen nicht immer natürlich aus.

Unsere Augen suchen nach Balance und vertraute Muster. Wenn Proportionen nicht ganz richtig sind, fühlt sich das gesamte Design unangenehm an, auch wenn Sie nicht erklären können, warum. Es ist vielleicht kein großer Fehler, nur ein kleines Detail, das Sie beunruhigt.

Das eigentliche Problem ist oft ein Verhältnis. Wenn Layouts ignorieren, was sich ausgewogen anfühlt, merkt Ihr Gehirn. Etwas fühlt sich aus, auch wenn Sie Ihren Finger nicht darauf legen können.

Wie falsche Verhältnisse Sabotage -Benutzererfahrung

Schlechte Proportionen lassen die Dinge seltsam aussehen. Ihr Gehirn erwartet, dass bestimmte Formen und Größen gut zusammenkommen. Stellen Sie sich einen Heldenbereich vor, der genau die Hälfte Ihres Bildschirms einnimmt. Es sieht steif und umständlich aus.

Betrachten Sie nun einen, der 43 Prozent oder 67 Prozent des Raums verwendet. Das sieht unausgeglichen und unordentlich aus.

Dies kann Ihre Website beeinträchtigen. Die Leute entscheiden sehr schnell, wenn sie vertrauen, was sie sehen. Wenn die Seite abblättert, denken sie möglicherweise, dass Ihr Unternehmen nicht vertrauenswürdig ist. Unschärfe Design lässt die Leute glauben, dass Ihre Arbeit nicht gut ist.

Das goldene Verhältnis kann dazu beitragen, dies zu beheben. Versuchen Sie es mit 61,8 Prozent, anstatt Ihren Heldenabschnitt 70 Prozent zu machen, und lassen Sie den nächsten Abschnitt 38,2 Prozent sichtbar.

Diese Zahlen sind nicht zufällig. Sie folgen einem speziellen Muster namens 1.618, das Sie in der Natur sehen, wie in Blumen und Muscheln. Ihre Augen kennen dieses Muster und fühlen sich ruhig an, wenn sie es sehen.

Der Trick ist, wie sich die Teile miteinander beziehen. Alles fühlt sich richtig an, wenn Ihre Headergröße mit dem Goldenen Verhältnis Ihrem Inhaltsbereich übereinstimmt. Ihre Fußzeile, Ihr Menü und Ihre Inhalt passen zusammen, anstatt auszusehen, als würden sie um Platz kämpfen.

Wie berechnet man Golden Verhältnisanteile

Sie brauchen keine ausgefallene Mathematik. Denken Sie nur an 62 und 38. Diese Zahlen summieren sich zu 100, so dass sie als Prozentsätze funktionieren.

Teilen Sie jeden Platz auf, indem Sie 62% auf den größeren Teil und 38% auf den kleineren Teil geben. Ihre Website ist 1000 Pixel breit. Machen Sie Ihren Hauptinhalt 620 Pixel. Legen Sie Ihre Seitenleiste auf 380 Pixel. Perfektes goldenes Verhältnis.

Ich habe einen 500-Pixel-Abschnitt. Ihr Hauptbereich erhält 310 Pixel. Der Rest erhält 190 Pixel.

Schnelle Regeln für Website -Teile

Die Heldenabteilung sollte ungefähr 60% dessen dauern, was die Menschen zuerst sehen. Der Rest geht zu Ihrer Hauptinhaltsvorschau. Machen Sie Karten 60% so groß wie breit. Eine 300-Pixel-Karte wird 180 Pixel hoch.

Knöpfe funktionieren genauso. Eine Breite von 100 Pixel bedeutet eine Höhe von 60 Pixel. Ihre Textspalte ist 600 Pixel breit. Hören Sie auf, Inhalte um 370 Pixel abzubauen. Fügen Sie dann Ihren nächsten Abschnitt hinzu.

Sieht es richtig aus?

Treten Sie von Ihrem Bildschirm zurück. Die Teile sollten sich jetzt ausgewogen anfühlen. Ihr Auge fließt reibungslos von Abschnitt zum Abschnitt. Wenn Sie immer wieder auf einen Punkt starren, sind die Proportionen möglicherweise aus.

Beliebte Websites verwenden die gleichen 62/38 Splits überall. Sie werden das Muster sehen, wenn Sie wissen, wonach Sie suchen müssen. Die Mathematik bleibt verborgen, aber die visuelle Harmonie sticht sofort auf.

Goldene Verhältnisfehler machen Designer

Die meisten Designer wissen, dass das goldene Verhältnis existiert und es verwenden möchten. Hier kämpfen sie gewöhnlich.

Der größte Fehler besteht darin, Verhältnisse ohne System zufällig anzuwenden. Sie verwenden goldene Verhältnisse für Ihren Header, Drittel für Ihr Inhaltsnetz und zufällige Prozentsätze für Ihre Fußzeile. Wählen Sie einen Ansatz aus und verwenden Sie ihn konsequent über Ihr Design.

Viele Designer runden 1.618 zu einfachen Zahlen wie 1,5 oder 1,7. Ihr Gehirn bemerkt den Unterschied zwischen 62% und 60%, und diese kleine Lücke wirkt sich auf die visuelle Harmonie aus, für die Sie arbeiten.

Ein weiteres häufiges Problem sind die Elemente des Missverhältnisses. Zum Beispiel können Sie einen perfekt proportionierten Heldenabschnitt erstellen, aber dann eine Bildergalerie hinzufügen, die völlig unterschiedliche Abstandsverhältnisse verwendet. Die visuelle Trennung bricht den von Ihnen festgelegten Fluss.

Einige Designer wenden das goldene Verhältnis auf Text an, ohne dass der Lesenkomfort in Betracht gezogen wird. Eine Linienlänge, die perfekte mathematische Ausmaße folgt, kann die bequeme Lesebreit überschreiten. Die Lesbarkeit hat Vorrang vor mathematischer Präzision.

Webdesigner übersehen auch häufig die Reaktionsfähigkeit. Desktop -Proportionen, die ausgewogen aussehen, können sich auf kleineren Bildschirmen eng oder gedehnt anfühlen. Goldene Verhältnisse benötigen unterschiedliche Anwendungen über die Gerätegrößen hinweg.

Viele Seitenbauer stand bei willkürlichen Layouts, die eine proportionale Harmonie ignorieren. Standard-Dreispalten-Gitter verwenden 33/33/33 Splits anstelle von natürlichen Verhältnissen.

Der einschränkendste Fehler besteht darin, den Ansatz nach ersten Versuchen aufzugeben. Goldene Verhältnisse funktionieren am besten, wenn Sie systematisch in Ihrer Layoutstruktur angewendet werden, nicht als isolierte Anpassungen.

Warum ignorieren viele Seitenbauer goldene Verhältnisse?

Seitenbauer wuchsen im Zusammenhang mit dem Programmierer auf. Entwickler lieben Zahlen, die sich sauber teilen. Zwölf Säulen, vier Abschnitte, fünfundfünfzig Splits.

Viele Builder -Unternehmen glauben wirklich, dass Benutzer ihre eigenen Designentscheidungen kontrollieren sollten. Sie wollen keine spezifischen ästhetischen Theorien auf Menschen überschreiten, die möglicherweise unterschiedliche Ansätze bevorzugen. Einige Designer hassen das goldene Verhältnis und bevorzugen andere Anteilssysteme. Warum ein mathematisches Prinzip erzwingen, wenn Kreativität von Optionen lebt?

Das eigentliche technische Problem ist unordentlicher als Designphilosophie. Goldene Verhältnisse erzeugen seltsame Dezimalstellen, die ältere Geräte brechen. Versuchen Sie, ein reaktionsschnelles Netz zu bauen, bei dem eine Spalte 61,8% breit ist. Saubere Prozentsätze wie 25% oder 33% verhalten sich vorhersehbar auf jedem Gerät.

Die meisten Seitenbuilder -Unternehmen begannen als technische Lösungen, keine Design -Tools. Sie basieren auf systematischen, logischen Layouts, die zuverlässig funktionieren.

Benutzer beschweren sich selten über Proportionen. Sie beschweren sich über kaputte mobile Layouts und langsame Ladezeiten. Unternehmensprioritäten folgen dem tatsächlichen Nutzer -Feedback, nicht der Designtheorie.

Einige Bauherren machen sich Sorgen um überwältigende Anfänger. Neue Benutzer sind bereits mit Dutzenden von Layoutentscheidungen ausgesetzt, und das Hinzufügen mathematischer Überlegungen könnte Menschen, die nur etwas sauberes und Professionelles wollen, abschrecken.

Aufbau perfekter Ausmaße mit Divi 5

Bevor wir uns mit den starken Größen eintauchen, wie Divi 5 das Golden-Verhältnis-Design aus mathematischen Kopfschmerzen in die Einfachheit der Point-and-Click-Einfachheit verwandelt, machen wir einen kurzen Umweg und verstehen, was Divi für WordPress-Designer, die professionelle Ergebnisse wollen, ohne den Coding Nightmare die Auswahl für WordPress-Designer, die wollen.

Was ist Divi?

Divi ist ein WordPress -Seitenbauer für Personen, die sich um visuelles Design kümmern, ohne die Funktionen zu beeinträchtigen.

Sie können über 200 Module herum ziehen und fallen lassen, den Text ändern und neue Farben auswählen. Alles passiert direkt auf Ihrer Seite, sodass Sie genau sehen, was Besucher sehen werden.

Das Thema ist voll mit über 2000 vorgefertigten Layouts. Dies sind keine grundlegenden Vorlagen, sondern vollständige Designs für Restaurants, Fotografen, Berater und Dutzende anderer Unternehmen. Wählen Sie eine aus, die zu Ihrem Stil passt, und passen Sie von dort an.

Wenn Sie Produkte online verkaufen, enthält Divi mehr als 20 Module, die speziell für Geschäfte gemacht wurden. Ihre Produktseiten sehen professionell aus und helfen tatsächlich dabei, Browser in Käufer umzuwandeln.

Erstellen Sie Websites ohne Kopfschmerzen

Mit dem Thema Builder können Sie jeden Teil Ihrer Website entwerfen. Sie können benutzerdefinierte Header erstellen, die zu Ihrer Marke passen, einzigartige Blog -Layouts erstellen und sogar Ihre 404 Seiten fantastisch aussehen lassen.

Divi Ai bringt die Bequemlichkeit der KI direkt in Ihre Design -Leinwand. Sie können Text generieren,

Bilder,

Code,

und ganze Seitenabschnitte mit Divi AI.

Sie können Ihre vorhandenen Fotos sogar bearbeiten, indem Sie nur beschreiben, was Sie benötigen.

Divi Quick Sites löst das größte Problem der Website -Bauherren: Starren auf eine leere Seite, ohne zu wissen, wo er anfangen soll. Sie können aus professionellen Starter -Websites mit professionellen Website -Vorlagen, die von unserem Designteam erstellt wurden, auswählen und einzigartige Bilder und Kunstwerke enthalten, die Sie nirgendwo anders finden.

Oder lassen Sie Divi AI anhand Ihrer Geschäftsbeschreibung benutzerdefinierte Layouts erstellen.

Diese AI-generierte Website ist nicht nur ein Wireframe. Es enthält relevante Überschriften, Kopien und Bilder pro Beschreibung. Sie können Divi AI bitten, alle Bilder zu generieren, einen von Unsplash zu verwenden oder Platzhalter zu verwenden, damit Sie sie selbst ersetzen können.

Sie können Ihre Schriftarten und Farben sogar vorab auswählen und KI mit ihnen laufen lassen. Und natürlich bleiben die Websites wie reguläre Websites bearbeitbar, sodass Sie alles, was Sie benötigen, pro Geschmack optimieren.

Holen Sie sich Divi

Divi 5: Der nächste Schritt

Das Erstellen von Websites sollte sich natürlich anfühlen, wie das Skizzieren von Ideen auf Papier. Sie haben eine Vision, und Ihre Werkzeuge sollten dazu beitragen, sie zum Leben zu erwecken, ohne sich im Weg zu machen. Genau das hat uns dazu geführt, Divi vollständig von Grund auf wieder aufzubauen.

Divi 5, heute als Alpha erhältlich und bereit, auf neuen Websites verwendet zu werden, stellt jahrelanges Anhören, was Sie beim Erstellen von Websites benötigen. Es sind keine Schnickschnack oder Features, die niemand wirklich verwendet, sondern echte Verbesserungen, die Ihre Arbeit schneller und angenehmer machen. Wir haben alles gehalten, was Sie an Divi lieben, und haben es auf die nächste Stufe gebracht.

Wir haben alles mit neuen Web -Tools von Grund auf neu aufgebaut. Die Seiten beladen jetzt schneller und die Steuerelemente funktionieren besser. Sie können Ihre Designs auf Ihrer gesamten Website ohne zusätzliche Arbeit aufweisen.

Was ist verbessert? Was ist neu?

• Der vollständige Rahmen wieder aufbaut, wird alte Shortcodes beseitigt. Alles läuft auf neuem blockbasiertem Code, der schneller lädt und besser funktioniert.
• Mit einem Klickbearbeitung können Sie auf einen Teil Ihrer Seite klicken, um sie sofort zu bearbeiten. Keine Jagd mehr nach kleinen Ikonen oder durch die Menüs.
• Anpassbare Haltepunkte bieten Ihnen sieben Bildschirmgrößen anstelle von drei. Sie können jeden so ändern, dass Sie Ihren genauen Anforderungen entsprechen.
• Mit Advanced Units Support können Sie Calc (), Clamp (), Min (), Max () und alle neuen CSS -Einheiten direkt im Bauherr verwenden.
• Mit Designvariablen können Sie Farben, Schriftarten, Größen, Bilder, Text und Links an einem Ort speichern. Ändern Sie sie einmal und sie werden überall auf Ihrer Website aktualisieren.
• Mit Option Group Presets können Sie Stile für Grenzen, Schriftarten, Schatten und Abstand speichern und wiederverwenden. Diese funktionieren über verschiedene Teile Ihrer Website.
• Mit verschachtelten Zeilen können Sie Zeilen in andere Reihen legen. Sie können komplexe Layouts ohne spezielle Abschnitte erstellen.
• Modulgruppen kombinieren mehrere Module zu einer Einheit. Dies erleichtert komplexe Layouts zu verwalten. Sie können auch Ihre benutzerdefinierten Module erstellen.
• Mit einem Multi-Panel-Arbeitsbereich können Sie Panels dort platzieren, wo Sie sie möchten. Sie können gleichzeitig mit mehreren Einstellungen arbeiten.
• Die Attributverwaltung gibt Ihnen die genaue Kontrolle, wenn Sie Stile, Inhalte und Voreinstellungen zwischen verschiedenen Teilen kopieren, einfügen und zurücksetzen.
• Mit dem hellen/dunklen Modus können Sie das Thema auswählen, das Ihre Augen leichter ist, während Sie arbeiten.
• Mit Canvas Scaling können Sie Ihren Arbeitsbereich ändern, um zu sehen, wie Ihre Website auf verschiedenen Bildschirmen aussieht. Keine Notwendigkeit, Vorschautmodi zu wechseln.
• Leistungsverbesserungen lassen die Seiten schneller geladen, schneller angezeigt und fühlen sich beim Aufbau reibungsloser an.

Versuchen Sie es noch heute Divi 5

Divi 5 ist jetzt für neue Website -Projekte verfügbar. Wir haben es von Grund auf neu aufgebaut, um Ihren Workflow schneller und einfacher zu machen. Laden Sie das öffentliche Alpha herunter und probieren Sie es auf Ihrer nächsten neuen Website aus, um die Verbesserungen zu sehen. Es ist kostenlos für alle neuen und alten Divi -Mitglieder.

Wir empfehlen, es nur für neue Websites zu verwenden, während wir das Migrationssystem für bestehende Divi 4 -Standorte verbessern. Wenn Sie frisch anfangen, ist jetzt eine gute Zeit, um die aktualisierte Oberfläche und eine bessere Leistung auszuprobieren.

So verwenden Sie goldene Verhältnisse mit Divi 5

Genug gesagt. Nehmen wir einen tiefen Tauchgang und sehen Sie, wie wir mit Divi 5 goldene Verhältnisse in Ihrer Website implementieren können, und noch besser, wie sie standardisiert werden können, damit Sie nicht jedes Mal, wenn Sie einen neuen Abschnitt oder eine neue Seite erstellen, mit Mathematik herumkramben müssen.

Mit Designvariablen können Sie Werte auf Ihrer Website speichern und wiederverwenden. Sie bilden die visuelle Identitäts -DNA Ihrer Website. Divi 5 hat sechs Typen: Farben, Schriftarten, Bilder, Textzeichenfolgen, Links und Zahlen. Jeder hat eine bestimmte Rolle:

• Farbvariablen halten Markenfarben, Hintergründe, Textfarben und andere verwendete Farbtöne ortsweit.
• Schriftartvariablen halten Schriftarten für Überschriften, Körpertext und spezielle Elemente konsistent.
• Bildvariablen speichern gemeinsame Grafiken wie Logos oder Hintergrundmuster für die einfache Verwendung.
• Textzeichenfolge Variablen speichern wiederverwendbare Inhalte wie Slogans, Kontakte und rechtliche Notizen.
• Linkvariablen halten URLs, die Sie häufig verwenden, wie Social Media oder Schlüsselseiten.
• Zahlenvariablen verarbeiten Messungen in Pixel-, Prozentsätzen-, EMS-, REMS- und Ansichtsfenstereinheiten und arbeiten mit CSS -Funktionen wie Calc (), um die Proportionen auf jedem Bildschirm direkt zu halten.

Einrichten Ihrer goldenen Verhältnisvariablen

Öffnen Sie Ihr Divi 5 Dashboard und finden Sie das Symbol Variable Manager in der linken Seitenleiste.

Klicken Sie darauf, um das Variablen -Panel zu öffnen. Fügen Sie Ihre Farben, Schriftarten, Bilder, Text und Linkvariablen hinzu.

Gehen Sie dann zur Registerkarte "Zahlen", um Ihre Golden -Verhältnis -Variablen zu erstellen. Fügen Sie mit den folgenden Zahlenvariablen zu:

Typografievariablen

• H1 -Größe: Klemme (47px, 4,7 VW, 76px)
  • 47px Minimum: Selbst auf den kleinsten Telefonen (320px breit) bleibt Ihr H1 groß genug, um Hierarchie zu etablieren. Alles kleiner verliert den Einfluss als Hauptüberschrift.
  • 4,7 VW MIDERWERT: Diese Ansichtsfenster -Einheit macht die Textskala reibungslos. Bei 1000px Bildschirmbreite 4,7 VW = 47px. Bei 1600px wächst es auf 75px
  • 76px Maximum: Wir erhalten dies, indem wir 18px × 1,618 dreimal multiplizieren (18 × 1,618 × 1,618 × 1,618 = 76,244px)
• H2 Größe: Klemme (29px, 3,5 VW, 47px)
  • 29px Minimum: Hält H2 auf dem Handy spürbar kleiner als H1, während sie lesbar bleibt
  • 3,5 VW Skalierung: Proportional kleiner als H1, um die Hierarchie aufrechtzuerhalten
  • 47px Maximum: genau 76px ÷ 1,618 = 47,122px
• H3 Größe: Clamp (18px, 2,9 VW, 29px)
  • 18px Minimum: Übereinstimmung mit Körpertextgröße auf Mobilgeräte, um den vertikalen Platz zu sparen
  • 2,9 VW Skalierung: wächst sanft als größere Überschriften
  • 29px Maximum: präzise 47px ÷ 1,618 = 29,124px
• H4 -Größe: Klemme (14px, 2,2 VW, 22,4px): Weiter dividieren
• H5 Größe: Klemme (13px, 1,8 VW, 18px): Unsere Basis -Schriftgröße von 18px passt hier perfekt in die Skala, hier
• Körpertextgröße: Clamp (16px, 1,6 VW, 18px): Standard 18px -Basis, von der alle Berechnungen stammen

Mit der Funktion clamp () ermöglicht es den Text, der reibungslos zwischen den Bildschirmen geändert wird. Es dauert drei Werte: die kleinste Größe für Telefone, den mittleren Wert für die Skalierung und die größte für Desktops. Wir verwenden die Ansichtsfensterbreite (VW) in der Mitte, da der Text allmählich wächst, wenn Bildschirme größer werden. Keine plötzlichen Sprünge zwischen Größen.

Auf dem Desktop halten wir uns an perfekte goldene Verhältnisse. Mobile Bildschirme benötigen geringfügige Anpassungen, um den Text lesbar zu halten. Reine Berechnungen mögen für einige Überschriften 11PX vermuten lassen, aber das belastet die Augen Ihrer Besucher. Das Festlegen praktischer Minimums wie 14px bewahrt die visuelle Harmonie des Goldenen Verhältnisses und sorgt dafür, dass jeder Ihre Inhalte bequem lesen kann. Die proportionalen Beziehungen bleiben intakt; Sie haben sich nur für die Lesbarkeit leicht verschoben.

Abstandsvariablen

Jeder Wert multipliziert die vorherige mit genau 1,618:

• Space XS: Clamp (8px, 1VW, 10px)
  • Warum 10px Basis: Dies ist das kleinste komfortable Touch -Zielpolster auf dem Handy. Branchen Weisheit empfiehlt 44px Mindestziele und 10px -Polster auf allen Seiten, und Inhalte bringen Sie dorthin. Kleiner als 10px lässt Elemente beengt fühlen.
  • Warum 8px Minimum: auf Telefonen unter 360px breit, können sich sogar 10px zu geräumig anfühlen. Wir fallen auf 8px, um den Inhaltsraum zu maximieren und gleichzeitig Elemente unterscheidbar zu halten.
  • Warum 1VW: Der Abstand erhöht proportional und bietet Ihnen genau 10px bei 1000px Bildschirmbreite
• Space Small: Clamp (13px, 1,6 VW, 16,18px): Ideal für die Taste und Form des Feldes Feldabstand.
• Space Medium: Clamp (21px, 2,6 VW, 26,18px): Ideal für den Abstand zwischen verwandten Inhaltsblöcken.
• Space Large: Clamp (34px, 4,2 VW, 42,36px): Schafft Atemraum zwischen den wichtigsten Abschnitten, während sie mit Bildschirmgröße skalieren.
• Space XL: Clamp (55px, 6,8 VW, 68,54px): Ideal für die Ober-/Bodenpolsterung für Heldenabschnitte und Hauptfunktionsblöcke. Heldenabschnitte benötigen auch auf Mobilgeräten erhebliche Polsterung. Unter 50px fühlt sich der Heldeninhalt an den Rändern beengt.
• Space XXL: Clamp (89px, 11VW, 110,89px): Verwenden Sie sparsam. Vielleicht für spezielle Abschnitte, die dramatische Atemraum benötigen.

Layoutvariablen

• Primärspaltenbreite: 61,803%
  • Wie wir es bekommen: Divide 1 um 1,618 = 0,61803 (oder 61,803%)
  • Verwenden Sie dies für Ihren Hauptinhaltsbereich in einem beliebigen Zwei-Spalten-Layout
• Sekundärsäule Breite: 38,197%
  • Verwenden Sie für Ihre Sidebar -Spalte in derselben Zeile
  • Abgeleitet von 100% - 61,803% = 38,197%
• Container maximal Breite: 1165px
  • Text wird schwer zu lesen, wenn Zeilen über 72 Zeichen hinausgehen.
    • und vorausgesetzt, 10px als minimale Textgröße, die optimale Lesebreite (720px) × Goldener Verhältnis (1,618) = 1165px
  • Bewerben Sie sich für Ihren Hauptabschnitt oder Ihre Zeile, die Ihren Inhalt enthält
• Goldener Höhenverhältnis: CALC (100% / 1,618)
  • Dies kann als Wert in den Höhen für Modul-/Modulgruppen wie Bilder, Aufruf-Action-Boxen, Heldenabschnitte, Teammitgliedskarten usw. verwendet werden.
  • Dies würde Rechtecke anstelle von Quadraten oder zufälligen Formen erzeugen. Ihr Gehirn findet diese Proportionen natürlich ansprechend, wie ein perfekt gerahmtes Foto.
  • Wie bekommen wir das? Das goldene Verhältnis besagt, dass wenn Breite = 1,618 ist, dann Höhe = 1. Wenn Breite = 100%ist, dann Höhe = 100%÷ 1,618 = 61,8%. Diese Formel macht diese Mathematik automatisch.

Speichern Sie diese Variablen im Variable Manager von Divi 5. Verwenden Sie sie dann überall, indem Sie auf das Symbol Variablen neben der Felder Breite, Höhe oder Max-Breite klicken. Nach dem ersten Setup ist keine Mathematik erforderlich. Außerdem ist keines dieser variablen Etiketten festgelegt; Sie können die Etiketten mit etwas tauschen, das Sinn macht.

Erstellen eines Heldenabschnitts mit goldenen Verhältnissen

Erstellen wir einen Heldenabschnitt für die Zielseite eines Buches, inspiriert von einem der Designs der Starter Site Collection unter Verwendung der von uns erstellten goldenen Verhältnisvariablen. Und das ist der lustige Teil. Sie können diese sorgfältig berechneten Variablen nehmen und beobachten, wie sie sich auf einen realen Heldenabschnitt auswirken.

Erstellen Sie zunächst einen neuen Abschnitt im Visual Builder von Divi 5. Stellen Sie die Höhe mit Ihrer goldenen Höhenverhältnisvariablen ein. Dies macht es für Ihr Gehirn selbstverständlich, als erfreulich zu erkennen.

Fügen Sie Ihre Space XL -Variable zur oberen und unteren Polsterung hinzu. Dies bietet ausreichend Atemraum auf dem Handy, während sie auf dem Desktop entsprechend erweitert werden.

Für den Abschnitt Hintergrund haben Sie zwei Hauptoptionen mit Ihren Entwurfsvariablen:

Option 1: Voller Farbhintergrund

• Klicken Sie auf das Feld Hintergrundfarbe und wählen Sie Ihre Primärfarbvariable aus der Dropdown -Liste aus. Dies hält Ihre Heldenabteilung im Einklang mit Ihrer Markenidentität. Wenn Ihre Primärfarbe für Textkontrast zu leicht ist, verwenden Sie stattdessen Ihre sekundäre Farbvariable. Stellen Sie sicher, dass die Farbe, die Sie auswählen, genügend Kontrast für Ihren Text bietet, um lesbar zu bleiben. Wenn wir mit unserer Inspiration Schritt halten, werden wir einen Gradienten des Hintergrunds und der Grundfarben mit einem Stopp von 72% und bei 90 ° hinzufügen.

Option 2: Bildhintergrund

• Wenden Sie Ihre Heldenbildvariable (wenn Sie eine erstellt haben) über das Feld des Hintergrundbildes an. Klicken Sie auf das Symbol von Variablen neben der Einstellung des Hintergrundbildes und wählen Sie Ihre gespeicherte Bildvariable aus. Fügen Sie bei Verwendung von Hintergrundbildern eine Überlagerung für die Textlesbarkeit hinzu. Stellen Sie die Overlay-Farbe auf Ihre Primärfarbvariable ein und passen Sie die Deckkraft auf 40-60%ein. Dies verdunkelt das Bild genug, um weißer Text knusprig und lesbar zu machen.
• Sie können auch Ihre sekundäre Farbvariable für das Overlay verwenden, wenn es Ihr ausgewähltes Hintergrundbild besser kontrastiert.

Erstellen des zweispaltigen Layouts

Fügen Sie eine Zeile mit zwei Spalten hinzu.

Stellen Sie die linke Spaltenbreite auf Ihre primäre Spaltenbreite und die rechte Spalte auf Ihre sekundäre Spaltenbreite. Wir werden auch die Option „Ausgleichspaltehöhen auszugleichen“ einschalten. Anschließend wird die Variable der Container -MAX -Breite angewendet, um den Inhalt auf größeren Bildschirmen lesbar zu halten. Dies verhindert, dass Textlinien zu breit dehnen, insbesondere auf breiteren Bildschirmen.

Wir aktivieren auch „benutzerdefinierte Dachrinnenbreite“ und stellen Sie sie auf 1 ein. Dies hilft uns, Golden Ratio -Bereiche zwischen unseren Modulen zu verwenden.

Tragen Sie Ihre Space Medium -Variable auf die rechte Spalte der ersten Spalte und die linke Spalte der zweiten Spalte an, um den Atemraum zwischen den Spalten hinzuzufügen. Dies schafft eine ausreichende Trennung zwischen den Säulen, ohne dass sie sich getrennt fühlen.

Die größere Spalte hält Ihre Hauptnachricht und Aufruf zur Handlung. Die kleinere Spalte kann ein einfaches Heldenbild enthalten oder für ein sauberes, textorientiertes Design leer bleiben.

Einrichten von Typografie, die fließt

Fügen Sie in Ihrer Hauptspalte zwei Überschriftenmodule hinzu.

Stellen Sie den ersten auf H5 ein und wenden Sie die H5 -Größenvariable an. In diesem Beispiel trägt dieses Textmodul den Inhalt „Bestselliger Autor“. Wir werden auch die sekundäre Farbe für diesen Text verwenden und einen Großbuchstaben -Schriftstil anwenden. Wir werden auch die Körperschrift auf den Text anwenden, um sie unverwechselbar zu machen und ihr Gewicht auf fett zu machen.

Stellen Sie die zweite auf H1 ein und wenden Sie Ihre H1 -Größenvariable an. Dies wird Ihre Hauptüberschrift. In diesem Beispiel werden wir den zuvor hinzugefügten Namen des Autors als Entwurfsvariable verwenden. Wenn Sie keine Ideen haben, können Sie Divi AI verwenden, um Ihnen mit großartigem Kopftxt zu helfen.

Fügen Sie darunter ein Textmodul für Ihren unterstützenden Absatz hinzu. Wenden Sie Ihre Körpergrößenvariable und Farbvariable an. Behalten Sie dies auf 2-3 Sätze, die Ihr Kernwertversprechen erklären. In diesem Beispiel werden wir unserem Autor eine kurze Einführung hinzufügen. Sie können auch Divi AI verwenden, um Ihnen bei der Kopie hier zu helfen.

Speichern Sie diese Elemente mit Ihrem Raummedium als Rand zwischen Überschrift und Absatz.

Fügen Sie dann ein Schaltflächenmodul unter Ihrem Text hinzu. Wenden Sie Ihre Farben an. Wir verwenden die Variable der primären Farbdesign und die Schaltflächentext.

Fügen Sie Ihre Leerzeichen mittelgroße Variable für die linke und rechte Polsterung und den Platz klein oben und unten für die Taste -Abmessungen hinzu. Dies schafft eine Schaltfläche, die proportional zu Ihrem Text ist, ohne übergroß zu sein. Verwenden Sie Ihren Space Large Variable als oberster Rand, um ihn vom Absatz zu trennen.

Der Schaltflächentext sollte Ihre Körpergrößenvariable verwenden, um die Konsistenz mit Ihrem Absatztext aufrechtzuerhalten. Wir werden auch die Button Link Design Variable anwenden, die wir zuvor hinzugefügt haben.

Styling der rechten Spalte

Die rechte Spalte kann alles von einem Bild bis zu einem Onboarding -Formular halten. Wenn Sie ein Bild in der kleineren Spalte verwenden, halten Sie es einfach. Ein Foto Ihres Teams, Ihres Büros oder einer sauberen Illustration funktioniert gut. Überdenken Sie die Bildplatzierung nicht: Mitte es normalerweise innerhalb der Spalte. In diesem Beispiel werden wir die Bilddesignvariable eines aktuellen Buches enthalten. Fügen Sie auch einen Box -Schatten hinzu, um ihn hervorzuheben.

Wir werden auch die Breite des Bildes auf rund 90% einstellen, sodass es ausgerichteter aussieht.

Für die Beratung von Websites schafft das rechte Spalte manchmal einen saubereren, professionelleren Look, der Ihre Nachricht voll in den Vordergrund stellt.

Das Ergebnis

Das Folgende ist das Ergebnis:

Verwenden Sie die Canvas Scaling von Divi 5, um das Erscheinungsbild Ihres Helden über verschiedene Bildschirmgrößen zu testen. Die Funktionen von Clamp () in Ihren Variablen sollten die Reaktionsfähigkeit automatisch verarbeiten.

Während die Variablen für goldene Verhältnisse eine hervorragende proportionale Harmonie bieten, benötigen Sie möglicherweise geringfügige Anpassungen, die auf Ihrem spezifischen Inhalt basieren. Lange Überschriften benötigen möglicherweise etwas kleinerer Text. Kurze, druckvolle Slogys können größere Größen bewältigen. Einige Markenstile erfordern einen engeren oder lockereren Abstand.

Die Schönheit an Designvariablen ist, dass diese Änderungen nur zwei Klicks erfordern. Öffnen Sie den variablen Manager, passen Sie Ihre H1 -Größe oder Ihren Platz in großer Variable an und beobachten Sie, wie sich die Schicht sofort auf Ihrer gesamten Website bezieht.

Ihr H1 sollte prominent bleiben, aber auf Mobilgeräten lesbar sind (Minimum von 47px). Ihr Abstand sollte sich großzügig anfühlen, aber bei jeder Bildschirmgröße nicht übermäßig. Mit dem zweispaltigen Split erhalten Sie ein klassisches, professionelles Layout, das für Servicegeschäfte gut geeignet ist, bei denen Vertrauen und Klarheit mehr als auffällige Designelemente von Bedeutung sind.

Aufrechterhaltung von goldenen Verhältnissen ortsweit mit Voreinstellungen der Option Gruppen

Konstruktionsvariablen verarbeiten die Zahlen, jedoch stellen die Optionsgruppenvoreinstellungen sicher, dass sie über den gesamten Standort konsistent verwendet werden.

Erstellen Sie Ihren ersten Abschnitt mit den von uns erstellten Variablen. Holen Sie sich die Typografie, den Abstand und das Layout genau richtig. Klicken Sie dann auf das voreingestellte Symbol neben jeder Stylinggruppe (Typografie, Abstand, Rand usw.) und speichern Sie sie als Option Group -Voreinstellungen.

Dies schafft wiederverwendbare Designblöcke, die bereits Ihre Goldenen -Verhältnis -Proportionen enthalten. Wenden Sie diese Voreinstellungen jedes Mal, wenn Sie einen neuen Abschnitt oder Modul hinzufügen, von vorne an, anstatt von vorne zu beginnen.

Wenn Sie die verteilten Proportionen so anpassen müssen, ändern Sie die Variable einmal. Jedes Voreinstellung, das es verwendet, aktualisiert es sofort über Ihre gesamte Website. Keine Jagd durch einzelne Seiten, um Änderungen vorzunehmen.

Ihre goldenen Verhältnisse bleiben ohne die manuelle Arbeit konsistent.

Mathematik zum schönen Design, Divi 5 macht es einfach

Dieses nörgelnde Gefühl, wenn Layouts „fast richtig“ aussehen, macht endlich Sinn. Sie waren nicht wählerisch: Ihr Gehirn hat sich von proportionalen Beziehungen aufgenommen, die sich ausgefühlt haben.

Goldene Verhältnisse bieten Ihnen einen zuverlässigen Ausgangspunkt, aber die meisten Bauherren lassen Sie jedes Mal in den Vordergrund gerückt. Das Design -System von Divi 5 ändert sich vollständig. Berechnen Sie Ihre 1,618 -Proportionen einmal, speichern Sie sie als Variablen und klicken Sie dann, um sie überall auf Ihrer Website anzuwenden.

Müssen Sie den Abstand auf fünfzig Seiten einstellen? Ändern Sie eine Variable, anstatt jede Seite einzeln zu bearbeiten. Möchten Sie eine konsistente Typografie, die den goldenen Verhältnissen folgt? Stellen Sie Ihre CLAMP () -Werte einmal ein und beobachten Sie, wie sie perfekt auf allen Geräten skaliert werden.

Die Mathematik funktioniert überall, aber Divi 5 macht es tatsächlich praktisch, konsequent zu verwenden.