---
title: Previous/Next Page Navigation
url: "https://www.toujou.de/service/elementbibliothek/navigation-elements/previous/next-page-navigation/"
date: 2020-04-08
modified: 2026-01-16
---

# Previous/Next Page Navigation

1. [Home](https://www.toujou.de/)
2. [Service](https://www.toujou.de/service/)
3. [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/)
4. [Navigation Elements](https://www.toujou.de/service/elementbibliothek/navigation-elements/)
5. [Previous/Next Page Navigation](https://www.toujou.de/service/elementbibliothek/navigation-elements/previous/next-page-navigation/)

   Previous/Next Page Navigation
=============================

Verbinden Sie Unterseiten derselben Ebene mit Navigationspfeilen zur vorherigen und nächsten Seite.

Item-ID: 07-028

[Beispielansicht](#c1007977) [Anleitung](#c1007975) [Verhalten](#c1007972)

---

 Beispielansicht
---------------

Eine Live-Ansicht des Elements finden Sie in unserem [Kampagnen-Template für Jubiläen und Event-Seiten](https://campaign.toujou.net/programm/merchandise/becher/).

    [ ![](https://www.toujou.de/_assets/processed/hRbssfxmnYNbDVbgWHwB3O1DrewJQXHweqxd-CrWffk/q:85/w:433/h:271/fn:Y3NtXzA3LTAyOF8wMF9Gcm9udGVuZC1BbnNpY2h0NF80MzZiNjA3MDc3:t/cb:3d64bc29678a7c91a53c967dcba2807f333c09d9/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDdfUHJldi1OZXh0LzA3LTAyOF8wMF9Gcm9udGVuZC1BbnNpY2h0NC5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/07_Prev-Next/07-028_00_Frontend-Ansicht4.png)  ---

  Anleitung
-----------

     [ ![](https://www.toujou.de/_assets/processed/WcynLU2wFd7mEweRTGccDEjDwl2OJ9W3S-nPIAWPOck/q:85/c:1918.08:1200:fp:0.5005:0.5/rt:force/w:432/h:270/fn:Y3NtXzA3LTAyOF8wMV9OZXVlcy1FbGVtZW50Xzc1Nzk2OThmODA:t/cb:8be3ac948be1b5d91eb9f1d2c1321fd06f325c27/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDdfUHJldi1OZXh0LzA3LTAyOF8wMV9OZXVlcy1FbGVtZW50LnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/07_Prev-Next/07-028_01_Neues-Element.png) ### Widget anlegen

- Klicken Sie auf den Button **+ Inhalt***,* um ein Widget zu erstellen.

    [ ![](https://www.toujou.de/_assets/processed/HBHPkeq15uGfebG_PsSe7aNpOPvPMq_LPl6k99K1uQQ/q:85/c:1920:1198.08:fp:0.5:0.4992/rt:force/w:432/h:270/fn:Y3NtXzA3LTAyOF8wMl9XaWRnZXRfd2FlaGxlbl84Mzk3N2I1ZWU4:t/cb:250a9d06e5b2483a92b5c2fbd501f70d37baf2e7/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDdfUHJldi1OZXh0LzA3LTAyOF8wMl9XaWRnZXRfd2FlaGxlbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/07_Prev-Next/07-028_02_Widget_waehlen.png) ### Widget auswählen

- Im Reiter *Widgets* wählen Sie **Previous/Next Page Navigation**.

    [ ![](https://www.toujou.de/_assets/processed/eZv9KfY05P2IftDWbxR2v_tVRkPQV1lzJuGvqvB8ii0/q:85/w:432/h:270/fn:Y3NtXzA3LTAyOF8wM19XaWRnZXRfc3BlaWNoZXJuX2M1OTNjMDA2N2Q:t/cb:893788f74f3bab6b70979dbf537097c7bfb81d6c/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDdfUHJldi1OZXh0LzA3LTAyOF8wM19XaWRnZXRfc3BlaWNoZXJuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/07_Prev-Next/07-028_03_Widget_speichern.png) ### Widget speichern

- Klicken Sie oberhalb der Arbeitsfläche auf **Speichern**.

  ---

  Verhalten
-----------

 *Previous/Next Page Navigation* gibt je einen nach links und nach rechts gerichteten verlinkten Pfeil auf Höhe der Mitte der Website am jeweils seitlichen Rand fixiert wieder.

**Besonderheiten**:

- Die Pfeile sind zur jeweils vorherigen bzw. nächsten Seite automatisch verlinkt. Die Hierarchie richtet sich nach der Reihenfolge von oben nach unten Ihrer Unterseiten im Seitenbaum.
- Es spielt keine Rolle, wo Sie das Inhaltselement auf der jeweiligen Seite platzieren.
- Um einen »Rundlauf« aller Seiten derselben Ebene zu gewährleisten, muss das Widget-Element in jeder Unterseite einzeln platziert werden.

**Responsive:** Die Pfeile werden auf allen Endgeräten auf Höhe der Mitte jeweils rechts und links ausgespielt und bleiben als fixiertes Element auch beim Scrollen dort haften.