Schritt-für-Schritt-Video
Einführung
Dieses Tutorial stellt das Unfold-Widget des JetTricks-Plugins vor, das in der Crocoblock-Suite enthalten ist. Sie haben die Möglichkeit, einen Teil eines Textes oder einer Vorlage zu verbergen und den Rest anzuzeigen, wenn der Benutzer auf eine Schaltfläche klickt.
Dieses Widget kann Ihnen helfen, Platz zu sparen und das Erscheinungsbild der Seite besser zu organisieren, indem zusätzliche Inhalte ausgeblendet werden. Im Gegensatz zum Weiterlesen-Widget kann es nicht einen oder mehrere Abschnitte ausblenden. Das Unfold-Widget kann jedoch geöffnet und anschließend wieder geschlossen werden. Darüber hinaus bietet es zahlreiche Anpassungsoptionen, die Ihnen helfen, das Beste daraus zu machen. Sie können es beispielsweise für den eingeklappten und den ausgeklappten Zustand unterschiedlich gestalten. Übrigens, wenn Sie weitere Informationen zum Weiterlesen-Widget wünschen, werde ich diese in Kürze zur Elementor Academy hinzufügen.
Eine weitere Funktion dieses Widgets besteht darin, dass es nicht nur zum Ein-/Ausblenden von Text verwendet werden kann, sondern Sie auch eine zuvor erstellte Vorlage verwenden können.
Schauen wir uns an, wie das Unfold-Widget funktioniert.
1. Fügen Sie das Unfold-Widget hinzu
Öffnen Sie im Elementor-Builder die Seite oder den Beitrag, zu dem Sie ein Unfold-Widget hinzufügen möchten. Suchen Sie das Unfold-Widget im Elemente-Panel und ziehen Sie es in den Abschnitt, in dem Sie es platzieren möchten.
2. Definieren Sie die Einstellungen
In der linken Seitenleiste sehen Sie den Einstellungen-Block. Hier können Sie die Einstellungen für das Ein- und Ausklappen definieren.
- Fold (Einklappen): Wenn Sie diese Option nicht aktivieren, wird der Inhaltsblock standardmäßig geöffnet angezeigt. Andernfalls wird er geschlossen angezeigt.
- Scroll to Top After Hiding Content (Nach oben scrollen nach dem Verbergen des Inhalts): Wenn Sie diese Option aktivieren, scrollt der Bildschirm nach oben, wenn Sie den Inhalt eines Blocks verbergen. Dies kann sehr nützlich sein, wenn der Inhalt lang ist, damit der Benutzer den Bezugspunkt nicht verliert.
- Closed Height (Höhe im geschlossenen Zustand): Mit dieser Option können Sie die Höhe des Inhaltsblocks im geschlossenen Zustand definieren. Sie können dies tun, indem Sie den Schieberegler bewegen oder einfach den erforderlichen Wert in die Leiste eingeben.
- Separator height (Trennlinienhöhe): Definiert die Höhe des farbigen Trennstreifens, der am unteren Rand des ausgeklappten Blocks beginnt und nach oben verläuft. Sie können die Farbe mit Transparenz auf der Registerkarte Stil anpassen. Es ist sogar möglich, sie in einen Farbverlauf umzuwandeln.
- Duration (Dauer): Hier können Sie wählen, wie schnell der Inhaltsblock ein- und ausgeklappt wird. Je höher der Wert, desto langsamer die Bewegung.
- Easing (Beschleunigung): Hier stehen 9 Arten von Ein- und Ausklapp-Animationen zur Auswahl.
3. Wählen Sie den Inhalt
Im Inhalt-Block können Sie statischen Inhalt (wie Text, Bilder, Videos oder andere Medien) hinzufügen oder ihn dynamisch aus dem Metafeld extrahieren. Darüber hinaus können Sie eine der verfügbaren Vorlagen zum verborgenen Inhaltsblock hinzufügen.
Um die bereits vorbereitete Vorlage zum verborgenen Block hinzuzufügen, müssen Sie in der Zeile Content Type (Inhaltstyp) auf die Schaltfläche Template (Vorlage) klicken – die Schaltfläche mit dem blattförmigen Symbol. Wählen Sie die Vorlage aus dem Dropdown-Menü aus, und sie wird automatisch zum verborgenen Inhaltsblock hinzugefügt.
4. Passen Sie die Schaltfläche an
Sie können die Schaltfläche, die den verborgenen Inhaltsblock ein- und ausklappt, im Abschnitt Button (Schaltfläche) anpassen.
- Alignment (Ausrichtung): Ermöglicht Ihnen die Auswahl, wo die Schaltfläche platziert wird.
- Fold Icon (Einklapp-Symbol): Sie können das Symbol für die Einklapp- und Ausklapp-Schaltflächen in der Symbolbibliothek auswählen oder Ihre eigene SVG-Datei hochladen.
- Fold Text (Einklapp-Text): Geben Sie hier die Beschriftungen für die Einklapp- und Ausklapp-Schaltflächen ein.
5. Gestalten Sie nach Ihrem Geschmack
Es gibt viele Design-Einstellungen für jedes Element auf der Registerkarte Stil. Hier einige Beispiele dafür, was Sie mithilfe des Unfold-Widgets erstellen könnten:
Diese einfachen Schritte sind alles, was Sie tun müssen, um einen beeindruckenden Ausklapp-Block auf der Seite Ihrer Website zu erhalten.