Verwendung des Selektors auf der Registerkarte "Benutzerdefiniertes CSS"

Verwenden Sie "Selektor" (ohne die führende Periode), um auf ein Containerelement zu zeigen.

Wenn Sie beispielsweise ein Bild (oder untergeordnete Elemente) in einer Spalte platziert haben, möchten Sie möglicherweise den Wrapper formatieren, der das Bild oder das Bild selbst umgibt.

Setzen wir einen durchgehenden roten Rand von 5 Pixel um die verschiedenen Elemente, um zu sehen, was passiert.

Ziehen Sie zunächst ein Bild-Widget auf eine Spalte und gehen Sie zu Bild> Erweitert> CSS personalizado

Geben Sie nun auf der Registerkarte Benutzerdefiniertes CSS Folgendes ein:

Selektor {Rand: 5px durchgehend rot; }}

Da Sie das Bild-Widget bearbeiten, werden Sie möglicherweise überrascht sein, dass der Rand das Bild überhaupt nicht umgibt. Stattdessen umgibt es das Containerelement, in diesem Fall die Spalte, in der sich das Bild befindet.

Geben Sie Folgendes in das benutzerdefinierte CSS ein, um das untergeordnete Element oder in diesem Fall das Bild anzugeben:

Selektor img {Rand: 5px durchgehend rot; }}

Dadurch wird der Rand um das Bild platziert, da Sie festgelegt haben, dass er sich auf den "img-Selektor" auswirken soll.

Versuchen Sie dies nun mit einem anderen Beispiel.

Ziehen Sie ein Schaltflächen-Widget auf eine Spalte und geben Sie ihm 10 Pixel Abstand, damit Sie die umgebende Spalte klar sehen können. Gehen Sie dazu auf die Schaltfläche Fortgeschrittene Registerkarte und Einstellungen Ausgestopft bis 10 für alle Seiten.

Ihre Schaltfläche sollte jetzt so aussehen (Ihre Farben können variieren):

Als Nächstes wenden wir eine Hintergrundfarbe mit benutzerdefiniertem CSS an.

Geben Sie das folgende ein:

Selektor {Hintergrundfarbe: #ffff00; }}

Nach wie vor wird dies auf die Hüllkurve des Schaltflächenelements und nicht auf die Schaltfläche selbst angewendet. Dieses Mal werden Sie feststellen, dass die 10px-Polsterung verhindert, dass die gesamte Spalte von unserem Styling beeinflusst wird.

Wenn Sie möchten, dass die Hintergrundfarbe anstelle des Umbruchs auf die Schaltfläche angewendet wird, können Sie stattdessen Folgendes eingeben:

Selektor .elementor-button {Hintergrundfarbe: #ffff00; }}

Esto dará como resultado que el fondo del botón Sein amarillo.

Benutzen Wähler als Elementor-Verknüpfung, mit der Sie schneller und einfacher benutzerdefiniertes CSS schreiben können. Sie haben jedoch immer die Möglichkeit, Ihre eigene benutzerdefinierte Klasse zu verwenden.

Lassen Sie uns den Hintergrund dieser Schaltfläche neu erstellen, aber dieses Mal geben wir der Schaltfläche eine benutzerdefinierte Klasse, die wir "so gelb" nennen. (Gehen Erweitert> CSS-Klassen und stellen Sie sicher, dass Sie den vorherigen Punkt hier nicht einfügen).

Auf der Registerkarte "Benutzerdefiniertes CSS" verweisen wir anstelle von "Selektor" einfach auf die benutzerdefinierte Klasse ".so-gelb". Ja, Sie müssen den vorherigen Punkt hier einfügen.

Es überrascht nicht, dass der Button Wrapper jetzt unsere leuchtend gelbe Farbe als Hintergrund anzeigt.

Was passiert, wenn wir dann auf den Knopf zeigen?

Geben Sie das folgende ein:

.so-gelb .elementor-button {Hintergrundfarbe: #ffff00; }}

Sie werden feststellen, dass die violette Farbe der Schaltfläche nicht stimmt UNTERLASSEN SIE Veränderung!

Das liegt daran, dass unser neuer Stil einen braucht !wichtig Aussage in diesem Fall hinzugefügt.

.so-gelb .elementor-button {Hintergrundfarbe: #ffff00! wichtig; }}

Jetzt wird unser Stil angewendet und unser Knopf ist wieder gelb.

Nur zum Spaß und um zu verhindern, dass unser Schaltflächentext auf dem hellgelben Hintergrund verloren geht, lassen Sie uns die Gestaltung der Schaltfläche durch Ändern der Textfarbe beenden. Wir werden dem Button auch einen Rahmen hinzufügen. Unabhängig davon, welche Methode Sie verwenden, wählen Sie "Elementor-Schaltfläche" oder "So-Gelb. Elementor-Schaltfläche", der zusätzliche Code ist der gleiche.

Selektor .elementor-button {Hintergrundfarbe: #ffff00; Farbe: #000000; Rand: 2px fest #000000; }}

Viel Spaß beim Verwenden Wähler Wann immer Sie schnell benutzerdefiniertes CSS hinzufügen möchten, um auf den Container dieses Elements abzuzielen.

Tipp: Eine Liste der Klassennamen finden Sie unter Ausgezeichnetes Referenzhandbuch für Widget-Klassennamen von Frank Tielemans