Eine Anleitung zum Verstehen und Verwenden der festen Position in Divi

Die feste Positionseigenschaft ist ein entscheidender Positionstyp, um die richtige Verwendung zu erlernen. Feste Elemente sind wichtig, um die Benutzererfahrung auf Ihrer Website zu verbessern. Feste Kopfzeilen bleiben beim Scrollen durch eine Webseite sichtbar und erleichtern den Benutzern die Navigation auf der Site. Feste Seitenleisten halten wichtige CTAs und E-Mail-Optionen sichtbar und steigern die Conversions. Das gleiche gilt für feste Benachrichtigungsleisten, Popups und viele andere. Sobald wir verstehen, wie die feste Position funktioniert und wie man sie in Divi richtig verwendet, haben wir ein leistungsstarkes Design-Tool, um unsere Divi-Sites auf die nächste Stufe zu heben.

In diesem Beitrag behandeln wir:

• Ein Überblick über die vier Positionierungsarten von Divi
• Wie die feste Position ein Element in Divi . „positioniert“
• Verwenden der Optionen für feste Positionen in Divi
• Tipps, die Sie bei der Verwendung der festen Position beachten sollten
• 6 hilfreiche Möglichkeiten, die feste Position in Divi . zu verwenden

Hör zu!

Überblick über die vier Positionierungsarten von Divi

Die feste Position ist einer von vier Positionstypen, die in den Positionsoptionen von Divi verfügbar sind. Hier ist ein kurzer Überblick über jeden unten.

Statisch (Standard)

Statische Elemente sind technisch gesehen nicht „positioniert“, da sie den normalen Fluss oder die normale Reihenfolge der Elemente auf der Seite beibehalten und nicht wie andere positionierte Elemente auf die Eigenschaften oben, rechts, unten und links reagieren (weshalb nein Offsets sind in Divi für Elemente in der statischen/Standardposition verfügbar). Wenn wir in Divi die Standardposition für ein Modul auswählen, wählen wir die statische Position. Es ist auch erwähnenswert, dass einige Elemente in Divi (wie Zeilen und Abschnitte) standardmäßig eine relative Position haben (nicht die statische Position).

Relativ

Relativ positionierte Elemente sind insofern wie statische Elemente, als sie dem normalen Seitenfluss folgen. Der Hauptunterschied besteht darin, dass relativ positionierte Elemente mithilfe der Eigenschaften top, bottom, left und right positioniert werden können. Außerdem können sie im Gegensatz zu statischen Elementen auch mithilfe der Z-Index-Eigenschaft positioniert werden.

Weitere Informationen finden Sie in unserem Leitfaden zum Verständnis und zur Verwendung der relativen Position in Divi.

Absolut

Ein absolut positioniertes Element bricht aus dem normalen Dokumentenfluss aus und somit wird auf der Seite kein eigentlicher Platz für das Element geschaffen. Wir können es uns als ein Element vorstellen, das über den anderen Elementen auf der Seite schwebt, die tatsächlichen Platz einnehmen. Er wird relativ zum nächstgelegenen übergeordneten Container positioniert.

Weitere Informationen finden Sie in unserem Leitfaden zum Verständnis und zur Verwendung der absoluten Position in Divi.

Fest

Wie die absolute Position brechen Elemente mit fester Position aus dem normalen Seitenfluss aus und haben keinen tatsächlichen Platz innerhalb der Seite. Der Hauptunterschied zwischen absolut und fest besteht darin, dass die feste Position relativ zum Browserfenster oder Ansichtsfenster ist. Mit anderen Worten, egal wo sich das Element im normalen Fluss der Seite befindet, sobald es eine feste Position hat, bezieht sich seine Position nun direkt auf das Browserfenster. Wir können die Eigenschaften top, bottom, left und right verwenden, um das Element im Ansichtsfenster zu positionieren. Da feste Elemente oft hinter oder vor anderen Elementen auf der Seite schweben, hilft Z Index dabei, feste Elemente über anderen anzuordnen.

HINWEIS: Es gibt eine andere Art der Positionierung in CSS, die Sticky genannt wird. Ein klebrig positioniertes Element verhält sich wie ein relativ positioniertes Element, bis wir zu seinem Container scrollen (an einem Punkt, der durch den oberen Wert bestimmt wird). Dann wird das Element fixiert (oder stecken geblieben), bis der Benutzer zum Ende des Containers scrollt. Die Sticky-Position kann jedoch etwas unvorhersehbar sein, da andere Faktoren die Funktionalität beeinträchtigen können. Die Sticky-Positionierung wird in naher Zukunft in Divi integriert.

Wie die feste Position ein Element in Divi . „positioniert“

Wie in der Übersicht erwähnt, ähnelt der feste Positionstyp der absoluten Position, da das Element aus dem normalen Fluss des Dokuments (dem HTML auf der Seite) ausbricht. Das Ausbrechen des Dokumentflusses bedeutet, dass das Element keinen tatsächlichen Platz hinterlässt, an dem es sich ursprünglich auf der Seite befand. Hier ist eine Abbildung eines Moduls, bei dem eine relative Position in eine feste Position geändert wird. Beachten Sie, wie der ursprünglich erstellte/eingenommene Bereich innerhalb der Spalte jetzt verschwunden ist und das Modul jetzt oben links im Browserfenster fixiert ist.

Der große Unterschied zwischen fest und absolut besteht darin, dass die feste Position im Gegensatz zur absoluten Position relativ zum übergeordneten Container relativ zum Browserfenster oder Ansichtsfenster ist. Aus diesem Grund sagen feste Elemente in der Ansicht, wenn der Benutzer eine Seite nach unten scrollt, und absolut positionierte Elemente möglicherweise nicht.

Hier ist eine Illustration, wie die drei Positionen (relativ, absolut und fest) beim Scrollen auf der Seite funktionieren. Beachten Sie, dass das feste Modul beim Scrollen des Benutzers an Ort und Stelle bleibt (relativ zum Browser positioniert).

Verwenden der Optionen für feste Positionen in Divi

In Divi können Sie jedem Element eine feste Position zuweisen, indem Sie die Option feste Position in der Gruppe Positionsoption auf der Registerkarte Erweitert auswählen. Nach der Auswahl der relativen Position finden Sie auch die zusätzlichen Fixpositionsoptionen (Lage, Offsets, z-Index).

Anpassen der Basisposition der festen Position

Sobald Sie die feste Position ausgewählt haben, können Sie über die visuelle Standortschnittstelle einen Basisstandort auswählen. Je nachdem, welche Basisposition Sie auswählen, werden neue Steuerelemente für den X- und Y-Versatz verfügbar.

Verwenden von Offsets mit der festen Position

Mit den Steuerelementen Vertikaler und Horizontaler Versatz können Sie die Basisposition Ihres festen Elements entlang seiner Positionsachse weiter anpassen.

Der Offset-Ursprung und die Offset-Werte arbeiten zusammen, um unser Element an einer beliebigen Stelle im Browser-Ansichtsfenster zu positionieren. In diesem Beispiel haben wir ein Modul mit einer festen Position, einem Offsetursprung oben links, einem vertikalen Offset von 50px und einem horizontalen Offset von 50px. Beachten Sie, wie die Versatzwerte das Element horizontal und/oder vertikal vom Versatzursprung wegbewegen (weg von der oberen linken Ecke des Browsers).

Wenn Sie horizontale und vertikale Versatzwerte in Divi (wie die Eigenschaften oben, unten, links und rechts in CSS) für ein festes Element verwenden, ist es wichtig, sich daran zu erinnern, dass diese Werte das Element relativ zum Browser-Ansichtsfenster positionieren. Die Z-Index-Eigenschaft ist auch bei einem festen Element praktisch. Da Sie möchten, dass diese festen Elemente die meiste Zeit vor den anderen Elementen auf der Seite bleiben, müssen Sie ihm einen hohen Z-Index-Wert (z. B. 9999) zuweisen.

Verwenden Sie verschiebbare Anker, um feste Elemente auf der Seite neu zu positionieren

Wenn Sie die Position eines Elements in Fest ändern, wird ein verschiebbarer Anker angezeigt, wenn Sie mit der Maus über das Element fahren. Dadurch können Sie das Element ziehen, um seine Position zu ändern. Wenn Sie das Element neu positionieren, wird sein X- und Y-Versatz innerhalb der Moduleinstellungen angepasst.

Ein paar Tipps zur Verwendung der festen Positionierung

Feste Elemente für Mobilgeräte anpassen

Vergessen Sie nicht, dass Sie für responsive Designs verschiedene Positionen und Versätze auf verschiedenen Gerätedisplays festlegen können. Beispielsweise möchten Sie möglicherweise eine feste Kopfzeile auf dem Desktop, aber nicht auf dem Handy. Und feste Seitenleisten machen für den Desktop Sinn, sind aber auf einem Handy-Display nicht wirklich möglich. Um den Wechsel vorzunehmen, können Sie die Positionsoption in Divi auf dem Tablet und Telefon auf Relativ einstellen. Dadurch wird es wieder an seine ursprüngliche Position im Fluss des Dokuments einrasten.

Schaffen Sie Platz für feste Elemente

Da die feste Position Elemente außerhalb des Dokumentenflusses platziert, sitzen sie über dem Inhalt auf der Seite. Wenn Sie also nicht möchten, dass das feste Element Inhalte ausblendet, müssen Sie Platz für das feste Element schaffen. Dies kann auf verschiedene Weise erfolgen, wird jedoch normalerweise durch Hinzufügen von Auffüllung oder Rand zum Seitenlayout erreicht.

Ein gutes Beispiel ist eine feste Seitenleiste. Wenn Sie Ihrer Seitenvorlage in Divi eine feste Seitenleiste hinzufügen möchten, müssen Sie zunächst sicherstellen, dass die Breite des Hauptinhaltsbereichs verringert wird, um den erforderlichen Platz für die feste Seitenleiste zu schaffen. Wenn Sie also einen Abschnitt verwenden, um die Seitenleiste zu erstellen, können Sie dem Abschnitt eine feste Position, eine Höhe von 100 % und eine Breite von 300 Pixeln zuweisen.

Dann müssten Sie dem anderen Abschnitt, der das Post-Content-Modul (den Hauptinhaltsbereich der Seite) enthält, einen linken Rand von 300px geben, um die Breite der Seitenleiste auf der linken Seite der Seite aufzunehmen.

Verwenden Sie einen höheren Z-Index für feste Elemente

Sofern dem festen Element nicht ausreichend Platz auf Ihrer Seite eingeräumt wurde, überlappt es den anderen Inhalt auf der Seite. In den meisten Fällen möchten Sie, dass das fixierte Element (oben) sichtbar bleibt, da es beim Scrollen mit anderen Elementen auf der Seite kollidiert. Dazu können Sie Ihrem festen Element einen höheren Z-Index hinzufügen, um sicherzustellen, dass es über allen anderen Inhalten im Z-Raum bleibt. Wenn Sie nicht wissen, welchen Wert Sie angeben sollen, können Sie eine große Zahl wie 9999 hinzufügen.

6 Möglichkeiten, die feste Position zu verwenden

#1 Feste Header

Eine der besten Anwendungen der neuen Optionen für feste Positionen ist die Erstellung von festen Kopfzeilen. Mit dem Divi Theme Builder können Sie einen vollständig benutzerdefinierten Header erstellen und den gesamten Abschnitt korrigieren.

So posten Sie

Hier ist ein Beitrag zum Erstellen eines festen Headers in Divi:

• So erstellen Sie eine feste Kopfzeile mit den Positionsoptionen von Divi

#2 Fixe Fußzeilen

Ähnlich wie feste Kopfzeilen profitieren auch einige Websites von festen Fußzeilen oder Fußzeilen. Dies ermöglicht es Benutzern, prominente Informationen an einem subtileren Ort im Vordergrund zu halten. Feste Fußzeilen eignen sich hervorragend für Mobiltelefone, da sie sehr nah an den Daumen sind, die es jucken, auf eine Schaltfläche zu klicken.

How-to-Beiträge

Hier sind ein paar Beiträge zum Erstellen einer festen Fußzeilenleiste in Divi:

• So erstellen Sie eine feste Fußzeilenleiste für Ihr Divi-Theme
• So erstellen Sie mit Divi . feste mobile Fußzeilen
• So erstellen Sie eine (feste) mobile Kontaktleiste in Divi

#3 Feste Seitenleisten/vertikale Menüs

Feste Seitenleisten halten Dinge wie Menüs, E-Mail-Opt-Ins und CTAs für Besucher bereit, während sie auf Ihrer Website navigieren. Und wenn Sie möchten, können Sie der festen Seitenleiste einen Überlauf-Scroll hinzufügen, um eine schöne scrollbare feste Seitenleiste mit Tonnen von Inhalten zu erhalten.

How-to-Beiträge

Hier ist ein Beitrag zum Erstellen einer festen Seitenleiste in Divi:

• So erstellen Sie mit Divi . eine reaktionsschnelle feste Seitenleiste mit Smooth-Scrolling-Ankerlinks
• So erstellen Sie ein vertikales (festes) Navigationsmenü für Ihre Divi-Website

#4 Feste Back-to-Top-Buttons

Back-to-Top-Schaltflächen befinden sich normalerweise unten rechts auf einer Website und stehen den Benutzern jederzeit zum Anklicken zur Verfügung, um sie an den Seitenanfang zurückzugeben.

Hier ist ein Beitrag zum Erstellen von festen Back-to-Top-Schaltflächen in Divi:

• So erstellen Sie benutzerdefinierte Sticky (fixed) Back to Top Designs mit Divi

#5 Feste Menüs

Die meisten Menüs, die eingeschoben oder eingeblendet werden, haben eine feste Position. Diese eignen sich auch hervorragend für Mobilgeräte.

Hier ist ein Beitrag zum Erstellen eines festen Menüs in Divi:

• So erstellen Sie ein responsives Slide-In-Menü mit Divis Theme Builder

#6 Behobene Benachrichtigungsfelder, Calls-to-Action, E-Mail-Opt-Ins usw.

Hier ist ein Beitrag zum Erstellen einer festen Benachrichtigungsbox in Divi:

• So fügen Sie einer beliebigen Ecke Ihrer Seitenvorlage in Divi . einen schließbaren Slide-In-Call-to-Action hinzu

Abschließende Gedanken

Sie werden in der Webentwicklung nicht sehr weit kommen, bevor Sie auf die Notwendigkeit stoßen, die feste Position zu verwenden. Es wird in vielen Schlüsselelementen verwendet, aus denen eine Website besteht. In Divi ist die feste Position nur einen Klick entfernt, aber es ist wichtig zu verstehen, wie sie funktioniert, um sie gut zu verwenden. Hoffentlich hat Ihnen dieser Artikel geholfen zu verstehen, wie Sie die feste Position in Divi besser nutzen können, damit Sie Ihr nächstes Projekt zu neuen Höhen führen können.

Welche Erfahrungen haben Sie mit dem Typ Festanstellung gemacht?

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!