Come ottimizzare il layout del tuo sito web con Elementor

Vuoi sapere come ottimizzare il layout del tuo sito web con Elementor ?

L'ottimizzazione delle prestazioni del sito Web è uno degli aspetti più importanti della sua esperienza dell'utente. Un sito Web a caricamento lento può frustrare qualsiasi utente, spesso causando un frequenza di rimbalzo alto che può influire negativamente sul successo della nostra attività.

Le prestazioni del sito Web possono essere influenzate da molti fattori, ad esempio: grandi dimensioni dell'immagine, configurazioni del server, troppi plug-in, tra gli altri fattori.

Le prestazioni del sito web sono uno dei nostri valori più forti come creatori di siti web. Ecco perché abbiamo creato questo corso in 5 parti.

Ora puoi imparare come creare layout e post utilizzando tecniche ottimali. Questa conoscenza garantirà che i tuoi siti Web non includano sezioni, colonne o widget ridondanti che non sono semplicemente necessari. Esploreremo anche alcune funzionalità di widget integrate per migliorare i tempi di caricamento.

Alla fine di questo tutorial, sarai completamente pronto per ottimizzare le prestazioni di ogni sito web Elementor crei e raccogli immediatamente i frutti.

Lezione 1: Best practice per l'ottimizzazione del layout

Nella nostra prima lezione, tratteremo il modo più efficiente per creare pagine e post nell'editor Elementor. Spesso vediamo l'uso di troppe sezioni, colonne, sezioni interne e widget, quando lo stesso layout avrebbe potuto essere ottenuto utilizzando molti meno elementi.

L'utilizzo di una quantità eccessiva di elementi rallenta le prestazioni del tuo sito Web, quindi tuffiamoci e impariamo come creare siti Web con Elementor nel modo più efficiente.

Tratteremo i seguenti argomenti:

• Uno sguardo più da vicino alla struttura di una pagina corretta
• Visualizzare e testare le prestazioni del tuo sito web
• Ottimizzazione dell'intestazione, del piè di pagina e del contenuto della pagina
• Esempi di buone e cattive pratiche di layout del sito web
• Uso corretto di widget, posizionamento e stili globali
• Suggerimenti per evitare ritardi di caricamento, migliorare SEO e aumentare il tempo di caricamento
• Ottimizzazione dell'accessibilità
• Ridurre la quantità di elementi DOM
• E altro ancora !

Per comprendere meglio i layout ottimali in Elementor, esploreremo un modello Elementor che mostra gli abusi comuni di sezioni, colonne e widget. Alla fine di questa lezione, avremo completamente ricostruito l'intera pagina riducendo il numero di colonne e widget. La nostra pagina iniziale è composta da nove sezioni, 31 colonne, cinque sezioni interne e 44 widget.

Alla fine del tutorial, la nostra pagina ottimizzata sarà ridotta a sei sezioni, sette colonne e 16 widget.

Useremo la luce libera Ciao temae ricreeremo ogni sezione del modello e miglioreremo le prestazioni complessive del sito Web utilizzando le migliori pratiche.

Test per cattive pratiche

Prima di approfondire l'ottimizzazione del layout del sito Web, eseguiamo un test sulla nostra pagina per comprendere appieno cosa succede quando qualcuno visita il nostro sito Web. Una volta eseguite tutte le nostre ottimizzazioni, ripeteremo il test e confronteremo i risultati.

Passaggio 1: verifica il tuo sito web in una finestra di navigazione in incognito

• Apri una nuova finestra in "Modalità di navigazione in incognito" e digita l'URL della pagina web che stai testando.

Passaggio 2: verifica di utilizzare il percorso dell'URL diretto

Se non sei sicuro del collegamento alla tua pagina, puoi trovarlo facilmente accedendo alla dashboard di WP:

• Fai clic su "Pagine" per visualizzare tutte le pagine del tuo sito web.
• Passa il cursore sulla tua pagina e fai clic sull'opzione "Visualizza". Questo ti porterà direttamente alla tua pagina.
• Copia e incolla questo URL nella finestra di navigazione in incognito e una volta caricato il sito web sei pronto per testarlo!

Test e visualizzazione dei risultati delle prestazioni

Passaggio 1: testare i risultati delle prestazioni

Potresti aver utilizzato Chrome Developer Tools in passato.

In caso contrario, per ispezionare e visualizzare il contenuto HTML e CSS della tua pagina:

• Fai clic con il pulsante destro del mouse in qualsiasi punto della pagina e fai clic su "Ispeziona". Vedrai diverse schede in cui puoi leggere il tuo HTML e CSS, trovare errori, ottenere risultati SEO ed eseguire vari test.
• Seleziona la scheda Rete e premi i pulsanti cmd o ctrl + R per caricare i risultati.

Come puoi vedere, il nostro layout attuale impiega 2,88 secondi per caricarsi ed esegue 81 richieste.

Passaggio 2: visualizzare i risultati delle prestazioni

• Passa alla scheda Lighthouse, dove possiamo eseguire un rapporto di controllo sulla nostra pagina.

Questo ci darà maggiori informazioni sulle prestazioni correnti della pagina.

• Seleziona "Genera rapporto". Dopo alcuni istanti, apparirà il tuo rapporto.

Attualmente stiamo ricevendo una valutazione delle prestazioni di 73/100, su cui possiamo certamente lavorare.

Idealmente, vorremmo che tutti questi numeri fossero verdi. Ora passiamo all'ottimizzazione della nostra pagina e al miglioramento del nostro statistica.

Tieni presente che dopo ogni passaggio di ottimizzazione che facciamo, potremmo prendere alcune best practice dalle modifiche e tenerle a mente per i futuri siti web che creeremo.

Ottimizzazione degli elementi della pagina

Passaggio 1: ottimizza l'intestazione

Cominciamo con il Top della mente.

Come puoi vedere in questo disegno, l'intestazione è stata realizzata con tre colonne.

Nella prima colonna, il nostro logo è composto da due widget:

1. Un Immagine widget che mostra un file immagine .png del nostro logo
2. Un widget per il titolo.

Nella seconda colonna, il menu dell'intestazione è costituito dal nostro Widget Menu di navigazione.

La terza colonna contiene:

1. Un widget sezione interno (che controlla la posizione del widget icona).
2. I nostri dati di contatto per l'intestazione

Vediamo come possiamo ridurre al minimo il numero di sezioni, widget e sezioni qui.

Passaggio 2: crea la nuova intestazione

Colonna 1:

• Crea 1 sezione con 1 sola colonna.
• Aggiungi il Widget logo sito web e trascinalo nella sezione.

Best practice per le immagini:

• Assegna a ogni file immagine sul tuo sito web un titolo e un testo alternativo pertinenti nella libreria multimediale.

Ciò migliorerà l'accessibilità della tua pagina e il posizionamento nei motori di ricerca. Nel logo che abbiamo usato originariamente, il titolo è irrilevante per l'immagine reale e non c'è testo alternativo.

• Definisci le dimensioni dell'immagine all'interno del widget.

Ciò consente di disporre la pagina con lo spazio appropriato prima del caricamento delle immagini, evitando ritardi di layout (un fattore misurato dai browser).

Nell'esempio su cui stiamo lavorando insieme, risolvi questo problema andando alla scheda Stile e impostando la larghezza dell'immagine a 200 px.

Colonna 2

Torna al pannello dei widget:

• Trascina e rilascia il widget del menu di navigazione sotto il logo
• Imposta il puntatore su "Nessuno"
• Vai alla scheda "Stile" e aggiungi il carattere che preferisci (in modo che corrisponda al nostro design precedente)

Best practice per lo styling generale:

• Evita di utilizzare più di 2 caratteri diversi che includono pesi multipli (Caratteri globali).
• Evita di selezionare colori diversi per ogni articolo con il selettore colori (Colori globali).
• Migliora la velocità di caricamento del tuo sito web generando meno query (caratteri complessivi).
• Ripetere due volte il codice non necessario (colori globali).
• Mantieni la coerenza e il controllo del tuo modello (stile generale).

Caratteri globali:

Questo può essere fatto usando la funzione Caratteri globali:

• Vai alla scheda "Stile" e aggiungi il tuo carattere preferito (in modo che corrisponda al nostro design precedente) selezionandone uno, apporta una piccola modifica e passa con il mouse sull'icona più.
• Fai clic sull'icona più e seleziona la famiglia di caratteri di cui hai bisogno
• Salva gli stili che utilizzerai nel modello come caratteri globali

Puoi quindi utilizzare questo stile su ogni widget che crei.

Colori globali:

Lo stesso metodo può essere utilizzato per i tuoi colori generali:

• Fare clic su "Globale"
• Passa il mouse sopra il selettore di colori e fai clic su di esso
• Seleziona un colore e punta sull'icona più
• Fare clic su "Globale" >> selezionare "Principale"

Dopo averlo fatto, il colore verrà salvato nella tavolozza dei colori del tuo modello, in modo che tu possa selezionarlo dall'elenco dei colori globali ogni volta che ne hai bisogno per un elemento o un widget.

Prima di continuare con la nostra intestazione, impostiamo il riempimento verticale a zero.

Passaggio 3: modifica l'intestazione

Colonna 3

• Vai al pannello "Widget"
• Trascina il widget Elenco icone sotto il menu.
• Rimuovi elementi aggiuntivi dell'elenco
• Aggiungi il tuo testo
• Scegli l'icona che preferisci
• Vai alla scheda "Stile"
• Definisci i colori e i caratteri generali di tua scelta

Ora dobbiamo correggere un'altra cosa: i tre elementi dell'intestazione sono attualmente impilati e non allineati tra loro. Possiamo risolvere questo problema modificando la larghezza di ogni elemento alla sua dimensione effettiva, in modo che non occupi tutto lo spazio nella colonna.

Per risolvere questo problema:

• Seleziona il widget del logo del sito >> scheda "Avanzate"
• Seleziona "Posizionamento" e imposta la sua larghezza su "In linea"

Ripeti questo passaggio esatto per il widget Menu di navigazione e per il widget Elenco icone.

Ora che tutti gli elementi dell'intestazione sono in linea, non resta che posizionarli correttamente.

Definire il posizionamento della colonna con elementi in linea

• Seleziona la tua colonna >> vai alla scheda "Layout"
• In "Allineamento verticale", scegli "Basso"
• "In Allineamento orizzontale" scegli "Spazio tra"

Scegliendo l'allineamento "Spazio tra" posiziona il primo e l'ultimo widget su entrambe le estremità, dando uguale spaziatura tra tutti gli altri widget.

Tuttavia, il primo e l'ultimo widget hanno larghezze diverse, quindi lo spazio uguale potrebbe non sempre centrare il nostro widget interno.

Possiamo risolvere questo problema regolando i margini:

• Seleziona il widget Menu di navigazione >> scheda “Avanzate”
• Separa il margine e rimuovi la spaziatura con un valore negativo

Passaggio 4: rendi l'intestazione reattiva

Ora vediamo come appare la versione attuale del nostro sito web sui dispositivi mobili.

Best practice per la reattività mobile:

• Semplifica il tuo design e pensa a modi per rendere reattive le stesse sezioni, per evitare di utilizzare il doppio della quantità di codice che influirà sulla velocità della tua pagina.

Proprio come vedi in questa intestazione: è comune vedere la stessa sezione ridisegnata specificamente per tablet e dispositivi mobili. Questo è ciò che vediamo qui: sono state create due versioni del design: una versione per desktop e una per dispositivi mobili.

Invece, quando il tuo design e il tuo codice sono reattivi, la velocità della tua pagina migliora perché utilizzerà meno codice.

Vediamo come possiamo ottenere ciò, utilizzando l'impostazione "Larghezza personalizzata" per i nostri widget ed elementi.

Impostazione di una larghezza personalizzata per tablet

• Fare clic su "Menu Nav" >> scheda "Avanzate"
• Seleziona "Posizionamento" >> imposta la larghezza su "Personalizzato".
• Seleziona "%" >> assegna al widget la stessa larghezza (in percentuale) dello spazio vuoto attorno ad esso.
• Fare clic sulla scheda "Contenuto" >> "Toggle Align" >> selezionare "Destra".

Ciò consente di allineare il menu di commutazione ovunque all'interno della larghezza del widget.

Ora finiamo di personalizzare il menu di commutazione.

• "Contenuto" >> Fare clic sull'interruttore "Larghezza intera" e impostarlo su "Sì".
• "Stile" >> Rimuovi lo sfondo trascinando la barra "Selettore colore" completamente a sinistra.

Ora vediamo come appaiono le cose su uno schermo mobile.

Definizione di una larghezza personalizzata per dispositivi mobili

In questo scenario, manterremo i tre widget di intestazione all'interno della finestra. Ma tieni presente che per alcuni siti Web può avere più senso omettere determinati elementi dall'intestazione quando vengono visualizzati su dispositivi mobili o tablet.

In questo caso, ciò che accade alla nostra intestazione quando viene visualizzata su dispositivi mobili è che il menu di navigazione e i widget del logo non possono essere inseriti in una singola riga.

Per risolvere questo problema:

Posizionamento del menu di navigazione

• Fare clic su "Menu Nav" >> scheda "Avanzate"
• Seleziona "Posizionamento" >> imposta la larghezza su "Personalizzato"
• Seleziona "%" >> Dai al widget una larghezza del 30%, in modo che si adatti al nostro logo

Posizionamento della lista delle icone

• Fare clic su "Elenco icone" >> scheda "Avanzate"
• Seleziona "Riempi" >> Separa valori
• Aggiungi 12px padding a "TOP"

Potete crederci?

La nostra intestazione originariamente utilizzata 2 sezioni, 12 widget e 10 colonne. Ora la nostra intestazione usa 1 sezione, 3 widget e 1 colonna.

E il risultato è lo stesso!

Passaggio 5: ottimizza la sezione Eroe

Passiamo alla sezione successiva del nostro sito web: la sezione degli eroi

Best practice per le sezioni Hero:

• Assicurati che il testo della sezione dell'eroe sia facilmente visibile, soprattutto quando ha un'immagine di sfondo.

Controllo della posizione del widget in una colonna

Un errore comune che vediamo commesso nell'editor di Elementor è l'utilizzo di colonne e spazi extra per controllare il posizionamento di un widget.

Nel nostro modello di esempio, il nostro immagine dell'eroe consiste in una sezione con un'immagine di sfondo. Il titolo e il testo sono posizionati orizzontalmente, utilizzando due colonne. All'interno della sezione è presente anche un distanziatore per distanziare gli elementi in verticale.

Vediamo come possiamo creare lo stesso design con una sola sezione:

• Elimina la colonna in più a destra del testo.
• Rimuovere il distanziatore.

Invece, per posizionare il nostro testo dell'eroe dove vogliamo, utilizzeremo le opzioni di allineamento delle colonne:

• Seleziona la colonna.
• Imposta "Allineamento verticale" su "Medio".
• Vai alla scheda "Avanzate".
• Seleziona "Riempi" >> Separa valori
• Imposta il riempimento destro al 50%.

• Seleziona la sezione.
• Seleziona "Altezza minima" >> impostalo su 80.

Contrasto fisso tra testi e sfondi

È importante che ogni sito web abbia un buon contrasto tra il testo e lo sfondo. Le informazioni illeggibili influiscono sui punteggi del tuo sito web e possono anche allontanare i visitatori. In ogni caso, il testo dovrebbe essere sempre chiaramente leggibile.

Esistono diversi modi per migliorare la chiarezza di una sezione il cui sfondo è un'immagine colorata (come vediamo in questo modello):

• Clicca sulla tua intestazione.
• Vai alla scheda "Stile" >> Seleziona "Ombra del testo".

Ciò migliorerà la leggibilità del testo facendolo risaltare rispetto all'immagine di sfondo.

Un altro modo per rendere il testo più chiaro è utilizzare gli overlay.

• Seleziona la sezione >> scheda 'Stile' >> 'Sovrapposizione sfondo'
• Seleziona uno dei tuoi colori generali e gioca con l'opacità fino a ottenere il risultato desiderato

Passaggio 6: ottimizza la sezione con le caselle di icone

Ora passiamo alla nostra sezione successiva, dove attualmente abbiamo una sezione interna con quattro colonne. Attualmente, ogni colonna include tre widget: widget immagine, widget titolo e widget editor di testo.

Vediamo come possiamo semplificare questa sezione per migliorarne le prestazioni.

Contenuto dell'area delle icone

• Seleziona il pulsante »Widget Icon Box« nel menu del widget e trascinalo nella colonna
• Seleziona la "Casella delle icone"
• Punta sull'immagine dell'icona
• Seleziona "Scarica SVG" **
• Inserisci la tua icona personalizzata

** Nota: i badge sono file SVG. In caso contrario, vai alla dashboard di WordPress e poi a Elementor >> Impostazioni. Dovrai abilitare Abilita download di file non filtrati.

• Digita il tuo "titolo"
• Digita la tua "Descrizione"
• Seleziona "Stile" >> Scegli un colore generale
• Seleziona "Dimensione" e trascina la barra nella dimensione che preferisci
• Seleziona "Padding" e trascina la barra sul numero che preferisci

Passaggio 8: ottimizza la sezione "Servizi"

Ora ricostruiremo la sezione "Servizi", che attualmente utilizza due colonne, due immagini, il widget del titolo e il widget dell'editor di testo.

Creiamo lo stesso design in una nuova sezione, ma con una sola colonna.

• Crea una nuova sezione con una colonna
• In "Layout" >> imposta "Larghezza contenuto" su "Larghezza completa"
• Seleziona "Riquadro immagine widget" nel pannello widget e trascinalo nella colonna

(Potremo integrare tutti gli asset della sezione in questo widget)

• Digita il titolo
• Digita la descrizione

Per l'immagine, manterremo il design attuale che abbiamo usato per le nostre immagini.

• Inserisci la stessa immagine dalla libreria multimediale
• Vai alla scheda "Contenuto" >> Imposta "Posizione immagine" su "Destra"

• Vai alla scheda "Stile"
• Aumenta la spaziatura tra gli elementi
• Aumenta la "Larghezza" dell'immagine
• Espandi la sezione "Contenuto"
• Scegli l'allineamento "centrale"
• Imposta "Allineamento verticale" su "Centro"
• Definisci i colori e i caratteri generali di tua scelta
• Vai alla scheda "Avanzate"
• Aggiungi il 10% di riempimento al widget

Ora la sezione Servizi ha lo stesso design, ma con meno risorse.

Passaggio 9: ottimizza la sezione di invito all'azione

Best practice per i link di invito all'azione:

• Assicurati che tutti i tuoi collegamenti ai social media funzionino correttamente e che il pulsante contenga il collegamento.
• Quando aggiungi un link a un altro sito web, includi questo attributo: "rel | noopener"

(Puoi farlo facendo clic sull'icona a forma di ingranaggio e digitando l'attributo in "Attributi personalizzati"). Questo aprirà il collegamento in una nuova scheda del browser e aumenterà il punteggio delle prestazioni.

La sezione seguente presenta un invito all'azione per i nostri servizi.

La sezione ha attualmente due colonne, che contengono:

1. Un'immagine di sfondo con un distanziatore
2. Due intestazioni, una sezione interna, un editor di testo e un pulsante

Creiamo lo stesso design in una nuova sezione, ma con una sola colonna.

• Vai alla scheda "Layout" >> imposta "Larghezza contenuto" su "Larghezza completa"
• Vai alla scheda "Avanzate" >> Rimuovi qualsiasi riempimento aggiuntivo

• Seleziona il "Widget Call To Action" nel pannello del widget e trascinalo nella colonna
• Imposta "Posizione immagine" su "Sinistra"
• Seleziona la tua immagine dalla libreria multimediale
• Espandi la sezione "Contenuto"
• Digita l'intestazione
• Digita la descrizione
• Digita il testo del pulsante

• Vai alla scheda "Stile"
• Aggiungi "Padding" tra gli elementi
• Regola larghezza immagine
• Espandi la sezione "Contenuto"
• Seleziona il carattere globale per il tuo titolo
• Aumenta lo spazio tra la descrizione e il pulsante
• Scegli i colori globali adatti ad ogni risorsa
• Espandi la sezione "Pulsante"
• Imposta la sua dimensione su "Grande"
• Personalizzalo in base alle tue esigenze, come il colore di sfondo e il raggio del bordo

Finora è stata una sezione a 2 colonne con 6 widget. Ora è una sezione a 1 colonna con solo 1 widget!

Passaggio 10: ottimizza il carosello di immagini

Il design attuale della nostra sezione Carosello di immagini ha un errore comune con il modo in cui visualizza più immagini.

Questo design è composto da 5 colonne, una pratica che molti utenti tendono a fare per controllare la dimensione delle proprie immagini.

Esploriamo un modo più semplice che ottimizzerà anche le prestazioni del tuo sito web.

• Crea una nuova sezione con 1 colonna
• Vai alla scheda "Layout" >> imposta "Larghezza contenuto" su "Larghezza completa"
• Seleziona il pulsante »Image Carousel Widget« dal pannello del widget e trascinalo nella colonna
• Aggiungi le immagini desiderate dalla libreria multimediale

• Vai alla scheda "Contenuto"
• Imposta "Dimensione immagine" su "Medio - 300 x 300"
• Regola "Diapositive da visualizzare", "Diapositive da scorrere" e "Navigazione" in base alle tue preferenze

• Vai alla scheda "Stile"
• Imposta "Allineamento verticale" su "Centro"
• Personalizza la "Spaziatura"

• Vai alla scheda "Avanzate"
• Aggiungere il ripieno necessario

Quella che una volta era una sezione di 5 colonne ora è solo una colonna.

Passiamo alla sezione successiva, dove possiamo ottimizzare i video sul nostro sito web.

Passaggio 11: ottimizza la sezione video

Best practice per i contenuti video:

• Usa Lazy Load quando possibile, per migliorare i tempi di caricamento dei tuoi siti web.

Cosa succede quando applichiamo l'opzione "Lazy Load"?

Tecnicamente parlando, il codice di incorporamento del video è sostituito da un'immagine statica. In questo modo il video viene caricato solo quando l'utente fa clic sull'immagine, il che aiuta davvero con i tempi di caricamento della nostra pagina.

Quello che faremo ora è cambiare il modo in cui utilizziamo il Widget video, in modo che non riduca la velocità della nostra pagina o le prestazioni del sito web.

• Seleziona il "Widget video"
• Vai alla scheda "Stile"
• Seleziona "Carico lento"

Passaggio 12: ottimizza il piè di pagina e mantienilo aggiornato

Un errore comune riscontrato su molti siti Web è che il loro piè di pagina utilizza più intestazioni per la data e la descrizione, nonché un'icona per il simbolo del copyright.

Vediamo come ottimizzare il piè di pagina e fare in modo che sia sempre aggiornato.

Configurare questo processo di aggiornamento continuo utilizzando Tag dinamici. In questo modo, non sarà necessario modificare il contenuto dell'intestazione ogni anno, poiché i tag dinamici si aggiorneranno automaticamente all'anno in corso.

Per fare ciò, procederemo come segue:

• Rimuovi i widget extra, lasciando solo il widget Titolo
• Seleziona il widget Titolo
• Fare clic sul simbolo "Tag dinamici" a destra del campo "Titolo" (noto anche come "pulsante principale"

• Dal menù a tendina selezionare la voce di menù "Data e ora correnti"
• Fare clic sull'icona principale della chiave
• Fare clic sulla scheda "Formato data" e selezionare la voce di menu "Personalizzata"
• Elimina ciò che è attualmente nel campo "Formato personalizzato", tranne la "Y"
• Seleziona la scheda "Avanzate"
• Evidenzia il campo "Avanti" e tieni premuti contemporaneamente i tasti "opzione" e "G" (o "controllo", alt "e" C "contemporaneamente) per digitare il simbolo" © ".
• Aggiungi uno spazio dopo il "©"

• Seleziona il campo "Dopo"
• Digita in uno spazio e scrivi il testo che desideri venga visualizzato dopo l'anno, ad esempio "Tutti i diritti riservati"

Potresti notare che nel sito web di esempio in questo tutorial, ogni widget ha la sua sezione. Abbiamo fatto questo per rendere il tutorial più chiaro e più facile da seguire.

Idealmente, meno sezioni hai, meno CODICE HTML aggiuntivo avrai.

Puoi unire alcuni widget nella stessa sezione trascinandoli e rilasciandoli nella sezione sopra e quindi eliminando la sezione vuota.

E questo è tutto, il tuo layout è ottimizzato!

Nuova valutazione delle prestazioni del sito web

Controlleremo i risultati nella finestra DevTools (Inspector):

• Seleziona la scheda "Rete":

Ci sono alcuni cambiamenti piacevoli e positivi qui:

• Il sito web ora impiega 568 millisecondi per caricarsi
• Siamo passati da 81 richieste a 46
• Seleziona la scheda "Faro", dove vedrai che il nostro punteggio delle prestazioni è aumentato da 73 a 98

Tieni presente che abbiamo ottimizzato le nostre prestazioni senza utilizzare plug-in di terze parti. Sono bastate semplici modifiche e best practice.

Passaggio 13: testare i risultati con gli effetti di movimento

Vogliamo rendere il nostro sito più interattivo e divertente, ma in che modo ciò influenzerà i nostri punteggi delle prestazioni? Vediamo cosa possiamo fare.

Rendi l'intestazione un elemento "fisso":

• Seleziona l'intestazione
• Vai alla scheda "Avanzate"
• Espandi la scheda "Effetti di movimento"
• Imposta l'opzione "Appiccicoso" su "In alto"

Rendi la sezione degli eroi un elemento "fisso":

• Seleziona la sezione degli eroi
• Vai alla scheda "Stile"
• Seleziona l'elenco a discesa "Allegato" e seleziona "Fisso"

utilizzare un Animazione d'ingresso per il testo dell'eroe (intestazione):

• Seleziona il widget Intestazione
• Vai alla scheda "Avanzate"
• Espandi la scheda "Effetti di movimento"
• Seleziona Input Animation e impostalo su "Fade In"

Usa un'animazione di input per la descrizione del testo dell'eroe (widget Editor di testo):

• Seleziona il widget Editor di testo
• Vai alla scheda "Avanzate"
• Espandi la scheda "Effetti di movimento"
• Seleziona "Input animation" e impostalo su "Fade In"

Fai lo stesso per i widget che vengono dopo, per effetti sottili quando la pagina viene caricata.

Ora eseguiamo di nuovo il test delle prestazioni, per vedere come gli effetti del movimento hanno influenzato il nostro punteggio:

• Torna alla finestra "Ispettore"
• Seleziona la scheda "Faro"
• Fare clic su "Genera un rapporto"

Ora vediamo che il nostro punteggio delle prestazioni è stato ridotto a 97 - questa non è sicuramente una grande differenza e rende il sito più interessante e divertente.

Riesci a credere al nostro nuovo punteggio delle prestazioni?

Siamo lieti che tu sia ora completamente attrezzato per aumentare il tuo punteggio di prestazioni da ogni sito Web Elementor che crei. Farà una grande differenza per gli obiettivi di costruzione del tuo sito web e per il successo della tua attività.

Ti consigliamo di aggiungere questo tutorial ai segnalibri per riferimento futuro, in modo da poter esaminare le prestazioni delle pagine del tuo sito Web e applicare le migliori pratiche per ottimizzare il layout.

E questo è solo l'inizio: la parte successiva di questo corso copreottimizzazione dell'immagine.

Nel tutorial, esamineremo ogni immagine nel sito Web di esempio e impareremo come migliorarle per tempi di caricamento ancora più efficienti.

Ottieni Elementor Pro ora!

Conclusione

Ecco ! Questo è tutto per questo articolo che ti mostra come ottimizzare il layout del tuo sito Web con Elementor. Se hai dubbi su come arrivarci, faccelo sapere all'interno commentaires.

Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.

...