• Thema

  • Technologie

Elementor Button’s

Elementor Buttons auf der Webseite
Beitrag speichern
Please login

Noch kein Konto? Registrieren

Mit einer CSS-Klasse den Style eines Buttons verändern.

Oft bracht es für eine Webseite mehrere Button Styles. Leider kann man in den globalen Einstellungen von Elementor nur einen Style festlegen.

  • Ich habe nun zwei CSS-Klassen erstellt, die einen Ghost-Button und einen Link-Button erzeugen.
    Diese CSS-Code-Blöcke schreibst du in die «Custom CSS» von Elementor Pro. Falls du keine Pro-Lizenz von Elementor hast, kannst du es auch mit dem Plugin «Code Snippets» einpflegen.
  • Button-Widget auf der Seite platzieren und die CSS-Klasse vergeben.
    Nun kannst du ein normales Button-Widget auf der Seite platzieren und im Reiter “Advanced” die CSS-Klasse ghost_btn oder link_btn (ohne vorangehenden Punkt) ergänzen und schon hast du den gewünschten Button.

Ghost-Button (CSS-Code)

.ghost_btn .elementor-button {
   background-color: transparent;
   border-color: var(--e-global-color-accent);
   color: var(--e-global-color-accent);
}
.ghost_btn .elementor-button:hover {
   background-color: var(--e-global-color-accent);
   border-color: var(--e-global-color-accent);
   color: var(--e-global-color-secondary);
} 

Zeile 10:

Um die helle Schriftfarbe vom normalen Button und den Hover-Effekt des Ghost-Buttons zu erstellen nutze ich meistens die Globale Farbe «Secondary», welche ich auf eine sehr helle Farbe einstelle. 

Das hat den Vorteil, dass ich die Elementor-Templates einfach zwischen verschiedenen Webseiten kopieren kann, ohne mir Gedanken über die Farben der Elemente zu machen. Das funktioniert nur mit den vordefinierten globalen Farben, darum verwende ich für helle Elemente die globale Farbe «Secondary».

Ist das für dich zu kompliziert, dann verwende einfach eine Farbe deiner Wahl. z.B. “weiss” color: #fff; oder “blau” color: blue;

Link-Button (CSS-Code)

.link_btn .elementor-button {
   color: var(--e-global-color-accent);
   text-decoration: underline;
   background-color: transparent;
   border-color: transparent;
}
.link_btn .elementor-button:hover {
   color: var(--e-global-color-accent);
   text-decoration: none;
   background-color: transparent;
   border-color: transparent;
}
Quelle: gere.ch/elementor-buttons

Über mich

  • Gere Maurer

    Als gelernter Elektroniker ist Programmieren keine Fremdsprache für mich. Webseiten erstelle ich aber lieber mit WordPress und dem Page Builder „Elementor“. Dabei ist mir wichtig, soviel wie nötig zu automatisieren. Die Webseiten-Betreiber sollen sich um den Inhalt und nicht um die Technik kümmern müssen. Meine Leidenschaft ist die 360° Fotografie. Hochauflösende 360° Panoramabilder, virtuelle Rundgänge für Google My Business oder eigene kleine Welten „Little Planet“ erschaffen.

    Alle Beiträge ansehen
Was denkst du dazu?
yeah!
0
wooow
1
what?
0
meh.
0
hahaha
0
Beitrag teilen
Was denkst du dazu?
Was denkst du dazu?
yeah!
0
wooow
1
what?
0
meh.
0
hahaha
0
Diskussion

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

 

Hinweis: Es kann bis zu zwei Stunden gehen, bis dein Kommentar auf der Website erscheint. Bitte poste deinen Kommentar nur einmal 😉

Aktuelle Jobangebote
  • Grafik / Prepress / Druck / Verpackung / Werbetechnik | Medienjobs und Stellen für Profis

  • Neue Beiträge als E-Mail
    jeden Dienstag die neusten Blogposts in deiner Inbox
    Unsere Partner:

    Dein Gerät ist aktuell offline.