So legen Sie den Bildhintergrund in WordPress fest

So legen Sie den Bildhintergrund in WordPress fest
WordPress-Hintergrundbild für Homepage mit anderen Elementen.

Es gibt weitere Möglichkeiten, Hintergrundbilder in WordPress hinzuzufügen. Von einfach bis sehr fortgeschritten mit Änderung des Themencodes. Wir freuen uns jedoch, ein benutzerfreundliches Tool vorstellen zu können, das sich ideal für Website-Administratoren ohne Programmier- und Designkenntnisse eignet. Citadela Pro-Plugin verfügt über viele Funktionen und Einstellungen zur Website-Anpassung.

Probieren Sie die leistungsstarken Blöcke, Einstellungen und Funktionen des Citadela Pro-Plugins kostenlos aus. Wir bieten eine 7-Tage-Testversion mit allen Premium-Funktionen an. Entdecken Sie das perfekte Tool, mit dem Sie Hintergrundbilder zu WordPress-Seiten, Beiträgen und benutzerdefinierten Beitragstypen hinzufügen können.

Der Cluster ist ein Gutenberg-Block in WordPress, der es Ihnen ermöglicht, ein Hintergrundbild hinzuzufügen. Mit dem Multifunktionselement können Sie den WordPress-Hintergrund von seinem Standardwert ändern. Sie können nicht nur ein Hintergrundbild hinzufügen, sondern es auch mit anderen Blöcken kombinieren. Sie gewinnen viele Variationen und Vielseitigkeit.

Kombiniert mit dem Seitentitelblockerhalten Sie ganz einfach eine fabelhaft aussehende Website. Sie können weitere Gutenberg-Blöcke hinzufügen und das Hintergrundbild in WordPress anpassen. Außerdem können Sie eine Reihe von Blöcken wie wiederverwendbare Blöcke speichern und an einer beliebigen Stelle auf Ihrer Website ein Thema hinzufügen. So können Sie den Hintergrund der WordPress-Website sofort ändern.

So fügen Sie in WordPress mithilfe des Gutenberg-Blocks ein Hintergrundbild hinzu

Jetzt loslegen

Beginnen Sie jetzt mit einer risikofreien Testversion. Keine Kreditkarte benötigt.

WordPress-Hintergrundbild durch Cluster-Block

Wir stellen Ihnen einen praktischen Block vor, den wir für den WordPress-Gutenberg-Block für das Hintergrundbild erstellt haben – den Cluster-Block. Es ist Teil unserer eigenen Blockgruppe. Das Citadela Pro-Plugin verfügt über viele Funktionen, die Ihnen bei der Erstellung schöner Websites helfen. Alle benutzerdefinierten AitThemes-Blöcke sind in verfügbar Citadela Pro-Plugin.

Bitte lesen Sie Dokumentation zum Clusterblock für Detaileinstellungen.

Mit dem Clusterblock können Sie mehrere Blöcke zu einem gruppieren. Sie können effektiv mit der gesamten Clustergruppe arbeiten, da es sich um einen Block handelt. Die Clusterbreite kann auf die volle Seitenbreite eingestellt werden, sodass Sie besonders viel Platz zum Hinzufügen verschiedener Blöcke haben.

Der Cluster wird nicht auf die volle Breite ausgedehnt, wenn:

  • Sie haben eine aktive Seitenleiste
  • Wenn Sie Spalten verwenden, wird der Platz für Cluster eingeschränkt

Da einige der wichtigsten WordPress-Blöcke nur an der Breite des Inhalts ausgerichtet werden können, bietet der Cluster-Block eine größere Variabilität beim Aufbau Ihrer Website. Eine tolle Funktion ist auch, dass Sie in WordPress ein Hintergrundbild festlegen, seine Farbe ändern oder ein Hintergrundbild überlagern können. Der Hintergrund kann daher an das Website-Design angepasst werden.

In diesem Artikel zeigen wir Ihnen:

So fügen Sie einen Clusterblock hinzu

Der Cluster-Block ist ein Premium-Block und nur verfügbar, wenn Sie ihn installieren und aktivieren Citadela Blocks-Plugin. Nach der Installation des Plugins wird der Cluster-Block automatisch zum WordPress-Blockeditor hinzugefügt und Sie können sofort damit beginnen, damit zu arbeiten.

Clusterblöcke können sowohl in Beiträgen als auch in Seiten hinzugefügt werden. Klicken Sie einfach auf das „+“-Zeichen in der oberen Leiste oder irgendwo auf dem Editor-Desktop. Suchen Sie anschließend einfach nach dem Cluster-Block.

Fügen Sie den Cluster-Block zum WordPress-Editor hinzu, indem Sie auf „+“ klicken.
Cluster-Block hinzufügen, indem Sie auf „+“ klicken

Die zweite Möglichkeit zum Hinzufügen eines Clusterblocks besteht darin, „/“ und danach den Blocknamen einzugeben. Der Clusterblock ist dann einsatzbereit.

Clusterblock mit Schrägstrich „/“ hinzufügen
Clusterblock mit Schrägstrich „/“ hinzufügen

Gruppieren von Blöcken mithilfe von Cluster

Das Hauptmerkmal des Cluster-Blocks besteht darin, mehrere Blöcke zu einem zu gruppieren. Schauen wir uns mal an, wie es funktioniert. Wenn Sie einen Cluster-Block in Ihre Seite einfügen, wird sofort ein Platzhalter angezeigt „Hier weitere Blöcke einfügen“. Wenn Sie darauf klicken, erhalten Sie eine Liste aller verfügbaren Blöcke. Sie können den gewünschten Block auch über die Suchleiste oben in der Liste suchen.

Prozess der Auswahl verschachtelter Blöcke
Prozess des Auswählens und Einfügens verschachtelter Blöcke

Für alle verschachtelten Blöcke stehen alle Standardoptionen und -einstellungen zur Verfügung. Wenn Sie beispielsweise einen Bildblock einfügen, haben Sie die Möglichkeit, ein Bild hochzuladen oder es aus der Medienbibliothek auszuwählen.

Mit dem Cluster-Block können Sie beispielsweise einen auffälligen Bereich auf Ihrer Website erstellen, um Ihre neuesten Arbeiten zu präsentieren. Fügen Sie Bilder aus Ihrem Portfolio hinzu und legen Sie anschließend ein Hintergrundbild darunter fest. Sie haben gerade einen schönen Link zu Ihrem Portfolio erstellt.

Bildblock im Clusterblock verschachtelt
Mit Hilfe des Cluster-Blocks erstellte Portfolio-Website

Der Clusterblock kann auch zur Gestaltung einer attraktiven Produktpräsentation verwendet werden. Sie können das Produktbild als Abschnittshintergrund festlegen und dessen Farbe auswählen. Serviceblock kann auch innerhalb des Cluster-Blocks verschachtelt werden.

Im Clusterblock verschachtelter Serviceblock
Verwenden Sie den Service-Block im Cluster-Block, um Ihr Produkt (und seine Funktionen) attraktiver zu präsentieren

Mehrere Blöcke in einem

Wenn Sie dem Cluster mehrere verschachtelte Blöcke hinzufügen möchten, können Sie den Block „Spalten“ verwenden. Mit dem Spaltenblock können Sie mehrere Blöcke nebeneinander hinzufügen. Jede Spalte kann einen anderen Inhaltstyp haben, z. B. ein Bild, einen Absatz, eine Liste oder eine Schaltfläche.

Ein typisches Beispiel für mehrere Spalten in Kombination mit dem Clusterblock ist eine einseitige Website.

Spaltenblock im Clusterblock verschachtelt
Wie kann der Clusterblock in einer One-Page-Website verwendet werden?

Grundeinstellungen in der Symbolleiste: Optionen zur Inhaltsausrichtung

Standardmäßig ist die Clusterblockbreite auf die Inhaltsgröße eingestellt. Sie können dieses Verhalten in der Symbolleiste ändern. Es stehen folgende Optionen zur Verfügung:

  • Inhaltsgröße – Standardoption, Clusterblock hat die gleiche Breite wie der Inhalt.
  • Große Größe – Der Inhalt im Cluster ist breiter als der Inhalt.
  • Volle Breite – in diesem Fall erstreckt sich die Clusterbreite von einer Seite zur anderen des Browserfensters.

Es ist wichtig zu beachten, dass sich diese Einstellung nur auf Cluster-Inhalte auswirkt, wenn Ihr derzeit aktives Design dies unterstützt. Alle verschachtelten Blöcke können je nach Verfügbarkeit ihrer Optionen konfiguriert werden.

Laden Sie das Citadela WordPress-Theme und die Plugins herunter

Beginnen Sie jetzt mit einer risikofreien Testversion. Keine Kreditkarte benötigt.

Farbeinstellungen für Überschriften und Trennzeichen

Farbänderung der Überschrift

Seit WP 5.3 können Sie die Farbe Ihrer Kopfzeile über den Block „Überschrift“ ändern. Dies ist eine sehr nützliche Funktion – insbesondere wenn Sie ein dunkles Layout und Farbschema haben, ist es besser, die Standardtextfarbe (Schwarz) in eine hellere Farbe zu ändern.

Bis zur neuen Version war es nicht möglich, die Farbe der Überschrift zu ändern, was zu Problemen mit der Sichtbarkeit auf dunkler Basis führte. Daher kam es häufig vor, dass die Überschrift mit dem von Ihnen hinzugefügten WordPress-Hintergrundbild oder -Foto verschmolz. Jetzt können Sie die richtige Überschriftenfarbe auswählen, um Ihre Website zum Strahlen zu bringen.

Neue Farbe für den Separator, der auf Ihrer Website verwendet wird

Wenn Sie Ihrem WP ein Hintergrundbild oder eine andere Art von Inhalt hinzufügen, müssen Sie es manchmal vom Rest der Website trennen. Zu diesem Zweck können Sie einen speziellen Block namens Separator verwenden. Durch Einfügen eines Trennzeichens können Sie:

  • Trennen Sie bestimmte Blöcke
  • Teilen Sie den gesamten Text in kleinere Abschnitte auf
  • Markieren Sie wichtige Teile
  • Sorgen Sie für eine bessere Lesbarkeit der Inhalte
  • Vereinfachen Sie die Navigation auf Ihrer Website

Darüber hinaus können Sie jetzt mit dem aktualisierten WordPress die Farbe der Trennlinie ändern. Coloured Separator eignet sich perfekt zur Vervollständigung des Farbschemas Ihrer Website.

So fügen Sie Hintergrundbilder unter gruppierten Blöcken hinzu

Die wahre Stärke des Cluster-Blocks besteht darin, dass Sie ein Hintergrundbild hinzufügen und die Hintergrundfarbe unter gruppierten Blöcken festlegen können. Alles kann einfach im WordPress-Inspektor konfiguriert werden. Schauen wir uns mal an, wie es geht.

  1. Klicken Sie auf Hintergrundbild und aktivieren Sie die Funktion „Hintergrundbild anzeigen“.
  2. Klicken Sie auf „Bild auswählen“. Die Medienbibliothek wird geöffnet. Sie können ein vorhandenes Bild auswählen oder ein neues Bild in Ihre Bibliothek hochladen.
  3. Das Hintergrundbild kann auch auf „Fest“ eingestellt werden. Das bedeutet, dass sich der Hintergrund beim Scrollen der Seite nicht mit dem Inhalt bewegt und seine Position fixiert wird.
  4. Sie können auch mit „Focal Point Picker“ auswählen, welcher Teil des Hintergrundbilds angezeigt werden soll. Es ist auch möglich, einen Teil des Bildes anhand des Prozentsatzes auszuwählen.
So fügen Sie Hintergrundbilder unter gruppierten Blöcken hinzu
Schritt-für-Schritt-Anleitung zum Hinzufügen eines Hintergrundbilds

Jetzt loslegen

Beginnen Sie jetzt mit einer risikofreien Testversion. Keine Kreditkarte benötigt.

Hintergrundüberlagerung

Eine der erweiterten Optionen in Cluster ist die Hintergrundbildüberlagerung. Sie können eine der Standardfarben auswählen oder mithilfe der Farbauswahl eine benutzerdefinierte Farbe auswählen. Es ist auch möglich, die Deckkraft der Farbe festzulegen. Diese Clusterblock-Einstellungen helfen Ihnen, eine wirklich attraktive Website-Präsentation zu erstellen.

WordPress-Hintergrundbild-Overlay
Legen Sie die Hintergrundüberlagerung fest und ändern Sie die Deckkraft, um ein auffälliges Design zu erstellen

Neuer Gruppenblock im Kern verfügbar

Was ist der Unterschied zwischen dem Gruppenblock und dem AitThemes-Clusterblock?

Unser maßgeschneiderter Cluster-Block wurde früher als der Group-Block veröffentlicht und bietet eine komplexere Lösung. Sie können den Gruppenblock zum Gruppieren mehrerer Blöcke verwenden, er verfügt jedoch immer noch über eingeschränkte Funktionen. Sie können beispielsweise keine Farbüberlagerung im Block festlegen – Sie können nur eine grundlegende Hintergrundfarbe auswählen, die das Bild umgibt, nicht darüber.

Die Bearbeitung von Hintergrundbildern ist in unserem Cluster-Block ein Kinderspiel.

Sie können Ihr WordPress-Hintergrundbild hochladen, die Hintergrundfarbe dafür festlegen und auch die Hintergrundfarbe für die Überlagerung festlegen (und auch die Deckkraft der Überlagerung anpassen!). Es dauert nur ein paar Minuten.

4 Gedanken zu „How to set image background in WordPress

  1. Ist es möglich, einem Besucher Ihrer Website mithilfe von Cluster-Blöcken die Möglichkeit zu geben, aus einer Auswahl von Bildern ein Hintergrundbild und ein Overlay-Bild auszuwählen?

    1. Hallo John,

      Vielen Dank für Ihr Interesse an Citadela-Produkten. Ja, um den Hintergrund einzurichten, können Sie aus verschiedenen Optionen wählen. Detaillierte Informationen finden Sie unter: https://www.ait-themes.club/citadela-doc/cluster-block/

      Mit freundlichen Grüße!
      Zlatko
      AIT-Team

Kommentare sind geschlossen.