Custom CSS in Elementor

So erstellen Sie eine schöne Schaltfläche in Elementor. Oder fügen wir eigener CSS-Stile in der Basis Version von Elementor hin.

Es ist sehr einfach, Websiten im Elementor-Builder zu erstellen. Es gibt jedoch die Fälle, in denen es unmöglich ist, nur mit Konstruktor-Tools auszukommen, und Sie müssen Ihre Programmierkenntnisse anwenden. In diesem Artikel zeige ich Ihnen, wie Sie mit benutzerdefinierten Stilen in Elementor arbeiten können.

Nehmen wir an, wir haben die Aufgabe, ein Objekt mit schönen Effekten zu erstellen, die in der kostenlosen Version von Elementor nicht verfügbar sind. Die Pro-Version bietet die Möglichkeit, benutzerdefinierte Stile für jedes Element einzufügen. Die kostenlose Version bietet aber diese Option nicht. Mit der kostenlosen Version können Sie jedoch weiterhin Ihre eigenen Stile für Objekte erstellen.

Lassen wir uns also einen Button mit einem Glashintergrundeffekt und doppelte Schatten wie unten zu erstellen:

Dazu führen wir in Elementor die folgenden Aktionen aus:

1. Öffnen wir die Seite, suchen das Button-Widget und ziehen es in den gewünschten Bereich der Seite.
2. Auf der Registerkarte Erweitert im allerersten Abschnitt namens auch Erweitert finden wir das Feld CSS-Klassen und legen einen beliebigen Namen für die Klasse fest, zum Beispiel custom-btn. Beachten Sie dass in diesem Feld der Klassenname ohne Punkt am Anfang angegeben wird.
3. Schalten wir Elementor aus und laden Customizer herunter. Design > Customizer.
4. Im Menü rechts finden wir die niedrigste Option. Sie kann in verschiedenen Themen anders benannt werden. Z.B. zusätzliches CSS.
5. Gehen wir in diesen Bereich und fügen in das geöffnete Feld den folgenden Code ein

/* Custom button */
.custom-btn {
    --btn-width: 180px;
    --btn-height: 50px;
	  --btn-background: #e9204f;
	  --left-gradient: #BDEDFC;
	  --right-gradient: #B5E5F2;
}
.custom-btn a {
  position: relative;
  width: var(--btn-width);
  height: var(--btn-height);
}
.custom-btn a:before,
.custom-btn a:after {
  content: '';
  position: absolute;
  inset: 0;
  transition: 0.5s;
}
.custom-btn a:nth-child(1):before,
.custom-btn a:nth-child(1):after {
  background: linear-gradient(105deg,var(--left-gradient),var(--btn-background),var(--btn-background),var(--right-gradient));
}
.custom-btn a:hover:before {
  inset: -2px;
}
.custom-btn a:hover:after {
  inset: -2px;
  filter: blur(10px);
}
.custom-btn a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--btn-background);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Glass Background Effect */
.custom-btn a span::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.2);
  transform: skew(160deg);
}

6. Klicken wir auf Veröffentlichen und der Button seiht jetzt völlig neues aus.

Dann können Sie in diesen Stilen die Farben, Parameter von Hintergrund, Buttongrößen usw. ändern. Diese Methode eignet sich nicht nur zum Erstellen schöner Buttons, sondern auch beim Arbeiten mit anderen Widgets.

Tolle Siege und Inspiration für alle.