Ein Tabs-Panel hinzufügen.

Learn DXPR BuilderBuild pagesAdd contentLay-out

Nutzen Sie Tabs, wenn Sie mehrere Blöcke verwandter Inhalte an einem Ort wollen, aber nur einen gleichzeitig sichtbar. Sie erhalten eine Reihe von Tab-Labels; Besucher klicken auf ein Label, um dessen Inhalt zu sehen. Das Beispiel baut eine Agenturseite mit einem Tab pro Leistung. Für Fragen und Antworten liest sich ein Collapse-Panel meist besser.

Drei Service-Tabs mit den Labels „Web design“, „Branding“ und „Marketing“, mit geöffnetem „Web design“ über seinem Text

Ein Tabs-Panel hinzufügen

  1. Fahren Sie über die Spalte und klicken Sie auf + in ihrer Kontrollleiste, oder auf das + in der Mitte einer leeren Spalte, um den Element-Picker zu öffnen.
  2. Klicken Sie im Tab Layout auf Tabs. Das Element erscheint mit einem Tab, beschriftet mit Title.
  3. Fahren Sie über das Panel des Tabs und öffnen Sie More > Settings. Geben Sie einen Namen bei Tab title ein und klicken Sie auf Save.
  4. Klicken Sie auf + im Panel, um Inhalt hinzuzufügen, etwa ein Text-Element.
  5. Um einen Tab hinzuzufügen, fahren Sie über die Tab-Labels und klicken Sie auf Add tab in der Kontrollleiste von Tabs. Der neue Tab landet zuerst, vor den anderen. Benennen Sie ihn und füllen Sie ihn genauso.

Was Sie sehen

Eine Reihe von Tab-Labels sitzt über dem Inhalt des offenen Tabs. In der Vorschau und auf der veröffentlichten Seite zeigt ein Klick auf ein Label den Inhalt dieses Tabs und verbirgt den Rest. Jeder Tab enthält eigene Elemente, sodass ein Tab Text und ein anderer eine Reihe Cards tragen kann. Auf Bildschirmen unter 768 Pixeln werden die Tabs zu gestapelten Überschriften, die sich wie ein Collapse-Panel öffnen.

Ihre Tabs einrichten

Das Element Tabs hat drei Einstellungen. Öffnen Sie sie über More > Settings in der Kontrollleiste von Tabs, die erscheint, wenn Sie über die Tab-Labels fahren.

Einstellung Funktion Standard
Tab direction Wo die Labels sitzen: Default (über dem Inhalt), Left oder Right Default
Style Das Aussehen der Labels: Default (eine Linie unter den Labels), Modern (abgerundete Cards) oder Accordion (Überschriften mit Trennlinien) Default
Mobile friendly Zeigt die Tabs auf Bildschirmen unter 768 Pixeln als aufklappbare Überschriften On

Jeder Tab hat eigene Einstellungen unter More > Settings auf seinem Panel. Tab title ist der Labeltext. Tab description ist eine optionale kurze Zeile unter dem Label des offenen Tabs.

Tabs verwalten

  • Reorder: Ziehen Sie ein Tab-Label an eine neue Stelle unter den Labels. Sein Inhalt wandert mit.
  • Rename: Fahren Sie über das Panel des Tabs, öffnen Sie More > Settings, ändern Sie Tab title und klicken Sie auf Save.
  • Remove: Fahren Sie über das Panel des Tabs, öffnen Sie More und wählen Sie Delete. Alles im Tab wird mit entfernt.

Halten Sie Labels bei ein bis drei Wörtern und bleiben Sie bei etwa fünf Tabs, damit die Labels in eine Zeile passen.

Wenn Sie es nicht sehen

  • Der neue Tab steht zuerst statt zuletzt. Add tab setzt den neuen Tab immer nach vorn. Ziehen Sie sein Label an die gewünschte Stelle.
  • Die Einstellungen zeigen nur Tab title und Tab description. Sie haben die Einstellungen eines Tabs geöffnet. Fahren Sie über die Tab-Labels, sodass die Kontrollleiste von Tabs erscheint, und öffnen Sie dort More > Settings.
  • Telefone zeigen gestapelte Überschriften statt Tabs. Mobile friendly ist an, was der Standard ist. Schalten Sie es in den Einstellungen von Tabs aus, um Tabs auf jeder Bildschirmbreite zu behalten.
  • Tabs fehlt im Layout-Tab des Pickers. Ihr DXPR Builder-Benutzerprofil lässt es aus. Ein Administrator wählt Tabs unter Elements in Ihrem Profil unter /admin/dxpr_studio/dxpr_builder/profile.

Wie geht es weiter?