Schaltflächen sind entscheidend, damit Besucher auf Ihrer Website navigieren und mit Inhalten interagieren können. Dieser Artikel zeigt Ihnen, wie Sie das Beste aus den Button-Modulen im ChurchDesk Editor herausholen. Erfahren Sie, wie Sie Buttons erstellen, mit Links und Downloads verknüpfen und ihr Design an Ihre Bedürfnisse anpassen. Wir zeigen Ihnen auch die verschiedenen Button-Typen für mehr visuelle Vielfalt.

Auf dieser Seite:

• Button hinzufügen
• Inhalte anpassen
• Design anpassen

Button hinzufügen

Sie können ein Button-Modul hinzufügen, indem Sie ein neues Modul hinzufügen und "Button" unter der Kategorie Seitennavigation auswählen.

Um Ihr Schaltflächenmodul zu bearbeiten, nachdem es hinzugefügt wurde, doppelklicken Sie auf das Modul oder klicken Sie auf das Symbol Bearbeiten. Sie können dann die Optionen unter Inhalt, Design oder Einstellungen erweitern und bearbeiten.

Inhalte anpassen

Die Inhalte eines Buttons können Sie anpassen indem Sie mit der Maus über den hinzugefügten Button fahren -> auf "Modul" klicken -> auf den Stift klicken -> es öffnet sich ein Einstellungsfenster -> klicken Sie auf "Inhalt" -> öffnen Sie die jeweilige Unterkategorie:

Allgemein

• Button Text: Geben Sie hier den Text ein, der auf dem Button angezeigt werden soll (z. B. "Jetzt spenden", "Mehr erfahren").
• Titeletikett: Die Verwendung eines Titeletiketts bietet mehr Kontext über Ihre Website und kann die Sichtbarkeit in Suchmaschinen verbessern. Außerdem zeigen die meisten Webbrowser das Titeletikett an, wenn der Mauszeiger über die Schaltfläche fährt, damit die Besucher sehen können, wohin der Link sie führt, bevor sie darauf klicken.

Link-Typen

• Externe URL: Verlinken Sie eine beliebige externe Webseiten z.B. die Ihrer Nachbargemeinde.
• Interne Seite: Verlinken Sie auf eine andere Unterseite Ihrer ChurchDesk-Website.
• E-Mail: Bei der Verknüpfung mit einer E-Mail wird die Standard-E-Mail-Anwendung des Besuchers geöffnet, wenn er auf die Schaltfläche klickt, und eine neue E-Mail-Nachricht mit der von Ihnen im Feld "E-Mail" angegebenen E-Mail als Empfänger erstellt.
• Datei: Fügen Sie eine Datei direkt von Ihrem lokalen PC (über die graue Schaltfläche) oder aus der Dateibibliothek (blauer Button) hinzu. Bei der Verknüpfung mit einer Datei zum Herunterladen wird der Browser des Besuchers den Download auslösen, wenn er auf die Schaltfläche klickt. Es werden folgende Dateiformate unterstützt: .png, .gif, .jpeg, .jpg, .xls, .xlsx, .doc, .docx, .pdf.
• Telefon: Wenn Sie die Telefonnummer verwenden möchten, die Sie in Globale Daten eingegeben haben, geben Sie Folgendes ein: tel:[phone]. Denken Sie daran, dass Sie Schaltflächen in bestimmten Ansichtsfenstern ausblenden können, wenn Sie nicht möchten, dass sie angezeigt werden (in diesem Fall könnte es nicht sinnvoll sein, eine Schaltfläche "Zum Anrufen klicken" in der Desktop-Ansicht zu haben, während sie in der mobilen Ansicht relevanter ist).

Symbol

• Symbol-Ausrichtung: Wählen Sie, ob das Symbol links oder echts von der Beschriftung platziert werden soll.
• Symbol: Wählen Sie ein passendes Icon aus der Bibliothek, um Ihren Button noch aussagekräftiger zu gestalten (z. B. einen Briefumschlag für eine E-Mail oder ein Download-Pfeil für eine Datei).

Design anpassen

Sie können das Erscheinungsbild Ihrer Buttons anpassen, um es an das Design Ihrer Website anzugleichen. Sie können entweder die globalen Designeinstellungen nutzen, um einen einheitlichen Stil zu schaffen, teilweise aber auch lokale Anpassungen vornehmen.

1. Das Globale Design können Sie über die Schaltfläche an der linkes Seite Design -> Module -> Seitennavigation -> Button / Button 1 / Button 2 anpassen.
2. Das lokale Design können Sie anpassen indem Sie mit der Maus über den hinzugefügten Button fahren -> auf "Modul" klicken -> auf den Stift klicken -> es öffnet sich ein Einstellungsfenster.

Folgende Einstellungen können Sie Global hinterlegen, aber auch lokal anpassen:

• Farben: Legen Sie die Farben für den Hintergrund, Text, Rahmen und das Symbol fest.
• Schatten aktivieren: Fügen Sie einen Schatten hinzu, um den Button optisch hervorzuheben.
• Abstand: Passen Sie den Außenabstand an, um den Button von anderen Elementen zu trennen.

Folgende Einstellungen können Sie ausschließlich lokal anpassen:

• Button Ausrichtung: Richten Sie den Button innerhalb einer Spalte rechts, links oder mittig aus.
• Button Breite: Anstatt die Größe des Buttons von seinem Inhalt abhängig zu machen, können Sie eine feste Breite für ihn definieren. Der Prozentsatz bezieht sich auf die Breite der Spalte, in der die Schaltfläche eingefügt wird; das bedeutet, dass eine Schaltfläche mit einer Breite von 25% genau ein Viertel der Spalte einnimmt.
• Button Float: Verwenden Sie diese Funktion, um Text um Ihre Schaltfläche herum zu platzieren. Sie können die Schaltfläche nach links oder rechts verschieben. Fügen Sie dazu zuerst den Button ein, in der gleichen Spalte darunter das Text-Modul und aktivieren Sie dann das floating für den Button. Wenn Sie Float zu Ihrer Schaltfläche hinzufügen, ist es empfehlenswert, je nach Richtung des Floats einen Rand rechts oder links zu setzen. Fügen Sie einen Rand am unteren Rand hinzu, um das umhüllte Element vom floatenden Element wegzuschieben. Nutzen Sie diese Funktion ebenfalls, wenn Sie Button nebeneinander platzieren wollen.

• Feste Position: Wenn Sie möchten, dass eine Schaltfläche auf dem Bildschirm des Besuchers fixiert wird und dort verbleibt, während er auf einer Seite nach oben oder unten scrollt, können Sie unter Design > Schaltfläche > Allgemein die Option Feste Position aktivieren.
• Animationen aktivieren und anpassen: Fügen Sie Animationen hinzu, um den Button noch dynamischer zu gestalten.

Drei verschiedene Buttons hinterlegen:

Um mehr visuelle Vielfalt bei Buttons zu schaffen, ermöglicht Ihnen der Editor drei alternative Button-Stile. Die drei Button-Module sind in ihrer Funktionalität völlig gleich und unterscheiden sich einzig im jeweiligen Design.

Schlüsselworte: Buttons, Schaltflächen, Schaltflächenmodul, Website-Navigation, Interaktion, Button-Modul, Design anpassen, Telefonnummer, E-Mail-Link, Dateidownload, Responsive Design, User Experience, Seitennavigation, ChurchDesk

Aktualisiert am: 07/08/2025