Freie Elementorpositionierung: Relative und absolute Position für jedes Element
Die Positionierungs-Erweiterung in Master-Addons ist kostenlos und fügt der Registerkarte Erweitert jedes Widgets, jeder Spalte, jedes Abschnitts und jedes Containers ein Positionierungsfeld hinzu Wählen Sie Relativ oder Absolut, dann setzen Sie die Offsets Oben, Rechts, Unten und Links in px, em oder %, mit separaten Werten für Desktop, Tablet und Telefon. Verwenden Sie es für Abzeichen, die ein Foto überlappen, Formen, die aus einem Abschnitt herausbrechen, oder an Ort und Stelle angestoßene Etiketten.
Relative, absolute und statische Positionierung
Wählen Sie den Positionstyp, der zum Auftrag passt Relativ bewegt ein Element von seinem normalen Punkt, ohne seine Nachbarn zu verschieben Absolute platziert es bei exakten Offsets innerhalb des nächstgelegenen positionierten übergeordneten Elements Statisch und Standard halten den normalen Seitenfluss Der Positionstyp kann pro Gerät unterschiedlich sein, sodass sich ein Element auf dem Desktop überlappen und im Fluss eines Telefons sitzen kann.
- Relative Positionierung: Feinabstimmung der Ausrichtung, z. B. Verschieben eines Symbols um einige Pixel nach links.
- Absolute Positionierung: Platzieren Sie Abzeichen, dekorative Formen oder Etiketten überall innerhalb eines Abschnitts.
- Brauchen Sie etwas, das Sie beim Scrollen der Besucher auf den Bildschirm pinnen? Verwenden Sie die Option Fixed in der Elementor-eigenen Positionseinstellung auf Widgets und Containern.
Offsets von allen Seiten, plus von Center
Setzen Sie oben, rechts, unten und links in px, em oder %, einschließlich negativer Werte, die ein Element über den Rand seines Elternteils hinausschieben Legen Sie ein “NEUES” Abzeichen 10 px von oben und 15 px von rechts auf einer Produktkarte ab Die Option Von Zentrum versetzt ein Element aus der horizontalen Mitte seines Elternteils, was bei zentrierten Überlappungseffekten hilft.
- Vierseitige Steuerung: Abstände von allen vier Kanten des übergeordneten Elements festlegen.
- Von Mitte: Position von der Mitte des Elternteils statt vom linken Rand.
- Z-Index pro Gerät: Entscheiden Sie, welches Element oben sitzt, wenn sich Dinge überlappen.
- Das Panel warnt Sie davor, Left und From Center auf demselben Element zu kombinieren.
Elementorpositionierung vs. Master-Addons-Positionierung
Beide sind kostenlos, und sie lösen leicht unterschiedliche Probleme Verwenden Sie diese Tabelle, um die richtige für ein Element auszuwählen Für mehr Layout-Steuerung, paaren Sie Positionierung mit Container-extrasoder Bewegung hinzufügen mit Transformiert (Pro).
| Elementorposition | Positionierung von Master-Addons | |
|---|---|---|
| Preis | Kostenlos | Kostenlos |
| Positionstypen | Standardmäßig, absolut, behoben | Standardmäßig, statisch, relativ, absolut |
| Versätze | Eine horizontale und eine vertikale | Oben, rechts, unten, links und von der Mitte |
| Positionstyp pro Gerät | Nein | Ja |
| Arbeitet an | Widgets und Container | Widgets, Container, Abschnitte und Spalten |
| Bleibt beim Scrollen auf dem Bildschirm | Ja, mit Fixed | Nein |
So überlappen Sie Elemente in Elementor mit Positionierung
Dieses Beispiel legt ein “Sale” - Abzeichen über die rechte obere Ecke eines Produktbildes, die gleichen Schritte funktionieren für Formen, Symbole und Etiketten.
- Stellen Sie sicher, dass die Positionierungs-Erweiterung im Master Addons-Dashboard eingeschaltet ist.
- Stellen Sie das Bild und das Badge-Widget in denselben Container.
- Wählen Sie den Container aus, gehen Sie zu Erweitert > Positionieren und stellen Sie Positionstyp auf Relativ ein.
- Wählen Sie das Abzeichen aus, stellen Sie Positionstyp auf Absolut ein und stellen Sie dann oben und rechts auf 10 px ein.
- Stellen Sie den Z-Index des Abzeichens auf 2 ein, damit er über dem Bild bleibt.
- Wechseln Sie zur Tablet - und Mobilansicht und passen Sie die Offsets für jeden Bildschirm an.
Möchten Sie, dass die gesamte Karte anklickbar ist? hinzufügen Wrapper Link Zum Container Für alles, was das Panel nicht abdeckt, schreiben Sie Ihre eigenen Regeln mit Benutzerdefiniertes CSS.
Häufig gestellte Fragen zur Positionierung
Wie unterscheidet sich dies von der eigenen Positionseinstellung des Elementors?
Die Positionseinstellung von Elementor auf Widgets und Containern bietet Standard, Absolute und Fixed, mit einem horizontalen und einem vertikalen Versatz Die Master Addons-Erweiterung fügt Relativ und Statisch hinzu, lässt Sie alle vier Seiten einstellen, fügt einen From Center-Offset hinzu, lässt den Positionstyp pro Gerät ändern, und arbeitet auch an klassischen Abschnitten und Spalten. Es enthält nicht Fixed, also verwenden Sie die Einstellung von Elementor für Elemente, die während des Scrollens auf dem Bildschirm bleiben sollen.
Wenn ich Absolute Positionierung verwende, zu was ist es "relativ" positioniert?
Ein absolut positioniertes Element wird innerhalb des nächsten Elternteils platziert, dessen Position nicht statisch ist, wenn kein Elternteil eine Position eingestellt hat, werden die Offsets von einem Elternteil weiter oben auf der Seite gemessen, und das Element kann irgendwo unerwartet landen Um das zu vermeiden, wählen Sie den Behälter oder die Spalte, die das Element hält, und stellen Sie zuerst seinen Positionstyp auf Relativ ein.
Funktioniert das auf Mobilgeräten und Tablets richtig?
Ja. Positionstyp, alle vier Offsets, From Center und Z-Index akzeptieren jeweils separate Werte für Desktop, Tablet und Mobilgerät Ein Element, das 100 px von links auf dem Desktop platziert ist, kann von einem Telefonbildschirm fallen, also wechseln Sie zu den Tablet - und Mobilansichten und passen Sie die Nummern dort an Sie können auch Positionstyp auf Static auf Mobil setzen, um das Element wieder in das normale Layout zu bringen.
Kann ich damit einen einzigartig geformten Ausschnitt machen oder aus einem Behälter ausbrechen?
Ja. Stellen Sie den Behälter auf Relativ, legen Sie ein Bild oder eine Form hinein, stellen Sie dieses Element auf Absolut ein und geben Sie ihm einen negativen Versatz wie Links: -50 px. Das Element hängt über dem Rand des Behälters, so werden die meisten überlappenden Helden- und Kartendesigns gebaut.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
Post-/Seitenduplikator
