Cum să vă optimizați aspectul site-ului web cu Elementor

Doriți să știți cum să optimizați aspectul site-ului dvs Elementor ?

Optimizarea performanței site-ului web este unul dintre cele mai importante aspecte ale acestuia experiență de utilizator. Un site web cu încărcare lentă poate frustra orice utilizator, rezultând adesea un rata de respingere care poate afecta negativ succesul afacerii noastre.

Performanța site-ului web poate fi afectată de mulți factori, de exemplu: dimensiuni mari ale imaginilor, configurații ale serverului, prea multe pluginuri, printre alți factori.

Performanța site-ului web este una dintre cele mai puternice valori ale noastre ca creatori de web. De aceea am creat acest curs în 5 părți.

Acum puteți afla cum să creați machete și postări folosind tehnici optime. Aceste cunoștințe vă vor asigura că site-urile dvs. web nu vor include secțiuni, coloane sau widget-uri redundante care nu sunt necesare. De asemenea, vom explora câteva funcții widget încorporate pentru a îmbunătăți timpul de încărcare.

Până la sfârșitul acestui tutorial, veți fi pe deplin pregătit să optimizați performanța fiecărui site web Elementor creați și culegeți imediat recompensele.

Lecția 1: Cele mai bune practici de optimizare a aspectului

În prima noastră lecție, vom aborda cel mai eficient mod de a vă crea paginile și postările în editor Elementor. Adesea vedem utilizarea mult prea multe secțiuni, coloane, secțiuni interne și widget-uri, atunci când același aspect ar fi putut fi realizat folosind mult mai puține elemente.

Utilizarea unor cantități excesive de elemente încetinește performanța site-ului dvs. web, așa că hai să ne scufundăm și să învățăm cum să construim site-uri web cu Elementor în cel mai eficient mod.

Vom acoperi următoarele subiecte:

• O privire mai atentă asupra structurii unei pagini corecte
• Vizualizarea și testarea performanței site-ului dvs. web
• Optimizarea conținutului antetului, subsolului și paginii
• Exemple de bune și rele practici de aspect al site-ului
• Utilizarea corectă a widgeturilor, poziționării și stilurilor globale
• Sfaturi pentru a evita întârzierea încărcării, îmbunătățiți SEO și crește timpul de încărcare
• Optimizarea accesibilității
• Reducerea cantității de elemente DOM
• Și mult mai mult !

Pentru a înțelege mai bine aspectele optime din Elementor, vom explora un șablon Elementor care prezintă abuzuri comune ale secțiunilor, coloanelor și widgeturilor. Până la sfârșitul acestei lecții, vom reconstrui complet această pagină întreagă, reducând numărul de coloane și widgeturi. Pagina noastră inițială este formată din nouă secțiuni, 31 de coloane, cinci secțiuni interne și 44 de widget-uri.

La sfârșitul tutorialului, pagina noastră optimizată va fi redusă la șase secțiuni, șapte coloane și 16 widget-uri.

Vom folosi gratuit, ușor Bună Temași vom recrea fiecare secțiune a șablonului și vom îmbunătăți performanța generală a site-ului web folosind cele mai bune practici.

Testarea practicilor proaste

Înainte de a ne aprofunda în optimizarea aspectului site-ului web, să facem un test pe pagina noastră pentru a înțelege pe deplin ce se întâmplă atunci când cineva vizitează site-ul nostru. Odată ce toate optimizările noastre au fost făcute, vom repeta testul și vom compara rezultatele.

Pasul 1: verificați site-ul dvs. într-o fereastră incognito

• Deschideți o fereastră nouă în „Mod incognito” și introduceți adresa URL a paginii web pe care o testați.

Pasul 2: verificați dacă utilizați calea URL directă

Dacă nu sunteți sigur de linkul paginii dvs., îl puteți găsi cu ușurință accesând tabloul de bord WP:

• Faceți clic pe „Pagini” pentru a vedea toate paginile de pe site-ul dvs. web.
• Plasați cursorul peste pagina dvs. și faceți clic pe opțiunea „Vizualizare”. Acest lucru vă va duce direct la pagina dvs.
• Copiați și lipiți această adresă URL în fereastra incognito și odată ce site-ul web se încarcă, sunteți gata să o testați!

Testarea și vizualizarea rezultatelor performanței

Pasul 1: testați rezultatele performanței

Este posibil să fi folosit în trecut Instrumentele pentru dezvoltatori Chrome.

Dacă nu, pentru a inspecta și afișa conținutul HTML și CSS al paginii dvs.:

• Faceți clic dreapta oriunde pe pagina dvs. și faceți clic pe selectați „Inspectați”. Veți vedea mai multe file în care vă puteți citi HTML și CSS, puteți găsi erori, puteți obține rezultate SEO și puteți rula diferite teste.
• Selectați fila Rețea și apăsați butoanele cmd sau ctrl + R pentru a încărca rezultatele.

După cum puteți vedea, aspectul nostru actual durează 2,88 secunde pentru a se încărca și efectuează 81 de solicitări.

Pasul 2: Vizualizați rezultatele performanței

• Treceți la fila Far, unde putem rula un raport de audit pe pagina noastră.

Acest lucru ne va oferi mai multe informații despre performanța curentă a paginii.

• Selectați „Generați raportul”. După câteva momente, raportul dvs. va apărea.

În prezent, primim un rating de performanță de 73/100, la care putem lucra cu siguranță.

În mod ideal, am dori ca toate aceste numere să fie verzi. Acum să trecem la optimizarea paginii noastre și la îmbunătățirea noastră statistică.

Rețineți că, după fiecare pas de optimizare pe care îl facem, este posibil să luăm câteva dintre cele mai bune practici din modificări și să le avem în vedere pentru viitoarele site-uri web pe care le creăm.

Optimizarea elementelor paginii

Pasul 1: Optimizați antetul

Să începem cu Antet.

După cum puteți vedea în acest design, antetul a fost realizat cu trei coloane.

În prima coloană, sigla noastră constă din două widget-uri:

1. Un Widget imagine care afișează un fișier imagine .png al logo-ului nostru
2. Un widget pentru titlu.

În a doua coloană, meniul antet constă din meniul nostru de navigare Widget.

A treia coloană conține:

1. Un widget de secțiune intern (care controlează poziția widgetului de pictograme).
2. Detaliile noastre de contact pentru antet

Să vedem cum putem minimiza numărul de secțiuni, widgeturi și secțiuni aici.

Pasul 2: creați noul antet

Coloana 1:

• Creați o secțiune numai cu o coloană.
• Adaugă Widget pentru sigla site-ului web și trageți-l în secțiune.

Cele mai bune practici pentru imagini:

• Acordați fiecărui fișier imagine de pe site-ul dvs. un titlu relevant și un text alternativ în biblioteca media.

Acest lucru va îmbunătăți accesibilitatea paginii și clasamentul motorului dvs. de căutare. În sigla pe care am folosit-o inițial, titlul este irelevant pentru imaginea reală și nu există text alternativ.

• Definiți dimensiunile imaginii din interiorul widgetului.

Aceasta permite ca pagina să fie așezată cu spațiul adecvat înainte de încărcarea imaginilor, evitând întârzierea în aspect (un factor măsurat de browsere).

În exemplul la care lucrăm împreună, rezolvați această problemă accesând fila Stil și setați lățimea imaginii la 200 px.

Coloane 2

Reveniți la panoul widget-uri:

• Trageți și fixați widgetul meniului de navigare sub siglă
• Setați indicatorul la „Nici unul”
• Accesați fila „Stil” și adăugați fontul preferat (astfel încât să se potrivească cu designul nostru anterior)

Cele mai bune practici pentru stilul general:

• Evitați să utilizați mai mult de 2 fonturi diferite care includ mai multe greutăți (Fonturi globale).
• Evitați selectarea diferitelor culori pentru fiecare articol cu ​​ajutorul selectorului de culori (Culori globale).
• Îmbunătățiți viteza de încărcare a site-ului dvs. generând mai puține interogări (fonturi generale).
• Repetați codul inutil de două ori (culori globale).
• Mențineți consistența și controlul modelului dvs. (stilul general).

Fonturi globale:

Acest lucru se poate face folosind funcția Global Fonts:

• Accesați fila „Stil” și adăugați fontul preferat (astfel încât să corespundă designului nostru anterior) selectând unul, faceți o mică modificare și treceți cu mouse-ul peste pictograma plus.
• Faceți clic pe pictograma plus și selectați familia de fonturi de care aveți nevoie
• Salvați stilurile pe care le veți utiliza în șablon ca fonturi globale

Puteți utiliza apoi acest stil pe fiecare widget pe care îl creați.

Culori globale:

Aceeași metodă poate fi utilizată pentru culorile dvs. generale:

• Faceți clic pe „Global”
• Plasați cursorul peste selectorul de culori și faceți clic pe el
• Selectați o culoare și indicați pictograma plus
• Faceți clic pe „Global” >> selectați „Principal”

După ce ați făcut acest lucru, culoarea va fi salvată în paleta de culori a șablonului, astfel încât să o puteți selecta din lista dvs. Global Colors ori de câte ori aveți nevoie pentru un element sau un widget.

Înainte de a continua cu antetul nostru, să setăm umplutura verticală la zero.

Pasul 3: Editați antetul

Coloana 3

• Accesați panoul „Widgets”
• Trageți widgetul Listă de pictograme sub meniu.
• Eliminați elementele de listă suplimentare
• Adăugați textul
• Alegeți pictograma la alegere
• Accesați fila „Stil”
• Definiți culorile și fonturile generale la alegere

Acum trebuie să remediem încă un lucru - cele trei elemente de antet sunt acum stivuite și nu sunt aliniate între ele. Putem rezolva această problemă modificând lățimea fiecărui element la dimensiunea sa reală, astfel încât să nu ocupe tot spațiul din coloană.

Pentru a rezolva această problemă:

• Selectați widgetul logo-ului site-ului >> fila „Avansat”
• Selectați „Poziționare” și setați lățimea acestuia la „Inline”

Repetați acest pas exact pentru widgetul Meniu de navigare și pentru widgetul Listă de pictograme.

Acum că toate elementele antetului sunt în linie, nu mai rămâne decât să le poziționați corect.

Definirea poziționării coloanei cu elemente în linie

• Selectați coloana >> accesați fila „Aspect”
• În „Aliniere verticală”, alegeți „Partea de jos”
• „În aliniere orizontală” alegeți „Spațiu între”

Alegeți poziția de aliniere „Spațiu între” primul și ultimul widget la ambele capete, oferind o distanță egală între toate celelalte widget-uri.

Cu toate acestea, primul și ultimul widget au lățimi diferite, astfel încât spațiul egal poate să nu centreze întotdeauna widgetul nostru intern.

Putem rezolva această problemă ajustând marginile:

• Selectați widgetul Meniu de navigare >> fila „Avansat”
• Deconectați marja și eliminați spațiul cu o valoare negativă

Pasul 4: Faceți antetul să răspundă

Acum, să vedem cum arată versiunea actuală a site-ului nostru pe dispozitivele mobile.

Cele mai bune practici pentru reacția mobilă:

• Simplificați-vă designul și gândiți-vă la modalități de a face aceleași secțiuni receptive, pentru a evita utilizarea de două ori a cantității de cod care va afecta viteza paginii.

Așa cum vedeți în acest antet - Este obișnuit să vedeți aceeași secțiune reproiectată special pentru tablete și dispozitive mobile. Aceasta este ceea ce vedem aici: au fost create două versiuni ale designului: o versiune pentru desktop și una pentru mobil.

În schimb, atunci când designul și codul dvs. sunt receptive, viteza paginii dvs. se îmbunătățește, deoarece va folosi mai puțin cod.

Să vedem cum putem realiza acest lucru, folosind setarea „Lățime personalizată” pentru widget-uri și elemente.

Setarea unei lățimi personalizate pentru tabletă

• Faceți clic pe „Nav Menu” >> fila „Advanced”
• Selectați „Poziționare” >> setați lățimea la „Personalizat”.
• Selectați „%” >> dați widgetului aceeași lățime (în procente) a spațiului gol din jurul său.
• Faceți clic pe fila „Conținut” >> „Toggle Align” >> selectați „Right”.

Acest lucru vă permite să aliniați meniul de comutare oriunde în lățimea widgetului.

Acum să terminăm de personalizat meniul de comutare.

• „Conținut” >> Faceți clic pe comutatorul „Lățime completă” și setați-l la „Da”.
• „Stil” >> Eliminați fundalul trăgând bara „Color Picker” până la stânga.

Acum să vedem cum arată lucrurile pe un ecran mobil.

Definirea unei lățimi personalizate pentru mobil

În acest scenariu, vom păstra cele trei widget-uri de antet în fereastra de vizualizare. Dar rețineți că pentru unele site-uri web ar putea avea mai mult sens să omiteți anumite elemente din antet atunci când sunt vizualizate pe mobil sau tabletă.

În acest caz, ceea ce se întâmplă cu antetul nostru atunci când este afișat pe mobil este că meniul de navigare și widget-urile Logo nu se pot încadra într-un singur rând.

Pentru a rezolva această problemă:

Poziționarea meniului Nav

• Faceți clic pe „Nav Menu” >> fila „Advanced”
• Selectați „Poziționare” >> setați lățimea la „Personalizat”
• Selectați „%” >> Dați widgetului o lățime de 30%, astfel încât să se potrivească lângă sigla noastră

Poziționarea listei de pictograme

• Faceți clic pe „Lista de pictograme” >> fila „Avansat”
• Selectați „Completare” >> Dezagregați valorile
• Adăugați o umplutură de 12 px la „TOP”

Poți să-l crezi?

Antetul nostru era folosit inițial 2 secțiuni, 12 widget-uri și 10 coloane. Acum folosește antetul nostru 1 secțiune, 3 widget-uri și 1 coloană.

Și rezultatul este același!

Pasul 5: Optimizați secțiunea Hero

Să trecem la următoarea secțiune a site-ului nostru: secțiunea erou

Cele mai bune practici pentru secțiunile Hero:

• Asigurați-vă că textul secțiunii eroului dvs. este ușor vizibil, mai ales atunci când are o imagine de fundal.

Controlați poziția widgetului într-o coloană

O greșeală obișnuită pe care o vedem făcută în editorul Elementor este utilizarea coloanelor și spațiilor suplimentare pentru a controla poziționarea unui widget.

În modelul nostru de exemplu, imaginea eroului constă dintr-o secțiune cu o imagine de fundal. Titlul și textul sunt poziționate orizontal, folosind două coloane. Există, de asemenea, un spațiu în interiorul secțiunii pentru a spaționa elementele pe verticală.

Să vedem cum putem crea același design cu o singură secțiune:

• Ștergeți coloana suplimentară din dreapta textului.
• Scoateți distanțierul.

În schimb, pentru a poziționa textul eroului nostru acolo unde dorim, vom folosi opțiunile de aliniere a coloanelor:

• Selectați coloana.
• Setați „Aliniere verticală” la „Mijloc”.
• Accesați fila „Avansat”.
• Selectați „Completare” >> Dezagregați valorile
• Setați Căptușirea dreaptă la 50%.

• Selectați secțiunea.
• Selectați „Înălțime minimă” >> setați-l la 80.

S-a rezolvat contrastul între texte și fundaluri

Este important ca fiecare site web să aibă un contrast bun între text și fundal. Informațiile necitite afectează scorurile site-ului dvs. web și pot alunga și vizitatorii. Oricum ar fi, textul ar trebui să fie întotdeauna clar lizibil.

Există mai multe moduri de a îmbunătăți claritatea unei secțiuni al cărei fundal este o imagine colorată (așa cum vedem în acest șablon):

• Faceți clic pe antetul dvs.
• Mergeți la fila „Stil” >> Selectați „Text shadow”.

Acest lucru va îmbunătăți lizibilitatea textului, făcându-l să se distingă de imaginea de fundal.

O altă modalitate de a vă clarifica textul este să utilizați suprapuneri.

• Selectați secțiunea >> fila „Stil” >> „Suprapunere în fundal”
• Selectați una dintre culorile dvs. generale și jucați-vă cu opacitatea până când obțineți rezultatul dorit

Pasul 6: Optimizați secțiunea cu casete de pictograme

Acum să trecem la următoarea noastră secțiune, unde avem în prezent o secțiune interioară cu patru coloane. În prezent, fiecare coloană include trei widgeturi: Image Widget, Title Widget și Text Editor Widget.

Să vedem cum putem simplifica această secțiune pentru a-i îmbunătăți performanța.

Conținutul zonei de pictograme

• Selectați butonul »Icon Box Widget« din meniul widget și trageți-l în coloană
• Selectați „Caseta pictogramă”
• Arată spre imaginea pictogramei
• Selectați „Descărcați SVG” **
• Introduceți pictograma personalizată

** Notă: Insignele sunt fișiere SVG. Dacă nu ați făcut-o, accesați tabloul de bord WordPress, apoi accesați Elementor >> Setări. Va trebui să activați Activarea descărcărilor de fișiere nefiltrate.

• Tastați „titlul” dvs.
• Tastați „Descriere”
• Selectați „Stil” >> Alegeți o culoare generală
• Selectați „Dimensiune” și trageți bara la dimensiunea dorită
• Selectați „Padding” și trageți bara la numărul dorit

Pasul 8: Optimizați secțiunea „Servicii”

Acum vom reconstrui secțiunea „Servicii”, care folosește în prezent două coloane, două imagini, widgetul de titlu și widgetul editorului de text.

Să creăm același design într-o nouă secțiune, dar cu o singură coloană.

• Creați o nouă secțiune cu o coloană
• În „Aspect” >> setați „Lățimea conținutului” la „Lățimea completă”
• Selectați „Casetă imagine widget” în panoul widget și trageți-o în coloană

(Vom putea integra toate activele secțiunii în acest widget)

• Tastați titlul
• Tastați descrierea

Pentru imagine, vom păstra designul actual pe care l-am folosit pentru imaginile noastre.

• Introduceți aceeași imagine din biblioteca media
• Accesați fila „Conținut” >> Setați „Poziția imaginii” la „Dreapta”

• Accesați fila „Stil”
• Măriți distanța dintre elemente
• Măriți „Lățimea” imaginii
• Extindeți secțiunea „Conținut”
• Alegeți alinierea „centru”
• Setați „Aliniere verticală” la „Mijloc”
• Definiți culorile și fonturile generale la alegere
• Accesați fila „Avansat”
• Adăugați 10% completare în widget

Acum, secțiunea Servicii are același design, dar cu mai puține active.

Pasul 9: Optimizați secțiunea îndemn

Cele mai bune practici pentru linkurile CTA:

• Asigurați-vă că toate linkurile dvs. de socializare funcționează corect și că butonul conține linkul.
• Când adăugați un link către un alt site web, includeți acest atribut: "rel | noopener"

(Puteți face acest lucru făcând clic pe pictograma roată și tastând atributul în „Atribute personalizate”). Aceasta va deschide linkul într-o nouă filă de browser și vă va crește scorul de performanță.

Următoarea secțiune prezintă un apel la acțiune pentru serviciile noastre.

Secțiunea are în prezent două coloane, care conțin:

1. O imagine de fundal cu un distanțier
2. Două antete, o secțiune internă, un editor de text și un buton

Să creăm același design într-o nouă secțiune, dar cu o singură coloană.

• Accesați fila „Aspect” >> setați „Lățimea conținutului” la „Lățimea completă”
• Accesați fila „Avansat” >> Eliminați orice umplere suplimentară

• Selectați „Call To Action Widget” în panoul widget și trageți-l în coloană
• Setați „Poziția imaginii” la „Stânga”
• Selectați imaginea din biblioteca media
• Extindeți secțiunea „Conținut”
• Tastați antetul
• Tastați descrierea
• Tastați textul butonului

• Accesați fila „Stil”
• Adăugați „Padding” între elemente
• Reglați lățimea imaginii
• Extindeți secțiunea „Conținut”
• Selectați fontul global pentru titlul dvs.
• Măriți spațiul dintre descriere și buton
• Alegeți culorile globale potrivite pentru fiecare resursă
• Extindeți secțiunea „Buton”
• Setați dimensiunea sa la „Mare”
• Personalizați-l în funcție de nevoile dvs., cum ar fi culoarea de fundal și raza chenarului

Până acum a fost o secțiune cu 2 coloane cu 6 widget-uri. Acum este o secțiune cu 1 coloană, cu doar 1 widget!

Pasul 10: Optimizați caruselul de imagine

Designul actual al secțiunii noastre Carusel de imagine are o greșeală obișnuită cu modul în care afișează mai multe imagini.

Acest design este format din 5 coloane, o practică pe care mulți utilizatori tind să o facă pentru a controla dimensiunea imaginilor lor.

Să explorăm un mod mai simplu care va optimiza, de asemenea, performanța site-ului dvs. web.

• Creați o nouă secțiune cu 1 coloană
• Accesați fila „Aspect” >> setați „Lățimea conținutului” la „Lățimea completă”
• Selectați butonul »Image Carousel Widget« din panoul widget și trageți-l în coloană
• Adăugați imaginile dorite din biblioteca media

• Accesați fila „Conținut”
• Setați „Dimensiune imagine” la „Mediu - 300 x 300”
• Ajustați „Diapozitive pentru afișare”, „Diapozitive pentru derulare” și „Navigare” în funcție de preferințe

• Accesați fila „Stil”
• Setați „Aliniere verticală” la „Centru”
• Personalizați „Spațiere”

• Accesați fila „Avansat”
• Adăugați umplutura necesară

Ceea ce a fost odată o secțiune cu 5 coloane este acum doar 1 coloană.

Să trecem la următoarea secțiune, unde putem optimiza videoclipurile de pe site-ul nostru.

Pasul 11: Optimizați secțiunea video

Cele mai bune practici pentru conținutul video:

• Utilizați Lazy Load ori de câte ori este posibil, pentru a îmbunătăți timpul de încărcare a site-urilor dvs. web.

Ce se întâmplă când aplicăm opțiunea „Lazy Load”?

Din punct de vedere tehnic, codul video încorporat este înlocuit cu o imagine statică. În acest fel, videoclipul se încarcă numai atunci când utilizatorul dă clic pe imagine - ceea ce ajută cu adevărat la timpul nostru de încărcare a paginii.

Ceea ce vom face acum este să schimbăm modul în care folosim Widget-ul video, astfel încât să nu întârzie viteza paginii sau performanța site-ului.

• Selectați „Widgetul video”
• Accesați fila „Stil”
• Selectați „Încărcare leneșă”

Pasul 12: Optimizați subsolul și mențineți-l actualizat

O greșeală obișnuită observată pe multe site-uri web este că subsolul lor folosește mai multe antete pentru dată și descriere, precum și o pictogramă pentru simbolul drepturilor de autor.

Să vedem cum să optimizăm subsolul și să ne asigurăm că acesta rămâne mereu actualizat.

Vom configura acest proces de actualizare continuă folosind Etichete dinamice. În acest fel, nu va trebui să schimbăm conținutul antetului în fiecare an, deoarece etichetele dinamice se vor actualiza automat la anul curent.

Pentru a face acest lucru, vom proceda după cum urmează:

• Eliminați widgeturile suplimentare, lăsând doar widgetul Title
• Selectați widgetul Title
• Faceți clic pe simbolul „Etichete dinamice” din dreapta câmpului „Titlu” (cunoscut și sub numele de „Buton părinte”

• Din meniul derulant, selectați elementul de meniu „Data și ora curente”
• Faceți clic pe pictograma părinte a cheii
• Faceți clic pe fila „Format dată” și selectați elementul de meniu „Personalizat”
• Ștergeți ceea ce se află în prezent în câmpul „Format personalizat”, cu excepția „Y”
• Selectați fila „Avansat”
• Evidențiați câmpul „Înainte” și țineți apăsate simultan tastele „opțiune” și „G” (sau „control”, alt ”și„ C ”simultan) pentru a tasta simbolul„ © ”.
• Adăugați un spațiu după „©”

• Selectați câmpul „După”
• Tastați un spațiu și scrieți textul pe care doriți să-l apară după an, cum ar fi „Toate drepturile rezervate”

Este posibil să observați că în exemplul site-ului web din acest tutorial, fiecare widget are propria secțiune. Am făcut acest lucru pentru a face tutorialul mai clar și mai ușor de urmat.

În mod ideal, cu cât aveți mai puține secțiuni, cu atât veți avea mai puțin COD HTML suplimentar.

Puteți îmbina unele widget-uri în aceeași secțiune trăgându-le în secțiunea de mai sus și apoi ștergând secțiunea goală.

Și atât, aspectul dvs. este optimizat!

Evaluare nouă a performanței site-ului web

Vom verifica rezultatele în fereastra DevTools (Inspector):

• Selectați fila „Rețea”:

Aici sunt câteva schimbări frumoase și pozitive:

• Site-ul durează acum 568 de milisecunde pentru încărcare
• Am trecut de la 81 de cereri la 46
• Selectați fila „Far”, unde veți vedea că scorul nostru de performanță a crescut de la 73 la 98

Rețineți că ne-am optimizat performanța fără a utiliza pluginuri terțe. Tot ce a fost nevoie a fost modificări simple și cele mai bune practici.

Pasul 13: Testați rezultatele cu efecte de mișcare

Vrem să facem site-ul nostru mai interactiv și mai distractiv, dar cum va afecta acest lucru scorurile noastre de performanță? Să vedem ce putem face.

Faceți din antet un element „fix”:

• Selectați antetul
• Accesați fila „Avansat”
• Extindeți fila „Efecte de mișcare”
• Setați opțiunea „Sticky” la „Top”

Faceți din secțiunea erou un element „fix”:

• Selectați secțiunea erou
• Accesați fila „Stil”
• Selectați lista verticală „Atașament” și selectați „Fix”

Utilizați a Animatie de intrare pentru textul eroului (antet):

• Selectați widgetul Antet
• Accesați fila „Avansat”
• Extindeți fila „Efecte de mișcare”
• Selectați Animație de intrare și setați-o pe „Fade In”

Utilizați o animație de intrare pentru descrierea textului eroului (widget Editor text):

• Selectați widgetul Editor text
• Accesați fila „Avansat”
• Extindeți fila „Efecte de mișcare”
• Selectați „Animație de intrare” și setați-o la „Fade In”

Faceți același lucru pentru widget-urile care vin după, pentru efecte subtile la încărcarea paginii.

Acum, să rulăm din nou testul de performanță, pentru a vedea cum efectele mișcării ne-au afectat scorul:

• Reveniți la fereastra „Inspector”
• Selectați fila „Far”
• Faceți clic pe „Generați un raport”

Acum vedem că scorul nostru de performanță a fost redus la 97 - cu siguranță nu este o mare diferență și face site-ul web mai interesant și mai distractiv.

Îți vine să crezi noul nostru scor de performanță?

Suntem încântați să fiți acum complet echipat pentru a vă crește scorul de performanță de pe fiecare site web Elementor pe care îl creați. Acesta va face o mare diferență în obiectivele dvs. de construire a site-ului web și în succesul afacerii dvs.

Vă sugerăm să marcați acest tutorial pentru referințe viitoare, astfel încât să puteți examina performanța paginilor site-ului dvs. web și să aplicați cele mai bune practici pentru a vă optimiza aspectul.

Și acesta este doar începutul - următoarea parte a acestui curs acoperăoptimizarea imaginii.

În tutorial, vom parcurge fiecare imagine din site-ul web eșantion și vom învăța cum să le îmbunătățim pentru timpi de încărcare și mai eficienți.

Obțineți Elementor Pro acum!

Concluzie

Asa de ! Asta este pentru acest articol care vă arată cum să vă optimizați aspectul site-ului web cu Elementor. Dacă aveți nelămuriri despre cum să ajungeți acolo, anunțați-ne în termen comentarii.

Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.

...