Zum Hauptinhalt springen

Hintergrund-Gradient (Farbverlauf) zu einer LandingPages Section hinzufügen

Verleihe deiner Landing Page einen modernen Look: Erfahre hier, wie du einer Section im JUNE Editor über die integrierte SASS-Funktion einen individuellen CSS-Farbverlauf (Gradient) zuweist und dein Design perfekt an dein Branding anpasst.

Verfasst von Julian Lohkamp

Um einer einzelnen Section einen individuellen CSS Hintergrund-Gradienten zuzuweisen, gehst du wie folgt vor:

  • Neue Klasse unter „Assets" anlegen
    Lege im Bereich Assets eine neue Klasse an, z. B. customBG
    ​

  • ​SASS-Datei auswählen
    Wechsle zum Tab SASS und wähle die neu angelegte Datei aus der Dropdown-Liste oben rechts aus (z. B. custombg.scss).
    ​

  • CSS einfügen
    Füge dort das gewünschte CSS ein.

❗Wichtig: Der Selektor in deinem Code muss mit einer ID beginnen, damit er später exakt der gewünschten Section zugewiesen werden kann. Verwende zum Beispiel den Selektor #radiantbg.


scss

   #radiantbg { 
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); 
}

Anschließend mit Save speichern.

  • Section ID vergeben
    Navigiere nun zurück zu deiner Landing Page und öffne die Section, für die der Farbverlauf gelten soll. Gehe in den Komponenten-Einstellungen zu dem Reiter Advanced.

    Trage dort in das Feld Section ID exakt denselben Wert ein, den du zuvor im CSS-Selektor definiert hast. In unserem Beispiel trägst du hier radiantbg ein (ohne das Raute-Zeichen).
    ​


Sobald die Section-ID in der Komponente mit dem CSS-Selektor aus deiner SASS-Datei übereinstimmt, wird das Styling automatisch angewendet und dein neuer Hintergrund ist sofort sichtbar.

Hat dies deine Frage beantwortet?