Der Unterschied zwischen abgedeckten Bildern und empfohlenen Bildern in WordPress

Als WordPress 5.0 den Gutenberg-Editor einführte, brachte es auch einige neue Funktionen in WordPress. Einige dieser Funktionen werden in Form von Blöcken angezeigt. Einer dieser Blöcke heißt Cover, der ein abgedecktes Bild mit mehreren anpassbaren Funktionen in Ihrem Beitrag oder Seiteninhalt platziert.

Natürlich bietet WordPress weiterhin die Möglichkeit, ein vorgestelltes Bild für Seiten und Beiträge anzugeben. Dies wirft mehrere Fragen auf. Sind Cover-Bilder und Featured-Bilder gleich? Wenn nicht, was sind sie und wie werden sie verwendet? Was ist der Unterschied? In diesem Artikel besprechen wir das abgedeckte Bild im Vergleich zu den vorgestellten Bildern in WordPress und beantworten jede dieser Fragen.

Abgedeckte Bilder

Ein Titelbild ist ein großes Foto, das normalerweise oben auf einer Seite oder einem Beitrag platziert wird. Sie wurden auch als Header-Images bezeichnet. Sie repräsentieren den Inhalt. Es ist das Erste, was der Leser beim Betrachten des Inhalts sieht. Es hilft, die Stimmung zu bestimmen oder den Artikel visuell zu beschreiben, damit der Leser eine Vorstellung davon hat, was ihn erwartet. Sie können auch auf der gesamten Seite oder im Beitrag verwendet werden, um den nächsten Abschnitt einzuführen.

Titelbilder können in Gutenberg einfach zu Ihren Inhalten hinzugefügt werden und enthalten einige Styling-Funktionen, die für das vorgestellte Bild nicht nativ verfügbar sind.

Gutenberg enthält einen neuen Block namens Cover, mit dem Sie ein Titelbild für Ihre Beiträge oder Seiten erstellen können. Sie finden den Block auf der Registerkarte Gemeinsame Blöcke in der Blockliste.

Mit dem Cover-Block können Sie ein Bild mit einer Überlagerung und Text hinzufügen. Laden Sie Ihr Bild hoch oder wählen Sie Ihr Bild aus der Mediathek aus. Wenn Sie möchten, können Sie auch ein Video verwenden, das hinter dem Text und der Überlagerung abgespielt wird. Dies ist großartig, um auffällige Header zu erstellen. Dies ist mit einem vorgestellten Bild ohne die Verwendung eines Drittanbieter-Plugins nicht möglich.

Nachdem Sie das Bild oder Video hinzugefügt haben, sehen Sie Funktionen für den Text, feste Hintergrundeinstellungen und Overlay. Es hat einige Ausrichtungseinstellungen über dem Bild.

Um den Titel hinzuzufügen, platzieren Sie einfach Ihren Cursor dort, wo „Titel schreiben…“ steht, und beginnen Sie mit der Eingabe. Es hat auch Optionen zum Verwenden von Fettdruck, Kursivschrift, Hinzufügen eines Links oder Durchstreichen des Textes. In den Einstellungen über dem Bild können Sie den Text ausrichten.

Fester Hintergrund fügt eine Parallaxe-Funktion für Bilder hinzu. Das Bild bleibt an Ort und Stelle, während der Text scrollt. Diese Funktion ist für Videos nicht verfügbar, aber alle anderen Einstellungen sind verfügbar.

Fügen Sie eine Überlagerungsfarbe hinzu, indem Sie die gewünschte Farbe aus den Auswahlmöglichkeiten auswählen, oder wählen Sie den mehrfarbigen Kreis aus, um eine benutzerdefinierte Farbe auszuwählen.

Die benutzerdefinierte Farbe enthält einen Farbwähler mit einem Schieberegler und zeigt den Farbwert in Hex oder in RGB an.

Die Hintergrunddeckkraft ändert die Deckkraft der Überlagerung, sodass Sie wählen können, ob mehr vom Bild und weniger von der Überlagerungsfarbe oder mehr von der Überlagerung und weniger vom Bild angezeigt werden soll. In diesem Beispiel habe ich die Deckkraft auf 80 eingestellt. Sie können erkennen, dass dort ein Bild vorhanden ist, aber Sie können nicht viele Details sehen.

In diesem Beispiel habe ich die Deckkraft auf 20 eingestellt. Es ist viel mehr vom Bild zu sehen, aber es zeigt immer noch einen Hauch der Farbe des Overlays.

Das Bild hat auch eine Option für die volle Breite in den Einstellungen oben im Bild. Dies ist großartig, um Bild- oder Video-Header zu erstellen oder schöne Abschnittseinleitungen zu erstellen.

Cover-Blöcke eröffnen viele Gestaltungsmöglichkeiten, indem Sie Bilder mit Text, Overlays und Parallaxe hinzufügen. Bild/Video, Text, Farben und Parallaxe helfen dabei, die Stimmung des Artikels zu bestimmen und die Zielgruppe anzusprechen. Sie können mehrere Cover-Blöcke im gesamten Inhalt verwenden, um neue Abschnitte einzuführen (die normalerweise mit Kopfzeilentext gekennzeichnet sind) oder einfach nur Seitenlinks oder Produkten eine visuelle Attraktivität hinzuzufügen.

Ausgewählte Bilder

Das vorgestellte Bild liefert das Thumbnail des Beitrags. Diese Miniaturansichten werden überall angezeigt, wo ein vorgestelltes Bild angezeigt wird, z. B. auf Startseiten, die Blog-Posts zeigen, Blog-Archivseiten und auf einzelnen Posts. Das vorgestellte Bild repräsentiert den Artikel selbst. Sie werden verwendet, um Interesse zu wecken und den Leser über die Art oder den Zweck des Artikels zu informieren.

Sie werden auch als Standardbild verwendet, das angezeigt wird, wenn der Inhalt in sozialen Medien geteilt wird, es sei denn, dieses Bild wird manuell mit einem Plugin wie Yoast überschrieben, wie im obigen Beispiel gezeigt.

Das vorgestellte Bild wird in den Post- oder Seiteneinstellungen hinzugefügt. Klicken Sie auf Empfohlenes Bild festlegen und wählen Sie Ihr Bild aus oder laden Sie es in die Medienbibliothek hoch.

Themen wie Twenty Nineteen enthalten eine Überlagerung für das vorgestellte Bild. Sie können die Farben im Theme-Anpasser unter Farben auswählen. Blau ist die Standardfarbe, aber Sie können den Schieberegler verwenden, um fast jede beliebige Farbe auszuwählen.

Sie können auch die Überlagerungen der vorgestellten Bilder anpassen, wenn Sie Seitenersteller wie Divi und Extra verwenden. In diesem Beispiel passe ich das Overlay-Symbol für vorgestellte Bilder und die Hover-Overlay-Farbe für das Blog-Modul an.

Titelbilder und Featurebilder zusammen verwenden

Sie können das Titelbild und das vorgestellte Bild zusammen auf derselben Seite oder demselben Beitrag verwenden. In diesem Beispiel habe ich beide im Artikel angezeigt. Im Idealfall würden sie nicht so nebeneinander sitzen, aber das ist nur, um zu zeigen, dass sie innerhalb des Beitrags erscheinen können. Es gibt jedoch Zeiten, in denen Sie das Titelbild als vorgestelltes Bild verwenden möchten.

Wenn Sie dasselbe vorgestellte Bild wie das Titelbild verwenden, werden die Bilder in Ihrem Inhalt zweimal angezeigt. Es zeigt eigentlich zwei verschiedene Dinge: ein vorgestelltes Bild und ein Titelbild, aber Sie haben für beide dasselbe Bild ausgewählt.

Glücklicherweise gibt es mehrere Möglichkeiten, um dasselbe Bild für beide zu verwenden, ohne dass das Bild zweimal erscheint. Bei einigen Themen, wie Divi und vielen anderen, können Sie das vorgestellte Bild aus dem Inhalt ausschließen.

Wenn Sie mit Divi oder Extra, im Armaturenbrett Menü gehen zu Divi (oder Extra)> Themen - Optionen> Layout und deaktivieren Platz Daumen auf Beitrag im Einzelnen Beitrag Registerkarte Layouts. Diese Option ist auch auf der Registerkarte Einzelseitenlayout verfügbar, sodass Sie die Einstellungen an Ihre Bedürfnisse anpassen können.

In diesem Beispiel entspricht das vorgestellte Bild dem Titelbild. Ich habe ein Hover-Overlay hinzugefügt, das ich demonstriere, indem ich mit der Maus über den Beitrag rechts fahre.

Der Beitrag selbst zeigt nur das Titelbild. Das vorgestellte Bild wird nicht im Inhalt des Beitrags angezeigt.

Extra enthält eine Option, um das vorgestellte Bild im Beitrag einzeln auszublenden. Dies gibt Ihnen mehr Kontrolle darüber, wie WordPress vorgestellte Bilder in Beiträgen und Seiten behandelt. Klicken Sie in den Beitragseinstellungen auf Ausgewähltes Bild im Beitrag ausblenden .

Sie können das vorgestellte Bild im Beitrag auch mit einem Plugin wie Hide Featured Image ausblenden, einem kostenlosen Plugin im WordPress-Repository. Wählen Sie aus, ob Sie alle vorgestellten Bilder in Beiträgen oder Seiten ausblenden möchten, oder blenden Sie sie einzeln auf den Seiten und Beiträgen selbst aus. Zu der Zeit, als ich das Plugin testete, war es nicht mit Twenty Nineteen kompatibel, aber mit Twenty Seventeen und anderen funktionierte es hervorragend.

Es fügt Seiten und Beiträgen eine Option hinzu, um das vorgestellte Bild auszublenden. Dies ist großartig, wenn Sie das vorgestellte Bild standardmäßig anzeigen möchten, es dann jedoch auf Seiten oder Beiträgen ausblenden möchten, die ein Titelbild verwenden. Dies gibt Ihnen mehr Designkontrolle für die Anzeige von vorgestellten Bildern.

Gedanken beenden

Das ist unser Blick auf abgedeckte Bilder im Vergleich zu vorgestellten Bildern in WordPress. Auf den ersten Blick scheinen sie gleich oder ähnlich zu sein, aber in der Praxis sind sie sehr unterschiedlich.

Ausgewählte Bilder locken den Leser auf den Artikel. Ein Artikel hat nur ein vorgestelltes Bild auf der Website, das überall angezeigt wird, wo Miniaturansichten für Beiträge angezeigt werden, aber es kann mit Plugins wie Yoast durch ein anderes Bild ersetzt werden, das in sozialen Medien angezeigt wird. Einige Themes wie Twenty Nineteen und Builder wie Divi enthalten Anpassungen für vorgestellte Bilder.

Titelbilder sind eigentlich Teil des Artikels und können dazu beitragen, die Interaktion mit den Beiträgen zu verbessern. Der Artikel kann im gesamten Inhalt mehrere Titelbilder oder Videos enthalten. Sie eignen sich hervorragend zum Bereitstellen von visuellem Design und zum Trennen von Abschnitten des Artikels, wenn Sie Bilder anstelle von Kopfzeilentext verwenden möchten. Titelbilder sind besonders interessant wegen der in WordPress integrierten Optionen für volle Breite, Text, Parallaxe und Überlagerung. Ich finde es toll, dass es Videos anzeigen kann. Bis Gutenberg war für diese Funktionen ein Plugin oder ein Page Builder erforderlich.

Abgedeckte Bilder und vorgestellte Bilder eignen sich hervorragend, um Ihren Inhalten ein visuelles Design hinzuzufügen. Sie haben unterschiedliche Optionen und Zwecke und Sie können sie einzeln oder zusammen verwenden.

Wir wollen von dir hören. Wie verwendest du abgedeckte Bilder und vorgestellte Bilder in WordPress? Lass es uns in den Kommentaren wissen.

Ausgewähltes Bild über karnoff / shutterstock.com