So fügen Sie Schaltflächentexten mithilfe von benutzerdefiniertem Code einen Schatten hinzu

Textschatten für die Schaltfläche „Über uns“ in GemPages

Das Text innerhalb des Button-Elements kann mithilfe von CSS angepasst werden. Durch Hinzufügen eines text-shadow Effekt, Sie können:

• Den Button-Text auf unruhigen Hintergründen besser sichtbar machen
• Erzeugen Sie einen moderneren oder hochwertigeren Design-Look
• Visuelle Hierarchie für Call-to-Action-Buttons verbessern
• Heben Sie wichtige Aktionen hervor, wie zum Beispiel Jetzt Kaufen, In den Warenkorbden Loslegen

Diese Methode funktioniert mit Schaltflächenelemente in GemPages wenn Sie den Text optisch aufwerten möchten, ohne das Layout der Schaltflächen zu verändern.

Schritt für Schritt: So fügen Sie einem Button-Text einen Schatten hinzu

Befolgen Sie diese Schritte sorgfältig, um einen Schatteneffekt auf Ihren Schaltflächentext anzuwenden.

Schritt 1: Öffnen Sie Ihre Seite im GemPages-Editor.

Von deiner GemPages DashboardÖffnen Sie die Seite, die die Schaltfläche enthält, die Sie bearbeiten möchten.

Suchen Sie den Schaltflächenelement der den Text enthält, dem Sie einen Schatten hinzufügen möchten.

Schritt 2: Öffnen Sie das Bedienfeld für benutzerdefinierten Code.

Klicken Sie mit der rechten Maustaste direkt auf das Schaltflächenelement das den Text enthält.

Dann:

• Auswählen Benutzerdefinierter Code

• Das CSS-Panel erscheint

Über dieses Bedienfeld können Sie dem jeweiligen Button ein individuelles Styling zuweisen.

Schritt 3: Kopieren Sie die Elementklasse

Wenn sich das CSS-Panel öffnet, sehen Sie ein Elementklasse in der allerersten Zeile.

Es wird ungefähr so ​​aussehen:

.gp-button-abc123

Kopieren Sie diesen Klassennamen – Sie benötigen ihn im nächsten Schritt.

Schritt 4: Textschattencode einfügen

Fügen Sie dem Panel folgenden benutzerdefinierten CSS-Code hinzu:

Dann:

• Ersetzen ElementKlasse mit Ihrer tatsächlichen Schaltflächenklasse
• Klicken Sie auf Gespeichert

Wenn Ihre Elementklasse beispielsweise lautet: .gp-button-abc123

Ihr endgültiger Code sollte wie folgt aussehen:

.gp-button-abc123 {

 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;

}

Nach der Anwendung wird Ihr Schaltflächentext mit einem weichen Schatteneffekt angezeigt.

Die Bedeutung der Textschattenwerte verstehen

Das text-shadow Diese Eigenschaft umfasst vier Werte. Jeder Wert steuert das Aussehen des Schattens.

Textschatten: 2px 2px 4px rgba(0, 0, 0, 0.3);

Hier die Bedeutung der einzelnen Werte:

2px → Horizontaler Versatz

Steuert die Bewegungsdistanz des Schattens. nach links oder rechts.

Beispiele:

2px → verschiebt den Schatten nach rechts

-2px → verschiebt den Schatten nach links

2px → Vertikaler Versatz

Steuert die Bewegungsdistanz des Schattens. hoch oder runter.

Beispiele:

2px → verschiebt den Schatten nach unten

-2px → verschiebt den Schatten nach oben

4px → Weichzeichnungsradius

Steuert, wie weich oder scharf der Schatten erscheint.

Beispiele:

0px → scharfer Schatten

4px → weicher Schatten

10px → sehr weicher Schatten

Höhere Zahlen erzeugen weichere Schatten.

rgba(0, 0, 0, 0.3) → Schattenfarbe

Steuert die Farbe und Transparenz des Schattens.

Format:

rgba(rot, grün, blau, Deckkraft)

Ejemplo:

rgba(0, 0, 0, 0.3)

Bedeutet:

• Rot: 0
• Grün: 0
• Blau: 0
• Deckkraft: 0.3 (30 % sichtbar)

Dies schafft ein halbtransparenter schwarzer Schatten.

Wenn Sie benutzerdefinierte Schattenfarben erstellen möchten, können Ihnen diese Tools dabei helfen, auf einfache Weise RGBA-Werte zu generieren.

• https://rgbacolorpicker.com
• https://cssgradient.io
• https://www.w3schools.com/colors/colors_picker.asp
• https://htmlcolorcodes.com

Mit diesen Tools können Sie:

• Wähle eine beliebige Farbe visuell aus.
• Transparenz anpassen (Deckkraft)
• Kopieren Sie die rgba(…) Wert direkt
• Vorschau der Schattenfarben vor der Verwendung