Ich werde dieses Intro sehr kurz halten.
Hier ist, was wir in diesem Artikel diskutieren werden:
- Was sind Hintergrundbilder
- Was ist mit Parallaxenhintergründen?
- So fügen Sie Ihrer WordPress-Website Hintergrundbilder hinzu
- So nähern Sie sich der Bildgröße in WordPress
Fertig, stetig? Los geht’s!
Was sind Hintergrundbilder?
Hintergrundbilder sind Bilder, die auf den Hintergrund eines Elements auf einer Website, in einer E-Mail usw. angewendet werden. Während das Heldenbild der Hauptfokus einer Website oder einer E-Mail ist, sind die Hintergrundbilder subtiler. Sie unterstützen andere Website-Elemente als zweite Ebene: Handlungsaufforderungen, andere Bilder, verschiedene Bereiche der Website usw.
Schauen wir uns einige Beispiele für solche Hintergrundbilder an:
IKEA
Auf der Homepage der IKEA-Website werden Hintergrundbilder verwendet, um ihre inspirierenden Geschichten zu präsentieren. Der Titel und die Kategorie der Geschichte werden über dem Bild platziert. Es wird eine Verlaufsüberlagerung verwendet, um die Deckkraft des tatsächlichen Bildes zu verringern. Dieser Ansatz trägt dazu bei, den Text sichtbarer zu machen, schafft aber auch Konsistenz im Design, sodass keine Farbe mehr hervorsticht als eine andere.
Loving Vincent
Einer meiner Lieblingsfilme, dieser.
Hintergrundbilder liegen hinter einem Karussell, das Geschichten hinter Vincent van Gogh und dem Film präsentiert. Die Hintergrundbilder scheinen die Geschichte zu stärken und starke Emotionen auszulösen.
Lush
Ich liebe es, wie die Lush-Website aussieht: bunt und lebendig wie die Produkte selbst.
Jetzt können Hintergrundbilder Muster oder Formen verwenden, wie in diesem Beispiel für die Newsletter-Anmeldeseite. Diese Muster schaffen es, etwas potenziell Langweiliges in etwas Fröhliches zu verwandeln.
Parallaxe-Hintergrundbilder
Wenn Sie sich die Website des British Museum ansehen, werden Sie feststellen, dass sich auf ihren Seiten Bilder befinden, die im Hintergrund liegen und der Vordergrundinhalt nach unten scrollt. Dies sind Parallaxe Hintergrundbilder.
Parallax Scrolling ist einer dieser Webdesign-Trends, der es schafft, einer Website bei korrekter Integration einen brillanten Effekt zu verleihen.
Sie können einen solchen Effekt auch in WordPress erzielen, ich werde Ihnen später zeigen, wie.
So fügen Sie Ihrer WordPress-Website Hintergrundbilder hinzu
Es gibt drei Möglichkeiten, Ihrer WordPress-Website Hintergrundbilder hinzuzufügen. Schauen wir sie uns an, sollen wir?
-
Hinzufügen von Hintergrundbildern über Ihren WordPress Theme Customizer
Die meisten beliebten WordPress-Themes haben diese Option zur Verfügung. Ich werde das Colibri-Thema für den Zweck dieses Beispiels verwenden. Andere Themen verhalten sich ähnlich wie das Colibri-Thema.
Wenn das von Ihnen gewählte Thema die Funktion nicht unterstützt, fahren Sie mit den Methoden 2 und 3 fort.
Beginnen wir nun mit der Überschrift Aussehen -> Anpassen aus dem WordPress-Dashboard. Auf der linken Seite sehen Sie die Customizer-Bearbeitungsoptionen des Themas, während auf der rechten Seite eine Live-Vorschau Ihrer Website angezeigt wird.
Das Thema ermöglicht es Ihnen, Hintergrundbilder für:
- Zeilen
- Spalten
- Blöcke (ganze Website-Abschnitte wie: Über mich, Portfolio, Team, Kontakt usw.)
- Komponenten (Überschriften, Karussells, Preistabellen, Karussells usw.)
Die Art und Weise, wie Sie dies tun können, ist dieselbe, egal wo Sie Ihr Hintergrundbild benötigen.
Angenommen, Sie möchten Ihrem Services-Website-Block ein Hintergrundbild hinzufügen. Beginnen Sie mit der Auswahl des Abschnitts. Auf der linken Seite sehen Sie die Bearbeitungsoptionen in einem Menü, das wie folgt strukturiert ist:
- Layout
- Stil
- Erweitert
Gehen Sie zu Stil -> Hintergrundtyp.
Wählen Sie „Bild“. Sie sehen nun ein Bild, das Sie durch Ihr eigenes ersetzen können. 
Wenn Sie auf das Bild klicken, werden Sie zu einem Bildschirm aufgefordert, auf dem Sie ein Bild aus der WordPress-Mediengalerie auswählen oder ein anderes Bild hochladen können.
Wie Sie vielleicht schon bemerkt haben, können Sie sogar ein Video als Hintergrund hinzufügen.
Und es gibt auch eine Umschaltoption für den Parallaxeneffekt!
Jetzt gibt es eine weitere Verknüpfung, um dieses Hintergrundbild zu ändern. Wenn Sie einen Block von rechts auswählen, wird das Einstellungssymbol angezeigt. Klicken Sie darauf und Sie sehen einige Bearbeitungsoptionen.
Wenn Sie „Hintergrund ändern“ auswählen, werden Sie in „Stil“ geleitet, um wie oben beschrieben fortzufahren.
Das war alles Leute. Ziemlich einfach, oder?
Wenn Ihr Thema nicht über die Option Hintergrundbild verfügt, können Sie dies im WordPress-Standardeditor tun.
-
Hinzufügen eines Hintergrundbilds mit WordPress-Blöcken
Gehen Sie im WordPress-Dashboard zu „Seiten“. Wählen Sie nun „Bearbeiten“ unter der gewünschten Seite. Sie sehen eine Schnittstelle wie unten gezeigt.
Der Standard-WordPress-Editor ist blockbasiert, was bedeutet, dass jeder Website-Abschnitt aus Blöcken besteht. Auf diese Blöcke kann über jedes „+“ – Zeichen zugegriffen werden, das in der Benutzeroberfläche angezeigt wird. Klicken wir auf den oben links.
Wählen Sie nun den Block „Cover“ aus. Sie werden sehen, dass es sofort auf Ihrer Seite angezeigt wird.
Sie können ein Bild hochladen, das lokal auf Ihrem Computer gespeichert ist, oder aus den vorhandenen Bildern in der Medienbibliothek auswählen.
Ich habe ein Bild aus der Mediathek ausgewählt. Jetzt kann ich etwas Text hinzufügen. Die Bearbeitungsmöglichkeiten sind hier recht begrenzt.
Wenn Sie das Cover auswählen, wird oben ein Menü angezeigt, in dem Sie Ihr Bild ausrichten oder Ihren gesamten Block duplizieren können. Sie können Ihren Block sogar als wiederverwendbaren Block speichern, um ihn in anderen Designs erneut zu verwenden.
Jetzt haben Sie auf der rechten Seite des Bildschirms einige zusätzliche Bearbeitungsoptionen.
Wenn Sie in den Medieneinstellungen die Option fester Hintergrund aktivieren, aktivieren Sie den Parallaxeneffekt.
Wenn der Schalter ausgeschaltet ist, können Sie den Brennpunkt einstellen.
Diese Fokuspunktanpassung kann auch prozentual unter Berücksichtigung der Breite und Höhe vorgenommen werden.
Als nächstes können Sie ein Overlay hinzufügen. Sie können die Farbe und Deckkraft wählen.
Und Sie sind fertig.
-
Hinzufügen von Hintergrundbildern über WordPress-Plugins
Hier sind einige WordPress-Plugins, die als Hintergrundbild-Plugins gekennzeichnet sind. Ich werde ein bisschen mit dem einfachen Vollbild-Hintergrundbild-Plugin spielen, da es die meisten Installationen und die besten Bewertungen bisher hat.
Hier ist ein Tutorial zur Installation eines WordPress-Plugins.
Mit diesem Plugin werden Bilder automatisch mit dem Browser skaliert, sodass das Bild unabhängig von der Browsergröße immer den Bildschirm ausfüllt.
Alles, was Sie tun müssen, ist zu Appearance -> Fullscreen BG Image . Wählen Sie hier Ihr Bild aus.
Wenn Sie auf „Optionen speichern“ klicken, sehen Sie, dass alle Abschnitte auf Ihrer Website ohne Hintergrund dieses Bild als Hintergrund erhalten.
Nun, das ist, was in der kostenlosen Version passiert. Es ist ziemlich einfach und überhaupt nicht flexibel. Der kostenpflichtige Plan enthält zusätzliche Optionen wie:
- Unbegrenzte Hintergrundbilder
- Post / seitenspezifische Hintergrundbilder
- Mehrere Bilder mit Überblendungsübergängen auf Seiten
Und fertig, Sie haben gerade die 3-Methoden herausgefunden, mit denen Sie Ihrer WordPress-Site Hintergrundbilder hinzufügen können.
Es gibt noch eine Sache, die ich möchte, dass Sie wissen, bevor wir es einen Tag nennen können.
Bildgrößen
Bevor Sie ein Bild auf Ihre Website hochladen, achten Sie auf dessen Größe. Ich weiß, dass wir alle Megapixel betrachten, aber im Web gibt es einen Haken. Hochauflösende Bilder können Ihrer Website schaden, indem sie die Ladezeit beeinträchtigen. Auf lange Sicht kann jede zusätzliche Ladesekunde Website-Besucher und Conversions verlieren. Außerdem verringern Sie Ihre Chancen, in Suchmaschinen zu ranken, erheblich, da die Alterungsgeschwindigkeit ein wichtiger Rankingfaktor ist.
Andererseits kann die Verwendung von Bildern, die zu klein sind, auch Ihre Benutzererfahrung beeinträchtigen. Also müssen wir über die Runden kommen.
Eine Möglichkeit, dies zu tun, besteht darin, externe Apps zu verwenden, mit denen Sie die Größe Ihrer Bilder ändern und gleichzeitig die richtige Klarheit gewährleisten können.
Aber in WordPress können Sie dies einfach mit einem … Plugin tun, wie Sie vielleicht schon erraten haben.
Hier bei Colibri sind wir Smush-Fans. Smush kann und wird Bilder ohne sichtbaren Qualitätsverlust komprimieren.
In der Pro-Version werden auch Bilder in WebP konvertiert, ein Bildformat der nächsten Generation, das Bilddateigrößen ohne offensichtlichen Qualitätsverlust um bis zu 35% komprimieren kann.
Und das ist ein Wrap, Leute!
Wenn Ihnen dieser Artikel gefallen hat und Sie mehr darüber erfahren möchten, wie Sie eine WordPress-Website entwerfen, abonnieren Sie unbedingt den Youtube-Kanal von Colibri und folgen Sie uns auf Twitter und Facebook!