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

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):

Rezepte für Katzen

  • 52 glutenfreie Rezepte
  • 100 Seiten mit zahlreichen Fotos
  • Sonderpreis: 14,99 Euro

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:

.cta-area {
	background-color: #FFB800;
	padding: 10px;
	text-align: center;
	border-radius: 5px;
	
}

.cta-area ul {
	list-style-type: none;
}

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:

.metadaten {
	background-color: #FFB800;
	font-variant:small-caps; 
}

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.
Schlagworte: , ,

Teilen

  1. Avatar

    Svenja sagte am

    Hallo,
    vielen dank für den tollen artikel! allerdings habe ich seit mehreren Monaten ein Problem mit den Wiederverwendbaren Blöcken und der Social Sharing Option. Die Social Media Buttons führen leider nicht irgendwohin. (siehe z. B. […])
    Ist es irgendwo versteckt, dass man die Links zu den Profilen hinterlegt? Wir können es partout nicht finden und sind schon total verzweifelt… 🙁

    Vielen Dank im Voraus!
    LG

    Antworten
    • Avatar

      Michael Poguntke sagte am

      Hallo Svenja,

      ich habe mir gerade Deine Seite angesehen: Die Social Icons sind dort korrekt eingebunden, was aber fehlt ist ihr Linkziel. Du musst also (entweder in Deinem Plugin oder im CSS der Seite) konfigurieren, dass diese Links zu Deinen Social Profilen führen.

      Solltest Du noch kein Plugin für Social Media verwenden, dann empfehle ich Dir, eines zu installieren, das Dir Social Media Icons erstellt. Alternativ finde ich diese YouTube-Anleitung hier hilfreich: https://www.youtube.com/watch?v=vy-U5saqG9A.

      Viele Grüße
      Michael

      Antworten
  2. Avatar

    Kathrin Hentzschel sagte am

    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
    • Avatar

      Oliver Meiners sagte am

      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

Sie können erst kommentieren, wenn Sie unseren Datenschutzbestimmungen und den Cookies zugestimmt haben. Aus Datenschutzrechtlichen Gründen dürfen wir andernfalls keine personenbezogenen Daten von Ihnen aufzeichnen.

Klicken Sie dazu einfach unten im Browser Fenster auf den blauen Button Akzeptieren. Nach dem Neuladen der Seite können Sie Ihr Kommentar schreiben.

Diese Webseite verwendet Cookies, um die Nutzung der Seite zu verbessern, den Erfolg von Werbemaßnahmen zu messen und interessengerechte Werbung anzuzeigen. Durch die Nutzung dieser Seite erklären Sie sich damit einverstanden. Informationen