So ändern Sie die Symbolfarbe eines Schaltflächenelements mithilfe von benutzerdefiniertem Code

In den meisten Fällen übernehmen Schaltflächensymbole automatisch die Standardstile. Bei der Verwendung benutzerdefinierter Schaltflächenhintergründe, Markenfarben oder dunkler Layouts kann es jedoch erforderlich sein, die Symbolfarbe manuell festzulegen, um eine optimale Sichtbarkeit und ein einheitliches Erscheinungsbild zu gewährleisten.

Das Schaltflächenelement GemPages unterstützt zwei Layouttypen, je nachdem, wie der Button konfiguriert ist:

• Schaltfläche ohne Symbol: zeigt nur den Schaltflächentext an
• Schaltfläche mit Symbol: zeigt ein Symbol neben dem Schaltflächentext an

Wenn Sie ein Schaltfläche mit Symbol Sie können das Layout und das Aussehen der Symbole mithilfe von benutzerdefiniertem CSS anpassen. In dieser Anleitung erfahren Sie, wie das geht. Ändern Sie die Symbolfarbe bei Verwendung einer Schaltfläche, die ein Symbol enthält.

Warum die Farbe von Symbolen im Button-Design wichtig ist

Symbole in Schaltflächen helfen Benutzern, den Zweck einer Aktion schnell zu verstehen.

Die Standard-Symbolfarbe entspricht jedoch nicht immer Ihren Designanforderungen. In vielen realen Projekten wünschen sich Händler folgende Eigenschaften für ihre Schaltflächensymbole:

• Passende Markenfarben
• Bleiben Sie auch auf dunklen oder farbigen Hintergründen gut sichtbar.
• An der Textfarbe der Schaltfläche ausrichten
• Sorgen Sie für ein einheitliches Styling in allen Abschnitten.

Wenn die Farbe des Symbols keinen guten Kontrast zum Hintergrund aufweist, kann es schwer zu erkennen sein, was die Wirksamkeit der Schaltfläche verringert.

So ändern Sie die Symbolfarbe in einem Schaltflächenelement

Befolgen Sie die folgenden Schritte, um Ihrem Button eine benutzerdefinierte Symbolfarbe zuzuweisen.

Schritt 1: Benutzerdefinierten Code für die Schaltfläche öffnen

• Öffnen Sie Ihre Seite im Editor.
• Suchen Sie den Schaltflächenelement das das Symbol enthält.
• Klicken Sie mit der rechten Maustaste auf das Button-Element.
• Auswählen Benutzerdefinierter Code.

Das Bedienfeld „Benutzerdefinierter Code“ wird geöffnet.

Schritt 2: CSS-Code hinzufügen

Im Inneren der CSS Fügen Sie im Tab folgenden Code hinzu:

Ersetzen:

Element-ID mit der oben angezeigten Klasse.

# Ffffff mit Ihrem bevorzugten Farbcode. 

Wenn Sie den gewünschten HEX-Farbcode nicht kennen, können Sie ihn mithilfe eines Online-Farbauswahltools generieren. Hier sind einige nützliche Webseiten:

• Online-Farbauswahl-Tool: Ermöglicht die Farbauswahl über ein Farbrad und das sofortige Kopieren von HEX-, RGB- oder HSL-Werten.
• Bildfarbauswahlwerkzeug: Ermöglicht das Hochladen eines Bildes und das Anklicken eines beliebigen Bereichs, um dessen genauen HEX-Farbcode zu extrahieren.

Schritt 3: Speichern und veröffentlichen

Nach dem Hinzufügen des Codes klicken Sie auf Speichern. TDie Symbolfarbe wird sofort aktualisiert.

Tipps zur Auswahl effektiver Symbolfarben

Betrachten Sie das folgende:

1. Starken Kontrast beibehalten.

Die Symbole sollten gut erkennbar sein.

Gutes Kontrastbeispiel:

• Dunkler Button + weißes Symbol
• Helle Schaltfläche + dunkles Symbol

Beispiel für schlechten Kontrast:

• Dunkle Schaltfläche + dunkles Symbol
• Lichtknopf + Lichtsymbol

2. Bleiben Sie innerhalb Ihrer Markenpalette

Verwenden Sie nach Möglichkeit die offiziellen Markenfarben.

Vermeiden Sie willkürliche Farbkombinationen, die die visuelle Konsistenz stören.

3. Geräteübergreifend testen

Symbolsichtbarkeit prüfen für:

• Desktop
• Tablette
• Mobil

Manche Farben sehen auf kleineren Bildschirmen anders aus.

Falls Sie auch Symbole skalieren müssen, können Sie der Anleitung auf folgendem Link folgen: Wie kann man die Symbolgröße eines Buttons mithilfe von benutzerdefiniertem Code ändern? Die Symbolabmessungen müssen vor der Farbanpassung angepasst werden.