Elementor - Benutzerdefiniertes CSS (kostenpflichtig)
 

Mit Elementor Pro können Sie benutzerdefinierte CSS zu jedem Abschnitt, Spalte oder Widget hinzufügen.
Wenn Sie noch mehr Kontrolle über das CSS-Styling der Seite bekommen möchten,
können Sie die benutzerdefinierte CSS-Funktion verwenden, um jedem Element auf der Seite CSS hinzuzufügen.

1. Klicken Sie auf die Spalte, um die linke Sidebar mit dem Spalten-Einstellungenfeld zu erhalten.
2. Gehen Sie zu Erweitert> Benutzerdefiniertes CSS
3. Fügen Sie Ihren CSS-Code dem Clean Code Editor hinzu.
4. Um der Spalte eine rote Hintergrundfarbe zu geben, fügen Sie beispielsweise folgenden Code ein:
selector {background-color:red;}
Die Spalte erhält sofort die rote Hintergrundfarbe.

Hinzufügen eines Farbverlauf-Effekts in Elementor mit benutzerdefiniertem CSS
Sie möchten dem Button einen linearen Steigungseffekt geben.

1. Klicken Sie auf die Schaltfläche, um das linke Widget-Einstellungen-Panel zu erhalten.
2, Gehen Sie zu Advanced> Custom CSS
3. Ich setze nun den Gradienten-CSS-Code in die Klasse 'elementor-button' ein:

  .elementor-button {
 Hintergrund: rgba (255,106,0,1);
 Hintergrund: -moz-linear-gradient (links, rgba (255,106,0,1) 0%, rgba (238,9,121,1) 100%);
 Hintergrund: -webkit-gradient (links oben, rechts oben, Farbstopp (0%, rgba (255.106,0,1)), Farbstopp (100%, rgba (238,9,121,1)));
 Hintergrund: -webkit-linear-gradient (links, rgba (255,106,0,1) 0%, rgba (238,9,121,1) 100%);
 Hintergrund: -o-linear-gradient (links, rgba (255,106,0,1) 0%, rgba (238,9,121,1) 100%);
 Hintergrund: -ms-linear-gradient (links, rgba (255,106,0,1) 0%, rgba (238,9,121,1) 100%);
 Hintergrund: linear-gradient (nach rechts, rgba (255,106,0,1) 0%, rgba (238,9,121,1) 100%);
 Filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ff6a00', endColorstr = '# ee0979', GradientType = 1);
 }

Fügen Sie den Sektionen einen Verlaufseffekt hinzu

1. Klicken Sie auf den Abschnitt, um das Bedienfeld zu öffnen.
2. Gehen Sie zu Advanced> Custom CSS
3. Fügen Sie dem Abschnitt den Gradienteneffekt CSS-Code hinzu

Selector { Hintergrund: rgba (190,147,197,1); Hintergrund: -moz-linear-Gradient (oben, rgba (190,147,197,1) 0%, rgba (123,199,204,1) 100%); Hintergrund: -webkit-gradient (links oben, links unten, Farb-Stop (0%, rgba (190,147,197,1)), Farb-Stop (100%, rgba (123,199,204,1))); Hintergrund: -webkit-linear-gradient (oben, rgba (190,147,197,1) 0%, rgba (123,199,204,1) 100%); Hintergrund: -o-linear-gradient (oben, rgba (190,147,197,1) 0%, rgba (123,199,204,1) 100%); Hintergrund: -ms-linear-gradient (oben, rgba (190,147,197,1) 0%, rgba (123,199,204,1) 100%); Hintergrund: linear-gradient (nach unten, rgba (190,147,197,1) 0%, rgba (123,199,204,1) 100%); Filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# be93c5', endColorstr = '# 7bc7cc', GradientType = 0); }
4. Entfernen Sie die Hintergrundüberlagerung.