GenerateBlocks Tutorial 3 | Formen, Dynamic Data, Effects

GenerateBlocks Tutorial – Teil 3

In diesem Teil des Tutorials wird erklärt, wie Sie bei GenerateBlocks Formen, Effects und Filter verwenden, ohne jeweils eigene CSS-/HTML-Codes dafür schreiben oder spezielle zusätzliche Plugins installieren zu müssen. Außerdem wird beschrieben was Dynamic Data bedeutet und was Sie damit tun können.

Formen

Um beispielsweise einzelne Abschnitte auf Ihrer Startseite etwas „abwechslungsreicher“ zu gestalten, bietet es sich an, den oberen oder unteren Rand eines Containers zu verändern. Dazu verwenden Sie GenerateBlocks Formen, für die Ihnen mehrere Layouts zur Verfügung stehen. Nachdem Sie auf Form hinzufügen und das Werkzeug-Symbol neben der ersten Form geklickt haben, öffnen Sie eines der Menüs Wellen, Winkel, Kurven oder Dreiecke und wählen eine der dort gezeigten Muster aus. Anschließend bestimmen Sie die Farbe und die Position der Form (über oder unter dem Container).

In die Felder Höhe und Breite tragen Sie die gewünschten Werte in px bzw. Prozent ein. Bei der Breite ist der Ausgangswert immer 100 %. Werte größer 100 % führen zu einer waagerechten Streckung der Form. Mittels des darunter befindlichen Schalters können Sie die Form horizontal spiegeln, so dass beispielsweise ein Winkel nicht mehr von links nach rechts, sondern von rechts nach links abfällt. Der unter z-Index eingegebene Wert ermöglicht die Überlappung mehrerer Elemente.

Anschließend können Sie noch einmal dieselbe oder eine andere Form hinzufügen, indem Sie unter der ersten Form auf Form hinzufügen klicken. So ist es z. B. möglich, dieselbe Form in mehreren Farbabstufungen (überlappend) untereinander zu setzen. Ob die Form über vor / hinter dem Container oder einer anderen Form erscheint, bestimmen Sie wiederum über den z-Index.

Alle erstellten Formen verändern Sie, indem Sie wieder auf das Werkzeug-Symbol der gewünschten Form klicken. Durch einen Klick auf das daneben angezeigte „X“ und eine anschließende Bestätigung im Popup-Fenster löschen Sie die Form.

Dynamic Data

Mittels Dynamic Data haben Sie die Möglichkeit, sich selbst aktualisierende Inhalte in einen GenerateBlocks Block einzufügen. Dazu aktivieren Sie den Schalter und nehmen dann die gewünschten Einstellungen vor. Als erstes haben Sie unter Data Source (Datenquelle) die Wahl zwischen Current Post (aktueller Beitrag) und Post Type (Beitragsart). Je nach dem, welche Wahl Sie getroffen haben, weichen die folgenden Einstellungen etwas voneinander ab. Zunächst die Optionen für „Current post“ – 1. Content source (Quelle des Inhalts) und 2. Link source (Quelle des Links):

• zu 1.
  • POST:
  • Title (Titel) – Excerpt (Textauszug) – Post date (Beitragsdatum) – Post meta (Autor, Kategrie und Schlagworte, …) – Comments number (Anzahl der Kommentare) – List of terms (Kategorien / Schlagwörter)
  • AUTHOR:
  • Author meta (Metadaten des Autors) – E-Mail (-Adresse) – Name – Nickname – First name (Vorname) – Last name (Nachname)
• zu 2.
  • POST:
  • Single post (einzelner Beitrag) – Comments area (Kommentarbereich) – Post meta
  • AUTHOR:
  • Author archives (Autoren-Archiv) – Author meta – Author E-Mail

Wenn Sie sich für „Post type“ entscheiden, wählen Sie zunächst unter Select post type „Beiträge“ oder „Seiten“ aus. Anschließend klicken Sie unter Source post (Quellbeitrag) auf den Beitrag oder die Seite, die Sie einsetzen möchten. Während die Auswahl für die Quellen des Links der oben beschriebenen entspricht, stehen als Quelle des Inhalts nur die folgenden Optionen zur Verfügung:

• Title (Titel),
• Excerpt (Textauszug),
• Post date (Beitragsdatum),
• Post meta (Autor, Kategrie und Schlagworte, …),
• Comments number (Anzahl der Kommentare) oder
• List of terms (Kategorien / Schlagwörter).

Effects

Zu den Container-, Überschrift-, und Buttons-Blöcken von GenerateBlocks können Sie Effekte (Effects) hinzufügen und diese anpassen. Angeboten werden Ihnen:

• Opacity & Blend (Transparenz),
• Transition (Übergang),
• Box Shadow (Schattenverlauf für einen Block),
• Text Shadow (Schattenverlauf für Zeichen),
• Transform (Umwandlung) und
• Filter.

Um einen Effekt für den aktiven GenerateBlocks Block zu aktivieren, klicken Sie auf das Werkzeug-Symbol rechts neben dem gewünschten Effekt. Nachdem einem Klick auf Add effect öffnet sich ein kleines Fenster, in dem Sie alle weiteren Einstellungen für den betreffenden Effekt vornehmen. Zunächst befinden sich bei jedem Effekt in oberen Reihe drei Auswahl(Dropdown-)-Menüs, über die Sie die Grundeinstellungen vornehmen.

1. Device (Gerät): Legen Sie fest, auf welchem/n Gerätetyp/en der Effekt aktiv sein soll = All (auf allen) – nur Desktop – nur Tablet, Tablet und Smartphone (Mobile) – nur Smartphone.
2. State (Status): Normal oder Hover = der Effekt ist im Normalzustand oder nur beim Darüberschweben aktiv.
3. Target (Ziel):
   1. Der Effekt wirkt sich auf den gesamten Block,
   2. nur den inneren Container oder das Hintergrundbild (bei einem Container-Block),
   3. nur das Icon (bei einem Überschrift- oder Buttons-Block) oder
   4. einen selbst mittels CSS-Class definierten Bereich aus.

Falls Sie die Effekte „Transform“ oder „Filter“ wählen, befindet sich links davon noch ein weiteres Auswahl-Menü zur Wahl des Effekttyps (s. unter der Beschreibung des jeweiligen Effekts).

Unterhalb der allgemeinen und Effekt-spezifischen Einstellungen befindet sich links ein Button, um einen weiteren Effekt hinzuzufügen (Add Effect), und daneben der Button zum Schließen (Close) des Fensters. Wenn Sie das Fenster über diesen Button schließen, bleiben Ihre Einstellungen erhalten und der Effekt ist aktiviert. Auf der rechten Seite können Sie durch Aktivieren des Schalters die Anzeige des Effekts im Editor verhindern.

Zum Löschen eines Effekts klicken Sie auf den Papierkorb oben rechts im Fenster. Nachdem Sie den Löschvorgang im Popup-Fenster bestätigt haben, verschwindet der Effekt und Sie können den Schalter im Hauptmenü wieder deaktivieren. Solange der Effekt aktiv ist, ist dieser Schalter links neben der Effektbezeichnung blau hinterlegt.

Opacitiy und Blend

Mit Hilfe des Schiebers bestimmen Sie die Transparenz, indem Sie einen Wert zwischen 0 (komplett durchsichtig) und 1 (absolut undurchsichtig) wählen. Unter Mix Blend Mode (Mischmodus) stehen Ihnen folgende Optionen zur Verfügung:

• Multiply (Multiplizieren)
• Screen (Leinwand)
• Overlay (Überlagerung)
• Darken (Abdunkeln)
• Lighten (Aufhellen)
• Color Dodge (farbig abwedeln)
• Color Burn (farbig nachbelichten)
• Hard Light (hartes Licht)
• Soft Light (weiches Licht)
• Difference (Differenz)
• Exclusion (Ausschluss)
• Hue (Farbton)
• Saturation (Farbsättigung)
• Color (Farbe) sowie
• Luminosity (Luminanz)

Beispiele für das Erscheinungsbild der einzelnen Modi finden Sie auf der Seite › CSS Blend Modes. Zum Schluss können Sie mittels des Buttons Add Transition noch einen Übergangseffekt (s. unten) hinzufügen.

Transition

In das Feld unter Timing Function (Zeit des Übergangs) tragen Sie einen der folgenden Begriffe ein:

• ease (voreingestellt): Langsamer Start, Beschleunigung, langsames Ende in dieselbe Richtung
• ease-in: wie zuvor, jedoch langsamer Start des Übergangs
• ease-out: wie zuvor, jedoch Übergang mit langsamem Ende
• linear: Gleiche Geschwindigkeit in eine Richtung vom Start bis zum Ende
• steps (n, end): wie zuvor, jedoch schrittweiser Übergang (in Klammern dahinter die Anzahl der Schritte, z. B. 6, end)
• cubic-bezier (n, n, n, n): Übergang mit Zwischenstufen, Wechsel der Richtung möglich (in Klammern Zahlwerte zwischen 0 und 1 eintragen, negative und positive Werte können für einen Richtungswechsel kombiniert werden)

Während Sie bei der CSS Property nichts zu verändern brauchen, können Sie jedoch die Transition Duration (Dauer des Übergangs) sowie Delay (Verzögerung = Zeitraum bis der Übergang einsetzt) an Ihre Wünsche anpassen. Das Schieben des Reglers nach links verkürzt den Zeitraum um Sekunden(bruchteile), nach rechts verlängert sich der Zeitraum.

Box Shadow / Text Shadow

Die Anpassungsoptionen von GenerateBlocks für den Schattenwurf bei Boxen und Text sind weitgehend dieselben. Neben der Farbe und Transparenz des Schattens (s. auch unter Farben) bestimmen Sie durch Verschieben der Regler den horizontalen und vertikalen Versatz (Horizontal bzw. Vertical Offset). Werte größer 0 verschieben den Schatten nach rechts bzw. unten, Werte kleiner 0 nach links bzw. oben. Da Sie beide Werte voneinander unabhängig einstellen können, sind alle „Varianten“ hinsichtlich der Position und des Versatzes möglich. Um die Härte des Schattens anzupassen, können Sie den Schieberegler unter Blur (Weichzeichnen) verwenden oder direkt einen Wert in px eingeben. Je höher der Wert ist, desto weicher wird der Schatten. Mit dem Wert 0 erhalten Sie einen scharfen Rand des Schattens.

Zur Anpassung des Schattenwurfs für eine Box haben Sie noch zwei zusätzliche Optionen. Durch Aktivieren des Schalters Inset fällt der Schatten nicht mehr nach außen, sondern in die Box hinein. Außerdem können Sie durch Verschieben des Reglers unter Spread die Größe des Schattens verändern. Positive Werte vergrößern und negative verkleinern ihn. Bei 0 hat der Schatten dieselbe Größe wie die Box.

Transform

Links neben den bei allen Effekten von GenerateBlocks vorhanden Einstellungsmenüs finden Sie bei Transform noch eine zusätzliche Option. Unter Type wählen Sie den Typ des Effekts / das Verhalten des Elements aus. Anschließend öffnen sich die auf diesen Typ bezogenen Anpassungsmöglichkeiten.

• Translate: Mittels der Schieber oder durch Eingabe eines px-Wertes bestimmen Sie, wie weit sich das Element auf der X- (Translate X) oder Y-Achse (Translate Y) bewegen soll. Positive Werte bewegen es nach rechts, negative nach links.
• Rotate: Mittels des Schiebers oder durch Eingabe eines Wertes legen Sie fest, um wie viel Grad (deg) sich das Element nach rechts dreht.
• Skew: Auch hier passen Sie mit dem Schieber oder mittels Eingabe eines Wertes den Grad (deg) der Verzerrung an.
• Scale: Durch Eingabe eines Wertes oder mit dem Regler geben Sie die Größenveränderung gegenüber der Original-Größe des Elements an, z. B. 2 = doppelte Größe, 0.5 = halbe Größe.

Im Gegensatz zu den anderen Effekten können Sie in diesem Fall nur einen weiteren „Transform“-Effekt/Typ hinzufügen.

Filter

Die Einstellungen entsprechen zunächst denen bei „Transform“, jedoch stehen unter Type folgende Optionen zur Auswahl:

• Blur: Mit Hilfe des Schiebers oder durch Angabe eines px-Wertes bestimmen Sie den Grad der Weichzeichnung des Ziel-Elements.
• Brightness: Werte unter 100 % dunkeln das Zielelement ab, Werte über 100 % erhöhen die Helligkeit.
• Contrast: In diesem Fall erhöhen oder verringern Sie den Kontrast der Farben des Zielelements.
• Grayscale: Prozentuale Änderung der Graustufen des Zielelements.
• hue-rotate: Änderung des Farbtones des Zielelements „im Farbkreis“ durch Verschieben des Reglers von 0 bis 360 Grad.
• invert: Farbumkehrung durch Verschieben des Reglers zwischen 0 (Original) und 100 %.
• saturate: Anpassung der Farbsättigung durch Verringerung (kleiner 100) oder Erhöhung (größer 100) des Prozent-Wertes.
• sepia: Gestaltung des Zielelements mit einem gelblich-bräunlichen Ton, der prozentual anpassbar ist.

Mit diesen Filtern von GenerateBlocks passen Sie das Erscheinungsbild eines Bilds oder Hintergrunds an, ohne das Bild selbst zu verändern. Deshalb können Sie jederzeit den Filter ändern oder auch wieder ganz entfernen, ohne das das Originalbild dadurch beeinträchtigt wird/wurde.

Erweitert

Falls Sie die Pro-Version von GenerateBlocks verwenden, können Sie einzelne Blöcke unter Erweitert für Desktops, Tablets und/oder Smartphones (mobile) ausblenden/verstecken.

PDF: Beitrag herunterladen

Weiterlesen – Anpassung, Blöcke, Patterns, Documentation

GenerateBlocks Tutorial | Teil 1

GenerateBlocks Tutorial | Teil 2

GenerateBlocks Tutorial | Teil 4

GenerateBlocks Tutorial | Teil 5

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