14 frammenti CSS utili per Elementor
Pubblicato: 2022-12-13Le opzioni di stile integrate offerte da Elementor sono più che sufficienti per creare pagine professionali. Nel caso in cui ci sia un certo stile che desideri applicare, ma non è disponibile in Elementor, puoi ottenerlo tramite CSS personalizzato.
Un esempio semplicissimo. Elementor non offre opzioni di stile integrate per modificare l'aspetto del collegamento Leggi di più in un pulsante simile a un pulsante, adottato da molti siti Web. Per ottenerlo, è necessario aggiungere uno snippet CSS che trasformi il collegamento Leggi di più in un pulsante simile. Per aggiungere lo stesso CSS personalizzato, puoi andare alla scheda Avanzate nel pannello delle impostazioni. Puoi aggiungere il codice CSS al campo disponibile nel blocco CSS personalizzato .
Puoi aggiungere CSS personalizzati a tutti i tipi di elementi Elementor. Da sezione, colonna, a widget.
In Elementor, ogni widget e i suoi elementi di supporto (ad esempio, titolo del post, post meta e immagine in primo piano nel widget Post) ha un selettore di classe (vedi l'elenco dei selettori del widget Elementor). Per indirizzare un widget specifico o gli elementi del widget, puoi iniziare digitando selector seguito dal nome della classe (ad esempio .elementor-post__read-more ). Successivamente, puoi aggiungere lo stile personalizzato tra le parentesi graffe. Esempio:
selector .elementor-post__read-more{
imbottitura: 0.4em 0.8em;
sfondo: #33ff41;
transizione: tutti i .5;
bordo-raggio: 5px;
} Lo snippet di codice sopra trasformerà il link per saperne di più in un pulsante simile. Innanzitutto, prende di mira l'elemento read more ( selector .elementor-post__read-more ). Quindi, aggiunge lo stile personalizzato all'elemento leggi di più tramite il contenuto tra parentesi graffe (puoi trovare l'elemento leggi di più sul widget Post e sul widget Archivio). Nei CSS, il contenuto tra parentesi graffe è chiamato dichiarazione.
Di recente, abbiamo lavorato su alcuni progetti che richiedevano l'aggiunta di snippet CSS ad alcuni widget e li condivideremo con te in questo post. Aggiorneremo regolarmente questo post ogni volta che avremo nuovi snippet CSS.
Frammenti CSS gratuiti per Elementor
1. Trasformare Leggi di più Link in un pulsante simile
Il codice:
selector .elementor-post__read-more {
imbottitura: 0,3 em 0,8 em;
colore: #ffffff!importante;
bordo: solido 1px #01B37E;
altezza della riga: 2em;
sfondo: #01B37E;
transizione: tutti i .5;
raggio del bordo: 15px;
font-weight: 500;
}
/* al passaggio del mouse */
selector .elementor-post__read-more:hover{
imbottitura: 0,3 em 0,8 em;
colore: #01B37E!importante;
bordo: solido 1px #01B37E;
altezza della riga: 2em;
sfondo: #ffffff;
transizione: tutti i .5;
raggio del bordo: 15px;
font-weight: 500;
}Puoi utilizzare il codice sopra nel widget Post e nel widget Archivia post che hanno un elemento leggi di più.
2. Aggiunta di uno stile avanzato all'impaginazione numerata
Il codice:
/*stato normale*/
selettore .elementor-paginazione{
margine superiore: 50px;
}
selettore .numeri-pagina{
imbottitura: 10px 15px;
colore:#FFFFFF!importante;
sfondo: #0161cd;
transizione: tutti i .5;
bordo-raggio: 20px;
}
/* stato al passaggio del mouse */
selettore .numeri-pagina:hover{
imbottitura: 10px 15px;
colore:#384958!importante;
sfondo: #edf2f7;
transizione: tutti i .5;
bordo-raggio: 20px;
}
/* stato attivo */
selettore .numeri-pagina.corrente{
imbottitura: 10px 15px;
colore:#384958!importante;
sfondo: #f0f3f6;
transizione: tutti i .5;
bordo-raggio: 20px;
}Puoi utilizzare il codice precedente sul widget Post e sul widget Post archiviati che hanno un elemento di impaginazione. Puoi leggere il nostro articolo precedente per sapere come aggiungere l'impaginazione in Elementor.
3. Aggiunta dell'effetto al passaggio del mouse ai singoli articoli del post
Il codice:
selettore .elementor-post:hover{
transizione: tutti i .50 facilitano l'entrata e l'uscita;
trasformare: scale(1.01);
cursore: puntatore;
z-indice: 1;
}Puoi anche utilizzare il codice sopra riportato nel widget Post e nel widget Archivia post. Leggi il nostro articolo precedente per saperne di più su come aggiungere l'effetto hover ai singoli post del blog in Elementor.
4. Aggiunta dell'effetto al passaggio del mouse alla miniatura del post/immagine in primo piano
Il codice:
selettore .elementor-post__thumbnail:hover{
transizione: tutti i .50 facilitano l'entrata e l'uscita;
trasformare: scale(1.05);
cursore: puntatore;
z-indice: 1;
}Puoi utilizzare il codice sopra nel widget Post e nel widget Archivia post. Assicurati di mostrare l'immagine nelle impostazioni del post principale.
5. Aggiunta dell'effetto al passaggio del mouse al titolo del post
Il codice:
selettore .elementor-post__title{
visualizzazione: in linea;
}
selettore .elementor-post__title:hover{
decorazione del testo: nessuna;
box-shadow: inserto 0 -.5em 0 #F8C273;
colore: ereditare;
visualizzazione: in linea;
}
Puoi anche utilizzare il codice sopra riportato nel widget Post e nei post di archivio che hanno un elemento titolo del post.
6. Aggiunta di effetti al passaggio del mouse ai collegamenti
Il codice:
selettore .elementor-widget-theme-post-content a:hover{
decorazione del testo: nessuna;
box-shadow: inserto 0 -.5em 0 #FD63FD;
colore: #B017B0;
}Puoi utilizzare quanto sopra nel widget Post Content quando crei un modello di post singolo personalizzato utilizzando Elementor Theme Builder. Leggi questo post per saperne di più.
7. Impostazione del raggio del bordo dell'avatar sul widget delle informazioni sul post
Il codice:
selettore .elementor-avatar {
bordo: 2px solido #FFFFFF;
raggio del bordo: 10px;
}Puoi utilizzare questo codice nel widget Post Info. Per usarlo, assicurati di abilitare l'avatar nell'impostazione dei metadati. Leggi qui per saperne di più.
8. Creazione di una barra di avanzamento sfumata
Il codice:
selettore .elementor-progress-bar
{
sfondo: gradiente radiale(cerchio, rgba(7,149,238,1) 16%, rgba(37,252,255,1) 70%);
}Puoi utilizzare il codice precedente per creare una barra di avanzamento del gradiente utilizzando il widget Barra di avanzamento. Leggi qui per saperne di più. Per ulteriori opzioni di sfumatura, puoi fare riferimento ai seguenti post:
- Oltre 70 sfondi sfumati avanzati per Elementor
- 18 sfondi sfumati a 3 colori per Elementor
- 17 sfondi sfumati pastello per Elementor
9. Creazione di testo sfumato
Il codice:
selettore .elementor-text-editor {
background-image: linear-gradient(a sinistra, #feac5e, #c779d0,#4bc0c8);
-webkit-background-clip: testo;
display: blocco in linea;
-webkit-text-fill-color: #00000000;
}Puoi utilizzare il codice sopra riportato nel widget Editor di testo. Per creare testo sfumato su altri widget (ad es. Intestazione), puoi semplicemente sostituire il selettore. Leggi questo post per saperne di più.
10. Scorrimento dell'immagine al passaggio del mouse
Il codice:
selettore{
-webkit-transition: easy-in-out 4s !important;
transizione: 4s easy-in-out !important;
}
selettore: al passaggio del mouse{
background-position: centro in basso !importante;
}Puoi utilizzare il codice sopra per scorrere automaticamente l'immagine al passaggio del mouse. Utile per rivelare uno screenshot lungo come uno screenshot di una pagina di destinazione, home page, pagina del blog e così via. Leggi questo post per saperne di più.
11. Modifica dell'intestazione su Scorri verso il basso
Il codice:
.intestazione-2 {
trasformare: translatey(-80px);
-moz-transition: tutti i .3 facilitano!importante;
-webkit-transition: tutti i .3 facilitano!importante;
transizione: tutti i .3 facilitano! importante;
}
.elementor-sticky--effects.header-2 {
altezza: auto!importante;
trasformare: translatey(0px);
}
.elementor-sticky--effects.header-1 {
display: nessuno!importante;
}Vuoi creare un'intestazione che cambia automaticamente quando scorri verso il basso? Se sì, puoi usare il codice sopra. Puoi leggere questo post per saperne di più.
12. Riduzione dell'intestazione su Scorri verso il basso
Il codice:
header.sticky-header {
--header-height: 90px;
--opacità: 0,90;
--shrink-me: 0.80;
--sticky-background-color: #0e41e5;
--transition: .3s facilitazione in-out;
transizione: colore di sfondo var(--transition),
immagine di sfondo var(--transition),
filtro-sfondo var(--transition),
opacità var(--transizione);
}
header.sticky-header.elementor-sticky--effetti {
background-color: var(--sticky-background-color) !important;
immagine di sfondo: nessuna !importante;
opacità: var(--opacità) !importante;
-webkit-backdrop-filter: blur(10px);
filtro sullo sfondo: sfocatura(10px);
}
header.sticky-header > .elementor-container {
transizione: altezza minima var(--transizione);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
altezza minima: calc(var(--header-height) * var(--shrink-me))!important;
altezza: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
transizione: riempimento var(--transizione);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
padding-bottom: 10px!importante;
padding-top: 10px!importante;
}
header.sticky-header > .elementor-container .logo img {
transizione: larghezza massima var(--transizione);
}
header.sticky-header.elementor-sticky--effetti .logo img {
larghezza massima: calc(100% * var(--shrink-me));
}Puoi utilizzare quanto sopra per creare un comportamento dell'intestazione in base al quale si restringe automaticamente quando scorri verso il basso e ritorna alla dimensione originale quando scorri verso l'alto. Puoi leggere questo post per saperne di più.
13. Aggiunta dell'immagine di sfondo al testo dell'intestazione
Il codice:
selettore .elementor-heading-title
{
background: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") ripetizione verde 30% 70% ;
-webkit-background-clip:testo;
-webkit-text-fill-color:trasparente;
}È possibile utilizzare il codice precedente per aggiungere lo sfondo dell'immagine al widget Intestazione. Sostituisci semplicemente l'URL dell'immagine per utilizzare la tua immagine. Leggi questo post per saperne di più.
La linea di fondo
Elementor ha già molte opzioni integrate per modellare ogni elemento. Che si tratti di sezione, colonna o widget. Nel caso in cui non ti bastassero, puoi applicare il tuo stile personalizzato utilizzando snippet CSS, a condizione che tu abbia conoscenza CSS. La possibilità di aggiungere CSS personalizzati è disponibile solo su Elementor Pro, quindi assicurati di aver installato e attivato Elementor Pro sul tuo sito Web WordPress prima di aggiungere CSS personalizzati ( leggi: Elementor Free vs Pro).
Puoi utilizzare gli snippet CSS che abbiamo fornito sopra se hai gli stessi casi per i tuoi progetti.