So erstellen Sie mit Elementor vertikale Scrolling -Registerkarten in WordPress

Mit vertikalen Scrolling-Registerkarten können Sie den Registerkarteninhalt in einem hohen, nebenseitigen Layout anzeigen. Die Registerkarten bleiben links oder rechts gestapelt, während der Inhalt für jede Registerkarte auf der gegenüberliegenden Seite angezeigt wird. Besucher können die Registerkarten nach unten scrollen, um den Inhalt darin zu erkunden.

Dies hält die Seite sauber und die Leute können viele Informationen anzeigen, ohne die aktuelle Seite zu verlassen. Sie können nicht nur Texte anzeigen, sondern auch Bilder, Videos und Vorlagen in vertikalen Scrolling -Registerkarten anzeigen. Benutzer können auf eine Registerkarte klicken oder tippen, um den damit verknüpften Inhalt anzuzeigen, während die anderen Abschnitte verborgen bleiben.

Elementor ist ein beliebter No-Code-Website-Builder. Mit diesem Plugin können Sie eine gesamte Website mithilfe seiner Drag & Drop-Funktionalität von Grund auf erstellen. In diesem Tutorial -Beitrag zeigen wir Ihnen, wie Sie mit Elementor vertikale Scrolling -Registerkarten in WordPress erstellen.

Anwendungsfälle von vertikalen Scrolling -Registerkarten

Vertikale Scrolling -Registerkarten helfen Ihnen dabei, eine große Menge an Inhalten in einem kleinen Raum zu organisieren. Sie lassen die Besucher durch Themen bewegen, ohne eine neue Seite zu laden. Dieses Layout ist sowohl auf Desktop als auch auf dem Handy einfach zu bedienen. Schauen wir uns einige Anwendungsfälle von vertikalen Scrolling -Registerkarten unten an.

A. Produkt- oder Servicedetails

Sie können viele Produkt- oder Servicebeschreibungen nebeneinander anzeigen. Jede Registerkarte kann Spezifikationen, Preise, Funktionen oder Bewertungen enthalten. Besucher können verschiedene Optionen schnell vergleichen, ohne die Seite zu verlassen.

B. Häufig gestellte Fragen (FAQs)

Vertikale Registerkarten sind perfekt für FAQs. Sie können ähnliche Fragen unter einer Registerkarte und Antworten unter einem anderen gruppieren. Leser können scrollen und nur auf die Fragen klicken, die sie interessieren.

C. Schritt-für-Schritt-Führer oder Tutorials

Wenn Sie einen Prozess mit vielen Schritten teilen möchten, halten vertikale Registerkarten jeden Schritt klar. Benutzer können auf jede Registerkarte klicken, um die Anleitung in der Reihenfolge zu befolgen. Dies erleichtert das Lernen und hält die Seite ordentlich.

D. Teammitglieder oder Mitarbeiterprofile

Stellen Sie Ihr Team professionell vor, indem Sie jedem Mitglied einen Registerkarte geben. Jede Registerkarte kann ein Foto, eine Rolle und eine kurze Biografie anzeigen. Besucher können durch die Liste scrollen und ohne Unordnung etwas über alle lernen. Entdecken Sie einige der besten Beispiele für Teamseiten.

e. Portfolio- oder Projekt -Showcase

Zeigen Sie Ihre Arbeit oder Projekte in vertikalen Registerkarten an, um Platz zu sparen. Jede Registerkarte kann Bilder, Beschreibungen und Links zu Details anzeigen. Dies hilft den Besuchern, viele Projekte aus einer einzigen Seite zu erkunden.

So erstellen Sie vertikale Scrolling -Registerkarten im Elementor

Der theoretische Teil ist vorbei. Ich hoffe, Sie haben jetzt eine klare Vorstellung davon, was die vertikale Scrolling -Registerkarte ist und was seine Anwendungsfälle sind. Wir werden jetzt den Tutorial -Teil behandeln. Wir werden erklären, wie Sie in diesem Abschnitt vertikale Scrolling -Registerkarten mit Elementor auf WordPress erstellen. Lesen Sie weiter!

Voraussetzungen, um das Tutorial zu beginnen

Um mit Elementor vertikale Scrolling -Registerkarten auf WordPress zu erstellen, benötigen Sie die folgenden Plugins, die auf Ihrer Website installiert und aktiviert werden.

• Elementor frei
• Happyaddons kostenlos
• Happyaddons Pro

Hinweis: Sie benötigen Happyaddons Pro, da Elementor keine integrierte Option zum Erstellen von Scrolling-Registerkarten hat. Happyaddons Pro bietet ein Widget namens Scroll -Registerkarten , mit dem Sie mühelos vertikale Scrolling -Registerkarten erstellen können.

Sobald diese Plugins auf Ihrer Website fertig sind, folgen Sie dem unten erläuterten Tutorial.

Schritt 01: Öffnen Sie eine Seite mit Elementor

Öffnen Sie einfach eine Seite mit Elementor, auf der Sie vertikale Scrolling -Registerkarten erstellen möchten.

Schritt 02: Ziehen Sie das Widget der Scroll -Registerkarte auf der Leinwand und lassen Sie sie fallen

Suchen Sie das Widget der Scroll -Registerkarte im Elementor -Feld. Ziehen Sie es auf die Elementor -Leinwand.

Das Scroll -Registerkarten -Widget wird mit einem Standardinhalt geliefert. Sobald das Widget zu der Leinwand hinzugefügt wurde, wird dieser Standardinhalt angezeigt.

Schritt 03: Fügen Sie den Registerkarten Inhalt hinzu

Sie können den Scroll -Registerkarten inhaltlich Inhalte hinzufügen und das Layout in vielerlei Hinsicht stylieren. Erkunden Sie sie in diesem Schritt.

# Fügen Sie dem Scroll -Registerkarte einen Titel hinzu widget

In jedem Webabschnitt sollte ein Titel enthalten sein, der klar zeigt, welche Art von Inhalten er enthält. Sie müssen also einen Titel für den Abschnitt "Scroll" -Berben -Widget schreiben.

Gehen Sie zu Inhalten> Registerkarteninhalte> Titel . Sie erhalten den Platz, um einen Titel zu schreiben. Sie können sehen, dass wir einen Titel "Stylish Watch Insights" geschrieben haben.

# Schreiben Sie eine Beschreibung für das Widget

Schreiben Sie unter dem Titel, Sie können eine Beschreibung für das Widget schreiben. Wenn die Beschreibung nicht erforderlich ist, können Sie sie einfach entfernen.

# Inhalt in den Registerkarten hinzufügen

Nehmen Sie Ihren Cursor auf eine Registerkarte und klicken Sie darauf. Dadurch wird die Registerkarte erweitert und ermöglicht es Ihnen, Inhalte hinzuzufügen.

# Schreiben Sie einen Titel für die Registerkarte

Sie müssen für jede Registerkarte einen Titel schreiben . Nachdem die Registerkarte erweitert wurde, erhalten Sie ein Feld unter NAV -Text. Hier können Sie einen Titel für die Registerkarte schreiben.

# Ändern Sie das Symbol der Registerkarte

Sie können das Symbol entfernen, wenn es nicht benötigt wird. Um das Symbol zu ändern, klicken Sie auf das Symbol, das Sie unter NAV -Symbol sehen können.

Die Icon -Bibliothek wird sofort geöffnet. Wählen Sie ein Symbol, das Ihnen gefällt, und drücken Sie die Einfügungs -Taste .

Sie können sehen, dass das Symbol geändert wurde.

# Inhalte über den Editor der Registerkarte hinzufügen

Mit jeder Registerkarte können Sie zwei Arten von Inhalten hinzufügen. Sie können auswählen, ob der Editor oder die Vorlage verwendet werden soll.

Wählen Sie zunächst die Editor -Option aus .

Mit diesem Editor können Sie jede Art von Text und Bildern hinzufügen, die sofort auf der Leinwand der jeweiligen Registerkarte angezeigt werden.

# Ändern Sie die Hintergrundfarbe des Registerkarteninhalts

Um den Inhalt in der Registerkarte besser hervorzuheben, können Sie seine Hintergrundfarbe ändern, sodass er gut mit allen Inhalten übereinstimmt, die Sie der Registerkarte hinzugefügt haben.

# Inhalt in der Registerkarte über Vorlage hinzufügen

Wie oben erwähnt, können Sie mit dem Widget über Editor und Vorlage Inhalte zur Registerkarte hinzufügen. Schauen wir uns nun an, wie Sie Inhalte mit Vorlagen hinzufügen können.

Wählen Sie die Vorlageoption aus dem Inhaltstyp . Wenn Sie bereits vorgefertigte Vorlagen auf Ihrer Website gespeichert haben, ist diese Option geeignet.

Klicken Sie neben der Auswahl der Vorlage auf das Dropdown -Symbol . Wählen Sie dann die Vorlage aus, die Sie auf der Registerkarte anzeigen möchten.

Sie können sehen, dass unsere gewünschte Vorlage bereits zur Registerkarte hinzugefügt wird.

Fügen Sie in gleicher Weise Inhalt zu allen Registerkarten des Scroll -Registerkartens Widget hinzu.

Schritt 04: Konfigurieren Sie die Einstellungen des Widgets von Scroll -Registerkarten

Erweitern Sie nach Abschluss des Inhaltsteils den Abschnitt "Einstellungen" .

Sie können die Breite des Navigatorpanels und die Höhe des Inhaltsfeldes, einschließlich verschiedener Ausrichtungsanpassungen, aus diesem Abschnitt ändern.

# Breite des Navigationsfeldes einstellen

Das Scroll -Registerkarten -Widget verfügt über zwei Teile - das Navigator -Panel (NAV -Panel) und das Inhaltsfeld .

Sie können die Breite des Navigatorpanels ändern, indem Sie die Skala unter dieser Option ziehen. Außerdem können Sie seine Position und Ausrichtung einstellen. Der Vorgang wird in dem unten beigefügten Videoclip angezeigt.

# Anpassen der Höhe des Bedienfelds

Passen Sie die Höhe des Bedienfelds auf die gleiche Weise an. Stellen Sie außerdem sicher, dass der Inhalt vertikal ordnungsgemäß ausgerichtet ist.

Schritt 05: Stylize das Scroll -Registerkarten -Widget

Kommen Sie zur Registerkarte Stil . Setzen wir zuerst eine Hintergrundfarbe für das Navigator -Panel .

# Passen Sie die Typografie des Inhalts des NAV -Panels an

Aktualisieren Sie die Typografie nacheinander für jeden Inhalt, den Sie dem Navigator -Panel hinzugefügt haben. Sie können die Schriftfamilie, Größe, Gewicht, Linienhöhe usw. nach Bedarf ändern.

# Die Registerkarten stylieren

Durch Hinzufügen eines Randtyps, einer Randbreite, der Polsterung, der Randfarbe, des Randradius, der Textfarbe und der Hintergrundfarbe können Sie die Registerkarten stylieren und sie wie das folgende Bild präsentieren. Ich hoffe, Sie können das selbst tun.

Erweitern und stylieren Sie den Inhalt im Zusammenhang mit dem Abschnitt Content Panel und Scroll.

Schritt 06: Optimieren

Um das Widget für die mobile Bildschirmgröße zu optimieren, gehen Sie zum mobilen Porträtmodus in der oberen Leiste.

Sie werden feststellen, dass die Registerkarte Navigator standardmäßig oben angezeigt werden.

# Passen Sie die Höhe des Inhaltsbereichs für mobile Geräte an

Die vorhandene Höhe reicht möglicherweise nicht für das Inhaltsfeld aus. In diesem Fall müssen Sie die Höhe erhöhen, damit alle Inhalte innerhalb der Registerkarte auf den mobilen Bildschirmgrößen perfekt zu sehen sind.

Schritt 07: Optimieren Sie das Widget der Scroll -Registerkarte für Tablets

Wechseln Sie in ähnlicher Weise zum Tablet -Porträtmodus, um den Inhalt für eine optimale Anzeige auf Tablet -Bildschirmgrößen zu optimieren .

Sie können im unten angegebenen Videoclip sehen, dass das Widget auf dem Tablet -Bildschirm bereits gut aussieht. Wir müssen es also sowieso nicht ändern.

Schritt 08: Vorschau des Scroll -Registerkartens Widget

Kommen Sie zur Vorschau -Seite und überprüfen Sie, ob das Widget gut funktioniert oder nicht. Sie können sehen, dass das Widget an unserem Ende gut funktioniert.

Somit können Sie mit Elementor vertikale Scrolling -Registerkarten in WordPress erstellen.

Letzte Imbiss!

Vertikale Scrolling -Registerkarten sind eine intelligente Möglichkeit, eine Webseite ordentlich zu halten und gleichzeitig viele Informationen zu teilen. Sie lassen die Besucher finden, was sie brauchen, ohne auf neue Seiten zu springen. Nachdem Sie die obigen Schritte befolgt haben, können Sie diese Registerkarten problemlos mit Elementor und Happyaddons Pro entwerfen.

Dies verleiht Ihrer Website ein modernes Aussehen und verbessert die Erforschung Ihrer Inhalte. Denken Sie beim Erstellen dieses Abschnitts jedoch einige Best Practices im Auge. Verwenden Sie für jede Registerkarte klare Titel, damit Benutzer wissen, was sie erwarten können. Stellen Sie sicher, dass Text, Bilder und Videos leicht sind, damit die Seite schnell geladen wird.

Überprüfen Sie das Design auf verschiedenen Bildschirmgrößen und passen Sie den Abstand für mobile Benutzer an. Halten Sie die Farben und Schriftarten mit dem Stil Ihrer Website überein, damit die Registerkarten natürlich mit dem Rest des Designs mischen. Diese kleinen Details tragen dazu bei, für jeden Besucher ein reibungsloses, berufliches Erlebnis zu schaffen.

Erfahren Sie, wie Sie ein Flip -Box in WordPress mit Elementor entwerfen.