Kako optimizirati izgled web stranice pomoću Elementora

Želite znati kako optimizirati izgled svoje web stranice pomoću Elementor ?

Optimiziranje performansi web stranice jedan je od najvažnijih njezinih aspekata korisničko iskustvo. Sporo učitavajuće web mjesto može frustrirati svakog korisnika, što često dovodi do stopa posjeta jednoj stranici visoke što može negativno utjecati na uspjeh našeg poslovanja.

Na izvedbu web stranice mogu utjecati mnogi čimbenici, na primjer: velike veličine slika, konfiguracije poslužitelja, previše dodataka, među ostalim čimbenicima.

Učinkovitost web stranice jedna je od naših najjačih vrijednosti kao kreatora weba. Zato smo ovaj tečaj izradili u 5 dijelova.

Sada možete naučiti kako stvarati izglede i postove koristeći optimalne tehnike. Ovo znanje osigurat će da vaše web stranice neće sadržavati suvišne odjeljke, stupce ili widgete koji jednostavno nisu potrebni. Također ćemo istražiti neke ugrađene značajke widgeta kako bismo poboljšali vrijeme učitavanja.

Do kraja ovog vodiča bit ćete u potpunosti spremni optimizirati izvedbu svake web stranice Elementor stvarate i odmah žanjete plodove.

Lekcija 1: Najbolje prakse za optimizaciju izgleda

U našoj prvoj lekciji pokrit ćemo najučinkovitiji način stvaranja stranica i postova u uređivaču Elementor. Često vidimo upotrebu previše odjeljaka, stupaca, unutarnjih odjeljaka i widgeta, dok se isti izgled mogao postići korištenjem mnogo manje elemenata.

Korištenje prekomjerne količine elemenata usporava performanse vaše web stranice, pa zaronimo i naučimo kako izgraditi web stranice s Elementorom na najučinkovitiji način.

Obradit ćemo sljedeće teme:

• Pobliži pogled na strukturu ispravne stranice
• Pregled i testiranje izvedbe vaše web stranice
• Optimiziranje sadržaja zaglavlja, podnožja i stranice
• Primjeri dobrih i loših praksi izgleda web stranica
• Ispravna upotreba widgeta, pozicioniranje i globalni stilovi
• Savjeti za izbjegavanje kašnjenja pri učitavanju, poboljšanje SEO i povećati vrijeme učitavanja
• Optimizacija pristupačnosti
• Smanjenje količine DOM elemenata
• I mnogo više !

Kako bismo bolje razumjeli optimalne izglede u Elementoru, istražit ćemo predložak Elementor koji prikazuje uobičajene zlouporabe odjeljaka, stupaca i widgeta. Do kraja ove lekcije potpuno ćemo obnoviti cijelu ovu stranicu smanjenjem broja stupaca i widgeta. Naša početna stranica sastoji se od devet odjeljaka, 31 stupca, pet internih odjeljaka i 44 widgeta.

Do kraja vodiča naša optimizirana stranica bit će smanjena na šest odjeljaka, sedam stupaca i 16 widgeta.

Koristit ćemo besplatno, lagano Pozdrav Temai mi ćemo ponovno stvoriti svaki odjeljak predloška i poboljšati ukupnu izvedbu web stranice koristeći najbolje prakse.

Testiranje na loše prakse

Prije nego što zaronimo u optimizaciju izgleda web stranice, pokrenimo test na našoj stranici kako bismo u potpunosti razumjeli što se događa kada netko posjeti našu web stranicu. Nakon što su sve naše optimizacije obavljene, ponovit ćemo test i usporediti rezultate.

1. korak: potvrdite svoju web lokaciju u anonimnom prozoru

• Otvorite novi prozor u "anonimnom načinu" i upišite URL web stranice koju testirate.

2. korak: provjerite koristite li izravnu URL putanju

Ako niste sigurni u vezu sa svojom stranicom, lako je možete pronaći na nadzornoj ploči WP -a:

• Kliknite "Stranice" da biste vidjeli sve stranice na svojoj web stranici.
• Zadržite pokazivač miša iznad stranice i kliknite opciju "Prikaz". Ovo će vas odvesti izravno na vašu stranicu.
• Kopirajte i zalijepite ovaj URL u anonimni prozor i nakon učitavanja web stranice spremni ste za testiranje!

Testiranje i pregled rezultata izvedbe

Korak 1: Testirajte rezultate izvedbe

Možda ste u prošlosti koristili Chromeove razvojne alate.

Ako nije, kako biste pregledali i prikazali HTML i CSS sadržaj svoje stranice:

• Desnom tipkom miša kliknite bilo gdje na stranici i odaberite "Inspect." Vidjet ćete nekoliko kartica na kojima možete čitati HTML i CSS, pronaći pogreške, dobiti SEO rezultate i pokrenuti razne testove.
• Odaberite karticu Mreža i pritisnite gumbe cmd ili ctrl + R za učitavanje rezultata.

Kao što vidite, našem trenutnom izgledu potrebno je 2,88 sekundi za učitavanje i izvršavanje 81 zahtjeva.

Korak 2: Pregledajte rezultate izvedbe

• Prebacite se na karticu Lighthouse, gdje možemo pokrenuti revizijsko izvješće na našoj stranici.

To će nam dati više informacija o trenutnoj izvedbi stranice.

• Odaberite "Generiraj izvješće". Nakon nekoliko trenutaka pojavit će se vaše izvješće.

Trenutno dobivamo ocjenu izvedbe 73/100, na čemu svakako možemo poraditi.

Idealno bi bilo da svi ovi brojevi budu zeleni. Sada prijeđimo na optimizaciju naše stranice i poboljšanje naše statistika.

Imajte na umu da bismo nakon svakog koraka optimizacije mogli uzeti neke najbolje primjere iz promjena i imati ih na umu za buduće web stranice koje izradimo.

Optimiziranje elemenata stranice

Korak 1: Optimizirajte zaglavlje

Počnimo s zaglavlje.

Kao što možete vidjeti u ovom dizajnu, zaglavlje je napravljeno s tri stupca.

U prvom stupcu naš logotip sastoji se od dva widgeta:

1. Un Widget slike koja prikazuje .png datoteku slike našeg logotipa
2. Widget naslova.

U drugom stupcu izbornik zaglavlja sastoji se od našeg widgeta izbornika za navigaciju.

Treći stupac sadrži:

1. Interni widget odjeljka (koji kontrolira položaj widgeta za ikone).
2. Naši kontakt podaci za zaglavlje

Pogledajmo kako ovdje možemo smanjiti broj odjeljaka, widgeta i odjeljaka.

Korak 2: Izradite novo zaglavlje

Kolona 1:

• Izradite 1 odjeljak samo s 1 stupcem.
• Dodajte Widget s logotipom web stranice i povucite ga u odjeljak.

Najbolji primjeri iz prakse za slike:

• Dajte svakoj slikovnoj datoteci na svojoj web stranici odgovarajući naslov i zamjenski tekst u biblioteci medija.

To će poboljšati pristupačnost vaše stranice i rangiranje vaše tražilice. U logotipu koji smo izvorno koristili naslov nije bitan za stvarnu sliku i nema zamjenskog teksta.

• Odredite dimenzije slike unutar widgeta.

To omogućuje da stranica bude postavljena s odgovarajućim prostorom prije učitavanja slika, izbjegavajući zaostajanje u izgledu (faktor mjeren preglednicima).

U primjeru na kojem radimo zajedno riješite ovaj problem tako što ćete otići na karticu Stil i postaviti širinu slike na 200 piksela.

Kolona 2

Vratite se na ploču widgeta:

• Povucite i ispustite widget navigacijskog izbornika ispod logotipa
• Postavite pokazivač na "Ništa"
• Idite na karticu "Stil" i dodajte font po želji (tako da odgovara našem prethodnom dizajnu)

Najbolje prakse za cjelokupno oblikovanje:

• Izbjegavajte korištenje više od 2 različita fonta koji uključuju više težina (Globalni fontovi).
• Izbjegavajte odabir različitih boja za svaku stavku biračem boja (Globalne boje).
• Poboljšajte brzinu učitavanja vaše web stranice generiranjem manje upita (ukupni fontovi).
• Ponovite nepotrebni kod dva puta (globalne boje).
• Održavajte dosljednost i kontrolu svog modela (cjelokupni stil).

Globalni fontovi:

To se može učiniti pomoću funkcije Global Fonts:

• Idite na karticu "Stil" i dodajte željeni font (tako da odgovara našem prethodnom dizajnu) odabirom jednog, napravite malu promjenu i zadržite pokazivač iznad ikone plus.
• Pritisnite ikonu plus i odaberite potrebnu obitelj fontova
• Spremite stilove koje ćete koristiti u predlošku kao globalne fontove

Zatim možete koristiti ovaj stil na svakom widgetu koji stvorite.

Globalne boje:

Ista metoda može se koristiti za vaše ukupne boje:

• Kliknite na "Globalno"
• Zadržite pokazivač miša iznad birača boja i kliknite na njega
• Odaberite boju i pokažite na ikonu plus
• Pritisnite "Global" >> odaberite "Direktor"

Nakon što to učinite, boja će biti spremljena u paletu boja vašeg predloška, ​​pa je možete odabrati sa popisa Globalnih boja kad god vam zatreba za stavku ili widget.

Prije nego nastavimo s zaglavljem, postavimo vertikalni padding na nulu.

Korak 3: Uredite zaglavlje

Stupac 3

• Idite na ploču "Widgets"
• Povucite widget popisa ikona ispod izbornika.
• Uklonite dodatne stavke popisa
• Dodajte svoj tekst
• Odaberite ikonu po svom izboru
• Idite na karticu "Stil"
• Definirajte ukupne boje i fontove po svom izboru

Sada moramo popraviti još jednu stvar - tri elementa zaglavlja trenutno su složena i nisu međusobno poravnana. Ovaj problem možemo riješiti promjenom širine svakog elementa na njegovu stvarnu veličinu, tako da ne zauzima sav prostor u stupcu.

Da biste riješili ovaj problem:

• Odaberite widget s logotipom web stranice >> kartica "Napredno"
• Odaberite "Pozicioniranje" i postavite njegovu širinu na "Inline"

Ponovite ovaj korak za widget Navigacijski izbornik i za widget Popis ikona.

Sada kada su svi elementi zaglavlja u redu, preostaje samo ispravno ih postaviti.

Definiranje pozicioniranja stupca s umetnutim elementima

• Odaberite svoj stupac >> idite na karticu "Raspored"
• U "Okomito poravnanje" odaberite "Donja"
• "U vodoravnom poravnanju" odaberite "Razmak između"

Odabirom poravnanja "Razmak između" položaj prvog i posljednjeg widgeta na oba kraja daje jednak razmak između svih ostalih widgeta.

Međutim, prvi i zadnji widget imaju različite širine, pa jednaki prostor ne mora uvijek biti u središtu našeg unutarnjeg widgeta.

Ovaj problem možemo riješiti podešavanjem marži:

• Odaberite widget Izbornik za navigaciju >> kartica „Napredno“
• Razgrupirajte marginu i uklonite razmak s negativnom vrijednošću

Korak 4: Neka zaglavlje bude responzivno

Pogledajmo sada kako izgleda trenutna verzija naše web stranice na mobilnim uređajima.

Najbolji primjeri iz prakse za mobilnu reakciju:

• Pojednostavite svoj dizajn i smislite načine kako iste odjeljke učiniti responzivnima, kako biste izbjegli korištenje dvostruko veće količine koda koji će utjecati na brzinu vaše stranice.

Kao što vidite u ovom zaglavlju - Uobičajeno je vidjeti isti odjeljak redizajniran posebno za tablete i mobilne uređaje. Ovo vidimo ovdje: stvorene su dvije verzije dizajna: jedna verzija za stolna računala i jedna za mobilne uređaje.

Umjesto toga, kada vaš dizajn i kôd odgovaraju, brzina vaše stranice se poboljšava jer će koristiti manje koda.

Pogledajmo kako to možemo postići, koristeći postavku "Prilagođena širina" za naše widgete i elemente.

Postavljanje prilagođene širine za tablet

• Kliknite na 'Nav Menu' >> 'Advanced' karticu
• Odaberite "Pozicioniranje" >> postavite širinu na "Prilagođeno".
• Odaberite "%" >> dajte widgetu istu širinu (u postocima) praznog prostora oko njega.
• Kliknite karticu "Sadržaj" >> "Toggle Align" >> odaberite "Desno".

To vam omogućuje poravnavanje izbornika za prebacivanje bilo gdje unutar širine widgeta.

Sada završimo s prilagođavanjem izbornika za prebacivanje.

• "Sadržaj" >> Kliknite prekidač "Puna širina" i postavite ga na "Da".
• "Stil" >> Uklonite pozadinu povlačenjem trake "Birač boja" skroz ulijevo.

Pogledajmo sada kako stvari izgledaju na mobilnom ekranu.

Određivanje prilagođene širine za mobitele

U ovom scenariju zadržat ćemo tri widgeta zaglavlja unutar okvira za prikaz. No, imajte na umu da za neke web stranice može imati smisla izostaviti određene elemente iz zaglavlja kada se pregledavaju na mobilnom uređaju ili tabletu.

U ovom slučaju, ono što se događa s našim zaglavljem kada se prikaže na mobilnom uređaju je da widgeti za navigacijski izbornik i logotip ne mogu stati u jedan redak.

Da biste riješili ovaj problem:

Pozicioniranje izbornika Nav

• Kliknite na "Nav Menu" >> "Advanced"
• Odaberite "Pozicioniranje" >> postavite širinu na "Prilagođeno"
• Odaberite "%" >> Dajte widgetu širinu od 30%, tako da stane uz naš logotip

Pozicioniranje popisa ikona

• Kliknite na "Popis ikona" >> "Napredno"
• Odaberite "Ispuni" >> Razgrupiraj vrijednosti
• Dodaj zarez od 12 piksela u "TOP"

Možeš li vjerovati?

Izvorno se koristilo naše zaglavlje 2 odjeljka, 12 widgeta i 10 stupaca. Sada naše zaglavlje koristi 1 odjeljak, 3 widgeta i 1 stupac.

A rezultat je isti!

Korak 5: Optimizirajte odjeljak Heroj

Prijeđimo na sljedeći odjeljak naše web stranice: odjeljak heroja

Najbolje prakse za odjeljke heroja:

• Neka tekst vašeg odjeljka heroja bude lako vidljiv, posebno ako ima pozadinsku sliku.

Kontrolirajte položaj widgeta u stupcu

Uobičajena pogreška koju vidimo u uređivaču Elementor je korištenje dodatnih stupaca i razmaka za kontrolu pozicioniranja widgeta.

U našem primjeru modela, naš herojska slika sastoji se od odjeljka sa pozadinskom slikom. Naslov i tekst postavljeni su vodoravno, koristeći dva stupca. Unutar odjeljka nalazi se i razmaknica za okomito postavljanje elemenata.

Pogledajmo kako možemo stvoriti isti dizajn sa samo jednim odjeljkom:

• Izbrišite dodatni stupac desno od teksta.
• Uklonite odstojnik.

Umjesto toga, za postavljanje našeg herojskog teksta tamo gdje želimo, upotrijebit ćemo opcije poravnavanja stupaca:

• Odaberite stupac.
• Postavite "Vertikalno poravnanje" na "Srednji".
• Idite na karticu "Napredno".
• Odaberite "Ispuni" >> Razgrupiraj vrijednosti
• Postavite Desni padding na 50%.

• Odaberite odjeljak.
• Odaberite "Minimalna visina" >> postavite na 80.

Fiksni kontrast između tekstova i pozadina

Važno je da svaka web stranica ima dobar kontrast između teksta i pozadine. Nečitljive informacije utječu na rezultate vaše web stranice, a mogu i odvratiti posjetitelje. U svakom slučaju, tekst bi uvijek trebao biti jasno čitljiv.

Postoji nekoliko načina za poboljšanje jasnoće odjeljka čija je pozadina slika u boji (kao što vidimo u ovom predlošku):

• Kliknite na zaglavlje.
• Idite na karticu "Stil" >> Odaberite "Sjena teksta".

To će poboljšati čitljivost teksta izdvajanjem od pozadinske slike.

Drugi način da vaš tekst bude jasniji je korištenje slojeva.

• Odaberite odjeljak >> kartica "Stil" >> "Prekrivanje pozadine"
• Odaberite jednu od svojih ukupnih boja i igrajte se s neprozirnošću dok ne dobijete željeni rezultat

Korak 6: Optimizirajte odjeljak s okvirima sa ikonama

Pređimo sada na naš sljedeći odjeljak, gdje trenutno imamo unutarnji odjeljak s četiri stupca. Trenutno svaki stupac ima tri widgeta: Widget za sliku, Widget za naslov i Widget za uređivanje teksta.

Pogledajmo kako možemo pojednostaviti ovaj odjeljak kako bismo poboljšali njegove performanse.

Sadržaj područja ikone

• Odaberite gumb »Okvir ikona widgeta« na izborniku widgeta i povucite ga u stupac
• Odaberite "Okvir ikona"
• Pokažite na sliku ikone
• Odaberite "Preuzmi SVG" **
• Umetnite prilagođenu ikonu

** Napomena: Značke su SVG datoteke. Ako niste, idite na nadzornu ploču WordPress, a zatim na Elementor >> Postavke. Morat ćete omogućiti Omogući preuzimanje nefiltriranih datoteka.

• Upišite svoj "naslov"
• Upišite svoj "Opis"
• Odaberite "Stil" >> Odaberite ukupnu boju
• Odaberite "Veličina" i povucite traku na veličinu po vašem izboru
• Odaberite "Padding" i povucite traku na željeni broj

Korak 8: Optimizirajte odjeljak "Usluge"

Sada ćemo obnoviti odjeljak "Usluge", koji trenutno koristi dva stupca, dvije slike, widget za naslov i widget za uređivanje teksta.

Izradimo isti dizajn u novom odjeljku, ali sa samo jednim stupcem.

• Izradite novi odjeljak sa stupcem
• U "Layout" >> postavite "Content Width" na "Full Width"
• Odaberite "Widget Image Box" na ploči widgeta i povucite ga u stupac

(Moći ćemo integrirati svu imovinu odjeljka u ovaj widget)

• Upišite naslov
• Upišite opis

Za sliku ćemo zadržati trenutni dizajn koji smo koristili za naše slike.

• Umetnite istu sliku iz biblioteke medija
• Idite na karticu "Sadržaj" >> Postavite "Položaj slike" na "Desno"

• Idite na karticu "Stil"
• Povećajte razmak između elemenata
• Povećajte "širinu" slike
• Proširite odjeljak "Sadržaj"
• Odaberite poravnanje "središte"
• Postavite "Vertikalno poravnanje" na "Srednji"
• Definirajte ukupne boje i fontove po svom izboru
• Idite na karticu "Napredno"
• Dodajte 10% ispune u widget

Sada odjeljak Usluge ima isti dizajn, ali s manje imovine.

Korak 9: Optimizirajte odjeljak poziva na radnju

Najbolje prakse za CTA veze:

• Provjerite rade li sve vaše veze na društvenim medijima ispravno i gumb sadrži vezu.
• Kad dodate vezu na drugu web stranicu, uključite ovaj atribut: "rel | noopener"

(To možete učiniti klikom na ikonu zupčanika i upisivanjem atributa u "Prilagođeni atributi"). Ovo će otvoriti vezu na novoj kartici preglednika i povećati vašu ocjenu izvedbe.

Sljedeći odjeljak predstavlja poziv na akciju za naše usluge.

Odjeljak trenutno ima dva stupca koji sadrže:

1. Pozadinska slika s razmaknicom
2. Dva zaglavlja, unutarnji odjeljak, uređivač teksta i gumb

Izradimo isti dizajn u novom odjeljku, ali sa samo jednim stupcem.

• Idite na karticu "Raspored" >> postavite "Širina sadržaja" na "Puna širina"
• Idite na karticu "Napredno" >> Uklonite sve dodatne ispune

• Odaberite "Widget poziva na akciju" na ploči widgeta i povucite ga u stupac
• Postavite "Položaj slike" na "Lijevo"
• Odaberite svoju sliku iz biblioteke medija
• Proširite odjeljak "Sadržaj"
• Upišite zaglavlje
• Upišite opis
• Upišite tekst gumba

• Idite na karticu "Stil"
• Dodajte "Padding" između elemenata
• Podesite širinu slike
• Proširite odjeljak "Sadržaj"
• Odaberite globalni font za naslov
• Povećajte razmak između opisa i gumba
• Odaberite globalne boje prikladne za svaki resurs
• Proširite odjeljak "Gumb"
• Postavite njegovu veličinu na "Velika"
• Prilagodite ga prema svojim potrebama, poput boje pozadine i radijusa obruba

Do sada je to bio odjeljak s 2 stupca sa 6 widgeta. Sada je to odjeljak s 1 stupcem sa samo 1 widgetom!

Korak 10: Optimizirajte rotirajući izbornik slika

Trenutni dizajn našeg odjeljka Rotirajući izbornik ima uobičajenu pogrešku u načinu na koji prikazuje više slika.

Ovaj se dizajn sastoji od 5 stupaca, što je praksa koju mnogi korisnici imaju običaj kontrolirati veličinu svojih slika.

Istražimo jednostavniji način koji će također optimizirati performanse vaše web stranice.

• Izradite novi odjeljak s 1 stupcem
• Idite na karticu "Raspored" >> postavite "Širina sadržaja" na "Puna širina"
• Na ploči s widgetima odaberite gumb »Widget Image Carousel Widget« i povucite ga u stupac
• Dodajte željene slike iz medijske biblioteke

• Idite na karticu "Sadržaj"
• Postavite "Veličina slike" na "Srednja - 300 x 300"
• Podesite "Slajdove za prikaz", "Slajdove za pomicanje" i "Navigaciju" prema vašim željama

• Idite na karticu "Stil"
• Postavite "Vertikalno poravnanje" na "Centar"
• Prilagodite "Razmak"

• Idite na karticu "Napredno"
• Dodajte potrebno punjenje

Ono što je nekad bilo odjeljak s 5 stupaca sada je samo 1 stupac.

Prijeđimo na sljedeći odjeljak, gdje možemo optimizirati videozapise na našoj web stranici.

Korak 11: Optimizirajte odjeljak videozapisa

Najbolji primjeri iz prakse za video sadržaj:

• Koristite Lazy Load kad god je to moguće kako biste poboljšali vrijeme učitavanja vaših web stranica.

Što se događa kada primijenimo opciju "Lazy Load"?

Tehnički gledano, kôd za ugrađivanje videozapisa zamjenjuje se statičkom slikom. Na ovaj način video se učitava samo kada korisnik klikne na sliku - što zaista pomaže pri vremenu učitavanja naše stranice.

Ono što ćemo sada učiniti je promijeniti način na koji koristimo Video Widget, tako da ne odgađa brzinu naše stranice ili performanse web stranice.

• Odaberite "Video widget"
• Idite na karticu "Stil"
• Odaberite "Lazy Load"

Korak 12: Optimizirajte podnožje i ažurirajte ga

Uobičajena pogreška koja se vidi na mnogim web stranicama je ta što njihovo podnožje koristi više zaglavlja za datum i opis, kao i ikonu za simbol autorskog prava.

Pogledajmo kako optimizirati podnožje i pobrinuti se da uvijek bude ažurirano.

Ovaj proces kontinuiranog ažuriranja konfigurirat ćemo pomoću Dinamičke oznake. Na taj način nećemo morati mijenjati sadržaj zaglavlja svake godine jer će se dinamičke oznake automatski ažurirati na tekuću godinu.

Da bismo to učinili, postupit ćemo na sljedeći način:

• Uklonite dodatne widgete, ostavljajući samo widget Naslov
• Odaberite widget Naslov
• Kliknite simbol "Dinamičke oznake" desno od polja "Naslov" (poznat i kao "Roditeljski gumb")

• Na padajućem izborniku odaberite stavku izbornika "Trenutni datum i vrijeme"
• Kliknite na roditeljsku ikonu ključa
• Kliknite karticu "Format datuma" i odaberite stavku izbornika "Prilagođeno"
• Izbrišite ono što se trenutno nalazi u polju "Prilagođeni format", osim "Y"
• Odaberite karticu "Napredno"
• Označite polje "Naprijed" i istovremeno držite pritisnute tipke "opcija" i "G" (ili "istovremeno" za upravljanje, alt "i" C ") da biste upisali simbol" © ".
• Dodajte razmak iza znaka "©"

• Odaberite polje "Nakon"
• Upišite razmak i napišite tekst koji želite prikazati nakon godine, kao što je "Sva prava pridržana"

Možda ćete primijetiti da na primjeru web stranice u ovom vodiču svaki widget ima svoj odjeljak. To smo učinili kako bismo vodič učinili jasnijim i lakšim za praćenje.

U idealnom slučaju, što manje odjeljaka imate, to ćete imati manje dodatnog HTML KODA.

Neke widgete možete spojiti u isti odjeljak povlačenjem i ispuštanjem u gornji odjeljak, a zatim brisanjem praznog odjeljka.

I to je to, vaš je izgled optimiziran!

Procjena uspješnosti nove web stranice

Provjerit ćemo rezultate u prozoru DevTools (Inspector):

• Odaberite karticu "Mreža":

Ovdje postoje neke lijepe i pozitivne promjene:

• Za učitavanje web stranice sada je potrebno 568 milisekundi
• Sa 81 zahtjeva prešli smo na 46
• Odaberite karticu "Svjetionik", gdje ćete vidjeti da se naš rezultat povećao sa 73 na 98

Imajte na umu da smo optimizirali svoje performanse bez upotrebe dodataka trećih strana. Potrebne su samo jednostavne dorade i najbolje prakse.

Korak 13: Testirajte rezultate s efektima pokreta

Želimo našu web stranicu učiniti interaktivnijom i zabavnijom, no kako će to utjecati na naše rezultate? Pogledajmo što možemo učiniti.

Zaglavlje učinite "fiksnim" elementom:

• Odaberite zaglavlje
• Idite na karticu "Napredno"
• Proširite karticu "Učinci kretanja"
• Opciju "Ljepljivo" postavite na "Vrh"

Neka odjeljak heroja bude "fiksni" element:

• Odaberite odjeljak heroj
• Idite na karticu "Stil"
• Odaberite padajući popis "Privitak" i odaberite "Popravljeno"

Upotrijebite a Animacija ulaza za junakov tekst (zaglavlje):

• Odaberite widget Zaglavlje
• Idite na karticu "Napredno"
• Proširite karticu "Učinci kretanja"
• Odaberite Animacija unosa i postavite je na "Fade In"

Koristite animaciju unosa za opis teksta junaka (widget Uređivač teksta):

• Odaberite widget Uređivač teksta
• Idite na karticu "Napredno"
• Proširite karticu "Učinci kretanja"
• Odaberite "Input animacija" i postavite je na "Fade In"

Učinite isto za widgete koji slijede, za suptilne učinke pri učitavanju stranice.

Ponovimo sada test performansi da vidimo kako su efekti kretanja utjecali na naš rezultat:

• Vratite se na prozor "Inspektor"
• Odaberite karticu "Svjetionik"
• Kliknite na "Generiraj izvješće"

Sada vidimo da je naš rezultat smanjen na 97 - to definitivno nije velika razlika i čini web stranicu zanimljivijom i zabavnijom.

Možete li vjerovati našem novom rezultatu?

Drago nam je što ste sada potpuno opremljeni za povećanje rezultata s svake web stranice Elementor koju izradite. To će imati veliku razliku u ciljevima izgradnje vaše web stranice i uspjehu vašeg poslovanja.

Predlažemo da označite ovaj vodič za buduće potrebe, kako biste mogli ispitati izvedbu stranica svoje web stranice i primijeniti najbolje prakse za optimizaciju izgleda.

I to je tek početak - sljedeći dio ovog tečaja pokrivaoptimizacija slike.

U vodiču ćemo proći kroz svaku sliku na oglednoj web stranici i naučiti kako ih poboljšati za još učinkovitije vrijeme učitavanja.

Nabavite Elementor Pro odmah!

Zaključak

Dakle! To je sve za ovaj članak koji vam pokazuje kako optimizirati izgled vaše web stranice s Elementorom. Ako imate bilo kakvih nedoumica o tome kako doći tamo, javite nam unutar Komentari.

Međutim, možete se konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.

Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.

...