D’CALOR / FÜR DEINE GESTALTUNG
Die Gestaltung
hinter dem Erlebnis.
Dein Nachschlagewerk für die D’CALOR-Website. Entdecke die Gestaltung, probiere die gemeinsamen Komponenten aus und passe das Template mit dieser Anleitung an deine Marke an.
01 / Farbe & Atmosphäre.
Solar bringt orangefarbenes Licht und Wärme. Coral setzt tiefere rote Akzente. Ruhige dunkle Flächen geben den Porträts Raum; weiche Schatten umgeben Karten, Bilder und Bedienelemente. Verwende schwarze Schrift auf Solar und helle Schrift auf dunklen Flächen.
Solar
Coral
Schwarz
#101010
Fläche
#202020
Papier
#F0EEEA
Fließtext
#D8D5D0
Solar-Akzent
#F5B200
Coral-Akzent
#F57E49
02 / Ein Ausdruck, zwei Schriften.
Bodoni Moda gibt Überschriften ihren redaktionellen Charakter. Inter hält Fließtexte, Navigation und Bedienelemente gut lesbar. Die gemeinsamen Textstile findest du unter Assets. Einige Titel haben eigene Größen- und Farbeinstellungen. Prüfe diese nach einer Stiländerung gesondert.
Farbe mit eigener Perspektive.
Bodoni Moda · Medium 500 · Ausdrucksstarke Überschriften
Ein ausdrucksstarkes Bild beginnt mit einer klaren Idee.
Inter · Regular 400 / Medium 500 · Texte und Bedienelemente
03 / Details, die zusammenpassen.
Bearbeite eine Hauptkomponente unter Assets, um ihre Instanzen zu aktualisieren. Wähle die Button-Variante Solar oder Coral passend zur Umgebung. Freistehende Buttons haben eine klare Beschriftung ohne Pfeil. Verlinkte Karten und FAQ-Zeilen nutzen das kleine gefüllte Dreieck mit abgerundeten Ecken.
04 / Ein Zeichen mit Wärme.
Das schwarze D’CALOR-Zeichen steht auf dem Solar-Verlauf. Die bearbeitbare Vorlage heißt Brand / Solar App Icon und liegt unter Assets. Exportiere quadratische PNG-Dateien für Favicon und Apple Touch Icon und ersetze sie in den Site Settings. Das Icon allein installiert keine App und ermöglicht keinen Offline-Zugriff.
05 / Mach es zu deiner Website.
Beginne mit deiner Marke
Ersetze Studioname, Logo, Seitentitel und Vorschaubild für soziale Medien. Navigation und Footer werden über die gemeinsame Layoutvorlage eingebunden. Prüfe neben der Startseite auch deren Hauptkomponenten, die Kontaktblase und die 404-Seite. Halte deine Unternehmensangaben vom Urheberhinweis des Templates getrennt.
Richte deine Kontaktwege ein
Ersetze hello@dcalor.example und +44 20 7946 0958 auf der Kontaktseite, im Footer, in der Navigation und in der Kontaktblase. Passe das WhatsApp-Ziel und alle Social-Links an deine eigenen Profile an. Die vorhandenen Social-Links öffnen die Plattformen, kein Studio-Profil.
Richte die Formulare vor dem Start ein
Wähle jedes Anfrage- und Newsletterformular in Framer und richte das Versandziel für dein eigenes Konto ein. Prüfe Pflichtfelder, Einwilligungstexte und Bestätigungsseite. Eine sichtbare Bestätigungsseite belegt noch keinen erfolgreichen Versand. Sende nach der Einrichtung einen freigegebenen Test an dein eigenes Postfach und prüfe den Eingang.
Arbeite mit dem CMS
Services steuert die Makeup-Seiten, Products die Farbkollektion, Projects die Arbeiten, Albums das Lookbook, Blog die Journalartikel, Career die Stellenangebote und Legal die Rechtstexte. Studio Artists und Studio Films enthalten Artist- und Filminhalte. Studio Content bündelt FAQ, Werte, Formate, Zusammenarbeit, Materialien und weitere Inhaltsgruppen. Erhalte Gruppe, Reihenfolge und Verknüpfungen jedes Eintrags, damit er im richtigen Abschnitt erscheint. Bei Career legst du in Apply link den Empfänger oder die Adresse des Bewerbungsformulars fest. Übersetze Application Email Subject für jede Stelle. Lass das Feld leer, um den vorhandenen Betreff des E-Mail-Links zu behalten. Links zu Webformularen bleiben unverändert. Die vier Einträge der Gruppe Client voices sind erfundene Template-Beispiele. Google-Symbol und fünf Sterne sind ein bearbeitbares Design, keine Google-Anbindung und keine verifizierte Bewertung. Ersetze vor der Nutzung für dein Unternehmen Zitate, Namen und Bewertungen durch eigene, freigegebene Rezensionen. Die gemeinsame Karte bearbeitest du unter Card / Creative collaboration. Ihr Design wird auf Startseite, Makeup, Projektpreise, Kontakt, Studio, Für Marken und Kundenstimmen verwendet.
Übersetze jede Textquelle einzeln
Nutze Framer Localization für Englisch und Deutsch. Übersetze jede Überschrift, jeden Absatz, jede Button-Beschriftung, Komponenteneigenschaft und jedes CMS-Feld einzeln. Fasse unabhängige Texte nicht zusammen und lege keine parallelen EN-/DE-Felder an. Erhalte Markennamen und technische Bezeichnungen. Übersetze auch Seitentitel, Beschreibungen, Bildbeschreibungen und sichtbare Kategorienamen. Die automatische Übersetzung ist deaktiviert. Prüfe beide Sprachen in allen Breakpoints und stelle sicher, dass EN/DE auf derselben Seite oder beim selben CMS-Eintrag bleibt. Die mobile Sprachwahl zeigt zwei Buchstaben in der Logo-Schrift, ohne Kapsel.
Bewahre deine Bildbibliothek
Ersetze Vollfarb- und selektiv gefärbte Bilder als zusammengehöriges Paar mit gleichem Ausschnitt und gleichen Abmessungen. Bewahre die Originale auf und prüfe ihre Verwendung, bevor du einen CMS-Eintrag oder eine Collection entfernst. Nutze passende Porträts auch an anderen Stellen. Verwende WebP für Fotos und aussagekräftige Bildbeschreibungen.
Die Slideshow am Seitenanfang enthält drei Bildpaare im Querformat und drei eigene Hochformat-Paare im Phone-Breakpoint. Ersetze die selektiv gefärbte und die Vollfarbfassung jeweils gemeinsam. Lasse die Bilder auf Fit eingestellt, damit Gesichter und Kopfschmuck sichtbar bleiben. HeroColourIntro steuert die neun Sekunden langen Szenen, den Farbwechsel, die deutschen und englischen Bildbeschreibungen und die Glas-Anzeige. Der erste Abschnitt bleibt sticky; die folgenden Abschnitte liegen darüber. Die zwei Bilder im nächsten Abschnitt nutzen withBoundedColourParallax. Ihre Bewegung bleibt innerhalb ihres jeweiligen Bildrahmens.
Beachte Bewegung und Touch-Bedienung
Der Farbwechsel reagiert am Desktop auf Hover und Tastaturfokus, auf Touch-Geräten auf die Sichtbarkeit. Bei reduzierter Bewegung erscheint ein ruhiges Vollfarbbild. Erhalte beide deckungsgleichen Bildebenen und den ColourReveal-Override. Filme laufen stumm in Schleife ohne Player-Leiste. Behalte den ConsideredVideo-Override: Tippen oder Klicken öffnet die Großansicht; Tippen, Wischen oder Escape schließt sie. Prüfe die Wiedergabe auf der veröffentlichten Website.
Bereite deinen Start vor
Prüfe alle Inhalte, Preise, Aussagen, Rechtstexte und Kontaktangaben für dein Unternehmen. Pflege Seitentitel, Beschreibungen, Social-Bilder und Favicon in den Settings. Aktualisiere beim Verbinden deiner Domain auch Website-Adresse und Inhalte der strukturierten Daten unter Custom Code. Prüfe die Analytics-Einstellungen. Kontrolliere 390, 810, 1200 und 1600 Pixel in der Vorschau. Veröffentliche anschließend und prüfe Navigation, Formulare, Bilder, Videos und eine nicht vorhandene Adresse auf der Live-Website.
Nutze diese Anleitung weiter
Diese Anleitung ist von der Suchmaschinen-Indexierung ausgeschlossen, bleibt über ihre Adresse aber erreichbar. Behalte sie während der Anpassung oder setze die Seite vor deinem eigenen Start auf Draft, wenn sie nicht veröffentlicht werden soll. Template-Design von AL WebDesign Studio. Creator: Alexej Luft.