Ihr Website-Design anpassen
Website Studio umfasst ein vollständiges Design-Anpassungssystem mit vorgefertigten Designs, benutzerdefinierten Farbüberschreibungen, Typografieoptionen und Auswahl von Kopf- und Fußzeilenstilen. Alle Designeinstellungen werden über die Seite Design & Farben verwaltet.
Auf Design-Einstellungen zugreifen
- Gehen Sie in der linken Seitenleiste zu Website Studio.
- Klicken Sie auf die Karte Design & Farben im Dashboard, oder navigieren Sie direkt zu Website Studio > Design & Farben.
Ein Design auswählen
Website Studio enthält 10 professionell gestaltete Designs. Jedes Design bietet einen vollständigen Satz an Farben, Schriften, Rahmenradius und Schattenstilen.
Verfügbare Designs
| Design | Beschreibung | Stil |
|---|---|---|
| Klassisch | Zeitloses, traditionelles Design mit Marine- und Goldakzenten | Serifen-Überschriften, subtile Schatten |
| Modern | Klar und zeitgemäß mit kräftigen Blau- und Violettakzenten | Serifenlos, abgerundete Ecken |
| Minimal | Schlicht und elegant mit viel Weißraum | Neutrale Töne, keine Rahmen oder Schatten |
| Warme Erde | Gemütlich und einladend mit erdigen Bernsteintönen | Serifen-Überschriften, warme Schatten |
| Ozeanblau | Ruhig und friedlich mit ozeaninspirierten Himmelblautönen | Abgerundete Ecken, weiche Schatten |
| Waldgrün | Natürlich und erfrischend mit grünen Akzenten | Serifen-Überschriften, subtile Schatten |
| Sonnenuntergang-Orange | Lebendig und energetisch mit warmen Orangetönen | Extra-abgerundete Ecken, warme Schatten |
| Königsviolett | Elegant und anspruchsvoll mit königlichen Violettakzenten | Dekorative Serifen-Überschriften |
| Schiefergrau | Professionell und modern mit neutralen Grautönen | Serifenlos, kleine Rahmen |
| Mitternachtsdunkel | Kräftiges Dark-Mode-Design für moderne Gemeinden | Dunkler Hintergrund, glühende Akzente |
So wählen Sie ein Design aus
- Durchsuchen Sie auf der Seite „Design & Farben" die Designkarten unter Design auswählen.
- Jede Karte zeigt eine Farbvorschau, den Designnamen und eine kurze Beschreibung.
- Klicken Sie auf eine Designkarte, um sie auszuwählen. Ein Häkchen erscheint zur Bestätigung Ihrer Auswahl.
- Scrollen Sie nach unten und klicken Sie auf Designeinstellungen speichern.
Tipp: Die Designvorschauen zeigen Ihnen die Primärfarbleiste, Textfarbe und Hintergrundfarbe, damit Sie einen Eindruck vom Aussehen bekommen, bevor Sie auswählen.
Farben anpassen
Sie können die Standardfarben des Designs durch Ihre eigenen Markenfarben überschreiben. So können Sie das Layout und die Struktur eines Designs verwenden und gleichzeitig das Branding Ihrer Gemeinde beibehalten.
Verfügbare Farbüberschreibungen
- Primärfarbe -- Wird für Schaltflächen, Links und Akzentelemente verwendet.
- Sekundärfarbe -- Wird für sekundäre Benutzeroberflächenelemente verwendet.
- Akzentfarbe -- Wird für Hervorhebungen und besondere Elemente verwendet.
So passen Sie Farben an
- Scrollen Sie auf der Seite „Design & Farben" zum Abschnitt Benutzerdefinierte Farben.
- Für jede Farbe:
- Klicken Sie auf das Farbmuster, um den Farbwähler zu öffnen.
- Wählen Sie Ihre gewünschte Farbe.
- Der Hex-Code wird im Textfeld neben dem Wähler angezeigt.
- Klicken Sie auf Designeinstellungen speichern, um anzuwenden.
Um die Farben auf die Design-Standards zurückzusetzen, klicken Sie auf den Link Auf Design-Standards zurücksetzen am unteren Rand des Farbenabschnitts.
Tipp: Wenn Sie ein Farbfeld leer lassen, wird die Standardfarbe des Designs für diesen Platz verwendet. Sie müssen nicht alle drei Farben überschreiben – nur die, die Sie ändern möchten.
Schriften auswählen
Sie können die Überschriften- und Fließtextschriften unabhängig voneinander anpassen.
Verfügbare Schriften
| Schrift | Stil |
|---|---|
| Systemstandard | Die Standard-Sans-Serif-Schrift des Geräts |
| Inter | Modern, klarer serifenloser Stil |
| Poppins | Geometrischer, freundlicher serifenloser Stil |
| Montserrat | Kräftiger, geometrischer serifenloser Stil |
| Georgia | Klassische Serifenschrift |
| Merriweather | Gut lesbare Serifenschrift |
| Lora | Elegante Serifenschrift |
| Playfair Display | Dekorative Display-Serifenschrift |
So ändern Sie Schriften
- Scrollen Sie auf der Seite „Design & Farben" zum Abschnitt Typografie.
- Wählen Sie eine Schrift aus dem Dropdown Überschriftenschrift.
- Wählen Sie eine Schrift aus dem Dropdown Fließtextschrift.
- Klicken Sie auf Designeinstellungen speichern.
Wenn Sie „Design-Standard verwenden" auswählen, wird die Schrift verwendet, die von Ihrem ausgewählten Design definiert ist.
Kopfzeilenstile
Der Kopfzeilenstil bestimmt, wie Ihre Website-Navigation oben auf jeder Seite erscheint.
Verfügbare Kopfzeilenstile
| Stil | Beschreibung |
|---|---|
| Klassisch | Logo links, Navigationslinks rechts |
| Zentriert | Logo oben zentriert, Navigationslinks darunter |
| Transparent | Überlagert das Hero-Bild (ideal für bildintensive Startseiten) |
| Modern | Logo links, Navigation zentriert, Call-to-Action-Schaltfläche rechts |
| Minimal | Nur Logo und Hamburger-Menüsymbol |
So wählen Sie einen Kopfzeilenstil
- Scrollen Sie auf der Seite „Design & Farben" zum Abschnitt Kopfzeilenstil.
- Jede Option enthält eine visuelle Vorschau des Layouts.
- Klicken Sie auf Ihren bevorzugten Stil.
- Klicken Sie auf Designeinstellungen speichern.
Fußzeilenstile
Der Fußzeilenstil bestimmt das Layout des unteren Bereichs jeder Seite.
Verfügbare Fußzeilenstile
| Stil | Beschreibung |
|---|---|
| Vollständig | Mehrspaltige Fußzeile mit Kontaktinformationen, Navigationslinks und Social Media |
| Minimal | Eine einzelne Zeile mit Copyright-Text und Social-Media-Symbolen |
| Zentriert | Alles zentriert: Logo, Navigationslinks, Social-Symbole und Copyright |
| Grand | Große, auffällige Fußzeile mit Branding, Call-to-Action und mehreren Spalten |
So wählen Sie einen Fußzeilenstil
- Scrollen Sie auf der Seite „Design & Farben" zum Abschnitt Fußzeilenstil.
- Jede Option enthält eine visuelle Vorschau.
- Klicken Sie auf Ihren bevorzugten Stil.
- Klicken Sie auf Designeinstellungen speichern.
Gemeinde-Logo
Das Logo Ihrer Gemeinde erscheint in der Website-Kopfzeile und wird in Ihren Gemeindeprofil-Einstellungen konfiguriert:
- Gehen Sie zu Einstellungen > Gemeindeprofil.
- Laden Sie Ihr Logo-Bild hoch.
- Das Logo wird automatisch auf Ihrer Website basierend auf Ihren Kopfzeilenstileinstellungen angezeigt.
Sie können steuern, ob das Logo in der Kopfzeile angezeigt wird, über die Navigationseinstellungen (siehe Navigation & Menüs).
Ihre Designänderungen speichern
Alle Design-, Farb-, Schrift-, Kopfzeilen- und Fußzeilenänderungen werden gemeinsam gespeichert, wenn Sie auf Designeinstellungen speichern klicken. Änderungen treten sofort auf Ihrer öffentlichen Website in Kraft – es gibt keinen separaten Veröffentlichungsschritt für Designeinstellungen.
Nächste Schritte
- Navigation & Menüs -- Ihr Websitemenü, Kopfzeile und Fußzeileninhalt konfigurieren
- SEO-Einstellungen -- Ihre Website für Suchmaschinen optimieren