GT Blocks Dokumentation

Diese Dokumentation für unsere WordPress Blocks zeigt dir, wie du das GT Blocks Plugin installieren und verwenden kannst. Außerdem findest du eine kurze Erklärung zu allen Blocks und deren Optionen.


Inhaltsverzeichnis

  1. Installation
  2. Blocks verwenden
  3. Layout Blocks
  4. Grid Blocks
  5. Basis Blocks

1. Installation

Für die Installation benötigst du die .zip-Datei für GT Blocks. Du kannst diese nach dem Kauf in deinem Account herunterladen.

Navigiere zu Plugins → Installieren in deinem WordPress Backend. Klicke auf den Button [Plugin hochladen] ganz oben auf der Seite. Wähle anschließend die Datei gt-blocks.zip aus und klicke auf [Jetzt installieren].

WordPress Plugin installieren

Zum Inhaltsverzeichnis

2. Blocks verwenden

Nach Installation und Aktivierung des Plugins steht im WordPress Block Editor eine neue Kategorie GT Blocks im Inserter bereit, mit der die verschiedenen Blocks hinzugefügt werden können.

GT Blocks verwenden

Nicht benötigte Blocks können im Block Manager deaktiviert werden. Dieser ist im Editor unter dem Menü ganz rechts oben zu finden. Deaktivierte Blocks werden nicht mehr im Block Inserter angezeigt, funktionieren aber weiterhin, falls sie bereits im Content eingebunden und verwendet werden.

Block Manager

Zum Inhaltsverzeichnis

2. Layout Blocks

Unsere Layout Blocks ermöglichen komplexere Designs und sind verschachtelte Blocks, d.h. sie setzen sich aus mehreren Kind-Blöcken zusammen.

GT Hero Image

Der GT Hero Image Block besteht aus einem zweispaltigen Layout mit Content und Bild, welche als Child Blocks eingefügt werden. Standardmäßig verwendet der Content-Block eine Überschrift, Beschreibung und Buttons, es können jedoch auch neue Blocks hinzugefügt und entfernt werden.

GT Hero Image Block

In den Block Optionen in der Sidebar können die Breite und Abstände des Blocks sowie der Child Blocks festgelegt werden. Zusätzlich lassen sich Hintergrundbild und -farbe des gesamten Blocks auswählen.

Zum Inhaltsverzeichnis

GT Section

Mit dem GT Section Block kannst du deine Website in verschiedene Abschnitte unterteilen. Als Inhalt für die Sektion kannst du beliebige Blocks einsetzen.

GT Section Block

In den Block Optionen in der Sidebar kannst du die Innenabstände und die Breite der Inhaltsblöcke bestimmen. Du kannst ebenfalls eine Hintergrundfarbe oder -bild festlegen, um verschiedene Sektionen optisch voneinander zu trennen.

Zum Inhaltsverzeichnis

GT Columns

Mit dem GT Section Block kannst du deine Website in verschiedene Abschnitte unterteilen. Als Inhalt für die Sektion kannst du beliebige Blocks einsetzen.

Seiten-Layouts mit mehrere Spalten kannst du am Besten mit unserem GT Columns Block erstellen. In den Layout-Einstellungen stehen eine Reihe von Spalten-Layouts mit verschiedenen Breiten zur Verfügung.

GT Columns Block

Der Abstand zwischen den Spalten kann flexibel eingestellt werden.

Zum Inhaltsverzeichnis

GT Image Card

Der GT Image Card Block eignet sich für eine kreative Darstellung von Bild plus Text, einem der häufigsten Seiten-Elemente einer Website.

GT Image Card Block

In den Layout-Einstellungen kannst du die Content-Breite, vertikale Ausrichtung und den Abstand von Bild und Content festlegen. Du kannst auch Bild und Content überlappen lassen und flexibel die Farben für Content-Box und Hintergrund konfigurieren.

Zum Inhaltsverzeichnis

GT Multiple Buttons

Dieser Block dient dazu, mehrere Buttons parallel in einer Linie darzustellen.

GT Multiple Buttons Block

Du kannst bis zu 6 Buttons nebeneinander anzeigen lassen. Jeder Button ist ein Child Block und kann anders gestaltet werden. Falls du das Design für alle anderen Buttons übernehmen willst, kannst du mit einem Klick das Styling der Buttons synchronisieren.

Zum Inhaltsverzeichnis

3. Grid Blocks

GT Blocks beinhaltet eine Reihe von Blocks, welche ein Grid verwenden. Unter einem Grid versteht man ein Raster-Layout mit mehreren Spalten und Zeilen. Grid Layouts sind ein beliebtes Gestaltungselement von Websites und eignen sich zur vielfältigen Darstellung von Inhalten, z.B. für Produkte, Services, Referenzen oder Mitarbeiter.

GT Grid Blocks

Alle unsere Grid Blocks basieren auf der gleichen Grid-Komponente und unterscheiden sich deshalb nicht in der Handhabung. Es handelt sich um einen verschachtelten Block, d.h. jedes Grid-Element ist ein eigener Kind-Block mit eigenen Optionen.

Block Optionen

In den Block Einstellungen in der Sidebar lässt sich die Anzahl der Spalten definieren. Es sind bis zu 6 Spalten möglich. Jeder Spalten-Block bietet unterhalb des Inhalts einige Buttons, mit denen du Grid-Elemente sortieren, duplizieren und löschen kannst.

In den Sektions-Einstellungen kannst du nachträglich mit einem Klick einen GT Section Block hinzufügen. Der Grid Block wird damit in eine Sektion eingefügt.

Styling der Kind-Blocks synchronisieren

Die Inhalte der Grid-Elemente lassen sich in den Optionen der jeweiligen Child Blocks gestalten und konfigurieren. Dort steht ebenfalls die Funktion [Styling synchronisieren] bereit, mit dem du das Styling des Blocks für alle Geschwister-Blocks innerhalb des Grids mit einem Klick kopieren und übernehmen kannst.

Zum Inhaltsverzeichnis

Übersicht der verschiedenen Blocks

Die verschiedenen Grid Blocks nutzen jeweils ein anderes Block Template und geben dadurch einen anderen Inhalt für die Grid-Elemente vor.

GT Portfolio

GT Portfolio Block

Der Portfolio Block gibt als Inhalt für jede Spalte ein Bild, Titel und Beschreibung vor. Du kannst natürlich auch weitere Blöcke einfügen.

GT Features

GT Features Block

Der Features Block verwendet statt einem Bild den Icon Block. Das Template für jedes Grid-Element ist daher Icon, Titel und Beschreibung.

GT Grid Layout

GT Grid Layout Block

Der Grid Layout Block gibt ein leeres Template vor, d.h. es ist kein Inhalt als Vorlage definiert. Der Block eignet sich daher ideal als Startpunkt, wenn du ein Grid frei gestalten möchtest.

Zum Inhaltsverzeichnis

4. Basis Blocks

Im Gegensatz zu unseren Layout und Grid Blocks sind die Basis Blocks nicht verschachtelt. Es handelt sich vielmehr um die Basiselemente, welche häufig als Kind-Blocks eingesetzt werden.

GT Icon

Der GT Icon Block erlaubt dir das einfache Einfügen eines SVG-Icons im Editor. Du kannst aus über 900 Font Awesome Icons auswählen und Style, Größe und Farbe des Icons in den Block Optionen anpassen.

GT Icon Block

Zum Inhaltsverzeichnis

GT Button

Dieser Block dient zum Einfügen eines Buttons und hat etwas mehr Einstellungen als der Core Block für Buttons. Du kannst die Größe und Form des Buttons in den Block Optionen in der Sidebar bestimmen, zusammen mit dem Hover-Style und Farben.

GT Button Block

Zum Inhaltsverzeichnis

GT Heading

Mit dem GT Heading Block kannst du Überschriften einfügen. Er bietet etwas mehr Optionen als der WordPress Core Block, unter anderem die Festlegung der Schriftgröße und Einstellungen für Text- und Hintergrundfarbe.

GT Heading Block

Zum Inhaltsverzeichnis