So erstellen Sie einen (festen) Sticky Block in Gutenberg ohne Code

Suchen Sie nach Möglichkeiten, in Gutenberg einen Sticky-Block zu erstellen? 🤔

Ganz gleich, ob Sie einen Affiliate-Haftungsausschluss erstellen, Rabatte anbieten oder Besucher auf wichtige Merkmale Ihres Produkts aufmerksam machen möchten – ein Klebeblock kann Ihnen dabei helfen, diese Ziele zu erreichen.

Sticky-Blöcke, auch feste Blöcke genannt, bleiben auf dem Bildschirm sichtbar, auch wenn der Benutzer auf der Seite nach unten scrollt. So wird sichergestellt, dass der Inhalt, den Sie hervorheben möchten, immer im Blickfeld des Benutzers ist.

👉 Hier ist ein Beispiel dafür, worüber wir sprechen – Sie können sehen, wie die Social-Icons an ihrer Position „stecken bleiben“, selbst wenn ein Benutzer scrollt:

Das Hinzufügen eines Sticky-Blocks in Gutenberg sorgt für ein nahtloses und ansprechendes Benutzererlebnis, sodass Sie Ihre Botschaft effektiv übermitteln und das Interesse Ihres Publikums wecken können.

Gutenberg bietet keinen sofort einsatzbereiten Sticky Block an. Es gibt jedoch Tools von Drittanbietern, mit denen Sie Sticky-Blocks zu Ihren Beiträgen und Seiten hinzufügen können.

In diesem Tutorial zeigen wir Ihnen, wie Sie mit einem beliebten Gutenberg-Plugin namens Otter Blocks einen Sticky-Block zu Ihrer WordPress-Website hinzufügen.

Lassen Sie uns eintauchen. 🤿

So fügen Sie einen Sticky-Block im Gutenberg-Editor hinzu

Um einen Sticky-Block im Gutenberg-Editor hinzuzufügen, müssen Sie die folgenden Schritte ausführen:

• Schritt 1: Installieren und aktivieren Sie das Otter Blocks-Plugin
• Schritt 2: Aktivieren Sie das Tool „In Sticky umwandeln“ für Ihren Block
• Schritt 3: Ändern Sie die Position des Klebeblocks
• Schritt 4: Offset konfigurieren
• Schritt 5: Aktivieren Sie den Sticky-Block auf Mobilgeräten
• Optionaler Schritt: Probieren Sie den Float-Modus aus
• Optionaler Schritt: Geben Sie das Blockverhalten an

Schritt 1: Installieren und aktivieren Sie das Otter Blocks-Plugin 🔌

Otter Blocks ist ein WordPress-Plugin, das die Funktionalitäten des Gutenberg-Editors erweitert.

Es bietet eine Sammlung von Seitenbausteinen, Editorfunktionen und Vorlagen, um das Design und die Funktion Ihrer Website zu verbessern.

Zu den beliebtesten von Otter angebotenen Blöcken gehören unter anderem Preistabellen, Testimonials, soziale Symbole, Karten, Fortschrittsbalken, Animationen, Countdown und Produktbewertungen. Hier ist eine vollständige Liste der Otter-Blöcke.

Otter Blocks gibt es in einer kostenlosen und einer Premium-Version (genannt Otter Pro).

Sie können die kostenlose Version verwenden, um einen einfachen Sticky-Block in Gutenberg zu erstellen, sodass Sie diesem Tutorial kostenlos folgen können.

Allerdings benötigen Sie die Premium-Version des Plugins, um einige der von uns behandelten Schritte auszuführen, wie z. B. das Hinzufügen des Abstands zwischen dem Block und dem Bildschirm, das Entfernen des Sticky-Blocks im Frontend, die Anzeige von Sticky-Blöcken auf Mobilgeräten usw.

Otter Pro ist für eine jährliche Gebühr von 49 US-Dollar für eine einzelne Website erhältlich. Sie können es hier kaufen. Und wenn Sie das Plugin vor der Verwendung ausprobieren möchten, probieren Sie diese Demo aus.

➡️ Um fortzufahren, installieren Sie entweder die kostenlose oder die Premium-Version von Otter. Im folgenden Tutorial versuchen wir zu erkennen, wann für eine bestimmte Funktion die Premium-Option erforderlich ist.

Schritt 2: Aktivieren Sie das Tool „In Sticky umwandeln“ für Ihren Block 🚧

Öffnen Sie die Seite oder den Beitrag, auf der Sie den Sticky-Block im Gutenberg-Editor hinzufügen möchten.

Wählen Sie den Block aus , den Sie festhalten möchten, und gehen Sie zum Bedienfeld auf der rechten Seite des Editors.

Navigieren Sie im Bedienfeld zu „Block“ und gehen Sie zur Option „Block-Tools“ . Erweitern Sie die Block-Tools, indem Sie das Pluszeichen auswählen.

Wählen Sie dann im Dropdown-Menü die Option „In Sticky umwandeln“ .

Eine neue Option namens „Sticky“ wird direkt unter „Block Tools“ angezeigt. Erweitern Sie das und gehen Sie zu „Sticky To“ .

Unter „Sticky To“ können Sie das Element festlegen, an dem der Block hängen bleiben soll. Es gibt vier Möglichkeiten:

1. Block der obersten Ebene
2. Abschnitt
3. Elternblock
4. Bildschirm

Um diese Optionen zu verstehen und herauszufinden, welche für Ihren Sticky-Post geeignet ist, öffnen Sie die Dokumentübersicht im Gutenberg-Editor und sehen Sie sich die Blöcke an, die Ihren Sticky-Post-Block umgeben.

Der oberste Block ist der Top-Level-Block. Durch Auswahl des Top-Level-Blocks fixieren Sie Ihren Sticky-Block mit dem obersten Block . In unserem Fall ist es der Gruppenblock im Bild unten.

Als nächstes wird durch die Auswahl von „Abschnitt“ sichergestellt, dass der Sticky-Block am Abschnittsblock fixiert wird, und durch die Auswahl von „Parent Block“ wird der Sticky-Block an dem Block direkt über Ihrem Sticky-Block fixiert .

In unserem Fall ist der übergeordnete Block der Abschnittsspaltenblock. Siehe das Bild unten.

Wenn Sie schließlich die Option „Bildschirm“ auswählen, wird der Redakteur angewiesen, alle Blöcke zu ignorieren und den Beitrag einfach oben auf dem Benutzerbildschirm einzublenden .

Die Position des Sticky-Blocks ist standardmäßig auf oben eingestellt. Um zu erfahren, wie Sie die Position ändern, fahren Sie mit dem nächsten Schritt fort.

Schritt 3: Ändern Sie die Position des Klebeblocks 🚩

Um die Position des Sticky-Blocks zu ändern, gehen Sie zurück zum rechten Bereich und suchen Sie nach der Position direkt unter der Option „Sticken an“.

Sie können den Klebeblock oben oder unten auf dem Bildschirm positionieren. Die untere Position steht nur Otter Pro-Benutzern zur Verfügung .

So sieht der Block auf einer unserer Demoseiten aus:

Schritt 4: Offset konfigurieren ⚙️

Versuchen Sie, nachdem Sie die Position des Sticky-Blocks festgelegt haben, eine Vorschau anzuzeigen. Wenn der Block zu weit entfernt oder zu nahe am Bildschirm erscheint, verwenden Sie die Option „Versatz“ , um den Abstand zwischen dem klebrigen Block und dem Bildschirm zu vergrößern oder zu verkleinern.

Schritt 5: Aktivieren Sie den Sticky-Block auf Mobilgeräten 📱

Standardmäßig wird der Sticky-Block nur auf Desktops angezeigt. Wenn Sie es auf Mobilgeräten aktivieren möchten, aktivieren Sie einfach die Option „Auf Mobilgeräten aktivieren“ .

Übrigens können nur Otter Pro-Benutzer auf die mobile Option zugreifen .

Optionaler Schritt: Probieren Sie den Float-Modus aus 🏄

Der Sticky-Block kann so eingestellt werden, dass er auf dem Bildschirm schwebt, wenn Benutzer durch die Seite scrollen. Dies ist eine großartige Möglichkeit, die Aufmerksamkeit des Benutzers zu erregen und ihn auf den Sticky-Block zu lenken.

Nur Otter Pro-Benutzer können den Float-Modus verwenden und er kann nur auf den Block der obersten Ebene angewendet werden, in unserem Fall den Gruppenblock.

Sobald Sie den Float-Modus umschalten, werden Sie aufgefordert, die Breite , Seite und den Seitenversatz des Blocks zu definieren.

Die Breite bezieht sich natürlich auf die Breite des Blocks und die Seite hilft Ihnen dabei, die Position des Blocks (links oder rechts) auf dem Bildschirm zu definieren. Der Versatz bezieht sich auf den Abstand zwischen dem Klebeblock und der gewählten Seite .

Wir empfehlen Ihnen, nach der Konfiguration des Floating-Modus eine Vorschau der Seite anzuzeigen und die erforderlichen Anpassungen vorzunehmen.

Optionaler Schritt: Blockverhalten angeben 👨🏽‍💼

Mit dem Otter Block-Plugin können Sie mehrere Sticky-Blöcke auf derselben Seite erstellen. Manchmal können diese Blöcke miteinander kollidieren. Mit der Option „Verhalten“ können Sie festlegen, wie ein Sticky-Block bei Kollisionen reagiert.

Sie können das Verhalten auf Reduzieren , Ausblenden oder Stapeln einstellen.

Wenn Sie „Zusammenklappen“ wählen, werden die klebrigen Blöcke mit der gleichen Bewegung so eingestellt, dass sie bei einer Kollision ineinander kollabieren , etwa so:

Wenn Sie Fade wählen, wird der Block so eingestellt, dass er im anderen Block verblasst oder verschwindet .

Wenn Sie schließlich „Stapel“ wählen, wird der Block auf den anderen klebrigen Blöcken gestapelt, mit denen er kollidiert, wie im GIF unten gezeigt.

Sowohl Fade als auch Stack stehen nur Otter Pro-Benutzern zur Verfügung .

Das ist es. Sie haben jetzt einen Sticky-Block in Gutenberg hinzugefügt. 🤩

Erstellen Sie Ihren ersten Sticky-Block in Gutenberg 🧱

Das Hinzufügen eines festen oder Sticky-Blocks in Gutenberg ist eine großartige Möglichkeit, die Aufmerksamkeit der Besucher auf die wichtigen Teile Ihrer WordPress-Website zu lenken.

Da Gutenberg keinen Standard-Sticky-Block bietet, müssen Sie ein Drittanbieter-Plugin verwenden, um diese Funktionalität zu Ihrer Website hinzuzufügen.

Obwohl es dort eine Handvoll Sticky-Block-Plugins gibt, ist Otter Blocks das einfachste und benutzerfreundlichste Block-Plugin auf dem Markt.

Es gibt eine kostenlose und eine Premium-Version. Die kostenlose Version kann zum Erstellen eines Sticky-Blocks verwendet werden, aber einige der erweiterten Einstellungen, wie das Fixieren des Blocks am unteren Bildschirmrand oder das Aktivieren des Blocks auf Mobilgeräten, können mit der Premium-Version des Plugins erreicht werden.

👉 Um mithilfe des Otter Blocks-Plugins einen Sticky-Block auf Ihrer Seite einzurichten und auszuführen, müssen Sie die folgenden Schritte ausführen:

Wenn Sie Fragen zum Erstellen eines Sticky-Blocks in Gutenberg haben, teilen Sie uns dies im Kommentarbereich unten mit .