So baust du einen dynamischen CMS-Hintergrundverlauf in Webflow: Start- und Stopp-Farben kommen per HTML Embed aus einem CMS-Farbfeld, damit Redakteure einfach eine Farbe wählen können.
Auf einer CMS-Seite klingt das so einfach: Man wählt in den Hintergrundfarben-Einstellungen einfach Start-, Stopp- und alle Zwischenfarben eines Verlaufs aus dem CMS aus. Doch wie man in Webflow schnell auf die harte Tour lernt, wird der vordefinierte Verlauf dadurch zu einem einfarbigen Hintergrund, statt dass nur die gewählten Farben durch die im CMS festgelegten ersetzt werden.
Zum Glück gibt es dafür eine wirklich einfache Lösung (einen dynamischen Verlaufshintergrund, der von einem CMS-Farbfeld gesteuert wird). Vorher hole ich aber kurz aus und erkläre, woher dieser Beitrag kommt.
Also, wir hatten kürzlich einen Kunden, der CMS-gesteuerte Leistungsseiten für alle seine Dienstleistungen wollte, mit einer eigenen Farbe pro Leistung. Diese Farbe sollte die Farbe der H1-Überschrift bestimmen, die Farbe eines körnigen, rauschigen Hintergrunds mit scrollendem Text und zum Schluss die Farbe eines Verlaufs im Footer, der ebenfalls dieselbe Farbe wie H1 und körniger Hintergrund annimmt.
Es gibt mehrere Wege, aber wir wollten es einfach halten, damit die Mitarbeitenden der Klinik, für die das gedacht war, alle Leistungen im Editor verwalten können, indem sie einfach eine Farbe auswählen, und fertig. Gleichzeitig haben wir einen Footer als Symbol, also wollten wir idealerweise nichts entkoppeln, sondern auf den CMS-Seiten den normalen Footer verwenden, nur eben nicht mit dem primären Farbverlauf, sondern mit den Sekundärfarben der jeweiligen Leistung.
Nach kurzem Nachdenken stellte sich heraus: Man braucht nur ein HTML Embed und ein wenig Code.
Was haben wir also? Wir haben unseren Footer, ein Symbol mit einem Verlauf im Hintergrund (nicht zwingend nötig, aber unser Symbol hatte bereits einen Verlauf, und wir wollten ihn auf der CMS-Template-Seite überschreiben):
Dazu ein CMS Item mit mindestens einem Farbwähler (Colour Selector). Unser Footer brauchte nur eine Farbe, aber du kannst mehrere haben und den Code einfach an deine Bedürfnisse anpassen.
Zum Schluss brauchen wir ein HTML Embed auf der Seite mit dem folgenden Code (am besten weit oben):
Den Code findest du auch in unserem CodePen zu diesem Beitrag.
Ändere den Elementnamen auf das Element, das den Verlaufshintergrund bekommen soll; bei uns war es einfach .footer. Richte dann deinen Verlauf ein; wir wollten 180 Grad, von transparent zu unserer gewählten Farbe. Du kannst Start-, Stopp- und Zwischenfarben festlegen, ganz wie du möchtest. Füge deine Farben über das Dropdown + Add Field hinzu. Im aktuellen Designer klickst du auf den lila Punkt, der neben der Zeile in Edit code erscheint, und wählst dein Farbfeld aus. Wir haben ein !important ergänzt, damit der Code das Standard-Styling sicher überschreibt.
Sobald du speicherst, siehst du die Änderung im ausgewählten Element:
Das war’s schon, mehr steckt nicht dahinter. Schreib uns in den Kommentaren, wenn du Fragen hast. Wir bereiten gerade ein kurzes Video dazu vor, also abonniere unseren Kanal und lass ein Like da, um bei neuen Inhalten auf dem Laufenden zu bleiben.
Häufig gestellte Fragen
Warum wird mein Verlauf zu einem einfarbigen Hintergrund, wenn ich eine CMS-Farbe auswähle?
Nach unserer Erfahrung führt die Auswahl einer CMS-Farbe für den Hintergrund zu einem einfarbigen Hintergrund, anstatt die Farben innerhalb deines Verlaufs auszutauschen. Deshalb legen wir den Verlauf in einem kleinen HTML Embed fest, in dem die CMS-Farbe direkt im Verlaufscode steht.
Kann ich einen dynamischen Verlauf als Overlay über CMS-Hintergrundbildern legen?
Ja, das sollte funktionieren, denn das Embed stylt einfach die Klasse, auf die du es richtest. Lege den Verlauf auf ein eigenes Overlay-Element, das über dem Bild liegt, und stelle ihn so ein, dass er von transparent zur im CMS gewählten Farbe verläuft. Wir haben diesen Beitrag rund um einen Footer aufgebaut, teste es also zuerst in deinem eigenen Layout.
Kann ich mehr als eine Farbe im Verlauf verwenden?
Ja. Füge deiner Collection für jeden gewünschten Farbpunkt ein Farbfeld hinzu und setze dann jedes davon in den Verlaufscode im Embed ein, einschließlich Start-, Stopp- und Zwischenfarben.
Muss ich das Footer-Symbol anfassen?
Nein. Wir haben das Symbol unverändert gelassen und seinen Verlauf auf der CMS-Template-Seite mit dem Embed überschrieben, weshalb im Code ein !important steht.
Wenn dir CMS-Tricks wie dieser gefallen, wirf einen Blick auf unsere Beiträge zu Text-Spans in dynamischen CMS-Textelementen, CMS-gesteuerten Hintergrundvideos in Webflow, dem Bau eines CMS-gesteuerten Scrollers oder Ticker-Bands und dem Aufbrechen des CMS-Rasters mit einem Flexbox-CMS-Muster. Du kannst auch unsere Webflow Cloneables durchstöbern.
