So verwenden Sie den WordPress-Cover-Block

Interessant ist der WordPress Cover Block. Damit können Sie ein Bild, ein Video oder eine Volltonfarbe im Hintergrund platzieren und Inhaltsblöcke zum Vordergrund hinzufügen. Dies bedeutet, dass Sie Blöcke über andere Blöcke platzieren können. Es hat mehr Optionen als die meisten Blöcke. Wenn Sie wissen, wie Sie den Cover-Block verwenden, kann das Design Ihrer Website erheblich verbessert werden.

In diesem Artikel sehen wir uns an, was der Cover Block macht und sehen seine Einstellungen und Optionen. Wir werden auch einige Best Practices für die Verwendung sehen und die häufig gestellten Fragen sehen.

So fügen Sie den Cover-Block zu Ihrem Beitrag oder Ihrer Seite hinzu

Um den Cover-Block zu Ihren Seiten und Beiträgen hinzuzufügen, wählen Sie das Block-Symbol entweder in Ihrem Inhalt oder in der oberen linken Ecke der Seite aus, geben Sie den Namen des Blocks ein und wählen Sie ihn aus.

Sie können auch /cover eingeben und die Eingabetaste drücken oder den Block auswählen.

Sie haben dann einen Cover-Block in Ihrem Inhalt, in dem Sie Medien wie Bilder oder Videos hinzufügen oder Farbe für den Hintergrund verwenden und Text in den Vordergrund stellen können. Sobald Sie Inhalte aus Ihrem Medienordner oder Ihrer Farbe auswählen, wird die Textoption im Vordergrund angezeigt.

Ich habe ein Bild aus meiner Medienbibliothek hinzugefügt und eine Bildunterschrift über dem Bild hinzugefügt. Die Bildunterschrift ist ein Absatzblock. Sie können es in andere Arten von Blöcken ändern, Videos einbetten und mehr.

Sie können auch mehrere Blöcke hinzufügen, indem Sie die Eingabetaste drücken. Wählen Sie wie gewohnt aus Ihren Blöcken aus.

Sie können auch aus einer der vorausgewählten Farben für Ihren Hintergrund wählen.

Die Farbe kann als Overlay über Ihren Bildern verwendet werden.

Cover-Block-Einstellungen und -Optionen

Der Cover Block hat zwei Bereiche mit Einstellungen und Optionen. Die erste ist die Cover-Symbolleiste. Die zweite sind die Optionen für den Cover-Block in der rechten Seitenleiste.

Cover-Block-Symbolleiste

Wenn Sie auf eine beliebige Stelle im Cover-Block klicken, wird dessen Symbolleiste geöffnet.

Typ oder Stil des Cover-Blocks ändern

Die erste Einstellung ändert die Anzahl der Spalten, lässt Sie gruppieren, ändert ein Bild und wählt einen Standardstil oder Rahmen aus. Beim Schweben wird eine Vorschau angezeigt. Ich schwebe über Bild. Image löscht die Inhaltsblöcke, die Sie im Overlay haben.

Ziehen oder verschieben

Ziehen Sie das Ziehwerkzeug (6 Punkte), um den Block an eine beliebige Stelle zu ziehen. Mit dem Verschieben-Werkzeug können Sie auf die Pfeile klicken, um den Block nach oben oder den Text innerhalb des Inhalts zu verschieben.

Ausrichtung

Die Ausrichtungsoptionen umfassen links, zentriert, rechts, breite Breite und volle Breite. Links und rechts umbrechen den Block mit dem Absatz darunter.

Hier das Bild in voller Breite. Dies kann verwendet werden, um Titel zu erstellen, Abschnitte zu unterteilen usw.

Inhaltsposition ändern

Dadurch wird der Inhaltsspeicherort ausgewählt. Es öffnet ein 3×3-Raster mit Punkten. Wenn Sie einen Punkt auswählen, wird der Inhalt an diese Stelle im Bild verschoben.

Volle Höhe umschalten

Dadurch wird das Bild auf seine volle Höhe eingestellt, anstatt die Größe zu ändern.

Duotone-Filter anwenden

Wählen Sie einen Duoton aus Ihren vorausgewählten Optionen. Einer gilt für die Schatten und der andere für die Lichter.

Wählen Sie eine Farbe auf dem Schieberegler aus, um sie anzupassen.

Wählen Sie eine Farbe unter dem Schieberegler aus, um eine vorausgewählte Farbe auszuwählen.

Ersetzen

Dadurch werden die Medienoptionen geöffnet, sodass Sie ein anderes Bild aus der Bibliothek hochladen oder auswählen können.

Optionen

Die Optionen für den Abdeckungsblock umfassen:

Weitere Einstellungen ausblenden – blendet die rechte Seitenleiste aus.

Kopieren – kopiert den Cover-Block, sodass Sie ihn an einer beliebigen Stelle innerhalb Ihrer Seite oder Ihres Beitrags einfügen können.

Duplizieren – erstellt ein Duplikat des Cover Blocks und platziert es unter dem Original.

Vorher einfügen – fügt über dem Cover-Block Platz für einen anderen Block hinzu.

Einfügen nach – fügt Platz unter dem Cover-Block für einen anderen Block hinzu.

Verschieben nach – lässt Sie den Block verschieben, indem Sie eine blaue Linie mit den Pfeiltasten nach oben oder unten verschieben. Drücken Sie die Eingabetaste und Ihr Block wird an die Position der blauen Linie verschoben.

Zu wiederverwendbaren Blöcken hinzufügen – Fügt den Block zu Ihren wiederverwendbaren Blöcken hinzu, sodass Sie ihn auf jeder Seite oder jedem Beitrag verwenden können.

Gruppe – Fügen Sie den Block zu einer Gruppe hinzu, damit Sie sie als eine Einheit anpassen können.

Block entfernen – löscht den Block.

Inhalt des Cover-Blocks

Wenn Sie den Inhalt auswählen, wird ein weiterer Satz von Werkzeugen nur für den Inhalt geöffnet. Der Standard ist ein Absatzblock und enthält alle Standardoptionen für die Symbolleisten- und die Seitenleisteneinstellungen. Sie können es transformieren oder einen beliebigen Block hinzufügen. Dies bietet Ihnen viele Optionen für den Inhalt.

Cover auswählen

Dadurch wird die Inhaltssymbolleiste geschlossen und die Coverblock-Symbolleiste geöffnet.

Größe des Abdeckungsblocks ändern

Ändern Sie die Größe des Bildes, indem Sie den Kreis am unteren Rand des Bildes ziehen.

Cover-Block-Einstellungen

Die Einstellungen für den Cover-Block befinden sich in der rechten Seitenleiste. Klicken Sie auf den Block oder das Zahnrad, um die Seitenleiste anzuzeigen. Wenn Sie den Block im Inhalt des Blocks auswählen, werden seine Seitenleisteneinstellungen angezeigt.

Stile

Zeigen Sie den Block mit oder ohne Rahmen an. Sie können auch festlegen, dass der Rahmen standardmäßig angezeigt wird. Es enthält eine Vorschau, damit Sie sehen können, wie es aussehen würde, bevor Sie es auswählen.

Abstand

Fügen Sie allen Seiten oder bestimmten Seiten Platz hinzu. Wählen Sie jede Seite einzeln aus oder verknüpfen Sie sie miteinander, um sie alle auf einmal anzupassen.

Medieneinstellungen

Wählen Sie den Teil des Bildes aus, der innerhalb des Blocks angezeigt wird. Sie können einen festen Hintergrund (Parallaxe) auswählen, um den Hintergrund zu wiederholen, wenn er für den Bereich zu klein ist, und den Fokuspunkt festlegen, indem Sie einen Kreis verschieben oder die linke und obere Position angeben. Sie können die Medien auch von hier aus löschen. Für Videos steht nur der Focal Point Picker zur Verfügung.

Dieses Beispiel zeigt Fester Hintergrund. Das Bild bleibt beim Scrollen des Textes an Ort und Stelle und erzeugt einen Parallaxeneffekt.

Dies ist Wiederholter Hintergrund. Es ist gut, um interessante Muster mit kleinen Bildern zu erstellen.

Maße

Geben Sie die Höhe in Pixeln an, indem Sie sie in das Feld eingeben. Dies funktioniert genauso wie das Ziehwerkzeug unten im Bild.

Überlagerung

Der Cover Block bietet viele Optionen für das Overlay. Wählen Sie eine vorgefertigte Farbe und wählen Sie ihre Deckkraft. Wählen Sie aus einer Volltonfarbe oder einem Farbverlauf. Sie sehen die Änderungen in Echtzeit. Wenn Sie anstelle eines Bildes eine Farbe anzeigen möchten, können Sie die Farbe hier ändern. Dieses Beispiel zeigt eine Volltonfarbe.

Sie können auch eine benutzerdefinierte Farbe auswählen. Dadurch wird eine Farbauswahl geöffnet, in der Sie die Farbe im Fenster verwenden, die Farbskala mit einem Schieberegler auswählen oder die Hex-, RGB- oder HSL-Codes eingeben können.

Mit der Farbverlaufsoption können Sie die beiden Farben auswählen, die angezeigt werden sollen. Wählen Sie zwischen linear oder radial. Sie können auch die Deckkraft der Farben einstellen. In diesem Beispiel habe ich radial ausgewählt.

Fortschrittlich

Erweitert umfasst zwei Felder. Die erste ist eine Option für einen HTML-Anker. Dadurch wird eine spezielle Webadresse nur für den Cover Block bereitgestellt. Das zweite ist ein Feld zum Hinzufügen zusätzlicher CSS-Klassen. Auf diese Weise können Sie benutzerdefiniertes CSS erstellen, um Ihren Block zu stylen. Der von Ihnen ausgewählte Stil wird auch in diesem Feld angezeigt.

Tipps und bewährte Verfahren zur effektiven Verwendung des Abdeckblocks

Verwenden Sie für Bilder die Medieneinstellungen in der Seitenleiste, um den Teil des Bildes anzuzeigen, den Sie anzeigen möchten.

Verwenden Sie große Bilder mit der Option in voller Breite, um Abschnittstitel zu erstellen.

Wechseln Sie zu mehreren Spalten für den Vordergrund und fügen Sie Bilder, Text und Schaltflächen hinzu, um Handlungsaufforderungen zu erstellen.

Verwenden Sie Overlay- und Textfarben, die leicht über dem Hintergrundbild oder der Farbe zu lesen sind.

Verwandeln Sie den Block in eine Gruppe, wenn Sie die Rahmenfarbe steuern möchten.

Verwenden Sie die Ausrichtungsoptionen, um den Cover-Block in Ihren Inhalt einzufügen oder abzuheben.

Legen Sie die Einstellungen für die Inhaltspositionierung fest, um einige interessante Grafiken zu erstellen und die Aufmerksamkeit des Lesers zu lenken.

Verwenden Sie Fester Hintergrund, um einen Parallaxeneffekt zu erzeugen.

Verwenden Sie kleine Bilder mit wiederholtem Hintergrund, um interessante Hintergrundmuster zu erstellen.

Häufig gestellte Fragen zum Abdeckblock

Was ist der Abdeckblock?

Dies ist ein Block, mit dem Sie Medien oder Farbe zum Hintergrund und andere Blöcke zum Vordergrund hinzufügen können.

Was unterscheidet es von anderen Blöcken?

Es kann andere Blöcke enthalten. Sie können dem Vordergrund weitere Blöcke hinzufügen. Es erzeugt Parallaxe, Muster usw.

Kann es in andere Blöcke umgewandelt werden?

Jawohl. Es kann in einen Bildblock umgewandelt werden. Es löscht alle anderen Blöcke, die Sie zu seinem Inhaltsbereich hinzugefügt haben.

Wofür kann es verwendet werden?

Sie können den Cover-Block verwenden, um einen Hintergrund mit einem Call-to-Action zu erstellen, einen Titel über einem Abschnitt zu erstellen, Poster, Heldenabschnitte oder alles, was Sie mit einem Bild oder Video im Hintergrund haben möchten, zu erstellen.

Abschluss

Das ist unser Blick auf den Cover Block. Dieser Block verfügt über einige der interessantesten Funktionen und ist eine großartige Wahl zum Erstellen von Überschriften, Titeln, CTAs, Parallax-Hintergründen und mehr. Es ist einfach zu bedienen und kann Ihre Website mehr hervorheben als die meisten Blöcke. Seine Fähigkeit, interessante Grafiken zu erstellen, macht ihn zu einem meiner Lieblings-WordPress-Blöcke.

Wir wollen von dir hören. Verwenden Sie den Abdeckblock? Teilen Sie uns Ihre Erfahrungen in den Kommentaren mit.

Ausgewähltes Bild über fourSage / shutterstock.com