Der Unterschied zwischen absoluten und relativen CSS -Einheiten

Die Auswahl der richtigen CSS -Einheiten ist mehr als ein technisches Detail. Dies ist das, was Ihrem Design dabei hilft, konsequent, flexibel und auf alle Geräte aufmerksam zu bleiben. Pixel mögen die einfache Option erscheinen, aber sie verhalten sich nicht immer vorhersehbar auf verschiedenen Bildschirmen.

In diesem Beitrag werden wir den Unterschied zwischen absoluten und relativen Einheiten erklären und zeigen, wie Divi 5 sie von Anfang an effektiver einsetzen.

CSS -Einheiten erklärt: Warum sind sie für Ihre Website von Bedeutung?

CSS -Einheiten steuern, wie groß alles auf Ihrer Website erscheint. Wählen Sie falsch und Ihr Design bricht auf verschiedenen Geräten aus.

Die meisten Menschen verwenden Pixel, weil sie einfach und leicht zu verstehen sind. Aber Pixel passen sich natürlich nicht gut an reaktionsschnelles Design an. Sie erfordern Medienabfragen oder CSS -Funktionen wie Clamp (), um auf Bildschirmänderungen zu reagieren.

Andere Einheiten passen sich automatisch an. Ansichtsfenster -Einheiten skalieren Sie mit dem Browserfenster. Relative Einheiten wie Em -Größe basieren auf dem umgebenden Text. Unterschiedliche Einheiten lösen unterschiedliche Probleme. Wählen Sie gut aus, und Ihr Design passt Geräte ohne zusätzliche Arbeit an.

Absolute Einheiten abbauen: Wenn die festen Größen am besten funktionieren

Absolute Einheiten halten die gleiche Größe, egal was um sie herum passiert. Wenn Sie etwas auf eine Breite von 20 Pixel einstellen, bleibt es 20 Pixel, ob jemand es auf einem Telefon oder einem massiven Desktop -Monitor betrachtet. Der Wert ändert sich nie basierend auf Bildschirmgröße, übergeordneten Elementen oder Browsereinstellungen.

Pixel (PX) regieren diesen Raum. Andere absolute Einheiten wie Zentimeter, Millimeter und Zoll existieren, aber sie gehören in Druckdesign, wo physische Messungen wichtig sind. Für das Webdesign verarbeiten Pixel fast jede absolute Messung, die Sie benötigen.

Warum Pixel für kleine Details funktionieren

Einige Designelemente benötigen eine genaue Kontrolle. Ein 1-Pixel-Rand sollte überall knusprig und dünn aussehen. Drop Shadows benötigen Präzision, um richtig auszusehen. Kleine Symbole funktionieren besser, wenn sie über Geräte hinweg konsistent bleiben.

Pixel funktionieren hervorragend für diese winzigen Details. Ihr Knopfrand sollte genau 2 Pixel dick sein, dieser subtile Schatten sollte genau 4 Pixel versatz sein, und Ihr Navigationssymbol sollte genau 24 Pixel quadratisch sein, um eine perfekte Ausrichtung zu erhalten.

Diese Messungen müssen nicht mit der Bildschirmgröße skalieren. Ein Rand, der 1 Pixel auf dem Desktop ist, sollte 1 Pixel auf dem Handy bleiben. Es würde dick und klobig aussehen.

Andere Elemente funktionieren auch gut mit Pixeln. Markenlogos verwenden häufig Pixel für die Markenkonsistenz. Kleine dekorative Elemente wie Punkte oder Linien benötigen eine genaue Größe. Das Laden von Spinnern und Fortschrittsbalken funktionieren besser mit festen Abmessungen.

Pixel mit Medienfragen reagieren lassen

Pixel sind nicht vollständig starr. Mit Medienabfragen können Sie verschiedene Pixelwerte an verschiedenen Bildschirmgrößen austauschen. Ihre Überschrift verwendet möglicherweise einen 32-Pixel-Text auf dem Desktop und springt dann auf 28 Pixel auf Tablets und 24 auf Telefonen.

Dieser Ansatz erfordert mehr Arbeit als relative Einheiten. Sie müssen Breakpoints definieren und für jede Bildschirmgröße separate Regeln schreiben. Sie haben jedoch die vollständige Kontrolle darüber, wie die Dinge jede Größe betrachten.

Dieser Ansatz funktioniert gut, wenn Sie bei jeder Bildschirmgröße eine spezifische Steuerung wünschen. Sie entscheiden genau, wie Ihr Text auf Telefone im Vergleich zu Tablets gegenüber Desktops in bestimmten Abmessungen aussieht. Keine Überraschungen.

Das zusätzliche CSS ist es für Elemente wert, die eine präzise Größe erfordern. Logos sehen am besten aus, wenn sie für jedes Gerät genau die richtige Größe halten. Navigationselemente benötigen häufig spezifische Dimensionen, um korrekt zu funktionieren. Dekorative Grenzen und Schatten hängen von genauen Messungen ab, um knackig auszusehen.

Verständnis von relativen Einheiten: Der flexible Ansatz für das Webdesign

Im Gegensatz dazu relative Einheiten, dehnen und schrumpfen, basierend auf dem, was um sie herum ist. Diese Flexibilität lässt Websites über Telefone, Tablets und Computer hinweg funktionieren, ohne zu brechen. Im Gegensatz zu absoluten Einheiten, die fest bleiben, passen sich die relativen Einheiten an Bildschirmgröße, übergeordnete Elemente oder Benutzerpräferenzen an.

Diese Einheiten lösen die Probleme, die Pixel erzeugen. Ihre 75-Pixel-Schaltfläche funktioniert auf dem Desktop gut, wird jedoch auf dem Handy dominiert. Relative Einheiten passen automatisch an und speichern Sie vor dem Schreiben separater Stile für jede Bildschirmgröße.

Wie Em -Einheiten aufeinander aufbauen

EM -Einheiten sind relativ zur Schriftgröße ihres unmittelbaren Elternelements. Wenn Ihre Basis-Schriftgröße 16px beträgt und Sie einen Container in Schriftgröße einstellen: 1.25EM, wird das 20px. Ein auf 1.5EM eingestelltes untergeordnetes Element ist jetzt 30px (1,5 × 20px) und nicht 24px, da es auf dem übergeordneten Grundstück basiert, nicht auf der Wurzel.

Dieser Compounding -Effekt ist für skalierbaren Abstand um Text leistungsfähig. Wenn Sie jedoch die Elemente mit EM-basierten Schriftgrößen weiter nisten, können Ihre Werte schnell zunehmen. EM -Einheiten eignen sich am besten für Polsterung, Marge oder Elemente, die eng mit dem nahe gelegenen Text verbunden sind. Für eine konsequente Größe über Ihr Layout gehen Sie stattdessen in Betracht, um REM zu verwenden.

REM -Einheiten halten die Dinge einfach

REM schaut immer das Root HTML -Element an. Stellen Sie etwas auf 2Rem ein und es ist überall auf Ihrer Seite die gleiche Größe.

Die meisten Browser standardmäßig 16px für das Root. Also 1REM = 16px, 2REM = 32px. Ändern Sie die Wurzelgröße und alles REM-basierte Skalen zusammen.

Ansichtsfenster -Einheiten folgen Ihrem Bildschirm

Ansichtsfenster skalieren Sie mit Ihrem Browserfenster. 50VW = die Hälfte der Bildschirmbreite und 100VH = Vollbildhöhe. Dies ist ideal für Heldenabschnitte, die den Bildschirm füllen.

Mobile Browser spielen normalerweise nicht gut mit Ansichtsfenster. Die Adressleiste verbirgt sich und zeigt beim Scrollen und Ihr 100 -VH -Abschnitt wird möglicherweise abgeschnitten, wenn die Adressleiste angezeigt wird.

VMIN und VMAX vergleichen die Breite und Höhe Ihres Bildschirms und wählen Sie dann einen aus. Vmin verwendet, was auch immer kleiner ist. Auf einem aufrecht gehaltenen Telefon ist die Breite kleiner, also 50 VMin = 50% der Breite. Drehen Sie in die Landschaft und die Höhe wird kleiner, so dass 50 VMin zu 50% der Höhe schaltet. Vmax macht das Gegenteil: Es wählt immer die größere Dimension aus. Dies ist nützlich für Elemente, die mit der größeren Messung skaliert werden müssen.

Prozentsätze passen sich an Behälter an

Prozentsatzbasierte Breiten beziehen sich immer auf die Breite des übergeordneten Elements. Höhenprozentsätze können auf die gleiche Weise skalieren, jedoch nur, wenn das Elternteil eine definierte Höhe hat. Andernfalls können sie nicht wie erwartet funktionieren.

Padding- und Margenprozentsätze werden immer aus der Breite des Elternteils berechnet, selbst für obere und untere Werte. Dies ermöglicht es, einen konsistenten Abstand und proportionalen Layouts zu schaffen, insbesondere bei Flüssigkeitsdesigns.

Der Unterschied

Absolute Einheiten sind wie ein starrer Herrscher, während sich relative Einheiten eher wie ein Maßband verhalten. Beide messen Dinge, reagieren aber sehr unterschiedlich, wenn sich die Bedingungen ändern. So vergleichen sie:

Die meisten Entwickler verwenden beide: Pixel für die kleinen Dinge, die knusprig und relative Einheiten für die großen strukturellen Stücke bleiben müssen, die sich biegen müssen.

Wählen Sie die richtigen Einheiten für Ihr Design aus

Verschiedene Teile Ihrer Website benötigen unterschiedliche Ansätze. Einige Elemente bleiben überall gleich groß, während sich andere anhand der Bildschirmgröße oder der Benutzereinstellungen anpassen. Die meisten Entwickler überdenken dies. Es gibt einen einfacheren Weg: Übereinstimmung mit dem Gerät, das dieses Element tun soll.

Denken Sie zuerst an Ihre Benutzer nach

Die Leute durchsuchen Ihre Website auf unerwartete Weise. Jemand besucht ihr Telefon. Ihr Text sieht winzig aus, also kneifen sie zum Zoomen. Wenn Sie mit REM -Einheiten gebaut haben, wächst alles proportional zusammen. Wenn Sie überall Pixel verwendet haben, überlappen sich die Dinge.

Die Hauptnavigation erfordert eine konsistente Größe über Seiten. REM -Einheiten binden es an Ihre Basis -Schriftgröße. Ihr Logo benötigt genaue Abmessungen für die Markenkonsistenz. Pixel halten es knusprig.

Viele Benutzer ändern die Standard -Schriftgröße ihres Browsers für eine bessere Lesbarkeit. Wenn Sie Hardcode -Pixel haben, ignorieren Sie ihre Vorlieben. Wenn jemand auf 125%zoomt, fällt Ihr Pixel-basierter Layout auseinander. Relative Einheiten passen sich automatisch an.

Schnelle Möglichkeiten, die richtige Einheit auszuwählen

Hier erfahren Sie, wie Sie Ihre Entscheidungen aufschlüsseln können, ohne sich in den Details zu verlieren:

• Text und Abstand um ihn herum: Verwenden Sie EM oder REM. Schaltflächenkolben mit Textgröße. Die Ränder bleiben proportional zu Überschriften.
• Bildschirmbezogene Elemente: Verwenden Sie Ansichtsfenster. Heldenabschnitte, die die meisten Bildschirme füllen. Seitenleisten, die bestimmte Bildschirmanteile einnehmen.
• Elemente, die eine genaue Kontrolle benötigen: Verwenden Sie Pixel. Dünne Grenzen, die frisch bleiben. Kleine Ikonen mit perfekter Ausrichtung. Schatten mit präzisen Offsets fallen.
• Containerbasierte Elemente: Nutzen Sie Prozentsätze. Flexible Gitter, die sich an die Eltern anpassen. Bilder, die mit Behältern skalieren.

Starten Sie einfach. Verwenden Sie Pixel für dekorative Bits, REM für Text und zugehörige Abstand, Ansichtsfenster für Abschnitte in Bildschirmgröße und Prozentsätze für flexible Behälter. Wählen Sie ein System für verwandte Elemente und bleiben Sie dabei.

Gemeinsame CSS -Einheitsfehler zu vermeiden

Sie wählen Pixel für alles aus, weil sie sich sicher fühlen. Ihr Knopf sieht perfekt bei 75 Pixel auf Ihrem Laptop aus. Dann öffnet jemand Ihre Website auf seinem Telefon, und die gleiche Schaltfläche frisst die Hälfte des Bildschirms. Ihr Logo benötigt genaue Abmessungen, aber Ihre Inhaltsbereiche erfordern Flexibilität. Mischen Sie diese Ansätze zufällig, und Sie schaffen Chaos. Hier finden Sie einige Tipps zur Vermeidung von Standard -CSS -Einheitenfehlern:

1. Pixel für alles auswählen

Pixel fühlen sich sicher, weil 20 Pixel 20 Pixel bedeuten. Einfach, richtig? Ihre 300-pixelweite Seitenleiste funktioniert auf dem Desktop einwandfrei. Auf dem Handy wird es zu einem massiven Block, der Ihren Inhalt in einen dünnen Streifen zerdrückt. Ihr 16-Pixel-Text wird auf Bildschirmen mit hoher Dichte unlesbar.

Wenn jemand die Schriftgröße ihres Browsers erhöht, passt sich Ihr Pixel-basiertes Layout nicht an. Text überläuft Container. Buttons verschwinden hinter anderen Elementen. Ihre Seitenleiste stürzt in Ihren Hauptinhalt ab.

Speichern Sie Pixel für Dinge, die wirklich eine genaue Kontrolle benötigen: dünne Grenzen, kleine Symbole und Drop -Schatten. Versuchen Sie für alles andere, relative Einheiten zu verwenden.

2. EM -Einheiten, die außer Kontrolle geraten

Die EM -Einheiten skalieren basierend auf der Schriftgröße ihrer Eltern. Das klingt flexibel, bis Sie mit dem Nisten beginnen. Angenommen, Ihr Container verwendet 1.2EM, und Ihr Übergang im Inneren verwendet 1.5EM. Diese Überschrift wird relativ zur Wurzel 1,8EM, da 1,2 × 1,5 = 1,8. Nisten und Größen können Schneeball sein. Ändern Sie eine übergeordnete Schriftgröße und alles stromabwärts verschiebt sich.

REM -Einheiten beheben dies. Sie verweisen immer auf das Wurzelelement, so dass 2Rem dasselbe bedeutet, egal wo es verwendet wird. Das erleichtert Ihre Typografie einfacher zu skalieren und zu steuern.

3.. Ansichtsfenster, die auf dem Handy herumspringen

Stellen Sie Ihren Heldenabschnitt auf 100VH ein und erfüllt den Bildschirm perfekt. Außer mobilen Browsern verstecken und zeigen Sie ihre Adressleisten, wenn Sie Scrollen haben. Safari auf iOS und Chrom auf Android machen das alle. Wenn die Adressleiste verschwindet, wird Ihr 100 -VH -Abschnitt plötzlich zu groß. Wenn es wieder auftaucht, wird Ihr Inhalt abgeschnitten.

Die neuere DVH -Einheit passt sich der sich ändernden Ansichtsfenstergröße an. Die Browser -Unterstützung holt jedoch immer noch auf. Als Fallback funktioniert eine JavaScript -Lösung unter Verwendung von CSS -benutzerdefinierten Eigenschaften.

Brechen der Zugänglichkeit mit festen Größen

Benutzer passen häufig die Standard -Schriftgröße ihres Browsers an, um die Lesbarkeit zu verbessern. Wenn Sie mit festen Pixeln Text, Schaltflächen und Abstand mit festen Pixeln harten, kann Ihr Layout brechen. Der Text kann überlaufen, Schaltflächen können unbrauchbar werden und kritische Elemente können bei höheren Zoompegeln verschwinden.

Berührungsziele werden empfohlen, mindestens 44 × 44 CSS -Pixel zu betragen, je nach Barrierungsrichtlinien wie WCAG und Apples Standards. Kleinere Ziele können für Benutzer mit motorischen Beeinträchtigungen eine Herausforderung sein, um genau zu tippen.

Verwenden Sie anstatt feste Größen zu sperren, sondern verwenden Sie skalierbare Einheiten wie REM, um Layouts zu erstellen, die die Benutzerpräferenzen respektieren. Stellen Sie Ihre Basis -Schriftgröße auf das Element ein und skalieren Sie dann konsequent Überschriften, Schaltflächen und Abstand mit relativen Einheiten auf Ihrer Website.

5. winziger Text auf Bildschirmen mit hoher Dichte

Verschiedene Geräte packen Pixel unterschiedlich. Der Bildschirm Ihres Telefons hat möglicherweise 400 Pixel pro Zoll, während Ihr Monitor 100 hat. Die gleiche Pixelzahl sieht auf jedem Gerät völlig unterschiedlich aus.

Ihr 14-Pixel-Text sieht auf einem Desktop-Monitor gut aus. Auf einem Telefonbildschirm mit hoher Dichte werden die gleichen 14 Pixel mikroskopisch. Benutzer rufen und kneifen zum Zoom.

Betriebssysteme und Browser verarbeiten automatisch die Skalierung, wenn Sie relative Einheiten verwenden. Ihr 1REM-Text wird auf Bildschirmen mit hoher Dichte größer und auf niedriger Dichte kleiner.

6. Einheiten ohne Plan mischen

Sie verwenden REM für einige Überschriften, EM für andere und Pixel für Körpertext. Deinem Design fehlt Rhythmus, da verschiedene Elemente unterschiedliche Raten skalieren. Wählen Sie ein System für verwandte Elemente. Wenn Ihre Überschriften REM verwenden, sollten alle Ihre Überschriften REM verwenden. Wenn Ihr Abstand EM verwendet, verwenden Sie EM für den zugehörigen Abstand weiter.

Testen Sie Ihre Auswahlmöglichkeiten über Geräte und Benutzereinstellungen. Überprüfen Sie, wie Ihr Design aussieht, wenn jemand seine Schriftgröße erhöht. Ein paar Minuten Test sparen später Stunden Fehlerbehebungen.

Wie die fortschrittlichen Einheiten von Divi 5 das CSS -Management vereinfachen

Das Wrestling mit CSS -Einheiten wird schnell alt. Sie verbringen Stunden damit, Werte zu optimieren, auf verschiedenen Geräten zu testen und zerbrochene Layouts zu beheben. Divi 5 ändert dies vollständig. Das neue System nimmt die Rätselraten aus der Einheitenauswahl und gibt Ihnen visuelle Kontrolle über reaktionsschnelles Verhalten, ohne Code zu berühren. Aber zuerst verstehen wir, was Divi ist.

Was ist Divi?

Divi ist ein Website -Builder, der WordPress in etwas verwandelt, das für Menschen, die wollen, dass ihre Websites gut aussehen.

Ziehen Sie eines von 200+ Modulen um Ihre Seite. Ändern Sie den Text genau dort, wo er sich befindet. Wählen Sie neue Farben aus und sehen Sie sie sofort auf. Sie arbeiten an der realen Sache, nicht an einem Vorschau -Modus, der Sie anliegt.

Das Thema enthält 2000+ Layouts, die nicht saugen. Echte Designs für Restaurants, Fotografen, Berater und Dutzende anderer Unternehmen. Finden Sie einen, den Sie mögen, und optimieren Sie ihn, bis es sich richtig anfühlt.

Mit dem Thema Builder können Sie alles kontrollieren. Erstellen Sie Header, die nicht generisch aussehen, auf herausragende Blogseiten erstellen und Ihre 404 Seiten in etwas verwandeln, das die Leute tatsächlich sehen möchten.

Erstellen Sie Websites mit KI

Divi AI arbeitet direkt in Ihrem Designbereich. Benötigen Sie Text? Es schreibt es.

Willst du Bilder? Es macht sie. Sie können sogar Foto -Änderungen beschreiben und es behandelt die Arbeit.

Ebenso für Code und neue Abschnitte.

Divi Quick Sites löst diesen schrecklichen Moment, wenn Sie auf eine leere Seite starren, ohne dass Sie anfangen sollen. Wählen Sie aus Starter -Sites, die unser Team tatsächlich entworfen hat, mit Originalbildern und Kunstwerken.

Oder beschreiben Sie Ihr Geschäft auf Divi -Schnellseiten + Divi Ai und lassen Sie es etwas von Grund auf neu aufbauen.

Diese KI-gebauten Websites haben echte Schlagzeilen, Kopien und Bilder, die dem entsprechen, was Sie ihm erzählt haben. Erstellen Sie alles mit KI, holen Sie sich Fotos von Unplash oder lassen Sie sich für Ihre eigenen Aufnahmen in die Profile fallen. Stellen Sie zuerst Ihre Schriftarten und Farben ein und lassen Sie die KI um sie herum arbeiten. Sie können immer noch alles danach bearbeiten.

Was ist neu in Divi 5

Divi 5 baut alles von Grund auf neu auf. Wir haben das alte Shortcode -System verschrottet und etwas erstellt, das mit den heutigen Webstandards besser funktioniert. Websites laden schneller, der Editor reagiert schneller und Sie erhalten Zugriff auf Tools, die zuvor unmöglich waren.

Aber was ist neu? Schauen Sie sich an:

Flexbox -Layout -System

Der Aufbau moderner, reaktionsschneller Websites in Divi ist jetzt schneller und intuitiver. Wir haben ein vollständiges Flexbox -Layout -System in Divi 5 eingeführt, mit dem Sie einfache Steuerelemente für vertikale Ausrichtung, Inhaltsumwickung und Abstand erhalten. Erstellen Sie die genauen Layouts, die Sie möchten, ohne mit Code zu kämpfen oder komplexe Problemumgehungen zu verwenden.

Option Gruppenvoreinstellungen

Mit Option Group Presets können Sie Stile speichern, die Sie überall mischen und übereinstimmen können. Machen Sie einmal einen Schattenstil und verwenden Sie ihn dann auf Tasten, Karten, Abschnitten, was auch immer ihn benötigt. Aktualisieren Sie die Voreinstellung und alles ändert sich sofort über Ihre gesamte Website.

Entwurfsvariablen

Markenfarben, Schriftarten und Abstand leben jetzt an einem Ort. Sie können von Blau nach Grün wechseln, indem Sie eine Variable bearbeiten. Ihre gesamte Website aktualisiert automatisch, sodass Sie nicht durch Dutzende von Modulen jagen müssen.

Fortgeschrittene Einheiten

Jetzt können Sie alle erweiterten CSS -Einheiten mit Divi 5: von PX zu VW/VH verwenden. CSS -Funktionen funktionieren jetzt auch im Bauherrn. Möchten Sie einen Abschnitt, der 80% der Bildschirmhöhe abzüglich Ihres Headers ausmacht? Geben Sie Calc (80VH - 100px) ein und Sie sind eingestellt. Die Schnittstelle verarbeitet Clamp (), min (), max (): all diese reaktionsschnellen Tricks.

Verschachtelte Reihen

Reihen gehen jetzt in andere Reihen, so tief wie Sie brauchen. Bauen Sie komplexe Magazinlayouts oder detaillierte Produktseiten, ohne die Struktur zu bekämpfen. Jedes Level gibt Ihnen die volle Kontrolle über Abstand und Geräteverhalten.

Ein-Klick-Bearbeitung

Zeigen Sie und klicken Sie auf eine beliebige Weise auf Ihrer Seite, um mit der Bearbeitung zu beginnen. Die Tage der Suche nach winzigen Bearbeitungsschaltflächen oder der Navigation durch mehrere Menüs stehen hinter uns.

Anpassbare Haltepunkte

Anstatt mit drei festzuhalten, können Sie die anpassbaren Haltepunkte von Divi 5 ermöglichen, sieben verschiedene Bildschirmgrößen zu aktivieren. Stellen Sie jeden Haltepunkt genau dort ein, wo Ihr Design es benötigt, egal ob 1200px für große Monitore, 900px für Tablets oder 650px für Telefone.

Multi-Panel-Arbeitsbereich

Vereinbaren Sie Ihre Arbeitsbereichstafeln, wie Sie möchten. Halten Sie mehrere Einstellungspaneele gleichzeitig geöffnet, anstatt ständig zwischen verschiedenen Grenzflächenbereichen zu springen.

Attributverwaltung

Kopieren Sie spezifische Elemente zwischen verschiedenen Teilen Ihrer Website mit chirurgischer Präzision. Nehmen Sie nur den Abstand von einem Element, nur die Farben von einem anderen oder nur die Voreinstellungen aus einem dritten. Keine All-OR-oder-nichts-Transfers.

Leinwand Skalierung

Passen Sie Ihre Arbeitsbereichsgröße an, um eine Vorschau auf die Erscheinung Ihrer Website auf verschiedenen Geräten anzuzeigen. Siehe Mobilfunk-, Tablet- und Desktop -Ansichten, ohne auf separate Vorschau -Modi zu wechseln.

Leistungsverbesserungen

Jetzt fühlt sich jetzt alles schnappiger an. Die Seiten laden schneller, der Bauunternehmer reagiert schneller und komplexe Layouts verärgern nicht die Benutzeroberfläche wie früher.

Modulgruppen

Bündeln Sie mehrere Module in einen Behälter. Behandeln Sie Textblöcke, Bilder und Schaltflächen als einzelne Einheit. Bewegen Sie sie zusammen, stylen Sie sie zusammen und kopieren Sie das Ganze auf andere Seiten.

HSL -Farbsystem

Bauen Sie Farbschemata mit Farbton-, Sättigungs- und Leichtigkeitskontrollen auf. Erstellen Sie Markenfarbvariationen, die professionell aussehen. Die Mathematik schafft automatisch angenehme Kombinationen.

Mehr sind unterwegs…

• Schleifenbauer: Erstellen Sie Vorlagen zum Wiederholen von Inhalten wie Blog -Gittern oder Produktlisten. Entwerfen Sie es einmal und lassen Sie es das System mit Ihrem tatsächlichen Inhalt füllen.
• WooCommerce-Module: Speicherspezifische Module für Produktnetze, einzelne Produktseiten und Wagenfunktionalität. Alles, was Online -Shops benötigen, die speziell für den Verkauf aufgebaut sind.

Verwenden von CSS -Variablen in Divi 5

Das Website -Styling wird mühsam, wenn Sie konsistente Werte über mehrere Elemente hinweg benötigen. CSS -Variablen lösen dies durch Speichern wiederverwendbarer Werte an einem Ort. Divi 5 unterstützt sowohl traditionelle CSS -Variablen als auch sein eigenes Design -Variablen -System, wodurch Sie die Art und Weise, wie Sie das Erscheinungsbild Ihrer Website verwalten.

Divi 5 akzeptiert jede CSS -Einheit direkt in seinen Eingangsfeldern. Schreiben Sie REM-, VW- oder Prozentwerte, bei denen Sie zuvor nur Pixel verwenden konnten. Der Bauherr verarbeitet diese Einheiten sofort ohne zusätzliche Einrichtung.

CSS -Funktionen funktionieren genauso. Geben Sie die Klemme (1REM, 4VW, 3REM) für die Flüssigkeitsartographie oder min (500px, 90%) für reaktionsschnelle Breiten ein. Der visuelle Bauunternehmer kümmert sich um diese Berechnungen in Echtzeit, während Sie entwerfen.

Variablen integrieren nahtlos in dieses System. Definieren Sie eine CSS-Variable wie-Header-Height: 80px und beziehen Sie sich dann mit Var (–HaEder-Height) in jedem Feld. Divi erkennt die Syntax und wendet Ihren gespeicherten Wert automatisch an.

Diese direkte Integration bedeutet, dass Sie traditionelle Einheiten, moderne CSS -Funktionen und Variablen innerhalb desselben Projekts mischen können. Verwenden Sie Pixel für Grenzen, Ansichtsfenster für Abschnitte und Variablen für wiederholte Messungen.

Designvariablen: Eine bessere Möglichkeit, fortgeschrittene Einheiten anzuwenden

Designvariablen sind die integrierte Alternative von Divi 5 zu CSS-Variablen. Sie arbeiten vollständig über die visuelle Schnittstelle, ohne dass Codekenntnisse erforderlich sind. Sie erstellen und verwalten diese Variablen mithilfe des Variable Manager -Panels von Divi.

Diese Variablen erstrecken sich über einfache Zahlen und Farben hinaus. Speichern Sie vollständige Bild -URLs, Textinhalte oder komplexe Styling -Werte. Wenn Sie eine Designvariable aktualisieren, ändert sich jedes Element, das sie verwendet, sofort auf Ihrer gesamten Website.

Divi 5 bietet verschiedene Variablentypen, um unterschiedliche Inhaltsanforderungen zu bearbeiten:

• Farbvariablen speichern Hex -Codes, Gradienten, Markenfarben, Textfarben, Hintergründe und Grenzen.
• Schriftart Variablen verwalten Typografie weltweit über die Einschränkungen des Themas -Customizer -Einschränkungen hinaus und arbeiten für alle Textbereiche.
• Zahlenvariablen akzeptieren alle CSS -Einheiten plus CSS -Funktionen wie Clamp (), Calc (), min () und max () für Abstand, Größe und Animation.
• Bildvariablen speichern wiederverwendbare Bilder wie Logos, Hintergründe und Muster.
• Textvariablen speichern wiederverwendbare Textzeichenfolgen wie Kontaktinformationen, Taglinien und Geschäftsdetails.
• URL -Variablen speichern wiederverwendbare Links für soziale Medien, verbundene Unternehmen, Promos und Tel/Mailto -Links.

Einrichten von CSS -Einheiten mit Zahlen -Designvariablen

Zahlenvariablen geben Ihnen die Bausteine für Designs, die konsistent bleiben. Sie funktionieren am besten, wenn Sie die gleiche Messung über verschiedene Elemente hinweg wiederholen. Außerdem sind sie viel einfacher als mit CSS -Code zu ringen.

Suchen Sie den variablen Manager in Ihrer Divi -Schnittstelle. Erstellen Sie eine neue Zahlenvariable und geben Sie ihm einen Wert, der zu Ihrem Design passt. Verwenden Sie klare Namen wie "Button-Padding" oder "Abschnitts-Gap" anstelle von vagen Beschriftungen.

Erstellen Ihrer variablen Bibliothek

Sie können gemeinsame Variablen hinzufügen, z. B.:

• "Schaltflächenhöhe" bei 3REM-Schaltflächen Skalierung mit Textgröße
• "Abschnitts-Padding" bei 8 VH-Der Abstand passt sich der Bildschirmhöhe an
• "Grenze-Radius" bei 0,5Rem-abgerundete Ecken bleiben proportional
• "Hero-Height" bei 75 VH-Heldenabschnitte füllen die meisten Bildschirme aus
• "Fine-Borre" bei 1PX-knusprige Linien bleiben scharf
• "Fluid-Text" bei Clamp (1REM, 2,5 VW, 2REM)-Textskalen reibungslos
• "Inhaltsbreite" bei min (90%, 1200px)-Container bleiben lesbar
• "Dynamic-Lack" bei Calc (2REM + 2VW)-Der Abstand wächst mit Bildschirmgröße

Wenden Sie diese in Ihren Modul-, Abschnitt- oder Zeileneinstellungen an.

Ihre REM -Variablen skalieren mit Textgröße. Die VH -Einheiten passen sich an kleinere Bildschirme an. Variablen mit clamp () passen automatisch zwischen Ihren minimalen und maximalen Werten ein.

Gebäude verbundene Voreinstellungen

Speichern Sie nach dem Stylen Ihres Elements mit Variablen den Abstand als Optionsgruppenvoreinstellung. Diese Voreinstellung enthält nun Verweise auf Ihre Zahlenvariablen.

Wenn Sie dieses Voreinstellung auf andere Module anwenden, erben sie denselben variablen Abstand. Aktualisieren Sie "Kartenpadding" von 2REM zu 3REM im Variablen-Manager und jedes Element, das diese voreingestellten Aktualisierungen automatisch verwendet.

Die Voreinstellung bleibt gleich, aber die Werte ändern sich. Dies funktioniert für alle Designvariablen: Farben, Schriftarten, Bilder, Text und URLs. Ihre Voreinstellungen werden dynamisch anstelle von statischer und ermöglichen seitenweite Updates mit einer einzigen Änderung.

Erstellen Sie bessere Websites mit CSS -Einheiten und Divi 5

Das Erhalten von CSS -Einheiten ändert sich, wie Sie Websites erstellen. Sie reparieren weniger kaputte Layouts und erstellen Designs, die auf Geräte hinweg funktionieren. Pixel präzise Details. Relative Einheiten passen sich an verschiedene Bildschirme und Benutzerpräferenzen an.

Divi 5 macht den Bau mit fortschrittlichen CSS -Einheiten zum Kinderspiel. Geben Sie jede Einheit in den Bauherr ein und sehen Sie die Ergebnisse sofort. Konstruktionsvariablen halten die Messungen auf Ihrer Website konsistent. Ändern Sie einen Wert und alles, was miteinander verbunden ist, automatisch.

Ihre Websites verdienen es besser als Breakpoint -Schlachten und endlose Layout -Korrekturen. Versuchen Sie Divi 5 und beobachten Sie, wie CSS -Einheiten frustrierende Designsitzungen in reibungslose Workflows verwandeln.