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 wirkt, liest sich wie eine Broschüre. Wenn die Hintergründe an den Übergängen der Abschnitte ineinanderfließen, fühlt sich die Seite wie ein einziges, durchgehendes Design an.
Worauf du achten solltest
- Farbauswahl: Fudge analysiert beide Abschnittshintergründe und wählt automatisch die passenden Zwischenstufen aus.
- Mobile: Der Übergang funktioniert bei jedem Breakpoint, da es sich um einen CSS-Gradienten und nicht um ein Bild handelt.
- Theme-Variablen: Wenn dein Theme CSS-Variablen für Abschnittshintergründe verwendet, 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 Verlauf passend zu deinen Markenfarben — abgestimmt auf deine Palette.
- Nur gezielter Übergang — ändert die globalen Abschnitts-Stile nicht.
- Keine sichtbare Naht — das ist das Ziel.
Ein kleines Detail, das eine lange Seite wie aus einem Guss wirken lässt. Kombiniere dies mit der Video-Testimonial-Section und dem Vorher-Nachher-Slider.
Fudge baut dir das mit seinem Store Editor.