Jak optimalizovat rozložení vašich webových stránek pomocí Elementoru

Chcete vědět, jak optimalizovat vzhled vašeho webu pomocí Elementor ?

Optimalizace výkonu webových stránek je jedním z nejdůležitějších aspektů zkušenosti uživatelů. Web s pomalým načítáním může frustrovat jakéhokoli uživatele, což často vede k a míra odchodů vysoká, což může nepříznivě ovlivnit úspěch našeho podnikání.

Výkon webových stránek může být ovlivněn mnoha faktory, například: velké velikosti obrázků, konfigurace serveru, příliš mnoho doplňků, mimo jiné.

Výkon webových stránek je jednou z našich nejsilnějších hodnot jako tvůrců webu. Proto jsme vytvořili tento kurz v 5 částech.

Nyní se můžete naučit, jak vytvářet rozložení a příspěvky pomocí optimálních technik. Tyto znalosti zajistí, že vaše webové stránky nebudou obsahovat nadbytečné sekce, sloupce nebo widgety, které prostě nejsou potřeba. Prozkoumáme také některé vestavěné funkce widgetů, abychom prodloužili dobu načítání.

Na konci tohoto tutoriálu budete plně připraveni optimalizovat výkon každého webu Elementor vytváříte a okamžitě sklízíte odměny.

Lekce 1: Optimalizované postupy optimalizace rozvržení

V naší první lekci se podíváme na nejefektivnější způsob vytváření stránek a příspěvků v editoru Elementor. Často vidíme použití příliš mnoha sekcí, sloupců, vnitřních sekcí a widgetů, kdy stejného rozvržení bylo možné dosáhnout s použitím mnohem menšího počtu prvků.

Používání nadměrného množství prvků zpomaluje výkon vašich webových stránek, pojďme se tedy podívat na to, jak vytvářet weby pomocí Elementor nejefektivnějším způsobem.

Budeme se zabývat následujícími tématy:

• Bližší pohled na strukturu správné stránky
• Zobrazení a testování výkonu vašich webových stránek
• Optimalizace obsahu záhlaví, zápatí a stránky
• Příklady dobrých a špatných postupů pro rozložení webových stránek
• Správné používání widgetů, polohování a globálních stylů
• Tipy, jak se vyhnout prodlevě načítání, zlepšit SEO a prodloužit dobu načítání
• Optimalizace přístupnosti
• Snížení množství prvků DOM
• A mnohem víc !

Abychom lépe porozuměli optimálnímu rozložení v Elementoru, prozkoumáme šablonu Elementor, která ukazuje běžné zneužívání sekcí, sloupců a widgetů. Na konci této lekce kompletně přestavíme celou tuto stránku snížením počtu sloupců a widgetů. Naše úvodní stránka se skládá z devíti sekcí, 31 sloupců, pěti interních sekcí a 44 widgetů.

Na konci tutoriálu se naše optimalizovaná stránka zmenší na šest sekcí, sedm sloupců a 16 widgetů.

Použijeme zdarma, světlo Ahoj témaa každou část šablony znovu vytvoříme a zlepšíme celkový výkon webu pomocí osvědčených postupů.

Testování na špatné praktiky

Než se vrhneme na optimalizaci rozvržení webových stránek, proveďte test naší stránky, abychom plně pochopili, co se stane, když někdo navštíví náš web. Jakmile provedeme všechny naše optimalizace, zopakujeme test a porovnáme výsledky.

Krok 1: Ověřte svůj web v anonymním okně

• Otevřete nové okno v „anonymním režimu“ a zadejte adresu URL testované webové stránky.

Krok 2: Ověřte, zda používáte přímou cestu URL

Pokud si nejste jisti odkazem na svou stránku, snadno jej najdete na hlavním panelu WP:

• Kliknutím na „Stránky“ zobrazíte všechny stránky na vašem webu.
• Umístěte kurzor na stránku a klikněte na možnost „Zobrazit“. Tím se dostanete přímo na vaši stránku.
• Zkopírujte a vložte tuto adresu URL do anonymního okna a jakmile se web načte, jste připraveni jej otestovat!

Testování a zobrazení výsledků výkonu

Krok 1: Otestujte výsledky výkonu

Možná jste v minulosti používali Nástroje pro vývojáře Chrome.

Pokud ne, za účelem kontroly a zobrazení obsahu HTML a CSS na vaší stránce:

• Klikněte pravým tlačítkem kdekoli na své stránce a klikněte na „Zkontrolovat“. Zobrazí se několik záložek, kde si můžete přečíst HTML a CSS, hledat chyby, získávat výsledky SEO a spouštět různé testy.
• Vyberte kartu Síť a stisknutím tlačítek cmd nebo ctrl + R načtěte výsledky.

Jak vidíte, načtení našeho aktuálního rozložení trvá 2,88 sekundy a provede 81 požadavků.

Krok 2: Zobrazení výsledků výkonu

• Přepněte na kartu Maják, kde můžeme na naší stránce spustit zprávu o auditu.

To nám poskytne více informací o aktuálním výkonu stránky.

• Vyberte „Generovat zprávu“. Po chvíli se zobrazí vaše hlášení.

Aktuálně dostáváme hodnocení výkonu 73/100, na kterém můžeme určitě zapracovat.

V ideálním případě bychom chtěli, aby všechna tato čísla byla zelená. Nyní přejděme k optimalizaci naší stránky a jejímu vylepšování statistika.

Mějte na paměti, že po každém kroku optimalizace, který provedeme, můžeme ze změn převzít některé osvědčené postupy a pamatovat na ně pro budoucí weby, které vytváříme.

Optimalizace prvků stránky

Krok 1: Optimalizujte záhlaví

Začněme s hlavička.

Jak vidíte na tomto návrhu, záhlaví bylo vytvořeno ze tří sloupců.

V prvním sloupci se naše logo skládá ze dvou widgetů:

1. Un Widget obrázku který zobrazuje soubor obrázku .png našeho loga
2. Widget názvu.

Ve druhém sloupci se nabídka záhlaví skládá z našeho widgetu navigační nabídky.

Třetí sloupec obsahuje:

1. Interní widget sekce (který ovládá pozici ikonového widgetu).
2. Naše kontaktní údaje na záhlaví

Podívejme se, jak zde můžeme minimalizovat počet sekcí, widgetů a sekcí.

Krok 2: Vytvořte nové záhlaví

Sloupec 1:

• Vytvořte 1 sekci pouze s 1 sloupcem.
• Přidat Widget s logem webu a přetáhněte ji do sekce.

Doporučené postupy pro obrázky:

• Každému souboru obrázku na vašem webu přiřaďte relevantní název a alternativní text v knihovně médií.

To zlepší přístupnost vaší stránky a hodnocení vašeho vyhledávače. V logu, které jsme původně použili, je název pro aktuální obrázek irelevantní a neexistuje žádný alternativní text.

• Definujte rozměry obrázku uvnitř widgetu.

To umožňuje, aby byla stránka načtena se správným prostorem před načtením obrázků, čímž se zabrání zpoždění rozložení (faktor měřený prohlížeči).

V příkladu, na kterém společně pracujeme, vyřešte tento problém tak, že přejdete na kartu Styl a nastavíte šířku obrázku na 200 pixelů.

sloup 2

Zpět na panel widgetů:

• Přetáhněte widget navigační nabídky pod logo
• Nastavte ukazatel na „Žádný“
• Přejděte na kartu „Styl“ a přidejte požadované písmo (aby odpovídalo našemu předchozímu designu)

Doporučené postupy pro celkový styling:

• Nepoužívejte více než 2 různá písma, která obsahují více hmotností (Globální písma).
• Vyhněte se výběru různých barev pro každou položku pomocí nástroje pro výběr barev (Globální barvy).
• Zlepšete rychlost načítání svých webových stránek generováním menšího počtu dotazů (celková písma).
• Zbytečný kód opakujte dvakrát (globální barvy).
• Udržujte konzistenci a kontrolu nad svým modelem (celkový styl).

Globální písma:

To lze provést pomocí funkce Global Fonts:

• Přejděte na kartu „Styl“ a přidejte preferované písmo (aby odpovídalo našemu předchozímu designu) výběrem jednoho, proveďte malou změnu a umístěte kurzor nad ikonu plus.
• Klikněte na ikonu plus a vyberte požadovanou rodinu písem
• Styly, které budete v šabloně používat, uložte jako globální písma

Tento styl pak můžete použít na každém widgetu, který vytvoříte.

Globální barvy:

Stejnou metodu lze použít pro vaše celkové barvy:

• Klikněte na „Globální“
• Najeďte myší na výběr barvy a klikněte na něj
• Vyberte barvu a přejděte na ikonu plus
• Klikněte na „Globální“ >> vyberte „Hlavní“

Jakmile to uděláte, barva se uloží do palety barev vaší šablony, takže ji můžete vybrat ze svého seznamu Globální barvy, kdykoli ji potřebujete pro položku nebo widget.

Než budeme pokračovat v záhlaví, nastavme svislé odsazení na nulu.

Krok 3: Upravte záhlaví

Sloupec 3

• Přejděte na panel „Widgety“
• Přetáhněte widget Seznam ikon pod nabídku.
• Odebrat další položky seznamu
• Přidejte svůj text
• Vyberte ikonu podle svého výběru
• Přejděte na kartu „Styl“
• Definujte celkové barvy a písma podle svého výběru

Nyní musíme opravit ještě jednu věc - tři prvky záhlaví jsou aktuálně naskládány a nejsou navzájem zarovnány. Tento problém můžeme vyřešit změnou šířky každého prvku na jeho skutečnou velikost, aby nezabral veškerý prostor ve sloupci.

Chcete -li tento problém vyřešit:

• Vyberte widget s logem webu >> kartu 'Upřesnit'
• Vyberte „Umístění“ a nastavte jeho šířku na „Vložené“

Opakujte tento přesný krok pro widget Navigační nabídka a pro widget Seznam ikon.

Nyní, když jsou všechny prvky záhlaví v řadě, nezbývá než je správně umístit.

Definování umístění sloupce pomocí vložených prvků

• Vyberte svůj sloupec >> přejděte na kartu "Rozložení"
• V části „Svislé zarovnání“ vyberte „Dolní“
• „V horizontálním zarovnání“ vyberte „Prostor mezi“

Vyberte zarovnání „Mezera mezi“ umístí první a poslední widget na obou koncích, aby mezi všemi ostatními widgety byly stejné mezery.

První a poslední widgety však mají různé šířky, takže stejný prostor nemusí vždy vycentrovat náš interní widget.

Tento problém můžeme vyřešit úpravou okrajů:

• Vyberte widget Navigační nabídka >> kartu „Upřesnit“
• Zrušte seskupení okraje a odstraňte mezery se zápornou hodnotou

Krok 4: Zajistěte, aby hlavička reagovala

Nyní se podívejme, jak vypadá aktuální verze našeho webu na mobilních zařízeních.

Doporučené postupy pro responzivitu mobilních zařízení:

• Zjednodušte svůj návrh a přemýšlejte o způsobech, jak zajistit, aby stejné sekce reagovaly, abyste se vyhnuli použití dvojnásobného množství kódu, které ovlivní rychlost vaší stránky.

Přesně jak vidíte v této hlavičce - je běžné vidět stejnou sekci přepracovanou speciálně pro tablety a mobilní zařízení. Zde to vidíme: Byly vytvořeny dvě verze návrhu: jedna verze pro stolní počítače a jedna pro mobilní zařízení.

Místo toho, když váš design a kód reagují, rychlost stránky se zvýší, protože bude používat méně kódu.

Podívejme se, jak toho můžeme dosáhnout pomocí nastavení „Vlastní šířka“ pro naše widgety a prvky.

Nastavení vlastní šířky pro tablet

• Klikněte na nabídku „Nav Menu“ >> „Upřesnit“
• Vyberte „Umístění“ >> nastavte šířku na „Vlastní“.
• Vyberte „%“ >> a udělejte widgetu stejnou šířku (v procentech) prázdného místa kolem něj.
• Klikněte na kartu „Obsah“ >> „Přepnout zarovnání“ >> vyberte „Vpravo“.

To vám umožní zarovnat přepínací nabídku kdekoli v šířce widgetu.

Nyní dokončíme přizpůsobení přepínací nabídky.

• „Obsah“ >> Klikněte na přepínač „Celá šířka“ a nastavte jej na „Ano“.
• „Styl“ >> Odstraňte pozadí přetažením lišty „Výběr barvy“ úplně doleva.

Nyní se podívejme, jak to vypadá na mobilní obrazovce.

Definování vlastní šířky pro mobilní zařízení

V tomto scénáři ponecháme tři widgety záhlaví uvnitř výřezu. Mějte však na paměti, že u některých webových stránek může mít větší smysl vynechat určité prvky z hlavičky při prohlížení na mobilu nebo tabletu.

V tomto případě se s naší hlavičkou při zobrazení na mobilu stane, že se widgety Navigační nabídka a Logo nevejdou do jednoho řádku.

Chcete -li tento problém vyřešit:

Umístění nabídky Nav

• Klikněte na "Nabídka Nav" >> záložka "Pokročilé"
• Vyberte „Umístění“ >> nastavte šířku na „Vlastní“
• Vyberte „%“ >> Dejte widgetu šířku 30%, aby se vešel vedle našeho loga

Umístění seznamu ikon

• Klikněte na „Seznam ikon“ >> „Pokročilé“
• Vyberte „Vyplnit“ >> Oddělit hodnoty
• Přidejte polstrování 12 pixelů na „TOP“

Věříš tomu?

Naše hlavička byla původně použita 2 sekce, 12 widgetů a 10 sloupců. Nyní používá naše hlavička 1 sekce, 3 widgety a 1 sloupec.

A výsledek je stejný!

Krok 5: Optimalizujte sekci Hero

Přejdeme k další části našeho webu: sekce hrdina

Doporučené postupy pro sekce hrdinů:

• Zajistěte, aby byl text sekce hrdiny dobře viditelný, zvláště pokud má obrázek na pozadí.

Ovládejte pozici widgetu ve sloupci

Běžnou chybou, kterou vidíme v editoru Elementor, je použití dalších sloupců a mezer k ovládání umístění widgetu.

V našem vzorovém modelu náš obraz hrdiny skládá se z části s obrázkem na pozadí. Nadpis a text jsou umístěny vodorovně pomocí dvou sloupců. Uvnitř sekce je také vložka pro vertikální rozmístění prvků.

Podívejme se, jak můžeme vytvořit stejný design pouze s jednou sekcí:

• Odstraňte nadbytečný sloupec napravo od textu.
• Vyjměte mezikus.

Místo toho, abychom umístili náš hrdinský text na požadované místo, použijeme možnosti zarovnání sloupců:

• Vyberte sloupec.
• Nastavte „Svislé zarovnání“ na „Střední“.
• Přejděte na kartu „Upřesnit“.
• Vyberte „Vyplnit“ >> Oddělit hodnoty
• Nastavte pravé polstrování na 50%.

• Vyberte sekci.
• Vyberte „Minimální výška“ >> nastavte ji na 80.

Opravený kontrast mezi texty a pozadím

Je důležité, aby každý web měl dobrý kontrast mezi textem a pozadím. Nečitelné informace ovlivňují skóre vašich webových stránek a mohou také odhánět návštěvníky. Ať tak či onak, text by měl být vždy jasně čitelný.

Existuje několik způsobů, jak zlepšit srozumitelnost části, jejíž pozadí je barevný obrázek (jak vidíme v této šabloně):

• Klikněte na záhlaví.
• Přejděte na kartu „Styl“ >> Vyberte „Stín textu“.

To zlepší čitelnost textu tím, že bude vyčnívat z obrázku na pozadí.

Dalším způsobem, jak zpřehlednit text, je použít překryvy.

• Vyberte sekci >> Záložka 'Styl' >> 'Překrytí na pozadí'
• Vyberte jednu ze svých celkových barev a pohrajte si s neprůhledností, dokud nedosáhnete požadovaného výsledku

Krok 6: Optimalizujte sekci pomocí políček s ikonami

Nyní přejdeme k naší další sekci, kde v současné době máme vnitřní sekci se čtyřmi sloupci. V současné době má každý sloupec tři widgety: Widget obrázku, Widget nadpisu a Widget textového editoru.

Podívejme se, jak můžeme tuto část zjednodušit, abychom zlepšili její výkon.

Obsah oblasti ikon

• V nabídce widgetů vyberte tlačítko »Widget Icon Box« a přetáhněte jej do sloupce
• Vyberte pole „Ikona“
• Ukažte na obrázek ikony
• Vyberte „Stáhnout SVG“ **
• Vložte vlastní ikonu

** Poznámka: Odznaky jsou soubory SVG. Pokud jste tak neučinili, přejděte na hlavní panel WordPress a poté přejděte na Elementor >> Nastavení. Budete muset povolit Povolit stahování nefiltrovaných souborů.

• Zadejte svůj „název“
• Zadejte svůj „Popis“
• Vyberte „Styl“ >> Vyberte celkovou barvu
• Vyberte „Velikost“ a přetáhněte lištu na požadovanou velikost
• Vyberte „Padding“ a přetáhněte lištu na vámi zvolené číslo

Krok 8: Optimalizujte sekci „Služby“

Nyní se chystáme znovu vytvořit sekci „Služby“, která v současné době používá dva sloupce, dva obrázky, widget nadpisu a widget textového editoru.

Vytvořme stejný design v nové sekci, ale pouze s jedním sloupcem.

• Vytvořte novou sekci se sloupcem
• V "Rozložení" >> nastavte "Šířka obsahu" na "Celá šířka"
• Na panelu widgetů vyberte „Widget Image Box“ a přetáhněte jej do sloupce

(Do tohoto widgetu budeme moci integrovat všechna aktiva sekce)

• Zadejte název
• Zadejte popis

U obrázku ponecháme aktuální design, který jsme pro naše obrázky použili.

• Vložte stejný obrázek z knihovny médií
• Přejděte na kartu „Obsah“ >> Nastavte „Umístění obrázku“ na „Vpravo“

• Přejděte na kartu „Styl“
• Zvětšete mezery mezi prvky
• Zvětšete „Šířku“ obrázku
• Rozbalte sekci „Obsah“
• Vyberte zarovnání „na střed“
• Nastavte „Svislé zarovnání“ na „Střední“
• Definujte celkové barvy a písma podle svého výběru
• Přejděte na kartu „Upřesnit“
• Přidejte do widgetu 10% výplň

Sekce Služby má nyní stejný design, ale s menším počtem aktiv.

Krok 9: Optimalizujte sekci výzvy k akci

Doporučené postupy pro odkazy na CTA:

• Ujistěte se, že všechny vaše odkazy na sociální média fungují správně a že tlačítko obsahuje odkaz.
• Když přidáte odkaz na jinou webovou stránku, zahrňte tento atribut: „rel | noopener“

(To lze provést kliknutím na ikonu ozubeného kola a zadáním atributu do pole „Vlastní atributy“). Otevře se odkaz na nové kartě prohlížeče a zvýší se vaše skóre výkonu.

Následující část představuje výzvu k akci pro naše služby.

Sekce má v současné době dva sloupce, které obsahují:

1. Obrázek na pozadí s mezerníkem
2. Dvě záhlaví, interní část, textový editor a tlačítko

Vytvořme stejný design v nové sekci, ale pouze s jedním sloupcem.

• Přejděte na kartu „Rozložení“ >> nastavte „Šířka obsahu“ na „Celá šířka“
• Přejděte na kartu „Upřesnit“ >> Odstraňte veškerou další náplň

• Na panelu widgetů vyberte „Widget na výzvu k akci“ a přetáhněte jej do sloupce
• Nastavte „Pozici obrázku“ na „Vlevo“
• Vyberte svůj obrázek z knihovny médií
• Rozbalte sekci „Obsah“
• Zadejte záhlaví
• Zadejte popis
• Zadejte text tlačítka

• Přejděte na kartu „Styl“
• Přidejte mezi prvky „Padding“
• Upravte šířku obrázku
• Rozbalte sekci „Obsah“
• Vyberte globální písmo pro svůj název
• Zvětšete mezeru mezi popisem a tlačítkem
• Vyberte globální barvy vhodné pro každý zdroj
• Rozbalte sekci „Tlačítko“
• Nastavte jeho velikost na „Velká“
• Přizpůsobte si to podle svých potřeb, jako je barva pozadí a poloměr ohraničení

Doposud to byla 2sloupcová sekce se 6 widgety. Nyní je to 1 sloupcová sekce s pouze 1 widgetem!

Krok 10: Optimalizace Image Carousel

Současný design naší sekce Image Carousel má běžnou chybu ve způsobu zobrazení více obrázků.

Tento design se skládá z 5 sloupců, což je praxe, kterou mnoho uživatelů obvykle používá k ovládání velikosti svých obrázků.

Podívejme se na jednodušší způsob, který také optimalizuje výkon vašich webových stránek.

• Vytvořte novou sekci s 1 sloupcem
• Přejděte na kartu „Rozložení“ >> nastavte „Šířka obsahu“ na „Celá šířka“
• Na panelu widgetů vyberte tlačítko »Widget Image Carousel« a přetáhněte jej do sloupce
• Přidejte požadované obrázky z knihovny médií

• Přejděte na kartu „Obsah“
• Nastavte „Velikost obrázku“ na „Střední - 300 x 300“
• Upravte „Prezentace k zobrazení“, „Posouvání snímků“ a „Navigace“ podle vašich preferencí

• Přejděte na kartu „Styl“
• Nastavte „Svislé zarovnání“ na „Střed“
• Přizpůsobte mezery

• Přejděte na kartu „Upřesnit“
• Přidejte potřebnou náplň

To, co kdysi bývalo sekcí o 5 sloupcích, je nyní pouze 1 sloupec.

Přejdeme k další části, kde můžeme videa na našem webu optimalizovat.

Krok 11: Optimalizace sekce videa

Doporučené postupy pro videoobsah:

• Používejte Lazy Load, kdykoli je to možné, aby se zlepšila doba načítání vašich webových stránek.

Co se stane, když použijeme možnost „Lazy Load“?

Technicky vzato, kód pro vložení videa je nahrazen statickým obrázkem. Tímto způsobem se video načte, pouze když uživatel klikne na obrázek - což opravdu pomáhá s dobou načítání stránky.

Co teď uděláme, je změnit způsob, jakým používáme Video Widget, aby to nezdržovalo naši rychlost stránky nebo výkonnost webu.

• Vyberte „Widget videa“
• Přejděte na kartu „Styl“
• Vyberte „Lazy Load“

Krok 12: Optimalizujte zápatí a aktualizujte jej

Běžnou chybou na mnoha webových stránkách je, že jejich zápatí používá více záhlaví pro datum a popis, stejně jako ikonu symbolu autorských práv.

Podívejme se, jak optimalizovat zápatí a zajistit, aby vždy zůstalo aktuální.

Tento proces průběžné aktualizace nakonfigurujeme pomocí Dynamické značky. Tímto způsobem nebudeme muset každý rok měnit obsah záhlaví, protože dynamické značky se automaticky aktualizují na aktuální rok.

K tomu budeme postupovat následovně:

• Odeberte další widgety a ponechte pouze widget Titul
• Vyberte widget Titul
• Klikněte na symbol „Dynamické značky“ napravo od pole „Název“ (známé také jako „tlačítko pro rodiče“)

• Z rozevírací nabídky vyberte položku nabídky „Aktuální datum a čas“
• Klikněte na rodičovskou ikonu klíče
• Klikněte na kartu „Formát data“ a vyberte položku nabídky „Vlastní“
• Smažte to, co je aktuálně v poli „Vlastní formát“, kromě „Y“
• Vyberte kartu „Upřesnit“
• Zvýrazněte pole „Vpřed“ a podržte současně klávesy „možnosti“ a „G“ (nebo současně „ovládání“, alt ”a„ C “) a zadejte symbol„ © “.
• Za znak „©“ přidejte mezeru

• Vyberte pole „Po“
• Zadejte mezeru a napište text, který se má zobrazit po roce, například „Všechna práva vyhrazena“

Můžete si všimnout, že na ukázkovém webu v tomto tutoriálu má každý widget svoji sekci. Udělali jsme to, aby byl tutoriál přehlednější a snáze sledovatelný.

V ideálním případě, čím méně sekcí máte, tím méně dalšího HTML CODE budete mít.

Některé widgety můžete sloučit do stejné sekce tak, že je přetáhnete do výše uvedené části a poté odstraníte prázdnou sekci.

A je to, vaše rozložení je optimalizováno!

Nové hodnocení výkonu webových stránek

Výsledky zkontrolujeme v okně DevTools (Inspector):

• Vyberte kartu „Síť“:

Zde jsou některé pěkné a pozitivní změny:

• Načtení webu nyní trvá 568 milisekund
• Přešli jsme z 81 žádostí na 46
• Vyberte kartu „Maják“, kde uvidíte, že se naše výkonnostní skóre zvýšilo ze 73 na 98

Mějte na paměti, že jsme optimalizovali náš výkon bez použití jakýchkoli doplňků třetích stran. Stačily jen jednoduché vylepšení a osvědčené postupy.

Krok 13: Otestujte výsledky pomocí pohybových efektů

Chceme, aby naše stránky byly interaktivnější a zábavnější, ale jak to ovlivní naše výsledky? Podívejme se, co můžeme udělat.

Udělejte ze záhlaví „opravený“ prvek:

• Vyberte záhlaví
• Přejděte na kartu „Upřesnit“
• Rozbalte kartu „Efekty pohybu“
• Nastavte možnost „Sticky“ na „Top“

Udělejte ze sekce hrdiny „opravený“ prvek:

• Vyberte sekci hrdina
• Přejděte na kartu „Styl“
• Vyberte rozevírací seznam „Příloha“ a vyberte „Opraveno“

Použijte a Vstupní animace pro text hrdiny (záhlaví):

• Vyberte widget Záhlaví
• Přejděte na kartu „Upřesnit“
• Rozbalte kartu „Efekty pohybu“
• Vyberte vstupní animaci a nastavte ji na „Fade In“

Použijte vstupní animaci pro textový popis hrdiny (widget Textový editor):

• Vyberte widget Textový editor
• Přejděte na kartu „Upřesnit“
• Rozbalte kartu „Efekty pohybu“
• Vyberte "Vstupní animace" a nastavte ji na "Fade In"

Totéž proveďte s widgety, které přijdou po, pro jemné efekty při načítání stránky.

Nyní spustíme test výkonu znovu, abychom zjistili, jak pohybové efekty ovlivnily naše skóre:

• Vraťte se do okna „Inspektor“
• Vyberte kartu „Maják“
• Klikněte na „Vytvořit zprávu“

Nyní vidíme, že naše výkonnostní skóre bylo sníženo na 97 - to rozhodně není velký rozdíl a díky tomu je web zajímavější a zábavnější.

Můžete věřit našemu novému skóre výkonu?

Jsme potěšeni, že nyní můžete být plně vybaveni pro zvýšení skóre výkonu na každém webu Elementor, který vytvoříte. Bude to mít velký vliv na cíle při budování vašich webových stránek a na úspěch vašeho podnikání.

Doporučujeme, abyste si tento návod uložili do záložek pro budoucí použití, abyste mohli prověřit výkon svých webových stránek a použít osvědčené postupy k optimalizaci rozvržení.

A to je jen začátek - věnuje se další část tohoto kurzuoptimalizace obrazu.

V tutoriálu si projdeme každý obrázek na ukázkovém webu a zjistíme, jak je vylepšit pro ještě efektivnější načítání.

Získejte nyní prvek Elementor Pro!

Proč investovat do čističky vzduchu?

Tak ! To je vše pro tento článek, který vám ukáže, jak optimalizovat rozvržení webu pomocí Elementor. Pokud máte nějaké obavy, jak se tam dostat, dejte nám vědět commentaires.

Můžete však také konzultovat naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Mezitím sdílejte tento článek na různých sociálních sítích.

...