Stylischer CSS oder SVG Hintergrund mit WordPress

Stylischer CSS oder SVG Hintergrund mit WordPress

Ein toller Hintergrund muss nicht immer aus starren Bildern bestehen. Ich zeige dir, wie du einen stylischen WordPress CSS Hintergrund mit den fortschrittlichen Kadence Blocks nutzen kannst. Ganz ohne zusätzlichen Page Builder oder Plugin.

Was du benötigst

Für die Umsetzung dieses Tutorials brauchst du keine kostenpflichtigen Plugins oder Dienste, sondern lediglich

  • einen selbst gehosteten WordPress Blog
  • kostenlose Kadence Block Plugin
  • CSS oder SVG Grafik für den Hintergrund

Ich nutze zwar das Kadence Theme, aber es funktioniert auch jedes andere.

SVG Tools und Generatoren

Zunächst brauchst du einen coolen Hintergrund. Im Web werden diese meist als Pattern bezeichnet.

Dazu gehe ich auf einen der folgenden vier Webseiten, um mir was Passendes generieren zu lassen:

Es gibt sicher noch hundert andere tolle Generatoren, aber das sind meine 4 Favs.

Für unsere Website können wir zwar SVG nutzen, aber der SVG-Code muss in den richtigen CSS-Code verpackt werden, damit der Browser damit umgehen kann.

Dafür habe ich einen eigenen SVG zu CSS Hintergrund-Converter bereitgestellt.

Anleitung: SVG als Block-Hintergrund nutzen

Für dieses How-to greife ich hauptsächlich auf die neue Custom CSS Funktion der Kadence Blocks zu. Hier kannst du das Row Layout und alle darin enthaltenen Blöcke mittels CSS anpassen. Oder eben einen Hintergrund aus CSS und SVG hinterlegen.

Ich gehe davon aus, dass du einen funktionierenden WordPress Blog mit den Kadence Blocks installiert hast.

1. Row Layout Block erstellen

Row Layout Block einfügen
Row Layout Block einfügen

Zuerst legst du einen neuen Row Layout Block an.

Am schnellsten geht das mit dem Shortcut „/ro„, den du in einer neuen Zeile im Gutenberg-Editor eingibst. Siehe den Screenshot rechts.

Welches Layout du wählst, bleibt ganz dir überlassen – je nachdem, was du designen möchtest.

Für das Beispiel hier wähle ich zwei Spalten mit 66/33 Aufteilung.

Aktuell schaut das so bei mir im Editor aus:

Screenshot: Row Layout Block mit zwei Spalten
Screenshot: Row Layout Block mit zwei Spalten

Nun fülle ich die linke Spalte mit etwas Text und in der rechten Spalte platziere ich ein Icon.

Den Hintergrund habe ich mit einem violetten Farbverlauf hinterlegt. Das kannst du bei den „Background Overlay Settings“ des Row Layout Blocks machen. Anschließend werden der Text und das Icon weiß „eingefärbt“.

Das Row Layout habe ich mit Inhalt versehen, als Vorbereitung für den CSS Hintergrund.
Das Row Layout habe ich mit Inhalt versehen.

Damit ist das Element fertiggestellt. Es fehlt nur mehr der Hintergrund mit der SVG-Grafik.

2. SVG-Grafik erstellen

Speichere deinen Hintergrund als SVG-Grafik ab.
Speichere deinen Hintergrund als SVG-Grafik ab.

Nun gehst du zu einem der oben genannten SVG-Generatoren. In dem Beispiel habe ich „Circle Scatter“ von https://app.haikei.app/ genutzt.

Öffne das SVG-File im Editor.
Öffne das SVG-File im Editor.

Hast du einen passenden Hintergrund gefunden, speicherst du ihn als SVG-Grafik ab.

Die Grafik öffnest du nun mit einem beliebigen Texteditor und kopierst den gesamten Inhalt in deinen Zwischenspeicher. Siehe Screenshot rechts.

Nun öffnest du den SVG zu CSS Konverter und fügst den zuvor kopierten SVG-Code oben links ein.

In der gleichen Sekunde siehst du im Feld darunter den fertigen CSS-Code für deine Website. Kopiere diesen nun in deinen Zwischenspeicher.

Das SVG zu CSS Tool in Aktion. Der fertig generierte CSS Hintertgrund.
Das SVG zu CSS Tool in Aktion

3. CSS-Hintergrund in WordPress einfügen

Im dritten und letzten Schritt musst du den CSS Hintergrund im WordPress-Editor einfügen.

Markiere nun das zuvor erstellte Row Layout, navigiere im rechten Menü nach unten und erweitere den Punkt „Custom CSS“.

Innerhalb von „selector {“ und den geschwungenen Klammern fügst du nun deinen CSS-Hintergrund ein. Sofort erscheint der neue Hintergrund!

Hier ist mein Beispiel in live. Ich habe nur noch den Button hinzugefügt:

Beschleunige deine Website mit WP Rocket

Verwandle deine Website in eine Rakete mit dem leistungsstärksten, von WordPress-Experten anerkannten Caching-Plugin.

Fertig ist mein Gutenberg-Block mit CSS Hintergrund!

Fazit CSS Hintergrund

Der Gutenberg-Editor ist in den letzten Jahren extrem gewachsen. Mitgewachsen sind auch Erweiterungen wie die Kadence Blocks.

Endlich ist es möglich, CSS-Code direkt im Editor und für einen ganz bestimmten Block zu hinterlegen.

Dank Custom CSS.

Ähnliche Beiträge

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.