Einen Positioned-Layers-Container hinzufügen.
Nutzen Sie Positioned Layers, wenn Elemente sich überlappen oder an einer exakten Stelle sitzen sollen, was Zeilen und Spalten nicht können. Sie erhalten einen Canvas, auf dem Sie jedes Element hinziehen, wohin Sie wollen, etwa eine Überschrift über ein Foto. Das Beispiel legt eine weiße Tag-der-offenen-Tür-Überschrift über ein Bild. Für gewöhnliche Inhalte nebeneinander lassen sich Zeilen und Spalten auf Telefonen leichter ordentlich halten.
Einen Positioned-Layers-Container hinzufügen
- Fahren Sie über die Spalte und klicken Sie auf + in ihrer Kontrollleiste, oder auf das + in der Mitte einer leeren Spalte, um den Element-Picker zu öffnen.
- Klicken Sie im Tab Layout auf Positioned layers.
- Seine Einstellungen öffnen sich zuerst. Stellen Sie Height so ein, dass Ihre höchste Ebene passt, und klicken Sie auf Save. Ein leerer Canvas erscheint.
- Fahren Sie über den Canvas und klicken Sie auf + in seiner Kontrollleiste, um ein Element hinzuzufügen, etwa Text oder ein Image. Jedes hinzugefügte Element wird eine Ebene, die Sie positionieren können.
Was Sie sehen
Der Canvas behält die eingestellte Höhe, und jede Ebene sitzt, wo Sie sie platziert haben, über oder unter den anderen. Besucher sehen die Komposition wie im Editor. Positionen werden als Anteil des Canvas gespeichert, sodass eine Ebene ihren Platz behält, wenn der Canvas schmaler wird. Text behält seine Größe, außer Sie schalten Responsive ein.
Ihre Positioned Layers einrichten
Öffnen Sie die Einstellungen über More > Settings in der Kontrollleiste von Positioned layers.
| Einstellung | Funktion | Standard |
|---|---|---|
| Width | Canvas-Breite, etwa 100 % oder 600px | 100% |
| Height | Canvas-Höhe in Pixeln | 500 |
| Responsive | Skaliert Canvas-Höhe und Text mit der Canvas-Breite, sodass die Komposition auf kleinen Bildschirmen ihre Proportionen behält | Off |
Ebenen positionieren
- Select: Klicken Sie auf eine Ebene. An ihren Ecken und Kanten erscheinen Anfasser.
- Move: Ziehen Sie die Ebene an ihrem Namen in ihrer Kontrollleiste, etwa Text oder Image. Ebenen bleiben im Canvas.
- Resize: Ziehen Sie an einem Anfasser der gewählten Ebene.
- Add at a spot: Doppelklicken Sie auf eine leere Stelle des Canvas. Der Element-Picker öffnet sich, und das neue Element landet, wo Sie geklickt haben.
Das More-Menü jeder Ebene hat vier zusätzliche Einträge. 100% width und 100% height strecken die Ebene über den Canvas. Bring forward und Send backward bewegen sie über oder unter die anderen Ebenen.
Wenn Sie es nicht sehen
- Eine Ebene bewegt sich nicht, wenn Sie sie ziehen. Ebenen bewegen sich nur an dem Anfasser mit ihrem Namen in der Kontrollleiste. Fahren Sie über die Ebene und ziehen Sie an diesem Anfasser.
- Eine Ebene versteckt sich hinter einer anderen. Sie liegt tiefer im Stapel. Öffnen Sie das More-Menü der Ebene und wählen Sie Bring forward.
- Ebenen überlappen oder ragen auf Telefonen hinaus. Responsive ist aus, sodass Canvas-Höhe und Text ihre Größe behalten. Schalten Sie Responsive in den Einstellungen von Positioned layers ein.
- Positioned layers fehlt im Picker in einem Canvas. Ein Canvas kann keinen weiteren Canvas enthalten. Fügen Sie das neue Positioned layers-Element stattdessen in einer Spalte hinzu.
- Positioned layers fehlt überall im Picker. Ihr DXPR Builder-Benutzerprofil lässt es aus. Ein Administrator wählt Layers unter Elements in Ihrem Profil unter
/admin/dxpr_studio/dxpr_builder/profile.
Wie geht es weiter?
- Sections: Geben Sie dem Bereich um den Canvas eine Hintergrundfarbe oder ein Hintergrundbild.
- Verschachtelung: Ebenen mit Zeilen und Spalten in komplexeren Layouts kombinieren.
- Animations-Tab: Jede Ebene mit eigenem Auftrittseffekt erscheinen lassen.