--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/elements/image' title: 'Ein Bild hinzufügen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-23T23:54:43+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Fügen Sie ein Foto oder eine Illustration hinzu, das die Spalte füllt und mit dem Bildschirm skaliert.' tags: - 'Tekst en media' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Ein Bild hinzufügen' description: 'Fügen Sie ein Foto oder eine Illustration hinzu, das die Spalte füllt und mit dem Bildschirm skaliert.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T23:54:43+0000' dateModified: '2026-10-24T09:09:48+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/documentation/learn-dxpr-builder/elements/image' articleSection: 'Tekst en media' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/elements/image' description: 'Fügen Sie ein Foto oder eine Illustration hinzu, das die Spalte füllt und mit dem Bildschirm skaliert.' 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 --- [Help Center](/de/hc)/[Documentation](/de/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Tekst en media](/hc/documentation/learn-dxpr-builder/elements/text-and-media) # Ein Bild hinzufügen. Learn DXPR BuilderBuild pagesAdd contentTekst en media ## In this guide Related guides - [Das Aussehen eines Elements im Style-Tab ändern](/de/hc/documentation/learn-dxpr-builder/element-settings/style-tab) Fügen Sie ein Foto oder eine Illustration hinzu, das die Spalte füllt und mit dem Bildschirm skaliert. ## Ein Bild hinzufügen Öffnen Sie Ihre Seite im angemeldeten Zustand: Wenn Sie mit der Maus über den Inhaltsbereich fahren, erscheinen die Steuerelemente des Builders. [Ihre erste Seite](/de/hc/documentation/learn-dxpr-builder/getting-started/first-page) zeigt die Grundlagen. 1. Fahren Sie mit der Maus über die Spalte und klicken Sie in ihrer Steuerleiste auf **+**; klicken Sie auf einer leeren Seite auf **Add Elements**. Öffnen Sie den **Content**-Tab und klicken Sie auf **Image**. Das Bild landet oben in der Spalte und sein Einstellungsdialog öffnet sich. 2. Klicken Sie unter **Image** auf **Select Image**. Filtern Sie im **Media browser** bei Bedarf nach Namen, kreuzen Sie ein Foto an und klicken Sie auf **Insert selected**. 3. Klicken Sie auf die Überschrift **SEO**, um sie aufzuklappen. Ersetzen Sie einen Text unter **Alt attribute** durch eine kurze Beschreibung des Fotos. 4. Klicken Sie im Dialog auf **Speichern**. Klicken Sie dann in der Symbolleiste oben im Inhaltsbereich auf **Speichern**, um die Seite zu speichern. ## Was Sie sehen Die Standard-**Image width** beträgt 100 %. Screenreader lesen Ihren Alternativtext vor. Um die Skalierung zu prüfen, stellen Sie den **View mode** auf **Preview** und verengen Sie Ihr Browserfenster. Besucher sehen Ihre Änderungen, nachdem Sie gespeichert und veröffentlicht haben. ## Ihr Bild einrichten Fahren Sie mit der Maus über das Element und öffnen Sie in seiner Steuerleiste **More > Settings**. Optionen: - **Image:** wählt ein Bild aus der Medien- oder Dateiverwaltung Ihrer Website, lädt eine Datei hoch oder fügt eine externe URL ein. - **Image width:** eine CSS-Breite wie `100%` oder `300px`. Die Vorgabe ist 100 %. - **Image height:** eine feste Höhe wie `400px`. Leer lassen, um die Form des Fotos zu behalten. - **Image link:** macht das Bild klickbar. Geben Sie eine URL ein oder wählen Sie eine Seite. - **Image link target:** Same window oder New window. Wird angezeigt, sobald Sie einen Link hinzufügen. - **Alt attribute:** im Bereich **SEO** eine Beschreibung für Screenreader und Suchmaschinen. - **Title attribute:** im Bereich **SEO** zusätzliche Information, die beim Darüberfahren als Tooltip erscheint. ## Bildladung und Seitengeschwindigkeit DXPR Builder steuert das Laden neuer Bilder automatisch, um Seiten schnell zu halten und springende Inhalte zu vermeiden. Bilder am Seitenanfang sowie in Tabs, Karussellen und Marquees bleiben abrufbereit. Weiter unten stehende Bilder können laden, während Besucher scrollen. Bilder können aus Ihrer Medienverwaltung, hochgeladenen Dateien oder externen URLs stammen. Lassen Sie Bilder im Editor fertig laden, bevor Sie speichern, damit DXPR Builder die passende Platzmenge reservieren kann. Wenn Sie ein Bild ersetzen, aktualisieren sich seine Abmessungen, ohne dass sich Ihre gewählte Darstellungsgröße ändert. Bereits auf Ihrer Website vorhandene Bilder werden nicht automatisch aufgewertet. Die Seitengeschwindigkeit hängt auch von der Bilddateigröße und anderen Inhalten ab. Prüfen Sie Ihre veröffentlichte Seite auf schmalen und breiten Bildschirmen. ## Wenn Sie es nicht sehen - **Das Bild ist nicht im Content-Tab.** Ihr Benutzerprofil blendet es aus. Bitten Sie die Administration, es unter [User Profiles](/de/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) zu aktivieren. - **Es ist nach dem Neuladen verschwunden.** Die Seite wurde nicht gespeichert. Fügen Sie es erneut hinzu und klicken Sie in der Symbolleiste oben im Inhaltsbereich auf **Speichern**. - **Das Bild-Element ist leer.** Im Feld **Image** ist kein Bild gesetzt. Fahren Sie mit der Maus über das Element und öffnen Sie **More > Settings**, und klicken Sie dann auf **Select Image**. - **Ein Symbol für defekte Bilder erscheint.** Die Datei wurde in der Medienverwaltung gelöscht oder verschoben. Fahren Sie mit der Maus über das Element und öffnen Sie **More > Settings**, entfernen Sie die Auswahl und wählen Sie ein neues Bild. - **Das Bild ist verzerrt oder gestaucht.** **Image width** und **Image height** enthalten beide feste Werte, die nicht zum Foto passen. Leeren Sie **Image height**, um seine Form wiederherzustellen. ## Wie geht es weiter? [Style-Tab](/de/hc/documentation/learn-dxpr-builder/element-settings/style-tab), um Abstände und Hintergrund Ihres Bildes zu ändern.