GenerateBlocks Tutorial 2 | Gestaltung der Blöcke

GenerateBlocks Tutorial – Teil 2

In diesem Teil des Beitrags über GenerateBlocks wird beschrieben, wie Sie die Blöcke gestalten können. Abhängig von der Art des Blocks haben Sie die Möglichkeit, die Typografie, die Innen- und Außenabstände, die Hintergrund- und die Schrift und Button-Farben anzupassen. Darüber hinaus können Sie spezielle Hintergründe und Icons einfügen.

Typografie

Hier passen Sie die Schrift bei GenerateBlocks an, den Sie gerade bearbeiten (s. Abbildung unten, linke Spalte). Zuerst können Sie die Schriftstärke für den gesamten Text des Blocks verändern. Ob sich die Wahl eines Werts zwischen 100 und 900 auf Ihrer Website auswirkt, hängt davon ab, welche Stärken Ihre Schrift mitbringt bzw. welche Stärken Sie bei einer selbst gehosteten Schrift installiert haben.

• Standard: Voreingestellt (wie Sie es im Customizer für eine Überschrift / den Text festgelegt haben),
• Normal: Entspricht dem Wert 400
• Fett: Entspricht dem Wert 700
• 100 bis 900: Von ultraleicht/sehr dünn bis ultrafett/sehr kräftig

Darüber hinaus haben Sie unter Umwandeln die Möglichkeit, zwischen nur Groß-, nur Kleinbuchstaben, Großschreibung der Anfangsbuchstaben aller Wörter bzw. Normal zu wählen oder Sie belassen es bei der Standard-Einstellung, die Sie im Customizer für den Text / die Überschrift angegeben haben.

Bei der Schriftgröße ist die für den Text / die Überschrift im Customizer festgelegte Größe in px voreingestellt. Wenn Sie auf das Symbol rechts neben dem Feld klicken, erscheinen einige Schriftgrößen in px, die Sie mit einem Klick auswählen. Jedoch können Sie auch jede beliebige Schriftgröße festlegen, indem sie (nochmals) auf das Symbol klicken. In das Eingabefeld tragen Sie dann die gewünschte Größe in px (durch Klicken auf eines der Symbole rechts über dem Feld in em oder Prozent) ein. Um die Eingabe rückgängig zu machen oder zu ändern, klicken Sie wieder auf das Symbol und löschen den Wert bzw. geben einen neuen ein.

Darüber hinaus bieten manche Blöcke noch eine Veränderung der Zeilenhöhe und/oder des Zeichenabstand (beides in em) an. Entweder Sie nutzen die Standards Small (klein), Medium (mittel) oder Large (Groß) oder Sie legen, wie bei der Schriftgröße beschrieben, einen eigenen Wert fest.

Zuletzt haben Sie noch die Möglichkeit unter Schriftfamilie diese für den aktiven Block zu ändern. Mit einem Klick auf den Pfeil rechts öffnet sich ein Menü mit allen theoretisch zur Verfügung stehenden Schriften bzw. Sie geben in das untere Feld direkt Ihre gewünschte Schriftfamilie ein.

Abstand

Auf der Abbildung unten sehen Sie in der mittleren Spalte die Einstellungen für die Abstände bei GenerateBlocks. Der Innenabstand bestimmt, wie groß die Lücke zwischen Inhalt und äußerer „Begrenzung“ eines Blocks ist, der Außenabstand die Größe der Lücke zwischen einzelnen Blöcken bzw. zum Bildschirmrand (jeweils in px, em oder Prozent). Falls alle vier Abstände gleich groß sein sollen, geben Sie Ihren Wert in ein Kästchen ein und klicken dann auf das Symbol rechts in derselben Zeile. Ein erneuter Klick darauf lässt Sie alle Werte wieder einzeln ändern. Wenn Sie die Felder leer lassen, richten sich die Abstände nach den für Ihr Theme vorprogrammierten, während der Wert „0“ für gar keinen Abstand steht.

Die ebenfalls in px, em oder Prozent einstellbare Rahmengröße und den Radius passen Sie nur an, wenn Sie einen Block mit einer Umrandung versehen oder die Ecken abrunden möchten. Je größer der px-Wert bei der Rahmengröße ist, desto breiter wird die Linie. Die Werte in den Radius-Feldern bestimmen den Grad der Abrundung. Bei leeren Feldern sind alle Ecken spitz und je höher der eingetragene Wert ist, desto „runder“ werden die Ecken. Für beide Einstellungen gilt, dass Sie nicht alle vier Seiten bzw. vier Ecken gleichmäßig anpassen müssen. So können Sie beispielsweise auch nur eine Begrenzungslinie unten erstellen, unterschiedliche Linienstärken pro Seite des Rahmens festlegen oder nur eine Ecke abrunden.

Des weiteren lassen sich für manche GenerateBlocks Blöcke eine (minimale =) Mindesthöhe und/oder der innere bzw. äußere z-Index festlegen. Dieser bestimmt die Position eines Elements in einem Stapel sich überlappender Bereiche. Je höher der Wert in px, vh oder vm (letztere orientieren sich an der Größe des Browserfensters) ist, desto weiter oben/vorne erscheint das Element.

Layout und Sizing

Neue Optionen bei GenerateBlocks sind Anpassung des Layouts und der Größe mancher Blocks. Sobald Sie auf einen Block, auf den diese Optionen anwendebar sind, klicken, erscheint oben in der rechten Seitenleiste zunächst das Layout. Dort können Sie die Einstellungen für Display, Position, Overflow-x und -y sowie den z-Index verändern.

Sollten diese Felder bei Ihnen nicht angezeigt werden, verwenden Sie noch eine alte Version von GenerateBlocks und eine Aktualisierung ist zu empfehlen. Wenn die neue Version bereits installiert ist, Sie jedoch einen Block bearbeite, der mit der alten Version erstellt wurde. können Sie dies umstellen. Unter Layout sehen Sie einen Schalter: Use legacy layout system (altes Layout System verwenden). Klicken Sie auf den Schalter und entscheiden Sie in dem sich anschließend öffnenden Popup, ob Sie

• nur auf das neue System (Enable new system only) oder
• auf das neue System mit einem inneren Container Block (Enable new system with inner Container block)

umstellen wollen. Normalerweise hat die Umstellung keinen negativen Einfluss auf das Design des ursprünglichen Blocks. in Einzelfällen müssten Sie eventuell etwas „nachbessern“.

Unter Sizing (Größeneinstellung) können Sie für einzelne Blöcke folgende Parameter individuell festlegen:

• Breite und Höhe
• Minimum Breite (Width) und Minimum Höhe (Height)
• Maximale Breite und Höhe

Diese Einstellungen können Sie in px (absolut) oder relativ in em, %, rem, vw, vh und ch vornehmen. In der Regel bieten sich Prozent-Werte an. Insbesondere bei Bilder kann es, falls Sie absolute Werte verwenden, zu Problemen mit der automatischen Anpassung an kleinere Bildschirme kommen.

Farben

Für welche Details Sie eine Farbe festlegen können, richtet sich ebenfalls wieder nach der Art des Blocks, den Sie gerade bearbeiten. Bei den meisten handelt es sich um die Farbe

• des Hintergrunds (füllt den gesamten Block aus),
• des Textes (für alle Textzeilen eines Blocks einheitlich),
• der Links,
• des Rahmens sowie
• des Icons (sofern dessen Verwendung möglich ist).

Um eine (neue) Farbe festzulegen, klicken Sie in den grauen Kreis neben dem gewünschten Bereich und das Farbauswahl-Fenster öffnet sich. Dort wählen Sie Ihre gewünschte Farbe, indem Sie

1. den Kreis im Farbauswahl-Feld und/oder auf der Farbleiste verschieben und
2. auf der Leiste darunter die Transparenz einstellen,
3. direkt den Hex-Code der gewünschten Farbe in das Feld eingeben oder
4. auf einen der Farbpunkte, die Sie zuvor im Customizer als Ihre Standardfarben festgelegt haben, klicken.

Unter anderem für Links und Buttons werden Ihnen im Menü von GenerateBlocks zwei Kreise nebeneinander angeboten. Über den ersten bestimmen Sie die „normale“ und über den den zweiten die Hover-Farbe. Falls Sie eine Farbe ändern oder löschen möchten, klicken Sie auf den entsprechenden Farbpunkt, verfahren wie oben beschrieben bzw. klicken auf Zurücksetzen. Abhängig vom Bereich, für den die Farbe gelten sollte, verschwindet sie ganz oder die Standardfarbe kehrt zurück (z. B. bei Texten).

Backgrounds

Während Sie unter „Farben“ nur eine einheitliche Hintergrundfarbe für einen GenerateBlocks Block festlegen, haben Sie im Menü Backgrounds noch wesentlich mehr Optionen. Einerseits können Sie ein Hintergrundbild verwenden oder den Hintergrund mit einem Farbverlauf gestalten. Andererseits ist es auch möglich, mehrere Hintergründe zu erstellen.

Hintergrundbild

Zunächst wählen Sie ein Bild aus, indem Sie entweder direkt die URL des Bilds eingeben oder mittels „Durchsuchen“ Ihre WP-Mediathek öffnen, auf das gewünschte Bild und anschließend auf „Auswählen“ klicken. Danach erscheinen die Einstellungen für das Bild (s. Abbildung unten, rechte Spalte). Wenn Sie Use inline style aktivieren, wird das Bild als HTML eingefügt, was i. d. R. aber nicht unbedingt notwendig ist.

Anschließend bestimmen Sie die Bildgröße: Thumbnail (klein und quadratisch), medium, medium_large (mittelgroß), large (groß) und full (volle Größe). Falls Sie z. B. eine Grafik mit transparentem Hintergrund eingesetzt haben und diese mit einem farbigen Hintergrund versehen möchten, wechseln Sie im Selektor von Element zu Pseudo Element, aktivieren Verlauf und passen diesen an (s. unter Farbverlauf). Soll Ihr Bild ein Overlay erhalten, belassen Sie es bei „Element“ und wechseln in den Verlauf-Einstellungen zu „Pseudo Element“.

Mittels des Schiebers legen Sie die Deckkraft des Bilds fest: 0 = vollkommen transparent bis 1 = deckend. Während sich die „Bildgröße“ auf die zuvor eingestellte Größe des Bilds selbst bezieht, ist unter diesem Menüpunkt Größe das Verhältnis des Bilds zur Größe des Blocks zu verstehen.

• cover: das Bild wird unabhängig von seiner tatsächlichen Größe so gestreckt, dass es den Block komplett ausfüllt,
• contain: es behält seine zuvor eingestellte Größe
• Prozentwert / px: legt fest, wie viel Prozent der Blockfläche das Bild bedecken soll bzw. wie groß das Bild (… px …px = Breite Höhe) dargestellt werden soll.

Hinsichtlich der Position (Ausrichtung des Bilds) haben Sie die Wahl zwischen

• center center (zentriert) oder
• top, right, bottom, left (am oberen, rechten, unteren, linken Rand).

Außerdem können Sie die Entfernung vom Rand durch Hinzufügen eines Prozent- oder Pixelwerts variieren. Wenn ein kleines Bild nicht nur einmal, sondern mehrfach im Container enthalten sein soll, legen Sie dies unter Wiederholen fest:

• no-repeat: keine Wiederholung,
• repeat: sowohl waagerechte wie senkrechte Wiederholung oder
• repeat-x/repeat-y: mehrfach nebeneinander bzw. untereinander.

Die letzte Einstellung betrifft den Anhang, d. h. den Inhalt des GenerateBlocks Hintergrund-Bild-Blocks. Soll er sich beim Scrollen über das Bild/den Ausschnitt der Bildes bewegen, belassen Sie es bei der Einstellung scroll. Falls sich das Bild hinter dem Inhalt bewegen soll (Parallax-Effekt), benutzen Sie fixed. Dieser Effekt wird auf vielen mobilen Geräten jedoch nicht übernommen und Sie sehen nur einen, oft unscharfen Ausschnitt des Hintergrundbildes. Local bedeutet, dass sich Bild und Text miteinander bewegen.

Farbverlauf

Um einen Farbverlauf als Hintergrund zu gestalten, aktivieren Sie Verlauf benutzen (s. Abbildung oben, linke Spalte). Dasselbe können Sie auch tun, wenn Sie bei einem Hintergrundbild einen zusätzlichen Verlaufs-Hintergrund oder ein Overlay verwenden möchten. Im ersten Fall wechseln Sie in den Bildeinstellungen von Element zu Pseudo Element. Für ein Overlay benutzen Sie den Selektor hier und wählen dort „Pseudo Element“. Ohne Bild belassen Sie es bei der Voreinstellung „Element“.

Mittels des Schiebers verändern Sie die Richtung der Verlaufs. Ganz links (0) bedeutet, dass sich Farbe 2 oben und Farbe 1 unten befindet. Je weiter Sie den den Punkt nach rechts bewegen, desto mehr verschiebt sich die Position der Farben. Farbe 2 rückt nach rechts > unten > links. Ein Klick auf den Farbpunkt unter Farbe 1 bzw. Farbe 2 öffnet jeweils das Fenster für die Farbwahl (s. Farben).

Auch die Breite des Übergangs von einer zur anderen Farbe können sie verändern, indem Sie die Stopp-Postion der Farbe/n in Prozent angeben. Lassen Sie die Felder leer, ist der Übergang gleichmäßig (s. Abbildung unten Container 1). Gleiche Werten bei beiden Farben erzeugen eine harte Grenze zwischen den Farben (s. Container 2 = 50 50). Geben Sie nur bei einer Farbe eine Prozentzahl ein, bestimmt diese, wie viel Prozent des Containers diese Farbe ausfüllt (s. Container 3 Farbe 1 = 80%). Würden Sie bei diesem Beispiel für Farbe 2 zusätzlich 20 % eintragen, wäre Farbe 1 bei 80 % der Breite wiederum durch eine harte Grenze von Farbe 2 getrennt.

Mehrere Hintergründe

Falls Sie bei Ihrem GenerateBlocks Block mehrere Hintergründe verwenden möchten, aktivieren Sie Advanced (s. Abbildung oben, linke Spalte) und klicken rechts auf das Werkzeug-Symbol. Nachdem Sie auf Add Background (Hintergrund hinzufügen) geklickt haben, können Sie zwischen Bild und Verlauf (Gradient) wählen. In beiden Fällen öffnet sich ein neues Bearbeitungsfenster (s. Abbildung oben, mittlere Spalte). Dort bestimmen Sie jeweils, auf welchem Device (Gerät) der Hintergrund verwendet werden soll.

• All (auf allen),
• nur Desktop,
• nur Tablet,
• Tablet + Mobil(e) oder
• nur Mobil(e).

Als nächstes legen Sie den State (Status), wann der Hintergrund angezeigt wird – Normal oder Hover – fest. Zuletzt stellen Sie das Target (Ziel) ein: Self (Selbst) = Standard und bezieht sich auf z. B. auf den Container selbst, erlaubt aber keine Effekte; Bei der Voreinstellung „Pseudo Element“ sind Effekte oder ein zusätzliches Bild möglich.

Wenn Sie sich für „Bild“ entschieden haben, geben Sie die URL ein oder suchen sich eines aus Ihrer WP-Mediathek aus und passen dies wie unter „Hintergrund“ oben beschrieben an. Die Anpassungsmöglichkeiten für den „Verlauf“ entsprechen den unter „Farbverlauf“ erläuterten. Nachdem Sie alle Einstellungen vorgenommen haben, klicken Sie auf Close (Schließen). Um einen Hintergrund zu ändern oder zu entfernen, klicken Sie wieder auf das Werkzeug-Symbol und bearbeiten die Einstellungen bzw. oben rechts auf den Mülleimer / das „X“ und bestätigen den Löschvorgang. Ihr Hintergrund verschwindet. Wenn Sie keine weiteren Hintergründe angelegt haben, deaktivieren Sie den Advanced-Schalter wieder.

GenerateBlocks Icons

Sowohl beim Überschriften- als auch beim Buttons-Block von GenerateBlocks finden Sie in der Seitenleiste den Menüpunkt Icon. Einerseits haben Sie die Möglichkeit, eigene Icons zu verwenden. Dazu tragen Sie in das Feld den Icon-SVG-HTML Code ein. Beachten Sie diesbezüglich jedoch die Erläuterungen unter Asset Library. Andererseits bietet Ihnen GenerateBlocks auch einige allgemeine und Social Media Icons an, die Sie sehr unkompliziert einbinden können.

Nachdem Sie das Menü geöffnet haben, wählen Sie ein Icon aus, das zunächst links vor dem Text angezeigt wird. Falls Sie den Text nicht anzeigen wollen, aktivieren Sie den Schalter Text entfernen, was jedoch Suchmaschinen u. U. als „Link nicht lesbar“ negativ bewertet. Anschließend bestimmen Sie die Position – normalerweise inline – und richten das Icon bezogen auf die Textzeile/n oben, zentriert oder unten aus. Anstelle von „inline“ können Sie auch oberhalb wählen, so dass das Icon über der ersten Textzeile erscheint (s. Abbildung, mittlere Spalte unten).

Darüber hinaus haben Sie die Möglichkeit sowohl den Innenabstand (Lücke zwischen Text und Icon) als auch die Icon-Größe anpassen. Während im Textblock das Icon immer links neben dem Text dargestellt wird, können Sie es bei Buttons auch rechts anzeigen lassen.

PDF: Beitrag herunterladen

Weiterlesen – Anpassung, Blöcke, Patterns, Documentation

GenerateBlocks Tutorial | Teil 1

GenerateBlocks Tutorial | Teil 3

GenerateBlocks Tutorial | Teil 4

GenerateBlocks Tutorial | Teil 5

Abbildungen © eb, GenerateBlocks, EDGE22 Studios LTD. | › Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.