Studio Editor: Container verwenden
3 Min. Lesezeit
Container sind responsive Layout-Werkzeuge, die dir helfen, Website-Inhalte zu optimieren und zu strukturieren. Du kannst sie an das Design der Website anpassen und Elemente wie Text, Medien und Buttons anhängen.
In diesem Artikel erfährst du mehr über folgende Themen:
Container zu einer Website hinzufügen
Beginne damit, einen Container hinzuzufügen, der den Design- und Inhaltsanforderungen deines Kunden entspricht. Du kannst aus einer Reihe von vorgefertigten Containern und Mouseover-Containern wählen oder mit einem leeren Design von vorn beginnen.
Um einen Container hinzuzufügen:
- Klicke auf der linken Seite des Editors auf Elemente hinzufügen
. - Wähle Container aus.
- Wähle einen Container-Stil (Leer, Design oder Mouseover).
- Klicke und ziehe den ausgewählten Container, um ihn zur Seite hinzuzufügen.
Container gestalten
Passe das Design des Containers an das Design deiner Website an. Du kannst die Hintergrundfarbe ändern, den Radius festlegen und vieles mehr.
Um einen Container zu gestalten:
- Wähle den entsprechenden Container aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen
.
- Wähle unter Design aus, wie du den Container anpassen möchtest:
- Hintergrund: Lege die Hintergrundfüllfarbe fest und gestalte sie mehr oder weniger sichtbar.
- Glaseffekt: Wende einen Glaseffekt auf den Container an und lege die Intensität der Unschärfe fest.
- Rand: Füge dem Container einen Rand hinzu und verwende die Optionen, um die Größe, Farbe und Deckkraft festzulegen.
- Ecken: Passe den Radius der Ecken des Containers (in px) an, um sie runder oder eckiger zu gestalten.
- Schatten: Füge einen Schatteneffekt auf dem Container hinzu und passe diesen an.
Elemente an einen Container anhängen
Wenn du Elemente in einem Container platzierst, werden sie automatisch angehängt. Das bedeutet, dass du den Container und die angehängten Elemente als Ganzes ziehen und zusammen im Ebenen-Panel anzeigen kannst.
Um ein Element an einen Container anzuhängen:
- Klicke auf das entsprechende Element.
- Ziehe ihn an die gewünschte Position im Container.
- Lasse das Element fallen, wenn du die Nachricht Anhängen siehst.
Ein Raster auf einen Container anwenden
Wende erweitertes CSS Grid auf den Container an, um sein Layout zu strukturieren. Du kannst die Anzahl der Zeilen und Spalten auswählen und ihre Größe festlegen, indem du von responsive Maßeinheiten verwendest (z. B. fr, Min/max, %)
Um ein Raster auf einen Container anzuwenden:
- Wähle den entsprechenden Container aus.
- Klicke auf das Symbol für Weitere Aktionen
. - Klicke auf Erweitertes CSS Grid anwenden.
- Wähle ein Layout aus dem Aufklappmenü 1x1 aus.
Tipp: Wähle Sonstige, wenn du deine eigene Anzahl an Zeilen und Spalten festlegen möchtest.
War das hilfreich?
|