Si të optimizoni paraqitjen e faqes tuaj në internet me Elementor

Dëshironi të dini se si të optimizoni paraqitjen e faqes suaj të internetit me Elementor ?

Optimizimi i performancës së faqes në internet është një nga aspektet më të rëndësishme të saj përvoja e përdoruesitMe Një faqe në internet e ngarkimit të ngadaltë mund të zhgënjejë çdo përdorues, shpesh duke rezultuar në një norma e fryrjes të larta të cilat mund të ndikojnë negativisht në suksesin e biznesit tonë.

Performanca e faqes së internetit mund të ndikohet nga shumë faktorë, për shembull: madhësi të mëdha të imazhit, konfigurime të serverit, shumë shtojca, ndër faktorë të tjerë.

Performanca e faqes në internet është një nga vlerat tona më të forta si krijues të uebit. Kjo është arsyeja pse ne e krijuam këtë kurs në 5 pjesë.

Tani mund të mësoni se si të krijoni paraqitje dhe postime duke përdorur teknika optimale. Kjo njohuri do të sigurojë që faqet tuaja të internetit nuk do të përfshijnë seksione, kolona ose widget të tepërta që thjesht nuk janë të nevojshme. Ne gjithashtu do të eksplorojmë disa veçori të integruara të widget-it për të përmirësuar kohën e ngarkimit.

Deri në fund të këtij tutoriali, do të jeni plotësisht gati për të optimizuar performancën e çdo faqe interneti Elementor ju krijoni dhe korrni menjëherë shpërblimet.

Mësimi 1: Praktikat më të mira të Optimizimit të Layout

Në mësimin tonë të parë, ne do të mbulojmë mënyrën më efikase për të krijuar faqet dhe postimet tuaja në redaktues Elementor. Shpesh shohim përdorimin e shumë seksioneve, kolonave, seksioneve të brendshme dhe miniaplikacioneve, kur e njëjta paraqitje mund të ishte arritur duke përdorur shumë më pak elementë.

Përdorimi i sasive të tepërta të elementeve ngadalëson performancën e faqes tuaj të internetit, kështu që le të zhyteni dhe të mësojmë se si të krijojmë faqe në internet me Elementor në mënyrën më efikase.

Ne do të mbulojmë temat e mëposhtme:

• Një vështrim më i afërt në strukturën e një faqeje të saktë
• Shikimi dhe testimi i performancës së faqes tuaj të internetit
• Optimizimi i përmbajtjes së kokës, faqeve dhe faqeve tuaja
• Shembuj të praktikave të mira dhe të këqija të paraqitjes së faqes në internet
• Përdorimi i saktë i widget -ve, pozicionimi dhe stilet globale
• Këshilla për të shmangur vonesën e ngarkesës, përmirësoni SEO dhe rrit kohën e ngarkimit
• Optimizimi i aksesueshmërisë
• Reduktimi i sasisë së elementeve DOM
• Edhe me shume !

Për të kuptuar më mirë paraqitjet optimale në Elementor, ne do të eksplorojmë një model Elementor që tregon abuzimet e zakonshme të seksioneve, kolonave dhe pajisjeve. Deri në fund të këtij mësimi, ne do të kemi rindërtuar plotësisht të gjithë këtë faqe duke zvogëluar numrin e kolonave dhe pajisjeve. Faqja jonë fillestare përbëhet nga nëntë seksione, 31 kolona, ​​pesë seksione të brendshme dhe 44 pajisje shtesë.

Deri në fund të mësimit, faqja jonë e optimizuar do të reduktohet në gjashtë seksione, shtatë kolona dhe 16 pajisje shtesë.

Ne do të përdorim dritën falas, falas Përshëndetje Temadhe ne do të rikrijojmë çdo pjesë të shabllonit dhe do të përmirësojmë performancën e përgjithshme të faqes në internet duke përdorur praktikat më të mira.

Testimi për praktikat e këqija

Përpara se të zhytemi në optimizimin e paraqitjes së faqes në internet, le të bëjmë një test në faqen tonë për të kuptuar plotësisht se çfarë ndodh kur dikush viziton faqen tonë të internetit. Pasi të jenë bërë të gjitha optimizimet tona, ne do të përsërisim testin dhe do të krahasojmë rezultatet.

Hapi 1: Verifikoni uebfaqen tuaj në një dritare të fshehtë

• Hapni një dritare të re në "Modaliteti Incognito" dhe shkruani URL -në e faqes së internetit që po testoni.

Hapi 2: Verifikoni që jeni duke përdorur rrugën e drejtpërdrejtë të URL -së

Nëse nuk jeni të sigurt për lidhjen e faqes tuaj, mund ta gjeni lehtësisht duke shkuar në pultin tuaj WP:

• Klikoni në "Faqet" për të parë të gjitha faqet në faqen tuaj të internetit.
• Vendoseni kursorin mbi faqen tuaj dhe klikoni në opsionin "Shiko". Kjo do t'ju çojë drejtpërdrejt në faqen tuaj.
• Kopjoni dhe ngjisni këtë URL në dritaren e fshehtë dhe sapo të ngarkohet faqja e internetit, jeni gati ta provoni!

Testimi dhe Shikimi i Rezultateve të Performancës

Hapi 1: Testoni rezultatet e performancës

Ju mund të keni përdorur Mjetet e Zhvilluesit të Chrome në të kaluarën.

Nëse jo, për të inspektuar dhe shfaqur përmbajtjen HTML dhe CSS të faqes tuaj:

• Klikoni me të djathtën kudo në faqen tuaj dhe klikoni zgjidhni "Inspect." Do të shihni disa skeda ku mund të lexoni HTML dhe CSS tuaj, të gjeni gabime, të merrni rezultate SEO dhe të bëni teste të ndryshme.
• Zgjidhni skedën Rrjeti dhe shtypni butonat cmd ose ctrl + R për të ngarkuar rezultatet.

Siç mund ta shihni, paraqitja jonë aktuale kërkon 2,88 sekonda për të ngarkuar dhe kryen 81 kërkesa.

Hapi 2: Shikoni Rezultatet e Performancës

• Kaloni në skedën Lighthouse, ku mund të drejtojmë një raport auditimi në faqen tonë.

Kjo do të na japë më shumë informacion mbi performancën aktuale të faqes.

• Zgjidhni "Gjeneroni Raportin". Pas disa çastesh, raporti juaj do të shfaqet.

Ne aktualisht po marrim një vlerësim të performancës prej 73/100, të cilin me siguri mund të punojmë.

Në mënyrë ideale, ne do të dëshironim që të gjithë këta numra të ishin të gjelbër. Tani le të kalojmë në optimizimin e faqes sonë dhe përmirësimin tonë të dhëna statistikore.

Mbani në mend se pas çdo hapi optimizimi që bëjmë, ne mund të marrim disa praktika më të mira nga ndryshimet dhe t'i kemi parasysh ato për faqet e internetit të ardhshme që krijojmë.

Optimizimi i elementeve të faqes

Hapi 1: Optimizoni titullin

Le të fillojmë me arkitra.

Siç mund ta shihni në këtë dizajn, titulli është bërë me tre kolona.

Në kolonën e parë, logoja jonë përbëhet nga dy pajisje shtesë:

1. Un Miniaplikacioni i imazhit i cili shfaq një skedar imazhi .png të logos sonë
2. Një widget Titulli.

Në kolonën e dytë, menyja e kokës përbëhet nga widget -i i menysë së navigimit.

Kolona e tretë përmban:

1. Një widget i Seksionit të brendshëm (i cili kontrollon pozicionin e widget Icon).
2. Detajet tona të kontaktit për Titullin

Le të shohim se si mund të minimizojmë numrin e seksioneve, widget -eve dhe seksioneve këtu.

Hapi 2: Krijoni titullin e ri

Kolona 1:

• Krijoni 1 seksion vetëm me 1 kolonë.
• Shtoni Widget i Logos së Uebfaqes dhe tërhiqeni atë në seksion.

Praktikat më të mira për imazhet:

• Jepini secilit skedar imazhi në faqen tuaj të internetit një titull përkatës dhe tekst alt në bibliotekën e mediave.

Kjo do të përmirësojë aksesueshmërinë e faqes tuaj dhe renditjen e motorit tuaj të kërkimit. Në logon që kemi përdorur fillimisht, titulli është i parëndësishëm për imazhin aktual dhe nuk ka tekst alt.

• Përcaktoni dimensionet e figurës brenda widget.

Kjo lejon që faqja të shtrohet me hapësirën e duhur para se të ngarkohen imazhet, duke shmangur vonesën e paraqitjes (një faktor i matur nga shfletuesit).

Në shembullin që po punojmë së bashku, zgjidh këtë problem duke shkuar te skeda Style dhe duke vendosur gjerësinë e imazhit në 200px.

kolonë 2

Kthehuni te paneli i veglave:

• Zvarritni dhe lëshoni miniaplikacionin e menysë së lundrimit nën logon
• Vendosni treguesin në "Asnjë"
• Shkoni në skedën "Stili" dhe shtoni fontin e preferencës tuaj (në mënyrë që të përputhet me modelin tonë të mëparshëm)

Praktikat më të mira për stilimin e përgjithshëm:

• Shmangni përdorimin e më shumë se 2 shkronjave të ndryshme që përfshijnë pesha të shumta (Fontet globale).
• Shmangni zgjedhjen e ngjyrave të ndryshme për secilin artikull me zgjedhësin e ngjyrave (Ngjyrat globale).
• Përmirësoni shpejtësinë e ngarkimit të faqes tuaj në internet duke gjeneruar më pak pyetje (shkronja të përgjithshme).
• Përsëriteni kodin e panevojshëm dy herë (ngjyra globale).
• Mbani konsistencën dhe kontrollin e modelit tuaj (stili i përgjithshëm).

Fontet globale:

Kjo mund të bëhet duke përdorur funksionin Global Fonts:

• Shkoni te skedari "Stili" dhe shtoni fontin tuaj të preferuar (në mënyrë që të përputhet me modelin tonë të mëparshëm) duke zgjedhur një, bëni një ndryshim të vogël dhe rri pezull mbi ikonën plus.
• Klikoni në ikonën plus dhe zgjidhni familjen e shkronjave që ju nevojiten
• Ruani stilet që do të përdorni në shabllon si shkronja globale

Atëherë mund ta përdorni këtë stil në çdo widget që krijoni.

Ngjyrat globale:

E njëjta metodë mund të përdoret për ngjyrat tuaja të përgjithshme:

• Klikoni në "Global"
• Rri pezull mbi zgjedhësin e ngjyrave dhe kliko mbi të
• Zgjidhni një ngjyrë dhe drejtojeni ikonën plus
• Klikoni në "Global" >> zgjidhni "Principal"

Pasi ta keni bërë këtë, ngjyra do të ruhet në gamën e ngjyrave të shabllonit tuaj, kështu që ju mund ta zgjidhni atë nga lista juaj e Ngjyrave Globale sa herë që keni nevojë për një artikull ose widget.

Para se të vazhdojmë me kokën tonë, le të vendosim mbushjen vertikale në zero.

Hapi 3: Redaktoni titullin

Kolona 3

• Shkoni te paneli "Widgets"
• Zvarritni miniaplikacionin e listës së ikonave nën meny.
• Hiq artikujt shtesë të listës
• Shtoni tekstin tuaj
• Zgjidhni ikonën e zgjedhjes suaj
• Shkoni te skeda "Stili"
• Përcaktoni ngjyrat dhe fontet e përgjithshme të zgjedhjes suaj

Tani duhet të rregullojmë një gjë tjetër - tre elementët e kokës aktualisht janë të grumbulluar dhe nuk janë të rreshtuar me njëri -tjetrin. Ne mund ta zgjidhim këtë problem duke ndryshuar gjerësinë e secilit element në madhësinë e tij aktuale, në mënyrë që të mos marrë të gjithë hapësirën në kolonë.

Për të zgjidhur këtë problem:

• Zgjidhni miniaplikacionin e logos së faqes >> skeda 'Avancuar'
• Zgjidhni "Pozicionimi" dhe vendosni gjerësinë e tij në "Inline"

Përsëriteni këtë hap të saktë për miniaplikacionin e Menysë së Lundrimit dhe për miniaplikacionin Lista e Ikonave.

Tani që të gjithë elementët e kokës janë në linjë, gjithçka që mbetet është t'i pozicionojmë ato në mënyrë korrekte.

Përcaktimi i pozicionimit të kolonës me elementë të brendshëm

• Zgjidhni kolonën tuaj >> shkoni te skeda "Layout"
• Në "Shtrirja vertikale", zgjidhni "Në fund"
• "Në shtrirjen horizontale" zgjidhni "Hapësira midis"

Zgjidhni shtrirjen "Hapësira mes" pozicionin e miniaplikacionit të parë dhe të fundit në të dy skajet, duke dhënë hapësirë ​​të barabartë midis të gjitha pajisjeve të tjera.

Sidoqoftë, widget -et e parë dhe të fundit kanë gjerësi të ndryshme, kështu që hapësira e barabartë mund të mos jetë gjithmonë në qendër të widget -it tonë të brendshëm.

Ne mund ta zgjidhim këtë problem duke rregulluar kufijtë:

• Zgjidhni miniaplikacionin e Menysë së Lundrimit >> Skeda “Advanced”
• Zhvendosni margjinën dhe hiqni distancën me një vlerë negative

Hapi 4: Bëj që titulli të përgjigjet

Tani le të shohim se si duket versioni aktual i faqes sonë të internetit në pajisjet mobile.

Praktikat më të mira për reagimin ndaj celularëve:

• Thjeshtoni modelin tuaj dhe mendoni mënyra për t'i bërë të njëjtat seksione të përgjegjshme, për të shmangur përdorimin e dyfishit të sasisë së kodit që do të ndikojë në shpejtësinë e faqes tuaj.

Ashtu siç shihni në këtë titull - commonshtë e zakonshme të shihni të njëjtën pjesë të ridizajnuar posaçërisht për tabletët dhe pajisjet mobile. Kjo është ajo që ne shohim këtu: u krijuan dy versione të dizajnit: një version për desktop dhe një për celular.

Në vend të kësaj, kur dizajni dhe kodi juaj janë të përgjegjshëm, shpejtësia e faqes tuaj përmirësohet sepse do të përdorë më pak kod.

Le të shohim se si mund ta arrijmë këtë, duke përdorur cilësimin "Gjerësia e personalizuar" për pajisjet dhe elementët tanë.

Vendosja e një gjerësie të personalizuar për tabletin

• Klikoni në butonin 'Nav Menu' >> skedën 'Advanced'
• Zgjidhni "Pozicionimi" >> vendosni gjerësinë në "Custom".
• Zgjidhni "%" >> jepini widget -it të njëjtën gjerësi (në përqindje) të hapësirës boshe rreth tij.
• Klikoni në skedën "Përmbajtja" >> "Ndrysho rreshtimin" >> zgjidhni "E Djathtë".

Kjo ju lejon të rreshtoni menunë e kalimit kudo brenda gjerësisë së widget.

Tani le të përfundojmë personalizimin e menysë ndërruese.

• "Përmbajtja" >> Klikoni në çelësin "Gjerësia e plotë" dhe vendoseni në "Po".
• "Stili" >> Hiq sfondin duke zvarritur shiritin "Zgjedhësi i ngjyrave" deri në të majtë.

Tani le të shohim se si duken gjërat në një ekran celular.

Përcaktimi i një gjerësie të personalizuar për celularin

Në këtë skenar, ne do t'i mbajmë tre widget -et e kokës brenda portës së shikimit. Por mbani në mend se për disa faqe në internet mund të ketë më shumë kuptim të hiqni disa elemente nga titulli kur shikohen në celular ose tabletë.

Në këtë rast, ajo që ndodh me kokën tonë kur shfaqet në celular është se Menyja e Navigacionit dhe widget -et e Logos nuk mund të futen në një rresht të vetëm.

Për të zgjidhur këtë problem:

Pozicionimi i menysë Nav

• Klikoni në "Nav Menu" >> skedën "Advanced"
• Zgjidhni "Pozicionimi" >> vendosni gjerësinë në "Custom"
• Zgjidhni "%" >> Jepini widget -it një gjerësi prej 30%, në mënyrë që të përshtatet pranë logos sonë

Pozicionimi i listës së ikonave

• Klikoni në butonin "Lista e ikonave" >> '' Advanced '
• Zgjidhni "Plotëso" >> Ndarja e vlerave
• Shto mbushje 12px në "TOP"

Mund t'a besosh?

Koka jonë e përdorur fillimisht 2 seksione, 12 widget dhe 10 kolona. Tani përdor kokën tonë 1 seksion, 3 widget dhe 1 kolonë.

Dhe rezultati është i njëjtë!

Hapi 5: Optimizoni seksionin Hero

Le të kalojmë në pjesën tjetër të faqes sonë të internetit: seksionin hero

Praktikat më të mira për Seksionet Hero:

• Sigurohuni që teksti i seksionit tuaj hero është lehtësisht i dukshëm, veçanërisht kur ka një imazh të sfondit.

Kontrolloni pozicionin e widget -it në një kolonë

Një gabim i zakonshëm që shohim të bërë në redaktuesin Elementor është përdorimi i kolonave dhe hapësirave shtesë për të kontrolluar pozicionimin e një widget.

Në modelin tonë shembullor, tonë imazh heroi përbëhet nga një seksion me një imazh të sfondit. Titulli dhe teksti pozicionohen horizontalisht, duke përdorur dy kolona. Ekziston gjithashtu një ndarës brenda seksionit për të ndarë elementët vertikalisht.

Le të shohim se si mund të krijojmë të njëjtin dizajn me vetëm një seksion:

• Fshini kolonën shtesë në të djathtë të tekstit.
• Hiqeni ndarësin.

Në vend të kësaj, për të pozicionuar tekstin tonë hero aty ku duam, ne do të përdorim opsionet e shtrirjes së kolonave:

• Zgjidh kolonën.
• Vendosni "Shtrirjen Vertikale" në "Mesme".
• Shkoni te skedari "Avancuar".
• Zgjidhni "Plotëso" >> Ndarja e vlerave
• Vendosni mbushjen e djathtë në 50%.

• Zgjidhni seksionin.
• Zgjidhni "Lartësia minimale" >> vendoseni në 80.

Rregullimi i kontrastit midis teksteve dhe prejardhjeve

Shtë e rëndësishme që çdo faqe në internet të ketë një kontrast të mirë midis tekstit dhe sfondit. Informacioni i palexueshëm ndikon në rezultatet e faqes suaj të internetit dhe gjithashtu mund t'i largojë vizitorët. Sido që të jetë, teksti duhet të jetë gjithmonë i lexueshëm.

Ka disa mënyra për të përmirësuar qartësinë e një seksioni, sfondi i të cilit është një imazh me ngjyrë (siç e shohim në këtë shabllon):

• Klikoni në kokën tuaj.
• Shkoni te skeda "Stili" >> Zgjidhni "Hija e tekstit".

Kjo do të përmirësojë lexueshmërinë e tekstit duke e bërë atë të dallohet nga imazhi i tij në sfond.

Një mënyrë tjetër për ta bërë tekstin tuaj më të qartë është përdorimi i mbivendosjeve.

• Zgjidhni seksionin >> skeda 'Stili' >> 'Mbivendosja e sfondit'
• Zgjidhni një nga ngjyrat tuaja të përgjithshme dhe luani me errësirën derisa të arrini rezultatin që dëshironi

Hapi 6: Optimizoni pjesën me kutitë e ikonave

Tani le të kalojmë në pjesën tonë tjetër, ku aktualisht kemi një seksion të brendshëm me katër kolona. Aktualisht, secila kolonë ka tre widget: Image Widget, Titulli Widget dhe Text Editor Widget.

Le të shohim se si mund ta thjeshtojmë këtë seksion për të përmirësuar performancën e tij.

Përmbajtja e zonës së ikonës

• Zgjidhni butonin »Kutia e ikonës së widget -it« në menunë e widget -it dhe tërhiqeni atë në kolonë
• Zgjidhni "Kutinë e ikonave"
• Drejtoni imazhin e ikonës
• Zgjidhni "Shkarkoni SVG" **
• Futni ikonën tuaj të personalizuar

** Shënim: Shenjat janë skedarë SVG. Nëse nuk e keni bërë, shkoni te pulti i WordPress, pastaj shkoni te Elementor >> Cilësimet. Ju do të duhet të aktivizoni Aktivizoni shkarkimet e skedarëve të pafiltruar.

• Shkruani "titullin" tuaj
• Shkruani "Përshkrimin" tuaj
• Zgjidhni "Stili" >> Zgjidhni një ngjyrë të përgjithshme
• Zgjidhni "Size" dhe tërhiqeni shiritin në madhësinë e zgjedhjes suaj
• Zgjidhni "Mbushje" dhe tërhiqeni shiritin në numrin e zgjedhur nga ju

Hapi 8: Optimizoni seksionin "Shërbimet"

Tani do të rindërtojmë seksionin "Shërbimet", i cili aktualisht përdor dy kolona, ​​dy imazhe, widget -in e titullit dhe widget -in e redaktuesit të tekstit.

Le të krijojmë të njëjtin model në një seksion të ri, por me vetëm një kolonë.

• Krijoni një seksion të ri me një kolonë
• Në "Layout" >> vendosni "Content Width" në "Full Width"
• Zgjidhni "Widget Image Box" në panelin e widget -it dhe tërhiqeni atë në kolonë

(Ne do të jemi në gjendje të integrojmë të gjitha asetet e seksionit në këtë widget)

• Shkruani Titullin
• Shkruani përshkrimin

Për imazhin, ne do të ruajmë modelin aktual që kemi përdorur për imazhet tona.

• Futni të njëjtën imazh nga biblioteka e mediave
• Shkoni te skedari "Përmbajtja" >> Vendosni "Pozicionin e Imazhit" në "Djathtas"

• Shkoni te skeda "Stili"
• Rritni distancën midis elementeve
• Rritni "Gjerësinë" e figurës
• Zgjero seksionin "Përmbajtja"
• Zgjidhni shtrirjen "qendër"
• Vendosni "Shtrirjen vertikale" në "Mesme"
• Përcaktoni ngjyrat dhe fontet e përgjithshme të zgjedhjes suaj
• Shkoni te skedari "Avancuar"
• Shtoni 10% mbushje në widget

Tani seksioni Shërbimet ka të njëjtin dizajn, por me më pak pasuri.

Hapi 9: Optimizoni seksionin e thirrjes për veprim

Praktikat më të mira për lidhjet CTA:

• Sigurohuni që të gjitha lidhjet tuaja të mediave sociale të funksionojnë siç duhet dhe butoni përmban lidhjen.
• Kur shtoni një lidhje në një uebfaqe tjetër, përfshini këtë atribut: "rel | noopener"

(Ju mund ta bëni këtë duke klikuar në ikonën e ingranazhit dhe duke shtypur atributin në "Atributet e personalizuara"). Kjo do të hapë lidhjen në një skedë të re të shfletuesit dhe do të rrisë rezultatin tuaj të performancës.

Seksioni i mëposhtëm paraqet një thirrje për veprim për shërbimet tona.

Seksioni aktualisht ka dy kolona, ​​të cilat përmbajnë:

1. Një imazh në sfond me një ndarës
2. Dy tituj, një seksion i brendshëm, një redaktues teksti dhe një buton

Le të krijojmë të njëjtin model në një seksion të ri, por me vetëm një kolonë.

• Shkoni te skedari "Paraqitja" >> vendosni "Gjerësia e Përmbajtjes" në "Gjerësi e plotë"
• Shkoni te skedari "Avancuar" >> Hiqni çdo mbushje shtesë

• Zgjidhni "Widget e Thirrjes në Veprim" në panelin e widget -it dhe tërhiqeni atë në kolonë
• Vendosni "Pozicionin e Imazhit" në "Majtas"
• Zgjidhni imazhin tuaj nga biblioteka e mediave
• Zgjero seksionin "Përmbajtja"
• Shkruani kokën
• Shkruani përshkrimin
• Shkruani tekstin e butonit

• Shkoni te skeda "Stili"
• Shtoni "Mbushje" midis elementeve
• Rregulloni gjerësinë e figurës
• Zgjero seksionin "Përmbajtja"
• Zgjidhni fontin global për titullin tuaj
• Rritni hapësirën midis përshkrimit dhe butonit
• Zgjidhni ngjyrat globale të përshtatshme për secilin burim
• Zgjero seksionin "Button"
• Vendosni madhësinë e tij në "Large"
• Përshtateni atë sipas nevojave tuaja, të tilla si ngjyra e sfondit dhe rrezja e kufirit

Deri më tani ka qenë një seksion me 2 kolona me 6 widget. Tani është një seksion me 1 kolonë me vetëm 1 widget!

Hapi 10: Optimizoni Karuselin e Imazhit

Dizajni aktual i seksionit tonë Carousel Image ka një gabim të zakonshëm me mënyrën se si shfaq imazhe të shumta.

Ky dizajn përbëhet nga 5 kolona, ​​një praktikë që shumë përdorues priren ta bëjnë për të kontrolluar madhësinë e imazheve të tyre.

Le të eksplorojmë një mënyrë më të thjeshtë që gjithashtu do të zgjedh performancën e faqes suaj të internetit.

• Krijoni një seksion të ri me 1 kolonë
• Shkoni te skedari "Paraqitja" >> vendosni "Gjerësia e Përmbajtjes" në "Gjerësi e plotë"
• Zgjidhni butonin »Figura Carousel Widget« nga paneli i widget -it dhe tërhiqeni atë në kolonë
• Shtoni imazhet e dëshiruara nga biblioteka e mediave

• Shkoni te skedari "Përmbajtja"
• Vendosni "Madhësinë e Imazhit" në "Mesatare - 300 x 300"
• Rregulloni "Rrëshqitjet për të shfaqur", "Rrëshqitjet për të lëvizur" dhe "Lundrimi" sipas preferencave tuaja

• Shkoni te skeda "Stili"
• Vendosni "Shtrirjen vertikale" në "Qendra"
• Rregulloni "Hapësirën"

• Shkoni te skedari "Avancuar"
• Shtoni mbushjen e nevojshme

Ajo që dikur ishte një seksion me 5 kolona tani është vetëm 1 kolonë.

Le të kalojmë në pjesën tjetër, ku mund të zgjedhim videot në faqen tonë të internetit.

Hapi 11: Optimizoni seksionin e videos

Praktikat më të mira për përmbajtjen e videos:

• Përdorni Lazy Load kurdo që të jetë e mundur, në mënyrë që të përmirësoni kohën e ngarkimit të faqeve tuaja të internetit.

Çfarë ndodh kur aplikojmë opsionin "Lazy Load"?

Duke folur teknikisht, kodi i futjes së videos zëvendësohet me një imazh statik. Në këtë mënyrë videoja ngarkohet vetëm kur përdoruesi klikon në imazh - gjë që me të vërtetë ndihmon me kohën e ngarkimit të faqes sonë.

Ajo që ne do të bëjmë tani është të ndryshojmë mënyrën e përdorimit të Video Widget, në mënyrë që të mos vonojë shpejtësinë e faqes sonë ose performancën e faqes në internet.

• Zgjidhni "Video widget"
• Shkoni te skeda "Stili"
• Zgjidhni "Ngarkesa dembele"

Hapi 12: Optimizoni fundin dhe mbajeni të përditësuar

Një gabim i zakonshëm i parë në shumë faqe në internet është se fusha e tyre përdor tituj të shumtë për datën dhe përshkrimin, si dhe një ikonë për simbolin e të drejtës së autorit.

Le të shohim se si të zgjedhim fundin dhe të sigurohemi që ai të jetë gjithmonë i përditësuar.

Ne do të konfigurojmë këtë proces të azhurnimit të vazhdueshëm duke përdorur Etiketat dinamikeMe Në këtë mënyrë, nuk do të kemi nevojë të ndryshojmë përmbajtjen e titullit çdo vit, pasi etiketat dinamike do të azhurnohen automatikisht në vitin aktual.

Për ta bërë këtë, ne do të veprojmë si më poshtë:

• Hiqni widget -et shtesë, duke lënë vetëm widget -in e Titullit
• Zgjidhni widget -in Title
• Klikoni në simbolin "Etiketat Dinamike" në të djathtë të fushës "Titulli" (i njohur gjithashtu si "butoni i prindit")

• Nga menyja zbritëse, zgjidhni artikullin e menysë "Data dhe ora aktuale"
• Klikoni në ikonën e prindit të çelësit
• Klikoni në skedën "Formati i datës" dhe zgjidhni artikullin e menusë "Custom"
• Fshini atë që është aktualisht në fushën "Format i personalizuar", përveç "Y"
• Zgjidhni skedën "Të avancuar"
• Theksoni fushën "Përpara" dhe mbani të shtypur çelësat "opsion" dhe "G" njëkohësisht (ose "kontroll", alt "dhe" C "njëkohësisht) për të shtypur simbolin" © ".
• Shtoni një hapësirë ​​pas "©"

• Zgjidhni fushën "Pas"
• Shkruani një hapësirë ​​dhe shkruani tekstin që dëshironi të shfaqet pas vitit, siç është "Të gjitha të drejtat e rezervuara"

Ju mund të vini re se në faqen e internetit shembull në këtë tutorial, çdo widget ka seksionin e vet. Ne e kemi bërë këtë për ta bërë tutorialin më të qartë dhe më të lehtë për t’u ndjekur.

Në mënyrë ideale, sa më pak seksione të keni, aq më pak KOD HTML shtesë do të keni.

Ju mund të bashkoni disa widget në të njëjtin seksion duke i tërhequr dhe hequr ato në pjesën e mësipërme dhe pastaj duke fshirë pjesën e zbrazët.

Dhe kjo është e gjitha, paraqitja juaj është optimizuar!

Vlerësimi i ri i performancës së faqes në internet

Ne do t'i kontrollojmë rezultatet në dritaren DevTools (Inspektor):

• Zgjidhni skedën "Rrjeti":

Ka disa ndryshime të këndshme dhe pozitive këtu:

• Uebfaqes tani i duhen 568 milisekonda për tu ngarkuar
• Ne kaluam nga 81 kërkesa në 46
• Zgjidhni skedën "Lighthouse", ku do të shihni që rezultati ynë i performancës është rritur nga 73 në 98

Mbani në mend se ne kemi optimizuar performancën tonë pa përdorur asnjë shtojcë të palëve të treta. Mjaftoi vetëm rregullime të thjeshta dhe praktika më të mira.

Hapi 13: Testoni rezultatet me efekte lëvizjeje

Ne duam ta bëjmë faqen tonë më interaktive dhe argëtuese, por si do të ndikojë kjo në rezultatet tona të performancës? Le të shohim se çfarë mund të bëjmë.

Bëni titullin një element "të fiksuar":

• Zgjidhni titullin
• Shkoni te skedari "Avancuar"
• Zgjero skedën "Efektet e lëvizjes"
• Vendosni opsionin "Ngjitës" në "Në krye"

Bëni seksionin e heroit një element "të fiksuar":

• Zgjidhni seksionin e heroit
• Shkoni te skeda "Stili"
• Zgjidhni listën zbritëse "Shtojca" dhe zgjidhni "Fiks"

Përdorni një Animacion i hyrjes për tekstin e heroit (kokën):

• Zgjidhni widget -in e Header
• Shkoni te skedari "Avancuar"
• Zgjero skedën "Efektet e lëvizjes"
• Zgjidhni Animacionin Input dhe vendoseni në "Fade In"

Përdorni një animacion hyrës për përshkrimin e tekstit të heroit (widget Editor teksti):

• Zgjidhni widget -in e Redaktuesit të Tekstit
• Shkoni te skedari "Avancuar"
• Zgjero skedën "Efektet e lëvizjes"
• Zgjidhni "Animacionin hyrës" dhe vendoseni në "Fade In"

Bëni të njëjtën gjë për widget -et që vijnë më pas, për efekte delikate kur faqja ngarkohet.

Tani le të bëjmë përsëri testin e performancës, për të parë se si efektet e lëvizjes ndikuan në rezultatin tonë:

• Kthehuni te dritarja "Inspektori"
• Zgjidhni skedën "Lighthouse"
• Klikoni në "Krijo një raport"

Tani shohim që rezultati ynë i performancës është zvogëluar në 97 - kjo nuk është padyshim një ndryshim i madh dhe e bën faqen e internetit më interesante dhe argëtuese.

A mund ta besoni rezultatin tonë të ri të performancës?

Ne jemi të kënaqur që tani jeni të pajisur plotësisht për të rritur rezultatin tuaj të performancës nga çdo faqe në internet Elementor që krijoni. Do të bëjë një ndryshim të madh në qëllimet e ndërtimit të faqes suaj të internetit dhe suksesin e biznesit tuaj.

Ne ju sugjerojmë që ta shënoni këtë udhëzues për referencë në të ardhmen, në mënyrë që të mund të ekzaminoni performancën e faqeve tuaja të internetit dhe të aplikoni praktikat më të mira për të optimizuar paraqitjen tuaj.

Dhe ky është vetëm fillimi - pjesa tjetër e këtij kursi mbulonoptimizimi i imazhit.

Në tutorial, ne do të kalojmë nëpër çdo imazh në faqen e internetit të mostrës dhe do të mësojmë se si t'i përmirësojmë ato për kohë edhe më efikase të ngarkesës.

Merrni Elementor Pro Tani!

Përfundim

Kështu që ! Kjo është ajo për këtë artikull që ju tregon se si të optimizoni paraqitjen e faqes tuaj të internetit me Elementor. Nëse keni ndonjë shqetësim se si të arrini atje, na tregoni brenda komente.

Sidoqoftë, gjithashtu mund të këshilloheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.

Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.

...