Beste Original-WordPress-Blöcke [Kurzübersicht]

Wir bieten Ihnen eine Anleitung zur Verwendung des Gutenberg WordPress-Editors und der Blöcke. Bitte lesen Sie Neuigkeiten über Blockänderungen, die in der nächsten Version 5.4 kommen werden. Wir haben die am häufigsten verwendeten Blöcke ausgewählt, die auf jeder Website verwendet werden müssen. Nach der Veröffentlichung werden wir weitere Details zu allen Funktionen veröffentlichen.

Als WordPress 2018 den neuen Gutenberg-Editor ankündigte, waren wir begeistert. Jetzt, ein paar Jahre später, sehen wir eine enorme Verbesserung. Der Gutenberg WordPress Editor ist ein großartiges Tool zum Erstellen einer Website.

Alle diese Standard-WordPress-Blöcke für den Gutenberg-Editor sind in unserem neuesten Projekt voll funktionsfähig Frei Citadela WordPress-Theme. Sie können es bitte auf jeder Website verwenden ein Konto erstellen und laden Sie es kostenlos herunter.

Mit AitThemes Citadela-Pluginskönnen Sie spezifische Inhalte für die Präsentation eines Unternehmens, eines Unternehmens, eines Blogs oder einer gemeinnützigen Website erstellen. Oder starten Sie sogar ein neues Online-Geschäft. Die Geschwindigkeit der Website und die einfache Bearbeitung der Website sind die wichtigsten Faktoren.

Was ist ein Block?

Gutenberg WordPress-Blöcke sind Bausteine der Website. Jeder von ihnen hat seinen eigenen besonderen Platz und Zweck. Es ist sehr wichtig, den richtigen WordPress-Block für eine bestimmte Art von Inhalten zu verwenden.

Aber wie finden Sie den am besten geeigneten Block, der zu Ihrem Vorhaben passt?

Um Ihnen zu helfen, WordPress-Blöcke besser zu verstehen, haben wir diese Übersicht über die beliebtesten zusammengestellt.

Textinhaltsblöcke

Es gibt mehrere Blöcke, mit denen Sie Textinhalte auf Ihrer Website einfügen können. Sie können mehrere Blöcke verwenden. Ab WordPress 5.4 gibt es eine neue Einstellung, Sie können die Textfarbe ändern.

• Absatz
• Überschrift
• Zitieren
• Aufführen
• Pullquote
• Tisch
• Vers
• Vorformatiert

Abgesehen davon verwenden Sie den klassischen Block, der für einen langen Absatz praktischer sein kann.

Tastenblock

Das Erstellen eines überzeugenden CTA-Buttons in WordPress ist mit dem Button-Block ganz einfach geworden. Sie müssen kein benutzerdefiniertes CSS eingeben oder HTML verstehen. Sie können – müssen aber nicht – einen Hexadezimalcode Ihrer Lieblingsfarbe eingeben, damit die Schaltfläche schön und auffällig aussieht.

Wo kann der Button-Block verwendet werden?

Sobald der Webbesucher auf Ihre Website gelangt, möchten Sie ihn zum Handeln ermutigen. Dafür sind CTA-Buttons da.

Im Allgemeinen gibt es drei Stellen, an denen Sie den WordPress-Button-Block verwenden sollten:

• Startseite – um Aktionen durchzuführen, die zum Erreichen Ihres Ziels führen, z. B. sich für den Newsletter anmelden, Sonderangebote entdecken oder sich für eine kostenlose Testversion registrieren.
• Produktseite – je nachdem, wie Ihre Produktseite geführt wird, kann es eine CTA-Schaltfläche (KAUFEN) oder mehrere Schaltflächen geben, z. B. Produktdetails, Kaufen, Zur Wunschliste hinzufügen usw.
• Blog – CTA-Buttons könnten auf einen anderen nützlichen Artikel oder den Kauf Ihres Produkts/Ihrer Dienstleistung verweisen.

Tastenblockeinstellungen

Im Inspektor auf der rechten Seite können Sie die Einstellungen Ihrer Schaltfläche einfach verwalten:

• Stil
• Hintergrundfarbe
• Schriftfarbe
• Grenze

Der in Ihrer CTA-Schaltfläche geschriebene Text sollte kurz und direkt sein und die Aktion anregen, die Ihre Webbesucher ausführen sollen.

Neuigkeiten zur nächsten WordPress 5.4-Version (Veröffentlichung am 31. März 2020)

Der Button-Block wird durch einen neuen Button ersetztS Block.
Sie können anhand des neuen Namens davon ausgehen, dass Sie in einem Blockcontainer mehrere Schaltflächen nacheinander erstellen können. Oft besteht die Notwendigkeit, zwei CTAs gleichzeitig zu erstellen, zum Beispiel: „Jetzt kaufen“ und „Mehr lesen“. Außerdem kommen einige neue Stil- und Farbeinstellungen. Wählen Sie den Füll- oder Umrissstil und dann die Farbe des Hintergrunds. Sie können zwischen einfarbigem Hintergrund und Verlaufshintergrund wählen. Für eine mühelosere Feinabstimmung stehen einige Voreinstellungen als Ausgangspunkt zur Verfügung. Die gute Nachricht ist, dass alle vorhandenen Schaltflächenblöcke funktionieren und nicht migriert werden müssen.

Spaltenblock

Der Columns-Block ist ein erstaunlicher WordPress-Block, der Türen zu neuen Layouts öffnet. Es bietet Ihnen mehr Optionen für die Anordnung von Seitenelementen, was zu mehr Designalternativen führt.

Die Arbeit mit dem Spaltenblock ist einfach:

• Keine zusätzliche Plugin-Installation.
• Keine Codierung erforderlich.
• Alles, was Sie brauchen, ist ein wenig Gespür für ordentliches Design.

Im Vergleich zu den vorherigen Problemen, die Sie vor der Veröffentlichung des WordPress-Blockeditors durchmachen mussten, ist die Verwendung des Columns-WordPress-Blocks supereinfach.

Wie verwende ich den Spaltenblock?

Wie oben angegeben, gibt es zwei Möglichkeiten, den Columns-Block zu verwenden:

• Um den Fluss Ihrer Texte zu organisieren (in einem Blogbeitrag oder auf der regulären Seite).
• Um andere Blöcke in Spalten anzuordnen.

Wenn Sie Text in Spalten organisieren, z. B. in einem Blog-Beitrag, erhöhen Sie die Lesbarkeit und machen Ihre Website transparenter und benutzerfreundlicher.

Wenn Sie jedoch den Spaltenblock verwenden, um andere Blöcke wie Bilder, Texte und Schaltflächen zu verschachteln, ändern Sie das gesamte Layout der ausgewählten Seite und erstellen neue Designs.

Spaltenblockeinstellungen

Nachdem Sie einen Spaltenblock auf der Seite eingefügt haben, wählen Sie aus, wie viele Spalten Sie möchten. Es kann eine beliebige Anzahl von 2 bis 6 Spalten sein. Dann können Sie mit der Eingabe Ihres Textes oder dem Hinzufügen von Blöcken in jede Spalte beginnen.

Die Ausrichtung des Inhalts Ihres Spaltenblocks kann sowohl für den gesamten Block als auch für einzelne Spalten separat eingestellt werden. Sie können sogar den Anteil der Spaltenbreite wählen. Auf diese Weise kann eine Spalte breiter sein als eine andere.

Abdeckblock

Lassen Sie uns über den Header Ihrer Website sprechen. Es handelt sich um einen Abschnitt, der den ersten Eindruck definiert, wenn jemand auf Ihre Homepage gelangt. Irgendwie wichtig, nicht wahr? Und wussten Sie, dass der Cover-Block als Kopfzeile auf jeder Ihrer Seiten verwendet werden kann?

Cover sind die Kernbausteine von WordPress, mit denen Sie Ihre Webbesucher beeindrucken können. Vor allem, wenn es richtig eingesetzt wird, oder besser gesagt, wenn es sauber in Ihr Webdesign integriert ist.

Wo kann der Abdeckblock verwendet werden?

Wie oben erwähnt, kann der Cover-Block auf jeder Ihrer Seiten verwendet werden. Darüber hinaus kann es an einer beliebigen Stelle auf der Seite eingefügt werden, im Gegensatz zum Header Ihrer Website, der oben auf Ihrer Website fixiert ist.

Abdeckblock kann verwendet werden als:

• Kopfzeile einer beliebigen Seite, einschließlich Homepage.
• Bild oder Video werden durch den auf der Produktseite verwendeten Text überschrieben.
• Inhaltstrennzeichen im Blogbeitrag.

Cover-Block-Einstellungen

Das Einrichten Ihres Abdeckblocks ist sehr einfach. Wählen Sie zunächst ein Bild oder ein Video als Hintergrund. Sie können stattdessen auch eine einzelne Farbe verwenden. Wenn Sie Ihren Hintergrund festgelegt haben, fügen Sie einen Titel und einen Untertitel hinzu. 

Sie können die Ausrichtung des Blocks und natürlich auch die Ausrichtung des Textes darin wählen.

Die Ausrichtung des Abdeckblocks bietet folgende Optionen:

• Linksbündig
• Im Zentrum anordnen
• Rechts ausrichten
• Große Breite
• Gesamtbreite

Mein persönlicher Favorit ist die Farbüberlagerung, die im Inspektor verfügbar ist – das Hintergrundbild des Cover-Blocks kann in jeder gewünschten Farbe getönt werden. Zusammen mit der benutzerdefinierten Schriftgröße und -farbe können Sie schöne Kontraste erzeugen und das endgültige Aussehen Ihres Abdeckblocks wird verblüffend sein.

Ab WordPress 5.4 können Sie den Verlaufshintergrund anstelle eines einfarbigen Hintergrunds wählen.

Galerieblock

Präsentieren Sie Bilder auf Ihrer Website mit dem Galerie-Block. Dieser Standard-WordPress-Block wurde entwickelt, um Ihre Bilder zu speichern und sie auf jeder Seite Ihrer Website schön anzuzeigen. Ähnlich wie andere WordPress-Blöcke kann der Galerie-Block an einer beliebigen Stelle auf der Website oder im Blog-Beitrag positioniert werden.

Das Hochladen Ihrer Bilder kann durch Auswahl von Dateien aus der Medienbibliothek, von Ihrem Computer oder mithilfe der Drag&Drop-Funktion erfolgen.

Wo kann der Galerieblock verwendet werden?

Abhängig von der Art Ihrer Website möchten Sie möglicherweise eine komplexe Fotogalerie oder eine einfache Bildpräsentation erstellen. Sie können den Galerie-Block verwenden für:

• Ihre Homepage
• Einzelne Unterseiten, die als Alben Ihrer Fotogalerie erstellt wurden
• Produktseiten
• Blogeintrag

Galerieblockeinstellungen

Abgesehen von den verschiedenen Ausrichtungsoptionen des Galerieblocks selbst gibt es in diesem Block einige interessante Optionen, wie zum Beispiel:

• Anzahl der Spalten, in denen die Bilder angeordnet sind.
• Bildzuschnitt auf die gleiche Größe (des kleinsten Bildes).
• Hyperlink, um Ihnen die Möglichkeit zu geben, auf eine andere Seite oder Mediendatei zu verlinken.

Bildblock

Der Bildblock ist nichts anderes als der Block zum Anzeigen eines Bildes auf Ihrer Website.

Das ist richtig. Wenn Sie nur ein Bild zu einer Ihrer Seiten hinzufügen möchten, sollten Sie den Bild-WordPress-Block verwenden. Es mag anderen vorgestellten Blöcken ähneln, es gibt jedoch erhebliche Unterschiede, die es perfekt für Einzelbilder machen.

Wann sollte der Bildblock verwendet werden?

Der Bildblock sollte insbesondere dann verwendet werden, wenn das auf dem Bild angezeigte Objekt für Ihren Webbesucher besonders wichtig ist und Sie Folgendes erreichen möchten:

• Erregen Sie die Aufmerksamkeit des Webbesuchers mit einem bestimmten Bild.
• Bild mit Bildunterschrift anzeigen.
• Zeigen Sie Infografiken an, die den Besuchern helfen, das besprochene Thema besser zu verstehen.

Bildblockeinstellungen

Einer der größten Vorteile des Image WordPress-Blocks sind die Optionen für die Bildgröße. Sie können die Größe eines Bildes ganz einfach ändern, indem Sie es an der Ecke ziehen, eine feste Größe in Pixel wählen oder die Größe in Prozent festlegen.

Eine weitere wichtige Option sind Eingabefelder für Alternativtext, Bildunterschrift und Link. Ich empfehle dringend, diese Felder zu verwenden, da sie eine wichtige Rolle bei der On-Page-SEO spielen.

Medien- und Textblock

Kommen wir nun zu den erweiterten Seitenlayouts, die Sie mit dem Medien- und Textblock erstellen können. Mit diesem zentralen WordPress-Block können Sie Medien und Text auf ästhetische und kontextbezogene Weise nebeneinander kombinieren.

Wo kann der Medien- und Textblock verwendet werden?

Obwohl der Medien- und Textblock am besten für die Verwendung in Blogbeiträgen geeignet ist, können Sie ihn mit etwas Fantasie auch anderswo verwenden. Sie können beispielsweise eine schöne Produkt- oder Serviceübersicht erstellen, indem Sie Bild und Text nebeneinander verwenden.

Vergessen Sie nicht, dem Textabschnitt des Medien- und Textblocks einen Schaltflächenblock hinzuzufügen, wenn Sie ihn als Produkt-/Dienstleistungsübersicht verwenden. Auf diese Weise können Sie auf jeder Seite einen schönen CTA-Bereich gestalten.

Vorteile von Medien- und Textblock

• Bild und Text zusammenbringen, die kontextuell zueinander passen.
• Vermeiden Sie eine falsche Platzierung von Bildern innerhalb des Blogposts.
• Hilft bei der Reaktionsfähigkeit der Website (verwenden Sie die Funktion „Auf Mobilgeräten stapeln“).

Medien- und Textblockeinstellungen

Wenn Sie sich die Einstellung des Medien- und Textblocks ansehen, werden Sie eine ganze Reihe von Ausrichtungsoptionen bemerken, von denen einige im Vergleich zu den meisten anderen Blöcken einzigartig sind.

Eine interessante und nützliche Einstellung dieses Blocks ist die Hintergrundfarbe. Indem Sie den Bereich um zusammenpassendes Bild und Text einfärben, können Sie deren Zusammenhang optisch hervorheben.

Einen Link ab WordPress-Version 5.4 (31.3.2020) einfügen. Sie können zwischen Link, Mediendatei oder Anhangseite wählen.

Tischblock

Der Tabellenblock ist eines der Beispiele dafür, wie sich WordPress nach der Einführung des WordPress-Blockeditors in Version 5.0 und höher verbessert hat. Während Sie zuvor ein Plugin zum Einfügen einer Tabelle in Ihre WordPress-Website benötigten, können Sie jetzt einfach den Tabellenblock verwenden.

Wo kann der Tabellenblock verwendet werden?

Tabellen spielen eine große Rolle dabei, nützliche Inhalte übersichtlich und transparent bereitzustellen. Sicherlich haben die meisten Websites Tabellen verwendet. Hier sind nur einige Beispiele für die Verwendung von Tabellen auf verschiedenen Websites:

• Datenvergleich
• Preistabellen
• Technische Details zum Produkt
• Rezepte
• Übersicht über die Mitgliedschaftspakete

Es ist wirklich erstaunlich, den Table-Block als Teil des kostenlosen WordPress-Kerns zu haben.

Tabellenblockeinstellungen

Wenn Sie einen Tabellenblock in die Seite einfügen, müssen Sie eine Reihe von Spalten und Zeilen Ihrer Tabelle definieren. Keine Sorge, diese Nummer ist nicht festgelegt. Sie können jederzeit weitere Zeilen und Spalten hinzufügen (oder entfernen).

Wählen Sie dann einen Stil für Ihren Tisch: Standard oder Streifen. Fahren Sie mit der Ausrichtung und dem Schriftstil fort und füllen Sie abschließend Ihre Tabelle aus, bevor Sie ihr den letzten Schliff geben.

Zu den weiteren Optionen gehören:

• Hintergrundfarbe
• Zellen mit fester Breite
• Header
• Fusszeile
• Link (Texteintrag in einer Tabelle kann auf andere Seiten verlinken)

Welchen Block möchtest du als nächstes sehen?

Ich hoffe, es hat Ihnen Spaß gemacht, unsere Auswahl an sehr nützlichen WordPress-Kernblöcken zu lesen, die allen kostenlos zur Verfügung stehen. Bitte teilen Sie uns mit, über welche Blöcke Sie als Nächstes lesen möchten oder welche Funktionalitäten Ihnen im WordPress-Kern noch fehlen. Danke fürs Lesen!