Las pestañas son una característica bastante común en muchos sitios Netz, sobre todo en las tiendas de comercio electrónico. Los propietarios de tiendas de comercio electrónico suelen utilizar pestañas en el área de descripción del producto, donde dividen las reseñas, la descripción, las especificaciones técnicas, etc. en varias pestañas.
A pesar de esto, las pestañas se han utilizado en muchos otros tipos diferentes de sitios web, no solo en sitios web de comercio electrónico. Incluso el sitio web oficial de WordPress.org utiliza pestañas en las páginas de descripción de complementos. Consulte la imagen a continuación para ver las pestañas resaltadas en WP.org.
Viele andere Websitebesitzer verwenden Registerkarten für verschiedene Arten von Websites. Unabhängig davon sollten Wimpern nicht mit verwechselt werden Akkordeons, die sich erweitern, um Informationen zu enthüllen. Schauen Sie sich unten an, wie ich die Akkordeons auf meiner Website verwendet habe.
Aber abgesehen von Akkordeons sind wir hier, um darüber zu sprechen Registerkartenauf diese Weise verlieren wir nicht unseren Fokus; Ich musste nur die Unterscheidung zwischen Tabs und Akkordeons klarstellen. Jetzt hoffe ich, dass wir auf derselben Seite sind 🙂
En esencia, los propietarios de sitios web utilizan pestañas para dividir información que, de otro modo, habría ocupado una página o publicación completa. Eso significa que las pestañas hacen que la información Sein mucho más fácil de digerir, sin forzar necesariamente a los usuarios a presionar la rueda de desplazamiento un millón de veces.
Mit anderen Worten, Registerkarten verbessern die Benutzerfreundlichkeit Ihrer Website, insbesondere in einer Welt von kürzere Aufmerksamkeitsspannen. Wenn Sie also Benutzer länger auf Ihrer Website halten möchten, ohne sie mit langen Seiten zu langweilen, sollten Sie die Verwendung von Registerkarten in Betracht ziehen.
Im heutigen Beitrag zeigen wir Ihnen genau, wie Sie Ihren WordPress-Posts und -Seiten Registerkarten hinzufügen. Vor dem Ende dieses Beitrags haben Sie alle Anweisungen, die Sie benötigen, um die Registerkarten zu Ihrem Vorteil zu nutzen. Wir hoffen, Sie genießen bis zum Ende und gehen nicht, ohne Ihre Gedanken im Kommentarbereich zu teilen. Lassen Sie uns loslegen.
Verwenden Sie einen Seitenersteller
Si ya tiene un generador de páginas instalado, está de suerte; es probable que ya tenga un módulo de pestañas a su Umfang. La mayoría de los principales creadores de páginas ofrecen pestañas como parte de su conjunto básico de items de creación de páginas. Aquí hay un vistazo rápido a dos de nuestros favoritos.
Kostenloser Elementor Page Builder
El popular creador de páginas Elementor incluye pestañas como parte de la versión gratuita del complemento. Todo lo que necesita hacer es insertar un elemento de pestaña en su página, luego editar el título, Inhalt, estilo, etc. ¡Eso es todo!
WPBakery Premium Page Builder
Verwenden eines Premium-Themas, das den WPBakery Page Builder enthält (wie unseres Gesamtthema)? Ausgezeichnet! Die Registerkarten sind integriert und einfach zu bedienen.
El módulo de la pestaña WPBakery es ligeramente diferente del ejemplo anterior, dado que las pestañas están inicialmente vacías cuando las agrega. Deberá insertar items de página adicionales (área de texto, imágenes, íconos, etc.) dentro de las pestañas para agregar su contenido. Pero esto le da mucha libertad para crear pestañas como las desee (a la vez de las opciones de estilo integradas). Hemos cubierto este creador de páginas en el Blog antes, por lo que si desea instrucciones más detalladas, consulte nuestra guía WPBakery (nota: este complemento se llamaba previamente Visual Composer, de esta manera lamento de antemano cualquier confusión).
Installieren Sie das WordPress Tabs Plugin
Wenn Sie keinen Seitenersteller verwenden, müssen Sie nicht nur einen für Ihre Registerkarten verwenden. Es gibt viele großartige Alternativen, wie das kostenlose WordPress-Plugin, das von WP Shop Mart einfach als Tabs bezeichnet wird. Tabs ist ein raffiniertes WordPress-Plugin, mit dem Sie eine unbegrenzte Anzahl schöner Tabs erstellen können, ohne ins Schwitzen zu geraten.
Beginnen wir mit der Installation des WordPress Tabs-Plugins. Da es im offiziellen WordPress-Plugin-Repository verfügbar ist, können Sie das Plugin direkt über das WordPress-Admin-Panel installieren.
Wir verwenden die kostenlose Version, es ist jedoch eine Premium-Version verfügbar, wenn Sie später ein Upgrade für zusätzliche Funktionen durchführen möchten.
Installieren des WordPress Tabs Plugins
Melden Sie sich bei Ihrem WordPress-Admin-Panel an und navigieren Sie zu Plugins> Neu hinzufügen e ingrese «pestañas wpshopmart» en el cuadro de búsqueda de Schlüsselwörter. Una vez que encuentre el complemento correcto, pulse el Jetzt installieren Taste wie unten gezeigt.
Klicken Sie danach auf Aktivieren Taste. Und das war's, Ihr Tabs Responsive WordPress-Plugin ist einsatzbereit. Erstellen wir nun einige Registerkarten, um herauszufinden, was dieses Plugin zu bieten hat.
Konfigurieren Sie das WordPress-Plugin für Responsive Tabs
Durch Aktivieren des Plugins wird Ihrem WordPress-Administratormenü ein neues Element hinzugefügt. Navigieren Sie zum Erstellen neuer Registerkarten zu Responsive Tabs> Neue Tabs hinzufügen wie wir im Screenshot unten detailliert beschreiben.
Wenn Sie dies tun, gelangen Sie zum Responsive Eyelash Maker, der alle Funktionen bietet, die Sie benötigen, um schöne Wimpern wie ein Chef zu erstellen. Sehen Sie sich das Bild unten an, um eine Vorstellung davon zu bekommen, was Sie erwartet.
Todo un pergamino, ¿no? Bueno, puedes encontrar la mayoría de las funciones en la barra lateral derecha. Tenga en cuenta al mismo tiempo que las pestañas individuales tienen su configuración. Incluso puede usar editores WYSIWYG en las pestañas, lo que significa que tiene mucho control sobre sus pestañas.
Jetzt erstellen wir einige Beispielregisterkarten und zeigen sie auf einer Seite oder einem Beitrag an.
Titel hinzufügen
Beginnen Sie, indem Sie Ihren Registerkarten einen beschreibenden Titel geben (genau wie bei Ihren Navigationsmenüs), wie im obigen Bild gezeigt. So können Sie Ihre Registerkarten später im WordPress-Admin-Bereich leicht identifizieren, falls Sie etwas bearbeiten müssen. Für die Zwecke dieses Tutorials habe ich meine Registerkarten "Test Launch Tabs" genannt.
Wählen Sie eine Tab-Designvorlage
Wie im obigen Screenshot zu sehen ist, müssen Sie im nächsten Schritt eine Entwurfsvorlage auswählen, die Sie für Ihre Registerkarten verwenden möchten. Die kostenlose Version des Tabs WordPress-Plugins bietet Ihnen nur eine Layoutvorlage, für die Sie jedoch jederzeit ein Upgrade auf die Premium-Version durchführen können 19 mehr. Sprechen Sie über Designfreiheit.
Registerkarten hinzufügen
Fügen Sie als Nächstes beliebig viele Registerkarten hinzu, wie unten gezeigt.
Wir haben eine nummerierte Liste erstellt, in der detailliert beschrieben wird, was Sie in der Liste tun können Registerkarten hinzufügen Abschnitt oben gezeigt. Die Nummern entsprechen jedem Bereich.
- Tab-Titel - Fügen Sie als Beispiel Ihren Tab-Titel in dieses Feld ein Beschreibung, Spezifikationen, Details, usw.
- Registerkarte Beschreibung - Fügen Sie hier Ihre Registerkartenbeschreibung hinzu. In diesem Feld können Sie den Inhalt Ihrer Registerkarte hinzufügen. Das Beste daran ist, dass Sie den WYSIWYG-Editor (siehe Abbildung 3 unten) verwenden können, um Ihren Registerkarten umfangreiche Inhalte hinzuzufügen, einschließlich Bilder, Musik und Videos.
- Verwenden Sie WYSIWYG - Wenn Sie das Vertraute verwenden möchten W.Hut-Y.UNED-S.ee-michs-W.Hut-Y.UNED-GRAMMWenn Sie den Editor Ihres Tabs erstellen möchten, können Sie diese Schaltfläche drücken, um das Popup-Fenster zu öffnen
- Tab-Symbol - In diesem Feld können Sie ein Symbol auswählen, das auf Ihrer Registerkarte verwendet werden soll. Tabs Mit dem WordPress-Plugin können Sie auf unzählige Font Awesome-Symbole zugreifen, um Ihre Tabs wie ein Profi zu animieren
- Oberes Symbol anzeigen - Wenn Sie den Tabulatortitel neben dem Symbol anzeigen möchten, werden Sie diese Funktion lieben. Gleichzeitig können Sie das Symbol deaktivieren, ohne den Tabulatortitel zu berühren
- Aufschieben - Drücken Sie diese Taste, um eine bestimmte Registerkarte zu löschen
- Fügen Sie neue Registerkarten hinzu - Klicken Sie auf diese Schaltfläche, um weitere Registerkarten hinzuzufügen
- Alles entfernen - Müde von all den Wimpern? Schlagen Sie einfach die Alles entfernen Taste, um alle zurückzusetzen
Ein paar zusätzliche Tipps, die Ihnen helfen sollen. Zunächst können Sie die Registerkarten ziehen und ablegen, um sie nach Belieben neu anzuordnen und anzuordnen.
Zweitens vergessen Sie nicht, die Taste zu drücken Entwurf speichern ein- oder zweimal beim Erstellen Ihrer Registerkarten, um sicherzustellen, dass Sie keine Änderungen verlieren, falls Sie versehentlich aus dem Registerkartengenerator austreten.
Wenn Sie Hilfe benötigen, gibt es ein großes Blau Hole dir Unterstützung Schaltfläche direkt unter dem Registerkarten hinzufügen sección (y en la mayoría de las páginas del complemento) que lo lleva al Forum oficial de soporte de Tabs en WordPress.org. No dude en presionar el botón de soporte si necesita ayuda en cualquier momento.
Shortcode-Registerkarten
Unten finden Sie den Registerkarten-Shortcode, mit dem Sie Ihre Registerkarten auf jeder gewünschten Seite oder in jedem gewünschten Beitrag hinzufügen und anzeigen. Unser Shortcode lautet beispielsweise [TABS_R id = 443]. Um die Registerkarten auf einer Seite anzuzeigen, kopiere ich einfach den obigen Shortcode und füge ihn auf dieser bestimmten Seite ein.
Tab-Widget
¿Está buscando agregar sus pestañas en un área de Widgets en su sitio web? Si es un rotundo sí, le encantará el soporte para widgets que viene con el complemento Tabs de WordPress.
Schlagen die Klicke hier Das Verknüpfung en la imagen de arriba lo lleva a la pantalla de widgets de WordPress, donde puede agregar sus pestañas en cualquier lugar donde tenga un área de widgets en su tema.
CSS personalizado
Obwohl das WordPress Tabs-Plugin viele Optionen zur Anpassung von Registerkarten enthält (sehen Sie sich einfach die rechte Seitenleiste an; es ist voller Stiloptionen!), Können Sie Ihre eigenen benutzerdefinierten CSS-Stile hinzufügen, wie unten gezeigt.
Gleichzeitig können Sie Ihre benutzerdefinierten Einstellungen als Standardeinstellungen für alle neuen Registerkarten festlegen, indem Sie einfach auf klicken Standardeinstellungen aktualisieren Taste wie im Bild oben gezeigt.
Die rechte Seitenleiste
Die rechte Seitenleiste, die wir im obigen Bild hervorheben, trägt den Tag für Sie. Es bietet alle Optionen, die Sie benötigen, um Ihre Wimpern nach Herzenslust zu stylen. Bemerkenswerte Optionen umfassen:
- Tab Hintergrundfarbe
- Tab-Schriftfarbe
- Stil und Schriftfamilie
- Optionen für Tabulatortitel und Symbol anzeigen
- Ausrichten der Position des Registerkartensymbols, dh vor oder nach dem Tabulatortitel
- Flanschkanten
- Animationen mit mehreren Registerkarten
- Und vieles mehr
Fügen Sie Ihre Registerkarten einer WordPress-Seite oder einem Beitrag hinzu
Scrollen Sie nach dem Hinzufügen der Registerkarteninhalte und Stiloptionen nach oben und klicken Sie auf Zu posten Taste wie unten gezeigt.
Zu diesem Zeitpunkt sind Ihre Registerkarten fertig. Sie müssen lediglich die Registerkarten zu einer WordPress-Seite oder einem Beitrag hinzufügen. Kopieren Sie einfach den Shortcode von den Registerkarten, die wir zuvor gesehen haben. Unsere ist [TABS_R id = 443].
Starten Sie Ihren Post-Editor (auch wenn Sie ihn verwenden Gutenberg) und fügen Sie den Shortcode in Ihren Beitrag / Ihre Seite ein. Drücken Sie danach die Taste Zu posten Taste wie unten gezeigt.
Posteriormente de unos 5 minutos de configurar las cosas; Estoy usando el tema Twenty Seventeen y mucho Lorem Ipsum, se me ocurrió el siguiente resultado.
Beachten Sie, dass ich die Farben oder etwas nicht angepasst habe. Sag mir was du denkst; war es nicht so einfach?
Das Hinzufügen von Registerkarten zu Ihren WordPress-Seiten und -Postings ist eine Aufgabe der vierten Klasse. Ich erwarte keine Probleme, insbesondere wenn Sie ein Plugin wie die Tabs von WP Shop Mart verwenden.
¿Cómo agrega pestañas a sus páginas y publicaciones de WordPress? ¿Cuál es tu Plugin de WordPress de pestañas favorito? Por favor comparta sus pensamientos en los comentarios. ¡Feliz creación!