Come creare un pulsante/freccia di scorrimento verso il basso animato con Elementor Free e Pro
Come creare un pulsante di scorrimento animato in Elementor? Quando crei un sito web, vuoi sicuramente che i visitatori lo percorrano costantemente, dall’alto al piè di pagina. Tuttavia, non tutti i visitatori hanno tempo e voglia di scorrere la home page verso il basso, cercando alcune informazioni importanti per loro. Se un tale utente vede che c’è molto da scorrere, è più probabile che lascerà il sito Web che continua.
Ecco dove un pulsante “Scorri verso il basso” nella parte superiore del sito Web potrebbe aiutarti. Quel pulsante fa scorrere automaticamente la pagina fino al luogo che consideri il più importante da vedere per il visitatore. D’altra parte, è probabile che l’utente rimanga sulla pagina e la scorri automaticamente, quando vede il pulsante, quindi se ne va.
Quindi, questo pulsante sarà davvero utile sia per te che per i tuoi visitatori. In questo tutorial, ti mostrerò come aggiungere un pulsante di scorrimento verso il basso al tuo sito Web con l’aiuto di Elementor Page Builder e un po’ di codice CSS (non preoccuparti, non ci sarà molto da fare).
Freccia di scorrimento animata verso il basso con Elementor versione gratuita
Cominciamo con la versione gratuita. Inoltre, mostrerò anche come creare una freccia animata con l’aiuto di Elementor Pro e sarà un po’ più semplice. Se preferisci guardare il processo “così com’è”, ecco un video tutorial che abbiamo girato:
Inserisci una sezione vuota proprio sotto il primo blocco della pagina e trascina lì il widget. Come puoi vedere, il campo per il codice si apre nel menu. Copia il codice che ho inserito ulteriormente e incollalo in quel campo.
<i class="scroll fas fa-arrow-down">
<stile>
.scroll-wrapper {text-align:center;}
.scorrere {
dimensione del carattere: 50px;
colore: #000;
-webkit-animazione: scorrimento 3s facilita infinita;
-moz-animation: scorrimento 3s facilita infinita;
-o-animazione: scorrimento 3s facilita infinita;
animazione: scorrimento 3s facilita infinita;
}
@keyframes scorrimento {
0% {
trasforma: traduci (0);
}
50% {
trasforma: translate(0,40px);
}
100% {
trasforma: traduci (0);
}
}
</style></div>
Questo codice posiziona una freccia che rimbalza al centro della sezione scelta. Lascia che ora ti descriva ogni riga di quel codice, in modo che tu possa cambiarlo ogni volta che lo desideri e creare diversi tipi di frecce di scorrimento verso il basso (ci sono molte varianti di esse, lo sai).
<i class="scroll fas fa-arrow-down">
Qui cambi la forma della freccia. Innanzitutto, devi ottenere un codice per l’icona. Vai sul sito Font Awesome , scegli il tipo di freccia che ti piace di più, aprilo e copia il codice posizionato proprio sopra l’immagine. Quindi, sostituisci la vecchia codifica con quella nuova, ad esempio – <i class=”fas fa-arrow-circle-down”>
dimensione del carattere: 50px;
Quando cambierai i numeri in questa riga, la dimensione della freccia cambierà. Puoi giocarci un po’ per capire quale sarà la migliore per te. Se la freccia è troppo grande – infastidirà il visitatore ma se sarà troppo piccola – è probabile che l’utente non se ne accorga.
colore: #000;
È abbastanza ovvio: qui puoi cambiare il colore della freccia. Basta copiare il codice esadecimale del colore che ti serve e incollarlo al posto di #000 (significa nero). Puoi ottenere il codice esadecimale nella scheda “Stile” del menu Elementor per diverse parti della tua pagina o scegliere il colore (e copiare l’esadecimale) su un sito Web come htmlcolorcodes .
animazione
Tutte le linee di “animazione” definiscono il modo in cui verrà mostrato il movimento di un’icona nei diversi browser. Queste caratteristiche hanno valori simili e se cambi il valore in una riga, dovresti cambiarlo anche per tutte le altre righe.
scorrimento
Questo valore definisce il modo in cui si sposterà la freccia. Inoltre, in realtà, scorrendo, ci sono anche altre opzioni. Ad esempio, la freccia potrebbe “rimbalzare”, “annuire” o semplicemente “spostarsi”. In effetti, non c’è una grande varietà di movimenti per la freccia di scorrimento verso il basso, quindi ti consiglierei di lasciare l’effetto “scorrimento”.
3s
Questo è il tempo necessario alla freccia per andare dalla posizione di partenza verso il basso e risalire. Più grande è il valore, più lentamente si sposterà la freccia di scorrimento verso il basso. Modificalo per definire la variante perfetta per il tuo sito web.
infinite
In questa posizione, inserisci il numero di volte in cui desideri che l’animazione si ripeta. “Infinito” qui significa che la freccia si muoverà continuamente e non si fermerà. Tuttavia, se vuoi che si blocchi dopo un po’ di tempo, sostituisci semplicemente il valore “infinito” con un numero.
@keyframes scorrimento {
0% {
trasforma: traduci (0); }
50% {
trasforma: translate(0,40px) }
100% {
trasforma: traduci (0); } }
Queste linee definiscono la posizione della freccia nelle diverse parti di essa. A questo punto, sul 50% (metà del periodo di 3 secondi scegli più alto) la freccia è 40px più bassa rispetto alla sua posizione originale. E alla fine del suo movimento, torna in alto. Se vuoi che la freccia si tuffi più in profondità, cambia semplicemente il numero di pixel.
<a href="#scroll-here">
La freccia di scorrimento verso il basso potrebbe essere solo un elemento di animazione senza altri scopi. Tuttavia, se inserisci un link lì, la freccia sarà cliccabile e condurrà l’utente alla parte del sito web che vuoi che veda. Scegli la sezione e fai clic sul pulsante “Modifica sezione” in alto. Apri la scheda “Avanzate” e nella sezione “Avanzate” trova l’opzione “ID CSS”. Digita l’ID (a hanno scelto “scorri_qui”) e copialo. Successivamente incollalo come collegamento al codice CSS della freccia di scorrimento verso il basso.
La freccia che hai aggiunto non deve rimanere nella posizione centrale sotto la prima sezione. Puoi spostarlo in qualsiasi posizione della pagina (ma sarà sicuramente il più efficiente metterlo nella prima schermata da qualche parte). Vai alla scheda “Avanzate” della sezione freccia di scorrimento verso il basso e apri il “Posizionamento personalizzato”. Nel menu a discesa dell’opzione “Posizione” scegli il valore “Assoluto”. Si apriranno i cursori di posizionamento orizzontale e verticale. Spostali e definisci la posizione della freccia di scorrimento verso il basso. Puoi anche digitare i valori se conosci la posizione esatta in cui hai bisogno di quella freccia. Tieni presente che per il layout tablet e mobile il posizionamento di quella freccia sarà diverso, quindi devi modificarlo manualmente aprendo il sito Web in altri layout e spostando l’icona.
Freccia di scorrimento animata verso il basso con Elementor Pro
In effetti, tutte le azioni che devi eseguire sono quasi le stesse per Pro Elementor come per uno gratuito. Devi prendere un’icona, animarla, aggiungere un collegamento e posizionarla in varie posizioni della pagina. Definirò solo quali sono le differenze per la versione Pro. Se vuoi tutte le istruzioni passo passo, guarda questo video:
Icone . Non devi cercare la codifica di alcune icone che ti sono piaciute: Pro Elementor ha un widget specializzato, chiamato “Icon”. Ad esso è collegata un’enorme libreria di icone e sarai in grado di ottenere un’icona adatta senza cercarne il codice. Oltre a ciò, puoi scaricare qualsiasi file SVG lì.
Taglia e colore . Non hai bisogno di codifica per questo: queste caratteristiche possono essere facilmente modificate nella scheda “Stile” del menu di personalizzazione.
Animazione . Questa è la cosa che devi ancora fare con l’aiuto della codifica. Vai alla scheda “Avanzate” dell’elemento icona e apri la sezione “Css personalizzato”. Ci sarà un campo per il codice ed è, in realtà, una parte del codice che ti ho mostrato in precedenza.
selettore {
-webkit-animazione: scorrimento 3s facilita infinita;
-moz-animation: scorrimento 3s facilita infinita;
-o-animazione: scorrimento 3s facilita infinita;
animazione: scorrimento 3s facilita infinita;
}
@keyframes scorrimento {
0% { trasforma: traduci (0);
}
50% {
trasforma: translate(0,40px);
}
100% {trasformare: tradurre(0);
}
}
Il significato di tutte le parti è simile a quello che ho usato nel generatore di pagine Elementor gratuito.
Collegamento . Devi impostare un ID CSS per una sezione in cui desideri che la freccia di scorrimento verso il basso conduca l’utente, nello stesso modo in cui l’ho mostrato per un Elementor gratuito. Tuttavia, successivamente, lo inserisci in una barra speciale della scheda “Contenuto” dell’icona.
Conclusioni
Come puoi vedere, il processo è abbastanza semplice nonostante la necessità di codifica. Lo snippet è completamente pronto per essere copiato e incollato nella sezione. Una freccia di scorrimento verso il basso renderà il tuo sito web un po’ più dinamico e ti aiuterà a far rimanere più a lungo gli utenti sulla home page. Richiede pochi sforzi per aggiungerlo al sito Web, ma ne vale sicuramente la pena!
