Willkommen im STRATO Blog. Hier gibt es News und Tipps rund ums Hosting.

 

Menu

Veröffentlicht am: 28. Februar 2019

WordPress 5.0: So setzt Du die Blöcke optimal ein

Mit den wiederverwendbaren Blöcken bei WordPress 5.0 kannst Du selbst Elemente erstellen und speichern – etwa für den Affiliate-Hinweis oder einen Call-to-Action-Button.

WordPress bietet Blöcke für Formatierungen, Layout-Elemente, Widgets und Social Media. Doch auch individuelle Inhalte lassen sich bei Bedarf per Knopfdruck einfügen. Im Folgenden erfährst Du, wie Du wiederverwendbare Blöcke für einen Affiliate-Hinweis, eine Call-to-Action und wiederkehrende Datentypen (beispielsweise für Rezepte) nutzt.

Block für den Affiliate-Hinweis

Viele Blogger nehmen an Partnerprogrammen teil und binden dann Affiliate-Links in ihre Beiträge ein. So erhalten sie eine Provision, sobald ein Besucher auf den Link klickt und beim Partner etwas kauft. Du musst Deine Leser darüber informieren. Du kannst die Links mit einem Sternchen versehen und dann einen entsprechenden Hinweis unterhalb des Textes platzieren:

Die mit Sternchen (*) gekennzeichneten Links sind sogenannte Affiliate-Links. Wenn du auf einen Affiliate-Link klickst und über diesen Link einkaufst, bekomme ich von dem betreffenden Händler oder Anbieter eine Provision. Dich kostet das keinen Cent.

Statt den Text jedes Mal händisch einzufügen, kannst Du den Hinweis einfach als wiederverwendbaren Block einbinden:

1. Füge über das Plus-Icon den Block Absatz hinzu.

2. Füge den Sternchentext ein und formatiere den Text bei Bedarf (zum Beispiel kursiv).

3. Klicke im Block-Menü auf das Drei-Punkte-Symbol und wähle dann die Option Zu wiederverwendbaren Blöcken hinzufügen. Nun gibst Du dem neuen Block einen Namen wie „Affiliate-Hinweis“ und speicherst das Ganze ab.

Dein Block „Affiliate-Hinweis“ erscheint jetzt im Beitrag sowie in der Block-Übersicht unter der Kategorie Wiederverwendbar. Du kannst den Block wie alle anderen jederzeit über den Editor in Deine Beiträge und Seiten einfügen.

Block für eine Call-to-Action

Mit einer Call-to-Action animierst Du Deine Leser, auf einen Link oder Button zu klicken. Ziele sind häufig die Kontaktaufnahme, das Angebot eines Affiliate-Partners oder ein Produkt aus dem eigenen Shop. Am einfachsten geht das mit dem Block Button: Text eingeben, Link einfügen und über die Block-Einstellungen auf der rechten Seite Styles und Farben anpassen. Du kannst Deinen Button anschließend wie oben beschrieben als wiederverwendbaren Block speichern.

In den Block-Einstellungen stehen drei Button-Styles zur Auswahl: Abgerundet, Kontur und Rechteckig.

Viel flexibler bist Du mit dem Block HTML. Damit kannst Du Deine Call-to-Action zusätzlich mit Text versehen und optisch hervorheben:

1. Wähle den Block HTML.

2. Füge nun den Button mit einer Überschrift und einer Liste per HTML ein. Umschließe den kompletten Block mit einer individuellen Klasse, um den Bereich per CSS gestalten zu können. In diesem Beispiel ist das die Klasse „cta-area“ (verwende Deine URL und Deinen Linktext):

3. Gib im Backend (DesignCustomizerZusätzliches CSS) die gewünschten CSS-Anweisungen ein. Mit dem folgenden Beispiel-Code änderst Du unter anderem die Hintergrundfarbe und zentrierst den Inhalt:

Im Frontend sieht das anschließend so aus:

4. Klicke im Block-Menü auf das Drei-Punkte-Symbol und speichere den Block unter einem beliebigen Namen als wiederverwendbaren Block.

Block für wiederkehrende Datentypen

Bloggst Du regelmäßig über Literatur, Musik oder Rezepte? Dann weißt Du, dass bestimmte Datentypen immer wiederkehren. Bei Rezepten sind das zum Beispiel die Zutaten oder die Zubereitungszeit. Statt diese Informationen jedes Mal erneut in den Fließtext einzufügen, kannst Du benutzerdefinierte Felder anlegen.

Mit Hilfe eines wiederverwendbaren Blocks ist das noch einfacher und hat den Vorteil, dass Du den PHP-Code dafür nicht ändern musst. Das Vorgehen ist ähnlich wie oben:

1. Füge einen neuen Block ein – dieses Mal als Tabelle.

2. Wähle zwei Spalten und so viele Zeilen wie Datentypen. In unserem Rezept-Beispiel ist das je eine Zeile für Zutaten, Zubereitungszeit und Schwierigkeitsgrad.

3. Trage Deine Datentypen in die linke Spalte ein. Die rechte Spalte bleibt erstmal leer.

4. Gib in den Block-Einstellungen rechts unter Erweitert eine zusätzliche CSS-Klasse ein (zum Beispiel „metadaten“). Damit kannst Du den Bereich im nächsten Schritt individuell gestalten.

5. Mit der CSS-Klasse kannst Du die Tabelle jetzt im Customizer anpassen. Mit den folgenden Anweisungen änderst Du die Hintergrundfarbe und verwendest für den Text Kapitälchen:

6. Speichere den Block im Editor als wiederverwendbaren Block. Danach kannst Du die rechte Spalte der Tabelle ausfüllen. Hier ist das Ergebnis für das Rezept eines leckeren Erdbeer-Kuchens:

Übrigens: In der Block-Kategorie Wiederverwendbar befindet sich der Link „Alle wiederverwendbaren Blöcke verwalten“. Hier kannst Du Deine selbst gebauten Blöcke bearbeiten, löschen und sogar importieren/exportieren. Letzteres ist praktisch, wenn Du mehrere WordPress-Blogs betreibst.

Effizienter bloggen mit wiederverwendbaren Blöcken

Wiederverwendbare Blöcke eignen sich am besten für Inhalte, die Du häufig benötigst (aber nicht immer!). So kannst Du von Fall zu Fall entscheiden, ob und wo sie erscheinen sollen. Für permanente Werbebanner oder Social Media Links dagegen sind Widgets und Plugins nach wie vor die bequemste Lösung. Damit bist du maximal flexibel – und kannst Dein Kuchenrezept endlich mit einem Call-to-Action-Button verbinden:

Wir verwenden übrigens auch Call-to-Action-Buttons:

Starte jetzt mit Deinem eigenen WordPress-Blog durch.

Der Autor:

Autor: Christian Lingnau

Ich heiße Christian Lingnau und bin freier Redakteur für Hosting-Themen, insbesondere WordPress.

2 Kommentare

  1. Kathrin Hentzschel sagte am 4. März 2019 um 17:59:

    Seit es die Blöcke gibt, ist es aber nicht mehr möglich, einzelne Wörter oder Links einzufärben. Das ist sehr schade, und ich weiß nicht, woran es liegt. Links sind nun im Text nicht mehr als solche erkenntlich, ztumal man sie auch nicht unterstreichen kann.

    Antworten
    • Oliver Meiners sagte am 11. März 2019 um 16:04:

      Hallo Kathrin,

      hier die Antwort unseres Autors Christian:

      Das Layout wird durch das aktive Theme festgelegt. Per CSS kannst Du die Links aber auch selbst gestalten. Den Code trägst Du entweder in das Stylesheet des Themes oder als „Zusätzliches CSS“ im Customizer ein (WordPress Backend unter „Design“). Mehr Infos zu CSS & Links gibt es hier:
      https://www.w3schools.com/css/css_link.asp
      Viele Grüße

      Antworten

Hinterlasse eine Antwort

Bitte beachte, dass sich Dein Kommentar auf den Artikel beziehen sollte. Wenn Du ein persönliches Kundenanliegen besprechen möchtest, wende Dich bitte an unseren Kundenservice auf Facebook, Twitter oder über Hilfe & Kontakt.
Wir freuen uns, wenn Du uns Deinen Namen hinterlässt. So wissen wir, wie wir Dich bei unserer Antwort ansprechen können.
Wenn Du Deine E-Mail-Adresse einträgst, wirst Du per Mail über unsere Antwort informiert. Sie wird zum Schutz Deiner Daten aber nicht veröffentlicht. Beide Angaben sind freiwillig.

Hier bloggen

Lisa Kopelmann
Ist Ansprechpartnerin für den Blog und berichtet über aktuelle STRATO Themen

Oliver Meiners
Schreibt über alles, was für Dich als STRATO Kunde wichtig ist

Michael Poguntke
Schreibt über den Online-Speicher HiDrive, den Homepage-Baukasten, Webshops und Server

Thomas Ritter
Berichtet über Neuigkeiten aus dem Unternehmen

Bianca Restorff-Adrion
Schreibt über Karriere & die Menschen bei STRATO

Christian Lingnau
Bloggt über WordPress & andere CMS

Franz Neumeier
Gibt Tipps zum erfolgreichen Bloggen

Sven Hähle
Kennt sich bei Domains hervorragend aus

Patrick Schroeder
Erzählt die Stories unserer Kunden

Ann-Christin Schmitt
Schreibt über HiDrive, den Homepage-Baukasten und guten Websitecontent

Christian Rentrop
bloggt über Software-Themen