Größe

Im Größe-Reiter kannst du die Maße von verschiedenen Elementen bestimmen.

Dabei gibt es unterschiedliche Maßeinheiten. Die gängiste ist Pixel (PX). Häufig werden aber auch Prozent (%) und Viewport Height (VH) verwendet. Hier mehr über Maßeinheiten.

Auto

Die meisten Elemente in Chimpify sind standardmäßig auf “Auto” gesetzt. Dementsprechend sind sie genau so breit und so hoch wie ihr Inhalt. Die Breite und Höhe passt sich also automatisch an.

Eine Sektion ist z.B. genau so breit und so hoch, wie die Elemente, die sich darin befinden:

groesse sektion so hoch wie elemente

Du siehst, je mehr Elemente in der Sektion sind, desto höher wird sie:

groesse je mehr elemente sektion

Außerdem passt sich die Breite und Höhe je nach Bildschirmgröße automatisch an:

groesse sektion breite hoehe automatisch

Hinweis

Generell solltest du vorsichtig sein, wenn du mit festen Breiten und Höhen arbeitest.

Wenn du z.B. einem Container eine Maximalbreite von 600px, aber einem darin befindlichen Button eine Breite von 800px gibst, ragt der Button logischerweise über den Container hinaus:

groesse feste breite button

Bei mobilen Endgeräten wird das Ganze noch schlimmer. Desktops haben einen breiten Bildschirm. Mobile Endgeräte dagegen einen schmalen. Deshalb hast du unter Mobile z.B. nichtmal ausreichend Platz, um den 800px breiten Button anzuzeigen. Daher muss dein Besucher nach rechts scrollen:

groesse button mobile ragt raus

Sehr unschön. Deshalb ist es besser, wenn du alles auf “Auto” lässt und nur in Ausnahmefällen feste Größenangaben machst. Arbeite anstelle dessen lieber mit Innenabständen, um die Größe von Elementen zu bestimmen:

groesse button innenabstaende

Breite

Hiermit definierst du die feste Breite für ein Element. Zum Beispiel, wenn du einem Bild eine feste Breite geben willst:

groesse bild feste breite

Beachte hier, dass die Höhe auf “Auto” steht und sich dementsprechend automatisch je nach Breite anpasst.

Höhe

Hiermit definierst du die feste Höhe für ein Element. Zum Beispiel, wenn du einer Navigation eine feste Höhe geben willst:

groesse navigation feste hoehe

Beachte hier, dass die darin befindlichen Elemente mithilfe der Layout-Optionen ausgerichtet sind und sich je nach Höhe automatisch vertikal mittig ausrichten.

Max. Breite

Hiermit definierst du die Maximalbreite für ein Element. Zum Beispiel ist ein Container standardmäßig maximal 1.200px breit, zieht sich bei einer kleineren Bildschirmauflösung aber auf die jeweilige Breite zusammen:

groesse container max breite

Max. Höhe

Hiermit definierst du die Maximalhöhe für ein Element. Zum Beispiel, wenn du eine Sektion hast, die maximal 800px hoch sein darf, weil das Hintergrundbild maximal 800px hoch ist:

groesse sektion max hoehe

Min. Breite

Hiermit definierst du die Mindestbreite für ein Element. Zum Beispiel möchtest du ein Bild haben, dass mindestens 200px breit sein soll, aber nicht kleiner:

groesse bild min breite

Min. Höhe

Hiermit definierst du die Mindesthöhe für ein Element. Zum Beispiel möchtest du einer Header-Sektion eine Mindesthöhe von 100vh geben. Dementsprechend ist die Sektion immer mindestens genau so hoch wie der Bildschirm:

groesse sektion min hoehe

Brandneu

Neue Layout-Elemente

Chimpify

Plattform

Powered by Chimpify