14 nützliche CSS-Snippets für Elementor
Veröffentlicht: 2022-12-13Die integrierten Styling-Optionen von Elementor sind mehr als genug, um professionelle Seiten zu erstellen. Falls Sie ein bestimmtes Styling anwenden möchten, das jedoch in Elementor nicht verfügbar ist, können Sie es über benutzerdefiniertes CSS erreichen.
Ein einfachster Fall. Elementor bietet keine integrierten Styling-Optionen, um das Aussehen des Weiterlesen-Links in eine schaltflächenähnliche Form zu ändern – was von vielen Websites übernommen wird. Um dies zu erreichen, müssen Sie ein CSS-Snippet hinzufügen, das den Weiterlesen-Link in eine Schaltfläche verwandelt. Um benutzerdefiniertes CSS selbst hinzuzufügen, können Sie im Einstellungsfenster auf die Registerkarte Erweitert gehen. Sie können den CSS-Code zum verfügbaren Feld im Block Benutzerdefiniertes CSS hinzufügen.
Sie können allen Elementor-Elementtypen benutzerdefiniertes CSS hinzufügen. Von Abschnitt, Spalte bis Widget.
In Elementor hat jedes Widget und seine unterstützenden Elemente (z. B. Post-Titel, Post-Meta und ausgewähltes Bild im Posts-Widget) einen Klassenselektor (siehe Liste der Elementor-Widget-Selektoren). Um auf ein bestimmtes Widget oder Widget-Elemente abzuzielen, können Sie mit der Eingabe von selector beginnen, gefolgt vom Klassennamen (z. B. .elementor-post__read-more ). Als Nächstes können Sie das benutzerdefinierte Styling zwischen den geschweiften Klammern hinzufügen. Beispiel:
Selektor .elementor-post__read-more{
Polsterung: 0,4 m 0,8 m;
Hintergrund: #33ff41;
Übergang: alle .5s;
Randradius: 5px;
} Das obige Code-Snippet verwandelt den „Weiterlesen“-Link in einen schaltflächenähnlichen. Zuerst zielt es auf das read more-Element ( selector .elementor-post__read-more ). Dann fügt es das benutzerdefinierte Design über den Inhalt zwischen den geschweiften Klammern zum „Weiterlesen“-Element hinzu (Sie finden das „Weiterlesen“-Element im Posts-Widget und im Archiv-Widget). In CSS wird der Inhalt zwischen den geschweiften Klammern als Deklaration bezeichnet.
Kürzlich haben wir an einigen Projekten gearbeitet, bei denen wir einigen Widgets CSS-Snippets hinzufügen mussten, und wir werden sie in diesem Beitrag mit Ihnen teilen. Wir werden diesen Beitrag regelmäßig aktualisieren, wenn wir neue CSS-Snippets erhalten.
Kostenlose CSS-Snippets für Elementor
1. Umwandeln des Weiterlesen-Links in einen Button-Like
Der Code:
Selektor .elementor-post__mehr lesen {
Polsterung: 0,3 m 0,8 m;
Farbe: #ffffff!wichtig;
Rand: solide 1px #01B37E;
Zeilenhöhe: 2em;
Hintergrund: #01B37E;
Übergang: alle .5s;
Randradius: 15px;
Schriftstärke: 500;
}
/* beim Schweben */
Selektor .elementor-post__read-more:hover{
Polsterung: 0,3 m 0,8 m;
Farbe: #01B37E!Wichtig;
Rand: solide 1px #01B37E;
Zeilenhöhe: 2em;
Hintergrund: #ffffff;
Übergang: alle .5s;
Randradius: 15px;
Schriftstärke: 500;
}Sie können den obigen Code für das Posts-Widget und das Archive Posts-Widget verwenden, die ein Read More-Element haben.
2. Hinzufügen eines erweiterten Stils zur nummerierten Paginierung
Der Code:
/*Normalzustand*/
Selektor .elementor-pagination{
Rand oben: 50px;
}
Selektor .Seitenzahlen{
Polsterung: 10px 15px;
Farbe:#FFFFFF!Wichtig;
Hintergrund: #0161cd;
Übergang: alle .5s;
Randradius: 20px;
}
/* Schwebezustand */
Selektor .Seitenzahlen:Hover{
Polsterung: 10px 15px;
Farbe:#384958!Wichtig;
Hintergrund: #edf2f7;
Übergang: alle .5s;
Randradius: 20px;
}
/* aktiver Zustand */
Selektor .Seitenzahlen.aktuell{
Polsterung: 10px 15px;
Farbe:#384958!Wichtig;
Hintergrund: #f0f3f6;
Übergang: alle .5s;
Randradius: 20px;
}Sie können den obigen Code für das Posts-Widget und das Archive Posts-Widget verwenden, die ein Paginierungselement haben. Sie können unseren vorherigen Artikel lesen, um zu erfahren, wie Sie eine Paginierung in Elementor hinzufügen.
3. Hover-Effekt zu einzelnen Post-Elementen hinzufügen
Der Code:
Selektor .elementor-post:hover{
Übergang: alle .50er Ease-in-out;
transformieren: scale(1.01);
Cursor: Zeiger;
Z-Index: 1;
}Sie können den obigen Code auch für das Widget „Beiträge“ und das Widget „Beiträge archivieren“ verwenden. Lesen Sie unseren vorherigen Artikel, um mehr darüber zu erfahren, wie Sie einzelnen Blogpost-Elementen in Elementor einen Hover-Effekt hinzufügen können.
4. Hinzufügen des Hover-Effekts zum Beitrags-Thumbnail/Empfohlenen Bild
Der Code:
Selektor .elementor-post__thumbnail:hover{
Übergang: alle .50er Ease-in-out;
transformieren: scale(1.05);
Cursor: Zeiger;
Z-Index: 1;
}Sie können den obigen Code für das Posts-Widget und das Archive Posts-Widget verwenden. Stellen Sie sicher, dass das Bild in den Hauptposteinstellungen angezeigt wird.
5. Hover-Effekt zum Beitragstitel hinzufügen
Der Code:
Selektor .elementor-post__title{
Anzeige: Inline;
}
Selektor .elementor-post__title:hover{
Textdekoration: keine;
Box-Schatten: Einschub 0 -.5em 0 #F8C273;
Farbe: erben;
Anzeige: Inline;
}
Sie können den obigen Code auch für das Posts-Widget und Archive Posts verwenden, die ein Post-Titelelement enthalten.
6. Hinzufügen von Hover-Effekten zu Links
Der Code:
Selektor .elementor-widget-theme-post-content a:hover{
Textdekoration: keine;
Box-Schatten: Einsatz 0 -.5em 0 #FD63FD;
Farbe: #B017B0;
}Sie können das obige im Post-Content-Widget verwenden, wenn Sie mit Elementor Theme Builder eine benutzerdefinierte Vorlage für einzelne Posts erstellen. Lesen Sie diesen Beitrag, um mehr zu erfahren.
7. Einstellen des Avatar-Grenzradius im Post-Info-Widget
Der Code:
Selektor .elementor-avatar {
Rand: 2 Pixel solide #FFFFFF;
Randradius: 10px;
}Sie können diesen Code im Post-Info-Widget verwenden. Um es zu verwenden, stellen Sie sicher, dass der Avatar in der Metadateneinstellung aktiviert ist. Lesen Sie hier, um mehr zu erfahren.
8. Verlaufsbalken erstellen
Der Code:
Selektor .elementor-Fortschrittsbalken
{
Hintergrund: radialer Farbverlauf (Kreis, rgba(7.149.238,1) 16 %, rgba(37.252.255,1) 70 %);
}Sie können den obigen Code verwenden, um mit dem Fortschrittsbalken-Widget einen Gradienten-Fortschrittsbalken zu erstellen. Lesen Sie hier, um mehr zu erfahren. Weitere Verlaufsoptionen finden Sie in den folgenden Beiträgen:
- Über 70 erweiterte Farbverlaufshintergründe für Elementor
- 18 3-farbige Farbverlaufshintergründe für Elementor
- 17 Hintergründe mit Pastellverlauf für Elementor
9. Erstellen von Verlaufstext
Der Code:
Selektor .elementor-Texteditor {
Hintergrundbild: Linear-Gradient (nach links, #feac5e, #c779d0,#4bc0c8);
-Webkit-Hintergrundclip: Text;
Anzeige: Inline-Block;
-webkit-text-füllfarbe: #00000000;
}Sie können den obigen Code im Texteditor-Widget verwenden. Um Verlaufstext auf anderen Widgets (z. B. Überschrift) zu erstellen, können Sie einfach den Selektor ersetzen. Lesen Sie diesen Beitrag, um mehr zu erfahren.
10. Scrollendes Bild beim Hover
Der Code:
Wähler{
-webkit-Übergang: Ease-in-out 4s !wichtig;
Übergang: Ease-in-out 4s !wichtig;
}
Selektor:schweben{
Hintergrundposition: Mitte unten !wichtig;
}Sie können den obigen Code verwenden, um das Bild beim Hover automatisch zu scrollen. Nützlich, um einen langen Screenshot anzuzeigen, z. B. einen Screenshot einer Zielseite, Homepage, Blogseite usw. Lesen Sie diesen Beitrag, um mehr zu erfahren.
11. Ändern der Kopfzeile beim Herunterscrollen
Der Code:
.header-2 {
transformieren: translatey (-80px);
-moz-transition: alle .3s leicht! wichtig;
-webkit-Übergang: alle .3s einfach! wichtig;
Übergang: alle .3s leicht!wichtig;
}
.elementor-sticky--effects.header-2 {
Höhe: auto!wichtig;
transformieren: translatey(0px);
}
.elementor-sticky--effects.header-1 {
Anzeige: keine!wichtig;
}Möchten Sie eine Kopfzeile erstellen, die sich beim Herunterscrollen automatisch ändert? Wenn ja, können Sie den obigen Code verwenden. Sie können diesen Beitrag lesen, um mehr zu erfahren.
12. Kopfzeile beim Herunterscrollen verkleinern
Der Code:
header.sticky-header {
--header-height: 90px;
- Deckkraft: 0,90;
--shrink-me: 0,80;
--Sticky-Hintergrundfarbe: #0e41e5;
--Übergang: .3s Ease-in-out;
Übergang: Hintergrundfarbe var(--Übergang),
Hintergrundbild var(--transition),
Hintergrundfilter var(--transition),
Opazität var(--transition);
}
header.sticky-header.elementor-sticky--effekte {
Hintergrundfarbe: var(--sticky-background-color) !wichtig;
Hintergrundbild: keine !wichtig;
Deckkraft: var(--opacity) !wichtig;
-Webkit-Hintergrundfilter: Unschärfe (10px);
Hintergrundfilter: blur(10px);
}
header.sticky-header > .elementor-container {
Übergang: min-height var(--Übergang);
}
header.sticky-header.elementor-sticky--effekte > .elementor-container {
min-height: calc(var(--header-height) * var(--shrink-me))!important;
Höhe: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
Übergang: Polsterung var(--Übergang);
}
header.sticky-header.elementor-sticky--effekte .elementor-nav-menu .elementor-item {
padding-bottom: 10px!wichtig;
padding-top: 10px! wichtig;
}
header.sticky-header > .elementor-container .logo img {
Übergang: maximale Breite var(--Übergang);
}
header.sticky-header.elementor-sticky--effekte .logo img {
max-width: calc(100% * var(--shrink-me));
}Sie können das obige verwenden, um ein Header-Verhalten zu erstellen, bei dem es beim Scrollen nach unten automatisch verkleinert und beim Scrollen nach oben auf die ursprüngliche Größe zurückkehrt. Sie können diesen Beitrag lesen, um mehr zu erfahren.
13. Bildhintergrund zum Überschriftentext hinzufügen
Der Code:
Selektor .elementor-heading-title
{
Hintergrund: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") grüne Wiederholung 30 % 70 % ;
-webkit-background-clip:text;
-webkit-Text-Füllfarbe: transparent;
}Sie können den obigen Code verwenden, um dem Heading-Widget einen Bildhintergrund hinzuzufügen. Ersetzen Sie einfach die Bild-URL, um Ihr eigenes Bild zu verwenden. Lesen Sie diesen Beitrag, um mehr zu erfahren.
Das Endergebnis
Elementor hat bereits viele integrierte Optionen, um jedes Element zu stylen. Sei es Abschnitt, Spalte oder Widget. Falls sie Ihnen nicht ausreichen, können Sie Ihr eigenes benutzerdefiniertes Design mit CSS-Snippets anwenden – vorausgesetzt, Sie verfügen über CSS-Kenntnisse. Die Möglichkeit, benutzerdefiniertes CSS selbst hinzuzufügen, ist nur bei Elementor Pro verfügbar. Stellen Sie also sicher, dass Sie Elementor Pro auf Ihrer WordPress-Website installiert und aktiviert haben, bevor Sie benutzerdefiniertes CSS hinzufügen ( lesen Sie: Elementor Free vs. Pro).
Sie können die oben bereitgestellten CSS-Snippets verwenden, wenn Sie die gleichen Fälle für Ihre Projekte haben.