So ändern Sie die Symbolgröße eines Schaltflächenelements mithilfe von benutzerdefiniertem Code

In manchen Layouts möchten Sie möglicherweise die Symbolgröße an Ihren Schaltflächentext oder das Gesamtdesign anpassen. Derzeit lässt sich die Symbolgröße innerhalb eines Button-Elements nicht direkt über die integrierten Stiloptionen ändern. Um die Symbolgröße anzupassen, können Sie einen kleinen CSS-Code in den Elementeinstellungen verwenden.

Diese Anleitung führt Sie Schritt für Schritt durch die korrekte Anwendung der Änderung.

Über Schaltflächenlayouts mit Symbolen

Das Schaltflächenelement GemPages unterstützt verschiedene Layouts, je nachdem, wie Sie es konfigurieren.

Es gibt zwei gängige Tastenlayouts:

• Schaltfläche ohne Symbol: Dieses Layout enthält nur Text und kein Symbol.
• Schaltfläche mit Symbol: Dieses Layout enthält ein Symbol. vor dem SchaltflächentextSymbole tragen dazu bei, dass Schaltflächen optisch ansprechender und leichter erkennbar sind.

So ändern Sie die Symbolgröße eines Schaltflächenelements mithilfe von benutzerdefiniertem Code

Befolgen Sie die folgenden Schritte, um die Symbolgröße innerhalb Ihres Button-Elements anzupassen.

Schritt 1: Wählen Sie das Schaltflächenelement aus, das das Symbol enthält.

Vom GemPages-Redakteur:

• Öffnen Sie die Seite oder Vorlage, in der sich Ihr Button-Element befindet.
• Klicken Sie direkt auf das Schaltflächenelement das das Symbol enthält.
• Vergewissern Sie sich, dass die ausgewählte Schaltfläche ein Symbol vor dem Text enthält.

Nach der Auswahl erscheint das Element-Einstellungsfeld auf der linken Seite des Editors.

Vergewissern Sie sich, dass Sie den richtigen Button bearbeiten, bevor Sie fortfahren.

Schritt 2: Öffnen Sie den benutzerdefinierten Code-Editor.

Nachdem das Button-Element gefunden wurde:

• Der rechten Maustaste auf auf dem Button-Element, das das Symbol enthält.
• Wählen Sie aus dem Dropdown-Menü Benutzerdefinierter Code.

Diese Aktion öffnet den Editor für benutzerdefinierten Code, in dem Sie CSS hinzufügen können, das nur für dieses spezifische Element gilt.

In diesem Abschnitt können Sie dem ausgewählten Element zusätzliche Stile zuweisen.

Schritt 3: CSS-Code hinzufügen, um die Symbolgröße zu ändern

Im Inneren der Benutzerdefinierte CSS Fügen Sie in das Feld folgenden Code ein:

Dieser Code steuert die Größe des Symbols innerhalb der ausgewählten Schaltfläche.

Ersetzen:

• .ElementClass mit der oben angezeigten Klasse.
• 50px mit der gewünschten Größe.

Nach Eingabe des Codes klicken Sie Speichern.

Die Symbolgröße wird entsprechend dem eingegebenen Wert aktualisiert:

Schritt 4: Vorschau des Ergebnisses

Nach der Veröffentlichung:

• Zeigen Sie eine Vorschau Ihrer Seite an.
• Prüfen Sie, ob die Größe des Symbols im Verhältnis zum Schaltflächentext ausgewogen wirkt.
• Testen Sie das Layout sowohl in der Desktop- als auch in der Mobilansicht.

Kehren Sie gegebenenfalls zum Editor zurück und passen Sie den Größenwert erneut an.

Sie können den Vorgang so lange wiederholen, bis die Symbolgröße Ihrem Design entspricht.

Wie man die richtige Symbolgröße auswählt

Die richtige Symbolgröße hängt von der Schaltflächengröße und dem Textstil ab.

Nachfolgend sind die üblicherweise verwendeten Größenbereiche aufgeführt:

Nutzen Sie diese Bereiche als Ausgangspunkte und passen Sie sie dann an Ihr Layout an.