Ako optimalizujte rozloženie svojej webovej stránky s Elementorom

Chcete vedieť, ako optimalizovať rozloženie vašich webových stránok pomocou Elementor ?

Optimalizácia výkonu webových stránok je jedným z jeho najdôležitejších aspektov užívateľské skúsenosti. Web s pomalým načítaním môže frustrovať akéhokoľvek používateľa, čo často vedie k a miera odchodov vysoká, čo môže nepriaznivo ovplyvniť úspech nášho podnikania.

Výkonnosť webových stránok môže byť ovplyvnená mnohými faktormi, napríklad: veľkými veľkosťami obrázkov, konfiguráciou servera, príliš veľkým počtom doplnkov a ďalšími faktormi.

Výkonnosť webových stránok je jednou z našich najsilnejších hodnôt ako tvorcov webových stránok. Preto sme vytvorili tento kurz v 5 častiach.

Teraz sa môžete naučiť, ako vytvárať rozloženia a príspevky pomocou optimálnych techník. Tieto znalosti zaistia, že vaše webové stránky nebudú obsahovať nadbytočné sekcie, stĺpce alebo miniaplikácie, ktoré práve nie sú potrebné. Tiež preskúmame niektoré vstavané funkcie miniaplikácií, aby sa skrátila doba načítania.

Na konci tohto tutoriálu budete plne pripravení optimalizovať výkon každého webu Elementor vytvoríte a okamžite žnete odmeny.

Lekcia 1: Optimálne postupy pre optimalizáciu rozloženia

V našej prvej lekcii sa budeme zaoberať najefektívnejším spôsobom vytvárania stránok a príspevkov v editore Elementor. Často vidíme použitie príliš veľkého počtu sekcií, stĺpcov, vnútorných sekcií a miniaplikácií, pričom rovnaké rozloženie by sa dalo dosiahnuť použitím oveľa menšieho počtu prvkov.

Používanie nadmerného množstva prvkov spomaľuje výkon vašich webových stránok, preto sa poďme ponoriť a naučme sa, ako vytvárať webové stránky pomocou programu Elementor tým najefektívnejším spôsobom.

Budeme sa venovať nasledujúcim témam:

• Bližší pohľad na štruktúru správnej stránky
• Zobrazenie a testovanie výkonnosti vašich webových stránok
• Optimalizácia obsahu hlavičky, päty a stránky
• Príklady dobrých a zlých praktík rozloženia webových stránok
• Správne používanie miniaplikácií, určovania polohy a globálnych štýlov
• Tipy, ako sa vyhnúť oneskoreniu načítania, zlepšiť SEO a predĺžiť čas načítania
• Optimalizácia dostupnosti
• Zníženie počtu prvkov DOM
• A oveľa viac !

Aby sme lepšie porozumeli optimálnym rozloženiam v Elementore, preskúmame šablónu Elementor, ktorá ukazuje bežné zneužívanie sekcií, stĺpcov a miniaplikácií. Do konca tejto lekcie kompletne prestavíme celú túto stránku znížením počtu stĺpcov a miniaplikácií. Naša úvodná stránka obsahuje deväť sekcií, 31 stĺpcov, päť vnútorných sekcií a 44 miniaplikácií.

Na konci tutoriálu sa naša optimalizovaná stránka zmenší na šesť sekcií, sedem stĺpcov a 16 miniaplikácií.

Použijeme zadarmo, svetlo Ahoj témaa pomocou osvedčených postupov znova vytvoríme každú časť šablóny a zlepšíme celkový výkon webovej stránky.

Testovanie na zlé praktiky

Predtým, ako sa vrhneme na optimalizáciu rozloženia webových stránok, vykonajte test na našej stránke, aby sme plne pochopili, čo sa stane, keď niekto navštívi našu webovú stránku. Po vykonaní všetkých našich optimalizácií test zopakujeme a porovnáme výsledky.

Krok 1: Overte svoj web v okne inkognito

• Otvorte nové okno v režime inkognito a zadajte webovú adresu testovanej webovej stránky.

Krok 2: Overte, či používate priamu cestu k adrese URL

Ak si nie ste istí odkazom na svoju stránku, môžete ho ľahko nájsť na hlavnom paneli WP:

• Kliknutím na položku „Stránky“ zobrazíte všetky stránky na vašom webe.
• Ukážte kurzorom na svoju stránku a kliknite na možnosť „Zobraziť“. Tým sa dostanete priamo na svoju stránku.
• Skopírujte a prilepte túto adresu URL do okna inkognito a po načítaní webovej stránky ste pripravení ju otestovať!

Testovanie a zobrazenie výsledkov výkonnosti

Krok 1: Otestujte výsledky výkonnosti

V minulosti ste mohli používať Nástroje pre vývojárov Chrome.

Ak nie, za účelom kontroly a zobrazenia obsahu HTML a CSS na vašej stránke:

• Kliknite pravým tlačidlom myši kdekoľvek na svojej stránke a kliknite na položku „Skontrolovať“. Zobrazí sa niekoľko záložiek, kde si môžete prečítať svoje HTML a CSS, hľadať chyby, získavať výsledky SEO a vykonávať rôzne testy.
• Vyberte kartu Sieť a stlačením klávesov cmd alebo ctrl + R načítajte výsledky.

Ako vidíte, načítanie nášho aktuálneho rozloženia trvá 2,88 sekundy a vykoná 81 požiadaviek.

Krok 2: Zobrazte výsledky výkonnosti

• Prepnite na kartu Maják, kde na našej stránke môžeme spustiť správu z auditu.

Získame tak viac informácií o aktuálnom výkone stránky.

• Vyberte možnosť „Generovať správu“. Po chvíli sa zobrazí vaša správa.

Aktuálne dostávame výkonnostné hodnotenie 73/100, na ktorom určite môžeme zapracovať.

V ideálnom prípade by sme chceli, aby všetky tieto čísla boli zelené. Teraz prejdime k optimalizácii našej stránky a vylepšeniu našej stránky štatistika.

Majte na pamäti, že po každom kroku optimalizácie, ktorý vykonáme, môžeme zo zmien vyvodiť niektoré osvedčené postupy a mať ich na pamäti pre budúce weby, ktoré vytvoríme.

Optimalizácia prvkov stránky

Krok 1: Optimalizujte hlavičku

Začnime s hlavička.

Ako vidíte na tomto návrhu, hlavička bola vyrobená z troch stĺpcov.

Naše logo v prvom stĺpci pozostáva z dvoch miniaplikácií:

1. Un Miniaplikácia obrázku ktorý zobrazuje súbor s obrázkom .png nášho loga
2. Widget pre názov.

V druhom stĺpci sa ponuka záhlavia skladá z nášho widgetu ponuky navigácie.

Tretí stĺpec obsahuje:

1. Interný widget sekcie (ktorý ovláda polohu miniaplikácie ikon).
2. Naše kontaktné údaje na hlavičku

Pozrime sa, ako tu môžeme minimalizovať počet sekcií, miniaplikácií a sekcií.

Krok 2: Vytvorte novú hlavičku

Stĺpec 1:

• Vytvorte 1 sekciu iba s 1 stĺpcom.
• Pridajte Widget s logom webovej stránky a presuňte ho do sekcie.

Osvedčené postupy pre obrázky:

• Priraďte každému súboru s obrázkom na vašom webe relevantný názov a alternatívny text v knižnici médií.

To zlepší prístupnosť vašej stránky a hodnotenie vášho vyhľadávača. V logu, ktoré sme pôvodne použili, názov nezodpovedá skutočnému obrázku a neexistuje žiadny alternatívny text.

• Definujte rozmery obrázka vo vnútri miniaplikácie.

To umožňuje, aby bola stránka rozložená s dostatočným priestorom pred načítaním obrázkov, čím sa zabráni oneskoreniu rozloženia (faktor meraný prehliadačmi).

V príklade, na ktorom spoločne pracujeme, vyriešte tento problém tak, že prejdete na kartu Štýl a nastavíte šírku obrázka na 200 pixlov.

Stĺpec 2

Návrat na panel miniaplikácií:

• Pod logo presuňte miniaplikáciu navigačnej ponuky
• Nastavte ukazovateľ na „Žiadne“
• Prejdite na kartu „Štýl“ a zadajte požadované písmo (aby zodpovedalo nášmu predchádzajúcemu dizajnu)

Osvedčené postupy pre celkový styling:

• Nepoužívajte viac ako 2 rôzne písma, ktoré obsahujú viacero váh (Globálne písma).
• Vyhnite sa výberu rôznych farieb pre každú položku pomocou výberu farieb (Globálne farby).
• Zlepšite rýchlosť načítania svojich webových stránok generovaním menšieho počtu dopytov (celkových písiem).
• Zbytočný kód opakujte dvakrát (globálne farby).
• Udržujte konzistentnosť a kontrolu nad svojim modelom (celkový štýl).

Globálne písma:

To je možné vykonať pomocou funkcie Globálne písma:

• Prejdite na kartu „Štýl“ a pridajte požadované písmo (aby zodpovedalo nášmu predchádzajúcemu dizajnu) tak, že ho vyberiete, urobíte malú zmenu a umiestnite kurzor myši na ikonu plus.
• Kliknite na ikonu plus a vyberte požadovanú rodinu písem
• Uložte štýly, ktoré budete používať v šablóne, ako globálne písma

Tento štýl potom môžete použiť vo všetkých widgetoch, ktoré vytvoríte.

Globálne farby:

Rovnakú metódu môžete použiť aj pre svoje celkové farby:

• Kliknite na „Globálne“
• Ukážte na výber farieb a kliknite naň
• Vyberte farbu a ukážte na ikonu plus
• Kliknite na „Globálne“ >> vyberte „Riaditeľ“

Keď to urobíte, farba sa uloží do palety farieb vašej šablóny, takže si ju môžete vybrať zo svojho zoznamu Globálne farby, kedykoľvek to potrebujete pre položku alebo miniaplikáciu.

Predtým, ako budeme pokračovať v hlavičke, nastavme vertikálne vypchávky na nulu.

Krok 3: Upravte hlavičku

Stĺpec 3

• Prejdite na panel „Widgety“
• Potiahnite miniaplikáciu Zoznam ikon pod ponuku.
• Odstráňte ďalšie položky zoznamu
• Pridajte svoj text
• Vyberte ikonu podľa vlastného výberu
• Prejdite na kartu „Štýl“
• Definujte celkové farby a písma podľa vlastného výberu

Teraz musíme opraviť ešte jednu vec - tri prvky hlavičky sú v súčasnosti naukladané a nie sú navzájom zarovnané. Tento problém môžeme vyriešiť zmenou šírky každého prvku na jeho skutočnú veľkosť, aby nezabral všetok priestor v stĺpci.

Ak chcete vyriešiť tento problém:

• Vyberte miniaplikáciu Logo stránky >> kartu „Rozšírené“
• Vyberte „Umiestnenie“ a nastavte jeho šírku na „Vstavané“

Tento presný krok zopakujte pre miniaplikáciu Navigačná ponuka a pre miniaplikáciu Zoznam ikon.

Teraz, keď sú všetky prvky hlavičky v súlade, zostáva iba správne ich umiestnenie.

Definovanie umiestnenia stĺpca pomocou vložených prvkov

• Vyberte svoj stĺpec >> prejdite na kartu "Rozloženie"
• V časti „Vertikálne zarovnanie“ vyberte „Spodok“
• „V horizontálnom zarovnaní“ vyberte „Medzera medzi“

Vyberte zarovnanie „Medzera medzi“, aby bol prvý a posledný widget na oboch koncoch, aby medzi všetkými ostatnými widgetmi boli rovnaké medzery.

Prvý a posledný widget však majú rôznu šírku, takže rovnaký priestor nemusí vždy vycentrovať náš interný widget.

Tento problém môžeme vyriešiť úpravou okrajov:

• Vyberte miniaplikáciu Navigačná ponuka >> kartu "Rozšírené"
• Zrušte zoskupenie okraja a odstráňte medzery so zápornou hodnotou

Krok 4: Nastavte hlavičku na odozvu

Teraz sa pozrime, ako vyzerá aktuálna verzia nášho webu na mobilných zariadeniach.

Osvedčené postupy pre odozvu na mobilné zariadenia:

• Zjednodušte svoj návrh a premýšľajte o spôsoboch, ako zareagovať na rovnaké sekcie, aby ste nepoužívali dvojnásobné množstvo kódu, ktoré ovplyvní rýchlosť vašej stránky.

Presne tak, ako vidíte v tejto hlavičke - je bežné, že rovnakú sekciu zmeníte špeciálne pre tablety a mobilné zariadenia. Tu to vidíme: Boli vytvorené dve verzie dizajnu: jedna verzia pre stolné počítače a jedna pre mobilné zariadenia.

Namiesto toho, keď váš dizajn a kód reagujú, rýchlosť stránky sa zvýši, pretože použije menej kódu.

Pozrime sa, ako to môžeme dosiahnuť pomocou nastavenia „Vlastná šírka“ pre naše miniaplikácie a prvky.

Nastavenie vlastnej šírky pre tablet

• Kliknite na položku „Ponuka Nav“ >> karta „Rozšírené“
• Vyberte položku „Umiestnenie“ >> nastavte šírku na „Vlastné“.
• Vyberte „%“ >>, aby mala miniaplikácia rovnakú šírku (v percentách) prázdneho priestoru okolo nej.
• Kliknite na kartu „Obsah“ >> „Toggle Align“ >> vyberte „Right“.

To vám umožní zarovnať prepínaciu ponuku kdekoľvek v rámci šírky miniaplikácie.

Teraz dokončme prispôsobenie prepínacej ponuky.

• „Obsah“ >> Kliknite na prepínač „Celá šírka“ a nastavte ho na „Áno“.
• „Štýl“ >> Odstráňte pozadie potiahnutím pruhu „Výber farby“ úplne doľava.

Teraz sa pozrime, ako to vyzerá na mobilnej obrazovke.

Definovanie vlastnej šírky pre mobil

V tomto prípade ponecháme tri widgety hlavičky vo výreze. Majte však na pamäti, že pri niektorých webových stránkach môže mať zmysel vynechať niektoré prvky z hlavičky pri prezeraní na mobile alebo tablete.

V tomto prípade sa pri zobrazení na mobilnom zariadení stane hlavička, že miniaplikácie Navigačná ponuka a Logo sa nezmestia do jedného riadka.

Ak chcete vyriešiť tento problém:

Umiestnenie ponuky Nav

• Kliknite na „Ponuka Nav“ >> karta „Rozšírené“
• Vyberte „Umiestnenie“ >> nastavte šírku na „Vlastné“
• Vyberte „%“ >> Dajte miniaplikácii šírku 30%, aby sa zmestila vedľa nášho loga

Umiestnenie zoznamu ikon

• Kliknite na „Zoznam ikon“ >> „Karta Rozšírené“
• Vyberte položku „Vyplniť“ >> Zrušiť zoskupenie hodnôt
• Pridajte polstrovanie 12 pixelov na „TOP“

Veril by si tomu?

Naša hlavička pôvodne používala 2 sekcie, 12 miniaplikácií a 10 stĺpcov. Teraz naša hlavička používa 1 sekcia, 3 miniaplikácie a 1 stĺpec.

A výsledok je rovnaký!

Krok 5: Optimalizujte sekciu Hero

Prejdeme k ďalšej sekcii nášho webu: sekcia hrdina

Osvedčené postupy pre sekcie hrdinov:

• Zaistite, aby bol text sekcie hrdinu dobre viditeľný, najmä ak má obrázok na pozadí.

Ovládajte pozíciu miniaplikácie v stĺpci

Bežnou chybou, ktorú vidíme v editore Elementor, je používanie extra stĺpcov a medzier na ovládanie umiestnenia miniaplikácie.

V našom príklade model imidž hrdinu pozostáva z časti s obrázkom na pozadí. Nadpis a text sú umiestnené horizontálne pomocou dvoch stĺpcov. Vnútri sekcie je tiež vložka na vertikálne umiestnenie prvkov.

Pozrime sa, ako môžeme vytvoriť rovnaký dizajn iba s jednou sekciou:

• Odstráňte ďalší stĺpec napravo od textu.
• Odstráňte rozperu.

Namiesto toho, aby sme umiestnili náš hrdinský text na požadované miesto, použijeme možnosti zarovnania stĺpcov:

• Vyberte stĺpec.
• Nastavte „Vertikálne zarovnanie“ na „Stred“.
• Prejdite na kartu "Rozšírené".
• Vyberte položku „Vyplniť“ >> Zrušiť zoskupenie hodnôt
• Nastavte pravé vypchávky na 50%.

• Vyberte sekciu.
• Vyberte „Minimálna výška“ >> nastavte ju na 80.

Opravený kontrast medzi textami a pozadím

Je dôležité, aby každá webová stránka mala dobrý kontrast medzi textom a pozadím. Nečitateľné informácie ovplyvňujú skóre vašich webových stránok a môžu tiež odháňať návštevníkov. Tak či onak, text by mal byť vždy dobre čitateľný.

Existuje niekoľko spôsobov, ako zlepšiť prehľadnosť sekcie, ktorej pozadím je farebný obrázok (ako vidíme v tejto šablóne):

• Kliknite na hlavičku.
• Prejdite na kartu „Štýl“ >> Vyberte „Textový tieň“.

To zlepší čitateľnosť textu tým, že bude vynikať z obrázku na pozadí.

Ďalší spôsob, ako spresniť text, je použiť prekrytia.

• Vyberte sekciu >> karta "Štýl" >> "Prekrytie pozadia"
• Vyberte si jednu zo svojich celkových farieb a hrajte sa s neprehľadnosťou, kým nedosiahnete požadovaný výsledok

Krok 6: Optimalizujte časť pomocou políčok s ikonami

Teraz prejdeme k našej ďalšej sekcii, kde v súčasnosti máme vnútornú sekciu so štyrmi stĺpcami. V súčasnosti má každý stĺpec tri miniaplikácie: Miniaplikácia obrázku, miniaplikácia a miniaplikácia textového editora.

Pozrime sa, ako môžeme túto časť zjednodušiť, aby sa zlepšila jej výkonnosť.

Obsah oblasti ikon

• V ponuke miniaplikácií vyberte tlačidlo »Pole ikon widgetu« a presuňte ho do stĺpca
• Vyberte „pole s ikonami“
• Ukážte na obrázok ikony
• Vyberte „Stiahnuť SVG“ **
• Vložte vlastnú ikonu

** Poznámka: Odznaky sú súbory SVG. Ak nie, prejdite na informačný panel WordPress a potom na položku Elementor >> Nastavenia. Budete musieť povoliť Povoliť sťahovanie nefiltrovaných súborov.

• Zadajte svoj "názov"
• Zadajte svoj „Popis“
• Vyberte položku „Štýl“ >> Vyberte celkovú farbu
• Vyberte položku „Veľkosť“ a potiahnite lištu na požadovanú veľkosť
• Vyberte „Padding“ a potiahnite lištu na číslo, ktoré si vyberiete

Krok 8: Optimalizujte sekciu „Služby“

Teraz sa chystáme znova vytvoriť sekciu „Služby“, ktorá v súčasnosti používa dva stĺpce, dva obrázky, miniaplikáciu s názvom a miniaplikáciu textového editora.

Vytvorme rovnaký dizajn v novej sekcii, ale iba s jedným stĺpcom.

• Vytvorte novú sekciu so stĺpcom
• V časti „Rozloženie“ >> nastavte „Šírka obsahu“ na „Celá šírka“
• Na paneli miniaplikácií vyberte položku „Widget Image Box“ a presuňte ju do stĺpca

(Do tohto widgetu budeme môcť integrovať všetky aktíva sekcie)

• Napíšte názov
• Napíšte popis

Pre obrázok ponecháme súčasný dizajn, ktorý sme použili pre naše obrázky.

• Vložte rovnaký obrázok z knižnice médií
• Prejdite na kartu „Obsah“ >> Nastavte „Pozícia obrázka“ na „Vpravo“

• Prejdite na kartu „Štýl“
• Zvýšte vzdialenosť medzi prvkami
• Zväčšite „Šírku“ obrázku
• Rozbaľte sekciu „Obsah“
• Vyberte zarovnanie „v strede“
• Nastavte „Vertikálne zarovnanie“ na „Stred“
• Definujte celkové farby a písma podľa vlastného výberu
• Prejdite na kartu "Rozšírené"
• Pridajte do miniaplikácie 10% výplň

Sekcia Služby má teraz rovnaký dizajn, ale s menším počtom aktív.

Krok 9: Optimalizujte časť s výzvou na akciu

Osvedčené postupy pre odkazy na výzvu na akciu:

• Uistite sa, že všetky vaše odkazy na sociálne siete fungujú správne a tlačidlo obsahuje odkaz.
• Keď pridáte odkaz na inú webovú stránku, zadajte tento atribút: „rel | noopener“

(Môžete to urobiť kliknutím na ikonu ozubeného kolieska a zadaním atribútu do položky „Vlastné atribúty“). Odkaz sa tým otvorí na novej karte prehliadača a zvýši sa vaše skóre výkonnosti.

Nasledujúca časť predstavuje výzvu na akciu pre naše služby.

Sekcia má v súčasnosti dva stĺpce, ktoré obsahujú:

1. Obrázok na pozadí s rozperou
2. Dve hlavičky, interná sekcia, textový editor a tlačidlo

Vytvorme rovnaký dizajn v novej sekcii, ale iba s jedným stĺpcom.

• Prejdite na kartu „Rozloženie“ >> nastavte „Šírku obsahu“ na „Celú šírku“
• Prejdite na kartu „Rozšírené“ >> Odstráňte všetky ďalšie náplne

• Na paneli miniaplikácií vyberte „Widget na výzvu na akciu“ a presuňte ho do stĺpca
• Nastavte „Pozíciu obrázka“ na „Vľavo“
• Vyberte svoj obrázok z knižnice médií
• Rozbaľte sekciu „Obsah“
• Napíšte hlavičku
• Napíšte popis
• Zadajte text tlačidla

• Prejdite na kartu „Štýl“
• Medzi prvky pridajte „polstrovanie“
• Upravte šírku obrázka
• Rozbaľte sekciu „Obsah“
• Vyberte globálne písmo pre svoj názov
• Zväčšite medzeru medzi popisom a tlačidlom
• Vyberte globálne farby vhodné pre každý zdroj
• Rozbaľte sekciu „Tlačidlo“
• Nastavte jeho veľkosť na „Veľká“
• Prispôsobte si ho podľa svojich potrieb, napríklad podľa farby pozadia a polomeru orámovania

Doteraz to bola 2 stĺpcová sekcia so 6 widgetmi. Teraz je to sekcia s 1 stĺpcom a iba 1 miniaplikáciou!

Krok 10: Optimalizujte karusel s obrázkom

Súčasný dizajn našej sekcie Image Carousel má bežnú chybu v spôsobe zobrazovania viacerých obrázkov.

Tento dizajn pozostáva z 5 stĺpcov, čo je praktika, ktorou sa mnohí používatelia riadia veľkosťou svojich obrázkov.

Pozrime sa na jednoduchší spôsob, ktorý tiež optimalizuje výkon vašich webových stránok.

• Vytvorte novú sekciu s 1 stĺpcom
• Prejdite na kartu „Rozloženie“ >> nastavte „Šírku obsahu“ na „Celú šírku“
• Na paneli miniaplikácií vyberte tlačidlo »Image Carousel Widget« a presuňte ho do stĺpca
• Pridajte požadované obrázky z knižnice médií

• Prejdite na kartu „Obsah“
• Nastavte „Veľkosť obrázka“ na „Stredné - 300 x 300“
• Podľa svojich preferencií upravte „Prezentácie na zobrazenie“, „Posúvanie snímok“ a „Navigácia“

• Prejdite na kartu „Štýl“
• Nastavte „Vertikálne zarovnanie“ na „Stred“
• Prispôsobte medzery

• Prejdite na kartu "Rozšírené"
• Pridajte potrebnú náplň

To, čo bolo kedysi sekciou s piatimi stĺpcami, je teraz iba 5 stĺpec.

Prejdeme k ďalšej sekcii, kde môžeme optimalizovať videá na našom webe.

Krok 11: Optimalizujte sekciu videa

Osvedčené postupy pre videoobsah:

• Lazy Load používajte vždy, keď je to možné, aby sa skrátila doba načítania vašich webových stránok.

Čo sa stane, keď použijeme možnosť „Lenivé zaťaženie“?

Technicky povedané, kód na vloženie videa je nahradený statickým obrázkom. Video sa tak načítava iba vtedy, keď používateľ klikne na obrázok - čo skutočne pomáha pri dobách načítania stránky.

To, čo teraz urobíme, je zmeniť spôsob, akým používame miniaplikáciu Video, aby to nezdržovalo rýchlosť našej stránky alebo výkonnosť webových stránok.

• Vyberte „Miniaplikácia videa“
• Prejdite na kartu „Štýl“
• Vyberte „Lazy Load“

Krok 12: Optimalizujte pätu a aktualizujte ju

Bežnou chybou, ktorá sa vyskytuje na mnohých webových stránkach, je, že ich päta používa viac záhlaví pre dátum a popis, ako aj ikonu symbolu autorských práv.

Pozrime sa, ako optimalizovať pätu a zaistiť, aby bola vždy aktuálna.

Tento proces nepretržitej aktualizácie nakonfigurujeme pomocou Dynamické značky. Vďaka tomu nebudeme musieť každý rok meniť obsah hlavičky, pretože dynamické značky sa automaticky aktualizujú na aktuálny rok.

Aby sme to urobili, budeme postupovať nasledovne:

• Odstráňte ďalšie miniaplikácie a ponechajte iba miniaplikáciu Nadpis
• Vyberte miniaplikáciu Názov
• Kliknite na symbol „Dynamické značky“ napravo od poľa „Názov“ (známy aj ako „tlačidlo pre rodičov“)

• V rozbaľovacej ponuke vyberte položku ponuky „Aktuálny dátum a čas“
• Kliknite na rodičovskú ikonu kľúča
• Kliknite na kartu „Formát dátumu“ a vyberte položku ponuky „Vlastné“
• Odstráňte to, čo je aktuálne v poli „Vlastný formát“, okrem „Y“
• Vyberte kartu „Rozšírené“
• Zvýraznite pole „Vpred“ a súčasne podržte tlačidlá „možnosti“ a „G“ (alebo súčasne „ovládanie“, alt „a“ C), aby ste zadali symbol „©“.
• Pridajte medzeru za znak „©“

• Vyberte pole „Po“
• Zadajte medzeru a napíšte text, ktorý sa má zobraziť po roku, napríklad „Všetky práva vyhradené“

Môžete si všimnúť, že na ukážkovej webovej stránke v tomto návode má každý widget svoju vlastnú sekciu. Urobili sme to, aby bol návod jasnejší a jednoduchšie ho dodržať.

V ideálnom prípade čím menej sekcií máte, tým menej dodatočného kódu HTML budete mať.

Niektoré miniaplikácie môžete zlúčiť do tej istej sekcie tak, že ich presuniete myšou do vyššie uvedenej sekcie a potom odstránite prázdnu sekciu.

A to je všetko, vaše rozloženie je optimalizované!

Nové hodnotenie výkonnosti webových stránok

Výsledky skontrolujeme v okne DevTools (Inšpektor):

• Vyberte kartu „Sieť“:

Tu je niekoľko pekných a pozitívnych zmien:

• Web sa teraz načítava 568 milisekúnd
• Prešli sme z 81 žiadostí na 46
• Vyberte kartu „Maják“, kde uvidíte, že naše skóre výkonnosti sa zvýšilo zo 73 na 98

Majte na pamäti, že sme optimalizovali náš výkon bez použitia doplnkov tretích strán. Stačili len jednoduché vyladenia a osvedčené postupy.

Krok 13: Otestujte výsledky pomocou pohybových efektov

Chceme, aby bol náš web interaktívnejší a zábavnejší, ako to však ovplyvní naše výsledky? Pozrime sa, čo môžeme urobiť.

Z hlavičky urobte „pevný“ prvok:

• Vyberte hlavičku
• Prejdite na kartu "Rozšírené"
• Rozbaľte kartu „Efekty pohybu“
• Nastavte možnosť „Lepkavé“ na „Hore“

Urobte zo sekcie hrdinu „pevný“ prvok:

• Vyberte sekciu hrdina
• Prejdite na kartu „Štýl“
• Vyberte rozbaľovací zoznam „Príloha“ a zvoľte „Opravené“

použite Vstupná animácia pre hrdinov text (hlavička):

• Vyberte miniaplikáciu Hlavička
• Prejdite na kartu "Rozšírené"
• Rozbaľte kartu „Efekty pohybu“
• Vyberte vstupnú animáciu a nastavte ju na „Fade In“

Na textový popis hrdinu (widget Textový editor) použite vstupnú animáciu:

• Vyberte miniaplikáciu Textový editor
• Prejdite na kartu "Rozšírené"
• Rozbaľte kartu „Efekty pohybu“
• Vyberte „Vstupnú animáciu“ a nastavte ju na „Fade In“

To isté urobte s miniaplikáciami, ktoré nasledujú, pre jemné efekty pri načítaní stránky.

Teraz spustime test výkonnosti znova, aby sme zistili, ako pohybové efekty ovplyvnili naše skóre:

• Vráťte sa do okna „Inšpektor“
• Vyberte kartu „Maják“
• Kliknite na „Vytvoriť správu“

Teraz vidíme, že naše skóre výkonnosti bolo znížené na 97 - to rozhodne nie je veľký rozdiel a robí webovú stránku zaujímavejšou a zábavnejšou.

Môžete veriť nášmu novému skóre výkonnosti?

Sme radi, že ste teraz plne vybavení na zvýšenie svojho skóre výkonnosti na každom webe Elementor, ktorý vytvoríte. Bude to mať veľký vplyv na ciele v oblasti budovania vašich webových stránok a na úspech vášho podnikania.

Odporúčame vám uložiť si tento návod ako záložku pre budúce použitie, aby ste mohli preskúmať výkonnosť svojich webových stránok a použiť osvedčené postupy na optimalizáciu rozloženia.

A to je len začiatok - ďalšia časť tohto kurzu sa točíoptimalizácia obrazu.

V tutoriále si prejdeme každý obrázok na ukážkovom webe a naučíme sa, ako ich vylepšiť, aby boli načítania ešte efektívnejšie.

Získajte teraz prvok Elementor!

záver

Takže ! To je všetko pre tento článok, ktorý vám ukáže, ako optimalizovať rozloženie webových stránok pomocou Elementor. Ak máte nejaké obavy, ako sa tam dostať, dajte nám vedieť Komentáre.

Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.

...