Navigations Module
Dieser Bereich enthält Module, die Nutzerinnen und Nutzer gezielt durch eine Website oder einzelne Seitenbereiche führen.
Menü
Das Menü führt Besucherinnen und Besucher zu zentralen Bereichen der Website.
Inhaltsverzeichnis
Das Inhaltsverzeichnis führt Besucherinnen und Besucher zum Inhaltsüberblick der Seite.
Table of Contents
Design-Grundlagen
Dieser Bereich legt die gestalterischen Grundlagen fest, die als Basis für alle Module und Kundenvarianten dienen.
Farben
Die Farbdefinitionen sichern ein einheitliches Erscheinungsbild und helfen, Akzente, Statushinweise und Markenwirkung konsistent einzusetzen.
Primärfarben
Dunkelbraun
#582308
Verwendung:
- Marke
- Logo
- Überschriften 1-3
- Geschichte
- starke Elemente
- Hauptnavigation
- primäre Buttons
- Fließtext
- inaktive, strukturell wichtige Zustände
Rolle: Vertrauen, Kompetenz und Struktur.
Naturgrün dunkel
#3F5946
Verwendung:
- Landschaft
- Überschriften 4-6
- Lage
- Handlungen
- Naturbereiche
- Header und Footer
- Hauptnavigation
- sekundäre Buttons
- Fließtext
- primäre Handlungsaufrufe
- aktive, strukturell wichtige Zustände
Rolle: Vertrauen, Kompetenz und Struktur.
Sekundärfarben
Holzbraun
#866047
Verwendung:
- Linien
- Icons
- kleine Akzente
- sekundäre Elemente
- Links
- Metadaten
- interaktive Zustände
- Fokusrahmen
- Hover-Zustände
- sekundäre Hervorhebungen
- sekundäre Handlungsaufrufe
Rolle: Orientierung und Interaktion.
Salbeigrün hell
#DCE4D8
Verwendung:
- Information
- Amenities
- Ruhe
- Struktur
- Formularfelder
- inaktive Zustände
- auffallende Hintergrundflächen
- Hoover Flächen
Rolle: Struktur ohne zusätzlichen Farbfokus.
Warmweiß
#FAF8F4
Verwendung:
- Standard-Hintergrund
- Content
- Karten
- Formulare
Rolle: Ruhe und visuelle Entlastung.
Akzentfarben
Blaues Appartment
#A8CED2
Verwendung:
- Alle Informationen rund ums blaue Appartment
Rolle: Orientierung und Interaktion.
Rotes Appartment
#B45F58
Verwendung:
- Alle Informationen rund ums blaue Appartment
Rolle: Orientierung und Interaktion.
MA | Sektion | Information | Salbei mit kompaktem Spacing
Geeignet für
- Ausstattungsraster
- Vorteilsstreifen
- praktische Informationen
- Kurzdaten
- Gehzeiten
- Informationskarten
- Schnellnavigation
- ruhige Hinweisbereiche
Nicht geeignet für
- lange Rechtstexte
- starke CTA-Bereiche
- Hausgeschichte als emotionale Hauptsektion
- komplette Apartmentdetailseite
- großflächige Verwendung der Apartmentfarben
MA | Sektion | Information | Braun
Geeignet für
- „Unser Paradies“
- zentrale Zitate
- emotionale Hausgeschichte
- persönliche Gastgeberbotschaft
- kurze, fokussierte Storytelling-Bereiche
Nicht geeignet für
- normale Fließtextabschnitte
- lange Chronologien
- Formulare
- Preislisten
- Amenities
- allgemeine Navigation
Inhaltsmodule
Hier werden Module gesammelt, die vor allem zur Darstellung und Strukturierung von Text- und Inhaltsbereichen verwendet werden.
Informationstext
Das Modul eignet sich für erklärende Textblöcke, Hinweise oder kurze Inhaltsabschnitte mit klarer Botschaft.
Infotext Standard
Der universelle Infotext.
Infotext Ausstattung
Etwas sachlicher als „Vorteil“.
Beispiele:
WLAN
Kitchen
Geschirrspüler
Bettwäsche
Ski storage room
Infotext Entfernung
Entfernung: m
Dein Titel Steht Hier
Dein Inhalt steht hier. Bearbeite oder entferne diesen Text inline oder in den Modul-Inhaltseinstellungen. Du kannst außerdem jeden Aspekt dieses Inhalts in den Modul-Design-Einstellungen gestalten und in den Modul-Erweitert-Einstellungen sogar benutzerdefiniertes CSS auf diesen Text anwenden.
Infotext Apartment blau
43 m² Gesamtfläche
12 m² Balkon
Stock
ab 150 Euro
Infotext Apartment rot
48 m² Gesamtfläche
8 m² Balkon
Stock
ab 165 Euro
Medienmodule
Dieser Abschnitt umfasst Module für Bilder, Galerien, Icons und visuelle Trennelemente.
Bild
Das Bildmodul bindet einzelne Bilder ein und unterstützt unterschiedliche Darstellungsformen für visuelle Inhalte.
Standardbild
Galerie
Die Galerie bündelt mehrere Bilder und eignet sich für Projektbeispiele, Referenzen oder visuelle Sammlungen.
Galerie - Grid Format
Galerie - Slider Format
Icon
Das Icon-Modul hebt Inhalte visuell hervor und unterstützt eine schnelle Orientierung auf der Seite.
Solo Icon
Icon mit kurzer Beschriftung
Icon Liste
Interaktive Module
Hier werden Module eingeordnet, die Inhalte interaktiv aufklappen, wechseln oder übersichtlich in mehreren Ebenen darstellen.
Buttons
Der Button macht wichtige Aktionen sichtbar und führt gezielt zu Formularen, Angeboten oder weiterführenden Seiten.
Die Buttonstile definieren, wie zentrale Handlungen sichtbar gemacht und je nach Wichtigkeit unterschiedlich gewichtet werden.
Button primär
Zweck: Hauptaktion der Seite.
Verwendung:
- Hero
- CTA-Bereiche
- Kontaktseite
Beispieltexte:
- Gespräch anfragen
- Erstgespräch vereinbaren
- Get in touch
Button Sekundär
Zweck: Alternative Aktion.
Verwendung:
- Hero-Bereich
- CTA-Bereich
Beispieltexte:
- Mehr erfahren
- Arbeitsweise ansehen
- Profil ansehen
Button Appartments
Zweck: Aktion auf Appartmentseiten
Umschalter
Umschalter zeigen Inhalte bei Bedarf auf und eignen sich besonders für FAQs oder Abläufe.
Dein Titel Steht Hier
Dein Inhalt steht hier. Bearbeite oder entferne diesen Text inline oder in den Modul-Inhaltseinstellungen. Du kannst außerdem jeden Aspekt dieses Inhalts in den Modul-Design-Einstellungen gestalten und in den Modul-Erweitert-Einstellungen sogar benutzerdefiniertes CSS auf diesen Text anwenden.
Dein Titel Steht Hier
Dein Inhalt steht hier. Bearbeite oder entferne diesen Text inline oder in den Modul-Inhaltseinstellungen. Du kannst außerdem jeden Aspekt dieses Inhalts in den Modul-Design-Einstellungen gestalten und in den Modul-Erweitert-Einstellungen sogar benutzerdefiniertes CSS auf diesen Text anwenden.
Conversion-Module
Dieser Abschnitt bündelt Module, die Besucherinnen und Besucher zu einer konkreten Handlung führen sollen.
Handlungsaufruf
Zweck: Der Handlungsaufruf ist das stärkste Conversion-Element der Website.
Er wird eingesetzt, wenn Besucherinnen und Besucher nach einem Inhaltsabschnitt gezielt zur nächsten Handlung eingeladen werden sollen.
Einsatzbereiche
- Startseite
- Leistungsseiten
- Arbeitsweise
- Branchenerfahrung
- Blogbeiträge
- Kontaktseite
Handlungsaufruf Standard
Dein Inhalt steht hier. Bearbeite oder entferne diesen Text inline oder in den Modul-Inhaltseinstellungen. Du kannst außerdem jeden Aspekt dieses Inhalts in den Modul-Design-Einstellungen gestalten und in den Modul-Erweitert-Einstellungen sogar benutzerdefiniertes CSS auf diesen Text anwenden.
Handlungsaufruf Grüner CTA
Dein Inhalt steht hier. Bearbeite oder entferne diesen Text inline oder in den Modul-Inhaltseinstellungen. Du kannst außerdem jeden Aspekt dieses Inhalts in den Modul-Design-Einstellungen gestalten und in den Modul-Erweitert-Einstellungen sogar benutzerdefiniertes CSS auf diesen Text anwenden.
Hero 2 Buttons
Dein Inhalt steht hier. Bearbeite oder entferne diesen Text inline oder in den Modul-Inhaltseinstellungen. Du kannst außerdem jeden Aspekt dieses Inhalts in den Modul-Design-Einstellungen gestalten und in den Modul-Erweitert-Einstellungen sogar benutzerdefiniertes CSS auf diesen Text anwenden.
Handlungsaufruf Sekundär
Dein Inhalt steht hier. Bearbeite oder entferne diesen Text inline oder in den Modul-Inhaltseinstellungen. Du kannst außerdem jeden Aspekt dieses Inhalts in den Modul-Design-Einstellungen gestalten und in den Modul-Erweitert-Einstellungen sogar benutzerdefiniertes CSS auf diesen Text anwenden.
Kontaktformular
Das Kontaktformular ermöglicht Besucherinnen und Besuchern eine direkte Anfrage über die Website.
Kontaktformular Einfach
Teilen Sie uns Ihr Anliegen mit
Kontaktformular Erweitert
Teilen Sie uns Ihr Anliegen mit
MA | Sektion | Standard | Hell mit Standard Spacing
Geeignet für
- normale Textabschnitte
- Apartmentübersicht
- Einleitungen
- Galerien
- Kontaktformular
- Preise
- rechtliche Inhalte
- Bilder mit begleitendem Text
- allgemeine Inhaltskarten
Nicht geeignet für
- starke Handlungssektionen
- emotionalen Geschichts-Höhepunkt
- großflächige Naturinszenierung
- Apartmentkennzeichnung als komplette Farbfläche