Container

Ein zentraler Baustein in Framer (und im Webdesign allgemein) ist der Container, auch Parent Layer genannt.

Container dienen dazu, Elemente zu gruppieren und zu strukturieren – zum Beispiel Überschrift und Textblock. Elemente in einem Parent Layer nennt man auch Children bzw. Child-Elemente. Container bestimmen Abstände zwischen den Elementen, nach außen, Ausrichtung der Elemente und Layoutform (Liste, Spalten, Raster oder neuerdings sog. Masonry-Grids, für Bildergalerien gut geeignet). Diese Eigenschaften kontrollierst du im Property-Panel, indem du den jeweiligen Container auswählst. Überliegende Container kannst du genauso stylen wie die innerliegenden Elemente selbst.

Ein Container entsteht in Framer aus einem sog. Frame. Diesen erstellst du mithilfe des Buttons neben dem Plus in der oberen Leiste oder mit der Taste “F”. Nun kannst du im Canvas den Frame aufziehen. Im Property-Panel musst du nun auf “Layout” klicken, um aus dem Frame ein Layout zu machen. In diesem Untermenü kannst du nun das Verhalten des Containers bestimmen (wie oben erläutert). Jetzt kannst du innerhalb des Containers Textblöcke oder weitere Frames / Container einfügen.

Alternativ kannst du in dem Menü neben dem Plus-Icon direkt den gewünschten Container bestimmen und im Canvas aufziehen. Dieser enthält dann aber schon Child-Elemente.

Beispiel:

Ein Textblock besteht aus einem Container, der zwei Elemente enthält – eine Überschrift und einen Titel. Der Container sorgt dafür, dass beide immer untereinander bleiben, egal wie sich die Bildschirmgröße ändert.

Im Grunde besteht eine komplette Webseite (in Framer) aus einer Hierarchie von Containern, die alle Inhalte enthalten und strukturieren.