--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/bearbeiten/element-auswahl' title: 'Ein Element finden und hinzufügen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-23T23:55:57+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Jedes Element, das Sie hinzufügen, stammt aus der Elementauswahl, einem Dialog mit fünf Tabs: Layout, Inhalt, Drupal-Blöcke, Drupal-Views und Ihre gespeicherten Vorlagen. Hier erfahren Sie, was jeder Tab enthält und wie Sie ein Element schnell finden. Das Beispiel besucht jeden Tab und fügt einen Button aus dem Content-Tab hinzu.' tags: - 'Edit a page' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Ein Element finden und hinzufügen' description: 'Jedes Element, das Sie hinzufügen, stammt aus der Elementauswahl, einem Dialog mit fünf Tabs: Layout, Inhalt, Drupal-Blöcke, Drupal-Views und Ihre gespeicherten Vorlagen. Hier erfahren Sie, was jeder Tab enthält und wie Sie ein Element schnell finden. Das Beispiel besucht jeden Tab und fügt einen Button aus dem Content-Tab hinzu.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T23:55:57+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/bearbeiten/element-auswahl' articleSection: 'Seite bearbeiten' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/bearbeiten/element-auswahl' description: 'Jedes Element, das Sie hinzufügen, stammt aus der Elementauswahl, einem Dialog mit fünf Tabs: Layout, Inhalt, Drupal-Blöcke, Drupal-Views und Ihre gespeicherten Vorlagen. Hier erfahren Sie, was jeder Tab enthält und wie Sie ein Element schnell finden. Das Beispiel besucht jeden Tab und fügt einen Button aus dem Content-Tab hinzu.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/build) /[Seite bearbeiten](/de/hc/documentation/learn-dxpr-builder/editing) # Ein Element finden und hinzufügen. DXPR Builder lernenSeiten erstellenSeite bearbeiten ## In diesem Leitfaden Verwandte Leitfäden - [Elemente per Drag-and-drop platzieren](/de/hc/documentation/learn-dxpr-builder/editing/drag-and-drop) - [Text direkt auf der Seite bearbeiten](/de/hc/dokumentation/dxpr-builder-lernen/bearbeiten/inline-textbearbeitung) Jedes Element, das Sie hinzufügen, stammt aus der Elementauswahl, einem Dialog mit fünf Tabs: Layout, Inhalt, Drupal-Blöcke, Drupal-Views und Ihre gespeicherten Vorlagen. Hier erfahren Sie, was jeder Tab enthält und wie Sie ein Element schnell finden. Das Beispiel besucht jeden Tab und fügt einen Button aus dem **Content**-Tab hinzu. ## Die Auswahl öffnen 1. Klicken Sie auf **Add Elements** im leeren Inhaltsbereich und wählen Sie aus dem **Layout**-Tab **Section**. 2. Klicken Sie auf das **+** auf der Section: Die Auswahl öffnet sich erneut. Was Sie nun wählen, landet in dieser Section, ganz oben. ## Die fünf Tabs im Überblick 1. Klicken Sie auf **Layout**: Section, Row, Tabs, Collapse panel, Carousel und Positioned layers. 2. Klicken Sie auf **Content**: Text-, Medien- und interaktive Elemente, mit einer **Search**-Box. 3. Klicken Sie auf **Drupal Blocks**: die Blöcke Ihrer Website, mit **Filter by category** und einer Suchbox. 4. Klicken Sie auf **Drupal Views**: jede Anzeige Ihrer aktivierten Views, mit **Filter by tag** und einer Suchbox. 5. Klicken Sie auf **Saved templates**: Ihre privaten und globalen Vorlagen, mit **Filter by user**, **Filter by type** und einer Suchbox. Jeder Tab außer **Layout** hat eine **Search**-Box: geben Sie einen Namensteil ein, um diesen Tab zu filtern. ## Ein Element hinzufügen 1. Zurück auf dem **Content**-Tab wählen Sie **Button**: Sein Einstellungsdialog öffnet sich sofort. 2. Geben Sie den **Title** ein, setzen Sie den **Link**, belassen Sie den **Type** auf Primary und klicken Sie auf **Speichern**. 3. Klicken Sie in der Symbolleiste auf **Speichern**. ## Content-Elemente | Element | Zweck | |---|---| | Alert | Bootstrap-Alert-Meldung | | Block quote | Gestaltetes Zitat | | Button | Gestalteter Button mit Link | | Card | Card mit Kopfzeile, Titel und Inhalt | | Circle counter | Kreisförmige Fortschrittsanimation | | Countdown timer | Datums- und Zeit-Countdown | | Number counter | Animierte zählende Zahl | | HTML | Roher HTML-Code | | Icon | Icon aus einer Icon-Bibliothek | | Image | Einzelnes Bild mit Link und Alternativtext | | Image carousel | Rotierende Bildergalerie | | Jumbotron | Großes Banner mit Titel und Lead-Zeile | | Link | Gestalteter Link | | Map | Google-Maps-Embed | | Marquee | Scrollender Bilderstreifen | | Panel | Umrandetes Panel mit Titel | | Progress bar | Animierte Fortschrittsanzeige | | Divider | Horizontale Linie | | Text | Rich Text mit Inline-Bearbeitung | | Local video | Selbst gehostete Videodatei | | Video | Eingebettetes Video (YouTube, Vimeo) | | Social links | Social-Media-Icon-Links | ## Was Sie sehen Die meisten Elemente öffnen ihren Einstellungsdialog, sobald Sie sie wählen. Card, Divider und Panel landen sofort auf der Seite, ebenso Section, Row, Tabs und Collapse panel. Carousel und Positioned layers öffnen zuerst ihre Einstellungen. Das neue Element sitzt oben in der Section oder Spalte, die Sie angeklickt haben; ziehen Sie es nach unten, wenn es weiter nach unten gehört. ## Wenn Sie das Element nicht sehen - **Ein Element fehlt in einem Tab.** Ihr Benutzerprofil blendet es aus. Die Administration kreuzt es unter **Elements** im Profil unter **DXPR Studio** > **DXPR Builder** > **User Profiles**(`/admin/dxpr_studio/dxpr_builder/profile`) an. Das Profil nennt manche Elemente anders: **Separator** ist Divider, **Counter** ist Number counter, **Countdown** ist Countdown timer und **Blockquote** ist Block quote. - **Ein neuer Block oder eine neue View-Anzeige fehlt.**Solange die Box **Check/Uncheck all Blocks**oder **Check/Uncheck all Views** des Profils nicht angekreuzt ist, fügen Benutzerprofile neue Blöcke und Anzeigen nicht von selbst hinzu. Die Administration kreuzt sie unter **Blocks** oder **Views** im selben Profil an. - **Der Tab Drupal Blocks fehlt.** Der Builder listet Blöcke nur auf, wenn Drupals **Block Content**-Modul eingeschaltet ist. Schalten Sie es unter **Extend**(`/admin/modules`) ein. - **Saved templates ist leer.** Es wurde noch nichts gespeichert. Wählen Sie **Save as template** im **More**-Menü eines Elements; siehe [User templates](/de/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates). ## Wie geht es weiter? - [Elemente per Drag-and-drop platzieren](/de/hc/documentation/learn-dxpr-builder/editing/drag-and-drop): Das neue Element dorthin bewegen, wo es hingehört. - [Text direkt auf der Seite bearbeiten](/de/hc/dokumentation/dxpr-builder-lernen/bearbeiten/inline-textbearbeitung): Text ohne Dialog eingeben und formatieren. - [Elements](/hc/documentation/learn-dxpr-builder/elements): Was jedes Element leistet und wie Sie es einrichten.