Artikel über: Webseite

Bild Modul

Bilder sind ein unverzichtbarer Bestandteil jeder Website. Sie visualisieren Inhalte, lockern Texte auf und wecken Emotionen. In diesem Artikel erfahren Sie, wie Sie das Bildmodul im ChurchDesk-Editor nutzen, um einzelne Bilder effektiv auf Ihrer Website einzubinden. Wir zeigen Ihnen, wie Sie Bilder hinzufügen, Links und Alt-Texte einfügen und das Design des Moduls anpassen, um eine ansprechende und professionelle Bilddarstellung zu gewährleisten.


Auf dieser Seite:

  • Inhalte anpassen
  • Lokales Design anpassen
  • Weitere Einstellungen


Tipp: Verwenden Sie das Bildmodul, um einzelne Bilder auf Ihrer Website einzubinden. Wenn Sie eine Gruppe von Bildern einbinden möchten, verwenden Sie entweder die Bilderliste oder die Galerie.


Sie können ein Bildmodul hinzufügen, indem Sie in der Bearbeitungsmaske Modul hinzufügen unter der Kategorie Medien die Option "Bild" auswählen:


Um Ihr Bildmodul zu bearbeiten machen Sie einen Doppelklick auf das Bildmodul oder fahren Sie mit der Maus über das Modul -> klicken auf "Modul" -> und dann auf den Stift zum bearbeiten. Erweitern Sie die Optionen unter Inhalt, Design oder Einstellungen in der Bearbeitungsmaske und nehmen die folgenden Anpassungen vor.



Inhalt

Der Bereich Inhalt fügen Sie neue Bilder hinzu, bearbeiten sie direkt im Editor und verknüpfen sie mit Links, um Ihre Website interaktiver zu gestalten. Ein weiterer wichtiger Schritt ist das Hinzufügen von Alt-Texten, um die Barrierefreiheit und Suchmaschinenoptimierung zu verbessern.


Bild zum Modul hinzufügen


Es gibt mehrere Möglichkeiten, dem Modul ein Bild hinzuzufügen:

  1. Ein neues Bild hochladen: Klicken Sie auf "Datei hinzufügen oder ablegen", um ein Bild von Ihrem Computer auszuwählen, oder ziehen Sie Ihr Bild per Drag & Drop in den umrandeten Bereich.
  2. Ein vorhandenes Bild aus der Dateibibliothek verwenden: Klicken Sie auf "Aus Dateibibliothek auswählen" und wählen Sie eines Ihrer vorhandenen Bilder aus der Dateibibliothek aus.
  3. Bild aus globalen Daten verwenden: Aktivieren Sie "Verwende globale Datenquelle" und wählen Sie entweder Ihr Titelbild oder Ihr Logo, das Sie zuvor in Globale Daten hochgeladen haben.
  4. Bild aus dem Gruppenmodul verwenden: Sie können jederzeit auf die öffentlichen Datein aus Ihrem Gruppen-Modul in ChruchDesk zugreifen (anders herum jedoch nicht). Gehen Sie dazu zuerst in den Dateimanager und klicken auf "Öffnen Sie die externe Dateibibliothek. Wählen Sie die Inhalte aus den Unterordnern aus und klicken anschließend auf "Zur Site-Bibliothek hinzufügen". Die Inhalte werden dann zunächst in den Dateimanager der Webseite geladen, Sie können im Anschluss von den Bild-Modulen aus über "Aus Bibliothek auswählen" darauf zugreifen.


Hinweis: Vergessen Sie nicht, Ihrem Bild einen Alt-Text (Alternativtext) hinzuzufügen. Dieser beschreibt kurz und prägnant, was das Bild zeigt, was entscheidend für die Suchmaschinen-Optimierung (SEO) und die Barrierefreiheit ist.



Bild bearbeiten

  • Bearbeiten: Klicken Sie auf "Bearbeiten" neben Ihrem Bild, um es direkt im Designer zuzuschneiden oder zu drehen.
  • Ersetzen/Entfernen: Wenn Sie das Bild austauschen oder ganz entfernen möchten, verwenden Sie die Schaltflächen "Ersetzen" oder "Entfernen".


Wenn Sie ein Bild auf Ihrer Website verwenden, haben Sie die Möglichkeit, einen Link hinzuzufügen und das Bild für Ihre Besucher klickbar zu machen. Um einen Link zu Ihrem Bild hinzuzufügen, schalten Sie Link auf Bild aktivieren ein und eine Reihe von Link-Optionen werden sichtbar.


Wählen Sie aus dem Dropdown-Menü die Art des Links, den Sie auf Ihrem Bild haben möchten. Sie haben die folgenden vier Link-Optionen:

  • Externe URL: Fügen Sie eine URL zu einer externen Seite hinzu. Dieser Linktyp aktiviert standardmäßig die Option Link in neuem Fenster öffnen, um sicherzustellen, dass der Besucher Ihre Website nicht vollständig verlässt, wenn er auf Ihr Bild klickt.
  • Interne Seite: Link zu einer Seite auf Ihrer Website.
  • E-Mail: Fügen Sie eine E-Mail-Adresse in das Feld ein. Wenn der Besucher auf das Bild klickt, wird sein Standard-E-Mail-Programm geöffnet.
  • Datei: Fügen Sie eine Datei ein, indem Sie auf "Datei Hinzufügen oder ablegen", um die Dateien auf Ihrem Computer zu öffnen, oder legen Sie Ihre Datei in dem umrandeten Bereich ab. Wenn der Besucher auf das Bild klickt, wird er die Datei herunterladen.


Aktivieren Sie die Option Link in neuem Tab öffnen, um Ihr Bild in einem neuen Browser-Tab zu öffnen, wenn es angeklickt wird. Aktivieren Sie "Nicht folgen"-Eigenschaft festlegen, wenn Sie nicht möchten, dass Suchmaschinen dem Hyperlink folgen. Wenn diese Option aktiviert ist, hat Ihr Link keinen Einfluss auf das Ranking des Ziels in Suchmaschinen.



Design

Im Bereich Design können Sie unter anderem Bildgröße und -ausrichtung ändern oder den Hintergrund, den Rahmen und die Abstände Ihres Bildmoduls anpassen.

  • Bildgröße: Die Größe des Bildes gibt an, wie viel Platz es in der Spalte einnimmt, in der es platziert ist. Wenn die Bildgröße auf 100 % eingestellt ist, füllt es die gesamte Spaltenbreite aus. Verwenden Sie den Schieberegler oder geben Sie den gewünschten Prozentsatz in das Feld ein, um die Größe anzupassen.
  • Bildausrichtung: Mit der Bildausrichtung können Sie die Position Ihres Bildes in der Spalte festlegen. Sie haben die Möglichkeit, Ihr Bild links, rechts oder zentriert auszurichten. Verwenden Sie die Float-Funktion, um Ihr Bild nach links oder rechts zu verschieben und es von anderen Inhalten umgeben zu lassen.
  • Bild float: Verwenden Sie diese Funktion, um Text um Ihr Bild herum zu platzieren. Sie können das Bild nach links oder rechts verschieben. Fügen Sie dazu zuerst das Bildmodul ein, in der gleichen Spalte darunter das Text-Modul und aktivieren Sie dann das floating für das Bildmodul. Wenn Sie die Float-Funktion zu Ihrem Bild hinzufügen, ist es empfehlenswert, einen Rand nach rechts oder links hinzuzufügen, je nachdem, in welche Richtung das Bild floatet. Fügen Sie auch unten einen Rand hinzu, um das umhüllte Element vom schwebenden Bild wegzuschieben.
  • Bild Hover: Hier legen Sie fest, wie der Hover-Effekt visuell aussehen soll, wenn er aktiviert ist (siehe Einstellungen).
  • Hintergrund, Schatten, Rahmen, Abstand und Animation: Wenden Sie verschiedene Effekte an, um das Modul noch ansprechender zu gestalten und zu platzieren.


Beispiel Bild Float

Hinweis: Für grundlegende Bearbeitungsoptionen klicken Sie auf weitere lokale Designoptionen oder bearbeiten Sie das globale Design des Bildmoduls.



Einstellungen

Im Bereich Einstellungen können Sie Hover-Effekte zu Ihrem Bild aktivieren. Ein Hover-Effekt ist eine interaktive Funktion, die auf einem Bild ausgelöst wird, wenn ein Besucher mit dem Mauszeiger darüberfährt. Bei ChurchDesk besteht dieser Effekt darin, dass ein zusätzliches visuelles Element oder ein Beschriftungstext auf dem Bild erscheint. Die Einstellungen zum Text werden wie zuvor beschrieben beim Design hinterlegt.


Der Hover-Effekt ermöglicht es Ihnen, zusätzliche Informationen wie die Bildunterschrift oder eine Aufforderung zur Interaktion (wie ein Vergrößerungs-Icon) diskret einzublenden. Das ist besonders nützlich, um die Seite optisch aufgeräumt zu halten und den Betrachter nicht zu überfordern. Die Zusatzinformationen erscheinen erst, wenn ein Besucher aktiv Interesse am Bild zeigt.




Schlagworte: Bildmodul, Bilder einfügen, Bild bearbeiten, Alt-Text, Suchmaschinenoptimierung, Bild-Link, Designer, Website-Gestaltung, Bilderliste, Bildgröße, Bildausrichtung, Bild Float, Hover-Effekte, Website-Layout, Dateibibliothek, Globale Daten.


Aktualisiert am: 08/08/2025

War dieser Beitrag hilfreich?

Teilen Sie Ihr Feedback mit

Stornieren

Danke!