So zeigen und verbergen Sie Text in WordPress-Beiträgen mit dem Toggle-Effekt

Ob Sie einen langen, ausführlichen Beitrag schreiben oder einen detaillierten FAQ-Bereich erstellen, es kann schwierig sein, viele Informationen zu präsentieren, ohne Ihre Leser zu überfordern.

In diesem Fall ist unsere bevorzugte Lösung, Text mit einem Toggle-Effekt ein- und auszublenden. Dieser Ansatz spart Platz, macht Ihre Inhalte übersichtlich und gibt den Lesern die Kontrolle darüber, was sie sehen möchten.

Stellen Sie es sich wie einen Lichtschalter für Ihre Inhalte vor. Leser können klicken, um weitere Details anzuzeigen, oder erneut klicken, um sie auszublenden.

Wir haben gesehen, dass viele Websites dies nutzen, um ihren Platz besser auszunutzen, und ihre Benutzer schätzen, wie es hilft, die Dinge sauber und organisiert zu halten.

Hier sind 3 einfache Möglichkeiten, den Toggle-Effekt in WordPress zu verwenden, um Text für Ihre langen Inhalte ein- und auszublenden.

Warum Text in WordPress-Beiträgen anzeigen und ausblenden?

Viele Websites verbergen Text standardmäßig, normalerweise indem sie einen Teaser anzeigen und dann einen Link „Mehr lesen“ oder „Mehr anzeigen“ einfügen. Besucher können weitere Informationen erhalten, indem sie auf diesen Link klicken.

Dies ist nützlich, wenn Sie viele Informationen zu einer Seite hinzufügen müssen, aber befürchten, dass eine massive Textwand Besucher überfordern könnte.

FAQs sind ein großartiges Beispiel, da die meisten Besucher nur die Antwort auf eine einzige Frage wünschen werden.

Wenn Sie alle Antworten vollständig anzeigen, fällt es den Besuchern möglicherweise schwer, die benötigten Informationen zu finden.

Durch das Ausblenden von Text mit dem Umschalteffekt können Besucher viele Beiträge, Funktionen, Vorteile oder andere Informationen durchsuchen und dann den Artikel auswählen, über den sie mehr erfahren möchten.

Mit diesen Worten wollen wir uns ansehen, wie du Text in WordPress mit dem Toggle-Effekt ein- und ausblenden kannst. Verwende einfach die Schnelllinks unten, um zu der Methode zu springen, die du verwenden möchtest:

• Methode 1: Text in WordPress mit Shortcode anzeigen und ausblenden (schnell und einfach)
• Method 2: Show and Hide Text in WordPress Using SeedProd (Best For FAQs)
  • Alternative: Verwenden Sie das Heroic FAQs Plugin
• Method 3: Show and Hide Text With WordPress Details Block (No Plugin)
• Häufig gestellte Fragen: Der Toggle-Effekt in WordPress

Methode 1: Text in WordPress mit Shortcode anzeigen und ausblenden (schnell und einfach)

Der schnellste und einfachste Weg, einen 'Weiterlesen'-Link zu jeder Seite oder jedem Beitrag hinzuzufügen, ist die Verwendung von Read More Without Refresh. Dieses kostenlose Plugin ermöglicht es Ihnen, den 'Weiterlesen'-Link anzupassen und ihn dann mit einem Shortcode überall auf Ihrer Website einzufügen.

Ein Shortcode ist ein kleines Stück Code in eckigen Klammern, das eine bestimmte Funktion ausführt. Keine Sorge, sie sind sehr einfach zu verwenden und erfordern nur ein einfaches Kopieren und Einfügen.

Das Erste, was Sie tun müssen, ist, das Plugin Read More Without Refresh zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung klicken Sie auf „RMWP-Einstellungen“, um die Einstellungen des Plugins zu konfigurieren.

Zunächst können Sie den Text, der in den Links „Mehr lesen / Weniger lesen“ verwendet wird, ändern, indem Sie in die beiden Textfelder tippen.

Wenn Sie beispielsweise eine FAQ erstellen, möchten Sie vielleicht etwas wie „Antwort anzeigen / Antwort ausblenden“ verwenden.

Auf diesem Bildschirm können Sie auch die Textfarbe, die Hintergrundfarbe und mehr ändern. Dies kann Ihnen helfen, Links zu erstellen, die perfekt zu Ihrem WordPress-Theme passen.

Sie können auch die Schriftstärke ändern, einen Rahmen hinzufügen und den Abstand ändern.

Wenn Sie auf dieser Seite fertig sind, klicken Sie unbedingt auf die Schaltfläche „Änderungen speichern“, auch wenn Sie keine Änderungen vorgenommen haben.

Dies ist wichtig, da das Klicken auf 'Änderungen speichern' die Einstellungen des Plugins in der WordPress-Datenbank initialisiert.

Wenn Sie diesen Schritt überspringen, hat das Plugin nicht die Informationen, die es benötigt, um auf Ihrer Website korrekt zu funktionieren.

Wenn das erledigt ist, können Sie jeder Seite oder jedem Beitrag einen Toggle-Effekt hinzufügen. Sie müssen den Text finden, den Sie ausblenden möchten, und ihn dann in Shortcode einpacken.

Öffnen Sie zunächst den Gutenberg-Blockeditor für eine beliebige Seite oder einen Beitrag. Klicken Sie dann auf das Symbol „+ Block hinzufügen“, um einen Block vor dem Text hinzuzufügen, den Sie ausblenden möchten.

Tippe dann „Shortcode“ ein und wähle den richtigen Block aus, wenn er erscheint.

Fügen Sie im Shortcode-Feld den folgenden Shortcode hinzu:

[mehr lesen]

Dies ist ein Platzhalter-Tag, der den Beginn Ihres ausgeblendeten Inhalts markiert.

Das Plugin ersetzt automatisch [weiterlesen] durch den benutzerdefinierten Linktext, den Sie in den Einstellungen erstellt haben, z. B. „Antwort anzeigen“ oder „Mehr anzeigen“.

Wenn das erledigt ist, müssen Sie einen Shortcode-Block nach dem Text hinzufügen, den Sie ausblenden möchten.

Am Ende des Textes klicken Sie einfach auf das „+“-Symbol und erstellen einen weiteren Shortcode-Block, indem Sie den oben beschriebenen Prozess befolgen.

Fügen Sie in diesen Block den folgenden Code ein: [/read]

Sie können nun entweder auf „Aktualisieren“ oder „Veröffentlichen“ klicken, um den Text live zu schalten.

Besuchen Sie nun Ihr WordPress-Blog, und Sie werden sehen, dass der Text zwischen den Shortcode-Blöcken standardmäßig ausgeblendet ist.

Um den Text anzuzeigen, klicken Sie einfach auf den Link „Mehr lesen“ oder einen ähnlichen Link.

Methode 2: Text in WordPress mit SeedProd ein- und ausblenden (am besten für FAQs)

FAQs sind eines der gängigsten Formate zum Ausblenden und Anzeigen von Text auf einer WordPress-Website. Wenn Sie einen professionell aussehenden Frage-und-Antwort-Bereich mit einem schönen Layout erstellen möchten, empfehlen wir stattdessen die Verwendung eines Page-Builder-Plugins.

SeedProd ist der beste Page Builder auf dem Markt und ermöglicht es Ihnen, alle Arten von benutzerdefinierten Landing Pages für Ihre WordPress-Website zu erstellen. Er wird mit über 300 fertigen Website-Vorlagen geliefert, darunter Designs, die Sie zur Bewerbung von Produkten, Dienstleistungen, Webinaren und mehr verwenden können.

All diese Designs sind der perfekte Ort, um einen FAQ-Bereich hinzuzufügen. Mehrere unserer Partner-Marken haben ihre kompletten Websites damit gestaltet. Details finden Sie in unserem vollständigen SeedProd-Testbericht.

Nach der Auswahl einer Vorlage bietet SeedProd sogar verschiedene fertige FAQ-Bereiche, die Sie mit einem einzigen Klick zu Ihrem Seitendesign hinzufügen können.

Viele dieser FAQ-Bereiche verfügen über einen integrierten Ein-/Ausblend-Toggle-Effekt.

Sie sind auch vollständig anpassbar, sodass Sie ganz einfach Ihren eigenen Frage- und Antworttext hinzufügen können.

Informationen zur Verwendung von SeedProd finden Sie in unserem Leitfaden zur Erstellung einer benutzerdefinierten Seite in WordPress.

Nach dem Erstellen einer Seite ist es einfach, einen fertigen FAQ-Bereich hinzuzufügen. Klicken Sie im SeedProd-Seiten-Editor einfach auf die Registerkarte 'Abschnitte' im linken Menü.

Sie können nun „FAQ“ auswählen, um alle Fragen- und Antwortbereiche von SeedProd anzuzeigen. Um ein Design in der Vorschau anzuzeigen, bewegen Sie die Maus darüber und klicken Sie dann auf die kleine Lupe.

Wenn Sie ein Design gefunden haben, das Sie verwenden möchten, klicken Sie auf 'Diesen Abschnitt auswählen'.

SeedProd fügt den Bereich dann am Ende Ihrer Seite hinzu.

Sie können den FAQ-Bereich per Drag & Drop an einen neuen Ort verschieben.

Danach können Sie Ihren eigenen Text hinzufügen, indem Sie auf den FAQ-Block Akkordeon klicken, um ihn auszuwählen. Das linke Menü wird nun aktualisiert und zeigt eine Liste aller Fragen an.

Um ein Frage-Antwort-Paar zu bearbeiten, klicken Sie einfach auf die Frage im linken Menü.

Dies öffnet zwei kleine Texteditoren, in denen Sie Ihre eigene Frage und Antwort hinzufügen können. Sie können auch alle Standardformatierungsoptionen verwenden, wie z. B. das Hinzufügen eines Links oder das Hervorheben von Text.

Wiederholen Sie einfach diese Schritte für jede Frage und Antwort im FAQ-Bereich.

Wenn Sie weitere Fragen hinzufügen möchten, klicken Sie einfach auf die Schaltfläche „Neues Element hinzufügen“.

Um ein Frage-Antwort-Paar zu löschen, bewegen Sie einfach die Maus über diese Frage im linken Menü.

Klicken Sie dann auf das Mülleimersymbol, wenn es erscheint.

Wenn Sie mit den eingegebenen Informationen zufrieden sind, können Sie das Aussehen des Textes mit den Schiebereglern „Schriftgröße“ und „Abstand“ ändern.

Es gibt auch einen Abschnitt 'Icon', der das kleine Bild definiert, das neben jeder Frage in den FAQs angezeigt wird.

Wenn Sie dieses Bild anpassen möchten, klicken Sie einfach, um den Abschnitt „Symbol“ zu erweitern.

Hier sehen Sie Einstellungen, um die Ausrichtung und Farbe des Symbols zu ändern. Beachten Sie einfach, dass das „geschlossene Symbol“ das Bild ist, das Sie standardmäßig sehen, wenn die Frage eingeklappt ist.

'Offenes Symbol' ist das Bild, das Sie sehen, wenn die Frage erweitert ist.

Wenn Sie stattdessen ein komplett anderes Symbol verwenden möchten, bewegen Sie die Maus über die Vorschau 'Geschlossenes Symbol' oder 'Offenes Symbol'.

Klicken Sie dann auf die Miniaturansicht 'Icon-Bibliothek'.

Dies öffnet die integrierte Bibliothek von SeedProd, wo Sie aus mehr als 1400 Font Awesome Icon-Schriftarten wählen können.

Sie können weiter anpassen, wie die FAQ-Bereiche aussehen, indem Sie die Registerkarte „Erweitert“ auswählen. Hier können Sie die Schriftart ändern, einen Rand und Abstand hinzufügen und sogar CSS-Animationen hinzufügen, um die FAQs wirklich hervorzuheben.

Sobald dies erledigt ist, können Sie weitere Blöcke hinzufügen und den Inhalt Ihrer SeedProd-Seite anpassen.

Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie einfach auf den Pfeil neben der Schaltfläche „Speichern“ und wählen Sie dann „Veröffentlichen“.

Wenn Sie nun Ihre Website besuchen, sehen Sie das Design der Seite und den FAQ-Bereich live.

Alternative: Verwenden Sie das Heroic FAQs Plugin

Wenn Sie nach einer Alternative zu SeedProd suchen, können Sie Text auch mit dem Plugin Heroic FAQs ein- und ausblenden.

Heroic FAQs ist das beste FAQ-Management-Plugin für WordPress. Seine Drag-and-Drop-Oberfläche ermöglicht es Ihnen, einfach Fragen und Antworten zu FAQ-Gruppen hinzuzufügen.

Dann können Sie Ihre FAQs mit einem einfachen WordPress-Block überall auf Ihrer Website anzeigen.

Das Plugin bietet mehrere FAQ-Stile, und Sie können Ihre Fragen und Antworten mit einem Akkordeon- oder Toggle-Format ein- und ausblenden.

Weitere Details finden Sie in unserem Leitfaden zum Hinzufügen eines FAQ-Bereichs in WordPress und unserer Liste der besten WordPress FAQ-Plugins.

Methode 3: Text mit dem WordPress Details-Block ein- und ausblenden (ohne Plugin)

Wenn Sie kein Plugin oder Shortcode verwenden möchten, können Sie den integrierten Details-Block von WordPress verwenden, um Text anzuzeigen und auszublenden. Diese Funktion eignet sich auch hervorragend für FAQs.

Um diesen Block zu verwenden, öffnen Sie einfach den Gutenberg-Editor für eine Seite oder einen Beitrag. Klicken Sie dann irgendwo in der Benutzeroberfläche auf die Schaltfläche '+ Block hinzufügen', um den Details-Block zu finden.

In dem Feld neben dem Pfeil nach unten können Sie Ihre häufig gestellte Frage eintragen.

Unten können Sie die Antwort auf diese Frage eingeben.

In der Seitenleiste der Blockeinstellungen können Sie die Antwort standardmäßig öffnen lassen, wenn Sie möchten.

Sobald Sie fertig sind, gehen Sie einfach zur Vorschau Ihrer Website. Klicken Sie dann auf „Aktualisieren“ oder „Veröffentlichen“.

Wenn Sie denselben Details-Block mit demselben Inhalt auf anderen Seiten oder Beiträgen verwenden möchten, können Sie diesen Block in einen wiederverwendbaren Block oder ein Blockmuster umwandeln.

Das Beste daran ist, dass, wenn Sie einen wiederverwendbaren Block bearbeiten, dieser automatisch überall auf Ihrer Website aktualisiert wird. Das spart Ihnen viel Zeit, da Sie nicht jeden einzelnen manuell ändern müssen.

Möglicherweise möchten Sie auch die Höhe und Breite des Blocks ändern, damit er besser zum Rest Ihrer Seite passt.

Welche Toggle-Methode sollten Sie verwenden?

Wir haben drei verschiedene Möglichkeiten behandelt, einen Toggle-Effekt hinzuzufügen, und die beste hängt von Ihren Bedürfnissen ab. Hier sind unsere Empfehlungen:

• Für eine schnelle und einfache Lösung, die überall funktioniert, ist Methode 1 (Shortcode) der schnellste Weg, Text hinter einem 'Weiterlesen'-Link zu verstecken.
• Für die Erstellung von professionell aussehenden und anpassbaren FAQ-Bereichen ist Methode 2 (SeedProd) die beste Wahl. Sie gibt Ihnen die volle Designkontrolle ohne Code.
• Wenn Sie Plugins vermeiden möchten und einen einfachen Umschalter für einen einzelnen Beitrag oder eine Seite benötigen, dann ist Methode 3 (Details-Block) die perfekte integrierte Option.

Häufig gestellte Fragen: Der Toggle-Effekt in WordPress

Hier sind einige der häufigsten Fragen, die wir zur Verwendung des Toggle-Effekts in WordPress erhalten.

Was ist der Toggle-Effekt in WordPress?

Der Umschalteffekt, auch bekannt als Akkordeon, ist ein Benutzeroberflächenelement, mit dem Sie Inhalte ein- und ausblenden können.

Besucher klicken auf eine Überschrift oder einen „Weiterlesen“-Link, um einen Abschnitt zu erweitern und den darin enthaltenen Text anzuzeigen. Dies hilft, Ihre Seiten organisiert und übersichtlicher zu halten.

Kann das Ausblenden von Inhalten mit einem Umschalter meine Website-SEO beeinträchtigen?

Im Allgemeinen nein, solange es für die Benutzererfahrung geschieht. Google und andere Suchmaschinen können Inhalte, die in Toggles oder Akkordeons versteckt sind, immer noch crawlen und indexieren.

Es ist jedoch immer am besten sicherzustellen, dass deine wichtigsten Informationen standardmäßig sichtbar sind.

Welche Methode ist am besten geeignet, um einen Umschalteffekt hinzuzufügen?

Für einfache, einmalige Umschaltungen ist der integrierte WordPress-Details-Block die einfachste Option, da er keine Plugins erfordert.

Zum Erstellen vollständiger FAQ-Bereiche oder für mehr Designkontrolle bietet ein Page Builder wie SeedProd mehr Styling-Optionen und Funktionen.

Kann ich den Text „Weiterlesen“ anpassen?

Ja, die meisten Plugins, die einen Toggle-Effekt hinzufügen, wie das in dieser Anleitung erwähnte Read More Without Refresh-Plugin, ermöglichen es Ihnen, den Linktext anzupassen.

Du kannst es in „Antwort anzeigen“, „Details anzeigen“ oder etwas anderes ändern, das zu deinem Kontext passt.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Text in WordPress-Beiträgen mit dem Toggle-Effekt ein- und ausblenden können. Möglicherweise möchten Sie auch unsere Liste der besten Gutenberg-Block-Plugins für WordPress und unseren Leitfaden zum Erstellen eines aufklappbaren Seitenmenüs in WordPress überprüfen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.