Lass den Hintergrund von [Section A] mit einem weichen Verlauf in [Section B] darunter übergehen. Keine sichtbaren Kanten.
Want more control? See the expanded prompt ›
Verschmilz auf der Homepage den Hintergrund der Testimonial-Section mit einem weichen linearen Verlauf mit der darunterliegenden FAQ-Section – ohne sichtbare Naht.
- Weicher Verlauf zwischen den Hintergründen zweier benachbarter Sections – keine sichtbare Naht.
- Nur CSS: ein paar Zeilen
linear-gradient, kein JS, keine zusätzlichen Requests. - Liest automatisch die Farben beider Sections aus und wählt Zwischenstufen.
- Funktioniert an jedem Breakpoint und über Bildern dank transparenter Overlays.
Was du erreichen willst
Eine Seite, die wie ein Stapel verschiedenfarbiger Rechtecke aussieht, wirkt eher wie eine starre Broschüre. Wenn die Hintergründe an den Übergängen der Sections verschmelzen, wirkt die Seite wie ein durchgehendes Design – eine kleine Änderung, die für ein deutlich runderes Gesamtbild sorgt.
Worauf du achten solltest
- Farbauswahl – Fudge liest beide Section-Hintergründe aus und wählt die Verlaufsstufen automatisch.
- Mobile – Fudge kümmert sich darum: Der Verlauf funktioniert an jedem Breakpoint, da es sich um einen CSS-Gradient und nicht um ein Bild handelt.
- Theme-Variablen – falls dein Theme CSS-Variablen für Section-Hintergründe nutzt, aktualisiert Fudge diese, anstatt sie inline zu überschreiben.
Wie Fudge das macht
Fudge dupliziert dein Live-Theme in einen Entwurf, baut die Section als bearbeitbare Shopify-Section mit der von dir gewünschten Platzierung und Funktionalität auf und verknüpft sie mit deinen echten Produktdaten und deinem Marken-Styling. Alles beginnt im Entwurf – sieh dir die Vorschau in deinem Store an, passe sie im Theme Editor an und veröffentliche sie erst, wenn du bereit bist. Dein Live-Store bleibt dabei völlig unberührt.
Warum Farbverläufe zwischen Sections lange Seiten flüssiger wirken lassen
Lange Homepages mit vielen unterschiedlichen Sections können schnell unruhig wirken – abrupte Hintergrundwechsel zwischen den Abschnitten stören das Auge. Ein weicher Farbverlauf glättet den Übergang, ohne das eigentliche Design der Sections zu verändern.
Wann sich das lohnt
Nutze Farbverläufe für lange Homepages mit mehreren Sections. Bei kurzen Seiten, wo die Übergänge ohnehin schon fließend sind, kannst du darauf verzichten.
Was einen guten Verlauf ausmacht
- Linearer Farbverlauf passend zu den Markenfarben – abgestimmt auf deine Farbpalette.
- Gezielter Übergang – verändert nicht die globalen Section-Styles.
- Keine sichtbare Naht – das ultimative Ziel.
Ein kleines Detail, aber viele Stores berichten von einer höheren Scroll-Tiefe durch diese einzige Änderung. Kombiniere das mit einer Video-Testimonial-Section und einem Vorher-Nachher-Slider.