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.