Fügen Sie dem Hero-Banner mithilfe von benutzerdefiniertem Code eine Farbverlaufsüberlagerung hinzu.

Ein Farbverlauf kann das visuelle Erscheinungsbild Ihres Hero-Banners verbessern und die darüber platzierten Inhalte – wie zum Beispiel … – optisch ansprechender gestalten. Überschrift, Textblockden Taste—leichter zu lesen.

Über das Hero Banner-Element

Das Heldenbanner Element In GemPages wird dies häufig verwendet, um einen großen, auffälligen Bereich am oberen Seitenrand zu erstellen. Dieser besteht typischerweise aus einem Hintergrundbild oder einer Hintergrundfarbe, über der der Inhalt angezeigt wird.

Falls der Hintergrund Ihres Hero-Banners mehr Kontrast oder ein eleganteres Aussehen benötigt, können Sie mithilfe von benutzerdefiniertem Code eine Farbverlaufsüberlagerung anwenden.

So fügen Sie mithilfe von benutzerdefiniertem Code eine Farbverlaufsüberlagerung hinzu

Schritt 1: Öffnen Sie das Panel „Benutzerdefinierter Code“.

Suchen Sie im GemPages-Editor nach dem/der Heldenbanner Element, das Sie anpassen möchten.

Dann, Klicken Sie mit der rechten Maustaste auf das Hero-Banner-Element. und wählen Sie Benutzerdefinierter Code.

Schritt 2: CSS-Code einfügen

Fügen Sie den folgenden Code in das Benutzerdefinierter Code Box.

ElementClass .hero-banner-bg:after {

  Inhalt: "";

  position: absolute;

  oben: 0;

  links: 0;

  rechts: 0;

  unten: 0;

  Hintergrund: linear-gradient(45deg, #253956, transparent) !important;

}

Schritt 3: Platzhalterwerte ersetzen

Bevor Sie den Code speichern, ersetzen Sie die Platzhalterwerte durch Ihre bevorzugten Einstellungen.

• ElementClass ersetzen

ElementKlasse ist ein Platzhalter für die eigentliche Klasse Ihres Heldenbanner-Elements.

Ersetze es durch die Klasse deines Heldenbanners.

• Passen Sie den Farbverlauf an.

Die folgende Zeile steuert das Erscheinungsbild des Farbverlaufs:

Hintergrund: linear-gradient(45deg, #253956, transparent) !important;

Sie können die folgenden Werte anpassen:

Schritt 4: Speichern Sie Ihre Änderungen

Nachdem Sie den Code mit Ihrem bevorzugten Klassennamen und den gewünschten Farbverlaufseinstellungen aktualisiert haben, speichern Sie den benutzerdefinierten Code.

Sehen Sie sich eine Vorschau Ihrer Seite an, um sicherzustellen, dass die Farbverlaufsüberlagerung wie erwartet angezeigt wird.