EasyBlog Panel Block

Der neue Card-/Panel-Block befindet sich in der Elements-Gruppe und kann wie jeder andere Block ganz einfach im Layout platziert werden.

Es stehen 8 grundlegende Styles zur Verfügung. Die Farben (auch Textfarbe), der Innenabstand der Panels sowie die Ecken sind individuell anpassbar. Gelungene Panels können ganz einfach als Vorlagen im Composer gespeichert und wiederverwendet werden.

Die Hintergrundfarbe des Blocks ist frei wählbar. Wenn sie im Abschnitt "Individual color" gesetzt ist, wird die Farbe des grundlegenden Stils überschrieben und die individuelle Farbe übernommen. Rechts des Farbwählers ist ein Reset-Button. Wenn die individuelle Farbwahl zurückgesetzt wird (Klick auf den Reset-Button), erscheint das Panel wieder in der Farbe des gewählten Stils. Genau gleich verhält es sich mit der Einstellung zur Textfarbe.

Die Ecken können abgerundet werden. Die Grundkonfiguration sieht 0px, 3px, 5px, 8px, 12px und 20px vor, es sind allerdings auch individuelle Werte möglich (zwischen 0px und 100px). Wenn bei "Individual settings" ein Wert gesetzt ist, wird der unter "Border radius" gewählte überschrieben.

Der Innenabstand (padding) hat die Grundeinstellungen 0px, 10px, 15px, 20px, 30px und 40px. Es sind, wie beim Eckenstil, individuelle Werte möglich. Wenn der individuelle Wert gesetzt ist, wird der unter "Padding" gewählte überschrieben. 

Um ganz oben im Panel "Hero"-Fotos oder Videos ohne Padding platzieren zu können, gibt es eine Einstellung "First element without padding". Wenn diese Checkbox aktiviert ist, wird das Padding beim ersten Element im Panel entfernt.

Wie jeder Composer-Block kann auch der Panel-Block verschoben, als Block-Template gespeichert, dupliziert oder gelöscht werden. Da es sich beim Panel-Block um einen verschachtelbaren Block handelt, sind unbegrenzt weitere Elemente (Blocks) integrierbar. Dies geschieht mittels Klick auf den Plus-Button im Block oder über das Platzieren eines beliebigen Elements innerhalb des Panel-Blocks.

Die Darstellung im Frontend wird grundsätzlich vom gewählten Site-Template übernommen. Durch gleiche Schriftart, Grundfarben, ggf. Margin-Einstellungen etc. erscheint das Panel als integriertes und nicht als fremdes Element. 

Im Composer sind alle im Panel integrierten Elemente im Strukturbaum sicht- und auswählbar: Sämtliche spezifischen Element-Einstellungen können wie gewohnt vorgenommen werden.

Tipp: Die Breite des Panels kann problemlos mittels Layout-Block "Columns" angepasst werden. Dazu einfach das Panel in eine Spalte mit der Breite deiner Wahl ziehen.

So könnte ein fertiges Panel im Frontend aussehen. Der grosse Vorteil: Es ist, auch vom ausgegebenen Code her, eine Einheit, die mehrere Unterelemente enthalten kann. Dabei sind deiner Fantasie kaum Grenzen gesetzt. 

Die Eckenrundung wird auf das erste Element ohne Padding einwandfrei übernommen, so dass keine unschönen Überlappungen entstehen.

Auch Layout-Elemente innerhalb des Panels sind möglich, beispielsweise ein Spalten-/Column-Element, welches den Innenbereich des Panels nochmals nach deiner Präferenz unterteilt. So sind weitere verschachtelte Elemente nebeneinander problemlos möglich.

Auch bei weiter ineinander verschachtelten Elementen ist die Struktur klar und hierarchisch sichtbar, die einzelnen Blöcke wähl- sowie frei anpassbar.