So verwenden Sie die integrierten benutzerdefinierten CSS-Eingaben von Divi für erweitertes Responsive Editing

Divi verfügt über eine integrierte responsive Designbearbeitung, die es extrem einfach macht, den Stil Ihrer Website auf dem Desktop-, Tablet- oder Telefondisplay anzupassen (ohne CSS zu kennen). Ein Teil der integrierten Responsive-Bearbeitung von Divi umfasst eine vereinfachte Methode zum Vornehmen komplexerer Responsive-Design-Änderungen mit benutzerdefiniertem CSS. Das ist viel bequemer, als bei Medienabfragen auf ein externes Stylesheet angewiesen zu sein. Sie können das CSS sogar visuell in Echtzeit für jedes der Gerätedisplays anpassen, wodurch ein Großteil des Rätselratens beim Responsive Design entfällt.

In diesem Tutorial zeige ich Ihnen, wie Sie mit benutzerdefiniertem CSS bequem responsive Designänderungen vornehmen können, damit Sie erweiterte Design-Retuschen vornehmen können, die in den integrierten Designoptionen von Divi möglicherweise nicht verfügbar sind.

Lass uns anfangen.

Divis integrierte Breakpoints für Responsive Editing

Divi verfügt über drei allgemeine responsive Breakpoints (Punkte, an denen sich das Design je nach Breite des Browsers ändert), die in die Einstellungen jedes Elements im Divi Builder integriert sind. Diese drei Haltepunkte sollen in erster Linie die spezifischen Designeinstellungen für Desktop-, Tablet- und Telefondisplays erleichtern.

Die drei wichtigsten reaktionsschnellen Haltepunkte von Divi für Desktop-, Tablet- und Telefondisplays lauten wie folgt:

• Desktop: 981px und höher
• Tablet: zwischen 980px und 768px
• Mobil: 767px und darunter

Diese drei Haltepunkte sind in allen Responsive-Design-Registerkarten im Divi-Builder gleich, nicht nur für erweitertes benutzerdefiniertes CSS. Jedes Mal, wenn Sie die Responsive-Design-Tabs bereitstellen, wird jedes Styling, das unter diesen Tabs vorgenommen wird, innerhalb des Bereichs dieser drei wichtigsten Responsive-Breakpoints angezeigt.

Es ist auch erwähnenswert, dass diese allgemeinen Haltepunkte für Geräteanzeigen nicht die einzigen Haltepunkte sind, die in die Struktur des Divi-Themes integriert sind. In unserem Artikel zum Identifizieren der responsiven Breakpoints von Divi erfahren Sie mehr darüber.

Die benutzerdefinierten CSS-Eingabefelder von Divi verstehen

Wenn Sie ein Element (Abschnitt, Zeile oder Modul) im Divi-Builder anpassen, entspricht jede Designoption einem bestimmten Teil dieses Elements (oder zielt darauf ab). Wenn Sie beispielsweise ein Textmodul bearbeiten, können Sie mithilfe der integrierten Einstellungen (z.

Wenn Sie ein Divi-Element (Abschnitt, Zeile oder Modul) mithilfe der erweiterten benutzerdefinierten CSS-Eingabefelder anpassen, entspricht jedes Eingabefeld dem gesamten oder bestimmten Teilen dieses Divi-Elements (oder zielt darauf ab). Die Anzahl der verfügbaren benutzerdefinierten CSS-Boxen hängt von dem Element ab, das Sie gestalten. Ein Textmodul kann nur drei Eingabefelder für benutzerdefinierte CSS-Elemente haben (vorher, Haupt und Nach), aber ein Call-to-Action-Modul enthält zusätzliche Felder für Titel, Beschreibung und Schaltfläche. Dies liegt daran, dass das Modul mehr Teile enthält, auf die innerhalb dieses Modulelements ausgerichtet werden kann.

Hier ist eine Illustration der verschiedenen benutzerdefinierten CSS-Eingabefelder, die für das Call-to-Action-Modul verfügbar sind.

Jedes benutzerdefinierte CSS-Eingabefeld zielt auf eine bestimmte CSS-Klasse innerhalb des Elements ab. Um zu sehen, welche Klasse auf ein bestimmtes Element ausgerichtet ist, fahren Sie einfach mit der Maus über das Element und klicken Sie auf das Fragezeichen-Symbol. Dort sehen Sie die CSS-Klasse, auf die das Ziel ausgerichtet ist.

Daher müssen Sie Ihrem CSS-Snippet im Eingabefeld keine CSS-Klasse hinzufügen. Wenn Sie dies tun, funktioniert der Code nicht.

Fügen Sie stattdessen einfach die CSS-Eigenschaften direkt in das Feld ein, das Sie auf die bereits anvisierte Klasse anwenden möchten.

So fügen Sie benutzerdefinierten CSS zu responsiven Design-Breakpoints hinzu

Um auf die drei wichtigsten Haltepunkte für das responsive Design für eines der CSS-Eingabefelder zuzugreifen, bewegen Sie einfach den Mauszeiger über das Element und klicken Sie auf das Tablettsymbol. Dann sehen Sie die drei Responsive-Design-Registerkarten.

Jetzt müssen Sie nur noch die Registerkarten verwenden, um CSS zu einem der drei Gerätedisplays (Desktop, Tablet und Telefon) hinzuzufügen.

Angenommen, Sie möchten, dass die Werbeschaltfläche für einen Call-to-Action die gesamte Breite des Moduls auf Tablet und Telefon, aber nicht auf Desktop umfasst. Sie würden die Tablett-Registerkarte unter dem Eingabefeld für die Promo-Schaltfläche auswählen und "display: block;" hinzufügen.

Beachten Sie, dass der Divi Builder-Ansichtsmodus bei Auswahl der Tablett-Registerkarte in den Tablet-Ansichtsmodus (eine Breite von 768 Pixeln) wechselt, um einen besseren Eindruck davon zu erhalten, wie Ihr Design in Echtzeit aussehen wird.

Kleinere Geräte erben standardmäßig das CSS von größeren Geräten

Standardmäßig wird der Code, der auf die Registerkarte des Tablets angewendet wird, auch vom Telefondisplay übernommen. Um uns daran zu erinnern, fügt Divi dem Eingabefeld einen grauen Platzhaltercode mit dem gleichen Code hinzu, der dem Tablet-Display hinzugefügt wurde.

Der Grund dafür, dass das Telefondisplay das Tablet-Display erbt, liegt darin, dass der tatsächliche Haltepunkt (Medienabfrage) für das Tablet-Display im Backend auf „max-width: 980px;“ gesetzt ist. Dies bedeutet, dass der dem Tablet hinzugefügte Code auch auf das Telefon angewendet wird, da das Telefondisplay weniger als 980 Pixel breit ist. Wenn Sie also dem Telefon einen anderen Stil zuweisen möchten, müssen Sie dem Eingabefeld auf der Registerkarte Telefon einen zusätzlichen Code hinzufügen.

HINWEIS: Wenn Sie dem Telefondisplay auch benutzerdefiniertes CSS hinzufügen, ändert Divi die Medienabfrage für Tablets im Backend intelligent auf den genaueren Bereich zwischen 768px und 980px (oder max-width: 980px und min-width: 768px).

Was das benutzerdefinierte CSS auf das Backend angewendet wird

Angenommen, wir fügen allen drei responsiven Registerkarten (Desktop, Tablet und Telefon) benutzerdefiniertes CSS hinzu.

Auf dem Desktop positionieren wir die Schaltfläche rechts unten im Modul.

Auf Tablets überschreiben wir den Desktop-Code und spannen die Schaltfläche einfach auf die volle Breite des Moduls.

Auf dem Telefon überschreiben wir das Tablet-CSS und kehren die Anzeige zum Normalzustand zurück.

Wenn wir das CSS im Backend überprüfen, können Sie sehen, dass Divi den Code mit den folgenden Medienabfragen organisiert, damit Sie es nicht tun müssen:

Desktop:

@media only screen and (min-width: 981px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

Tablette:

@media only screen and (max-width: 980px) and (min-width: 768px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: block;
}

Telefon

@media only screen and (max-width: 767px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: inline-block;
}

Wie wird das CSS in Divi gespeichert?

Als Teil der integrierten Geschwindigkeitsoptimierungen von Divi werden alle Stile im Divi Builder (einschließlich des benutzerdefinierten CSS) kombiniert, minimiert und als statische CSS-Datei gespeichert, um das Laden der Seite zu beschleunigen. Wenn Sie also das Hinzufügen von benutzerdefiniertem CSS über ein untergeordnetes Thema umgehen möchten, können Sie die integrierten responsiven CSS-Eingaben nutzen, ohne sich Sorgen machen zu müssen, dass Ihre Website verlangsamt wird.

Weitere Informationen finden Sie in unserem Beitrag zur Beschleunigung Ihrer Divi-Site.

Abschließende Gedanken

Hoffentlich hilft Ihnen dieser Beitrag ein bisschen besser zu verstehen, wie Sie die integrierten benutzerdefinierten CSS-Eingabefelder von Divi nutzen können, um bequeme responsive Designänderungen an Ihrer Website vorzunehmen.

Für die meisten Leute wird es nicht nötig sein, zur Registerkarte "Erweitert" zu gehen, um benutzerdefiniertes CSS zu Ihrem Design hinzuzufügen. Divi verfügt über so viele integrierte Optionen, dass selbst fortgeschrittene Benutzer selten die Notwendigkeit finden, benutzerdefiniertes CSS zu verwenden. Wenn Sie jedoch erweitertes Styling benötigen, ist es hilfreich zu wissen, wie einfach dies in Divi ist.

Welche Erfahrungen haben Sie mit den benutzerdefinierten CSS-Eingaben von Divi gemacht?