Udělejte svůj web Elementor tak, aby lépe reagoval na mobily

Mobilní responzivní web je důležitou součástí každého online podnikání.

Google používá rychlost načítání mobilních stránek jako klíčový faktor hodnocení jakéhokoli webu ve vyhledávání. Je to hlavně proto, že více než polovina celosvětového webového provozu pochází z mobilního provozu.

Mobilní responzivní web je tedy nezbytný jak pro zdraví vašeho webu, tak pro lepší umístění ve vyhledávači Google. V tomto článku se zaměříme na to, jak můžeme vytvořit mobilní responzivní web pomocí tvůrce stránek Elementor.

• Co je responzivní design webových stránek Elementor
• Jak upravit nastavení pro mobil, plochu a kartu
• Upravte nadpis na displeji mobilního telefonu
• Upravte odsazení nebo okraje pro mobily
• Vytvořte každý sloupec vodorovně a skvěle se přizpůsobí všem zařízením
• Změňte obrázek na pozadí podle zobrazení na mobilu/počítači
• Změňte viditelnost libovolné sekce v zobrazení pro počítače/mobily
• Změňte pořadí sloupců
• Vytvořte alternativní sekci
• Upravte šířku sloupce
• Závěr

Co je responzivní design webových stránek Elementor

Responzivní rozvržení funguje inovativní tím, že automaticky mění velikost veškerého obsahu podle každé velikosti obrazovky. Automaticky mění velikost obrázků a obsahu na obrazovce mobilního telefonu, aby si vaši diváci mohli váš obsah prohlížet bez jakéhokoli úsilí.

Většina z nás si koupí téma, které tvrdí, že je také mobilní; věci však mohou být frustrující, když se design vašeho motivu na obrazovce mobilního telefonu úplně rozpadne.

Abychom takové situace překonali, přišli jsme s mobilním responzivním řešením, kde můžete vytvořit svůj webový design od nuly pomocí Elementor page builder . Pomocí těchto mobilních responzivních nástrojů můžete vyladit jakýkoli roh rozvržení webu, zejména typografii, výplň a okraj a zarovnání pro mobilní zařízení. Také budete moci změnit nastavení sloupců a pořadí na mobilu.

Nyní můžete upravit mobilní nastavení své stránky přepnutím do režimu mobilního zobrazení a zaškrtnutím následujících možností upravit podle mobilního rozvržení.

1. Zkontrolujte, zda některý nadpis nevypadá na mobilní obrazovce příliš velký.
2. Zkontrolujte odsazení obsahu nebo prostor po stranách obsahu
3. Zkontrolujte zarovnání sloupců stránky, jak to vypadá perfektně; uprostřed, vpravo nebo vlevo
4. Zkontrolujte pořadí sloupců, zda se zobrazují ve správném pořadí nebo je potřebujete změnit.

Nyní se pojďme ponořit hlouběji a zjistit, jak věci budou fungovat s Elementor Page builder.

Jak upravit nastavení pro mobil, plochu a kartu

Téměř všechny upravitelné funkce mají možnost upravit nastavení Mobile, Desktop a Tab. pokud kliknete na responzivní režim v dolní části nabídky

Upravte nadpis na displeji mobilního telefonu

Někdy chceme na našem webu pro stolní počítače tučný a výrazný nadpis a na displeji počítače vypadá naprosto v pořádku, ale když zapnete zobrazení pro mobily, nadpis zabere celou obrazovku a nezdá se, že by se do něj vešel.

Velikost textu libovolného textového prvku na kartě a v mobilu můžete upravit. Můžete také nastavit různé velikosti textu pro nadpisy mobilu, které vypadají skvěle na obrazovce mobilu a lépe se na obrazovku vejdou. Na této ukázkové stránce jsem vytvořil nadpis, který vypadá skvěle na desktopovém webu, zatímco na mobilní obrazovce zabírá celou obrazovku.

Pokud kliknu na možnost úprav sloupce nadpisu, mohu přejít do sekce typografie, kde mohu upravit velikost nadpisu, která vypadá dobře na počítači i na obrazovce mobilu. Mohu ovládat oba samostatně. Pro zobrazení webu pro počítače je velikost nadpisu 49 pixelů, ale v zobrazení pro mobily se nevejde

Pro přenastavení kliknu na mobilní responzivní režim > styl > typografie > upravím velikost pixelů na 30, která se snadno vejde na obrazovku mobilu.

Upravte odsazení nebo okraje pro mobily

Při nastavování výplní se doporučuje nepoužívat hodnoty v pixelech místo nastavených hodnot v EM nebo procentech, protože to zachová velikost vzhledem k celkové velikosti obrazovky.

Můžete vidět, že jsme použili výplň jako 70px vpravo a vlevo, což vypadá dobře na desktopovém webu; mobilní zobrazení pro toto nastavení je však úplný chaos.

Výplň můžeme přenastavit na 17 px na každé straně a pak to vyjde úplně v pohodě.

Alternativně můžete nastavit nastavení celých sloupců na 750 px, kde se váš obsah bude zobrazovat v krabici, aniž byste museli upravovat obrazovku na stolním i mobilním zobrazení; automaticky upraví obsah v krabici.

Vytvořte každý sloupec vodorovně a skvěle se přizpůsobí všem zařízením

Jakmile vytvoříte sloupec vodorovně, což návrháři preferují nejvíce, můžete duplikovat sekce a ušetřit čas. Vytvořte jednu sekci po druhé a poté ji znovu použijte, pokud to půjde dobře, abyste ušetřili čas.

Změňte obrázek na pozadí podle zobrazení na mobilu/počítači

Některé obrázky na pozadí vypadají dobře na ploše, ale je možné, že obrázek nebude vypadat tak větší jako na obrazovce mobilu. Myslete tedy kreativně a vyberte si jiný obrázek na obrazovce mobilu. Pro výběr jiného mobilního zobrazení klikněte na sekci > karta styl > klikněte na ikonu zařízení a vyberte mobilní zobrazení. Nyní, ať už si vyberete kterýkoli obrázek, zobrazí se pouze v mobilním zobrazení.

Změňte viditelnost libovolné sekce v zobrazení pro počítače/mobily

Můžete také ovládat viditelnost libovolné sekce nebo sloupce podle zařízení.

Někdy zobrazujeme náš obsah nebo obrázky ve dvou nebo třech sekcích nebo různých sloupcích, ale neradi je zobrazujeme na mobilu. Elementor proto může skrýt sekci, kterou nechcete zobrazovat v mobilním zobrazení.

Přejděte do > nastavení sekce > pokročilé > responzivní Zde uvidíte různé možnosti nebo vizuální preference; můžete skrýt sekci na ploše, skrýt na kartě nebo skrýt na mobilu v závislosti na vašich preferencích.

Změňte pořadí sloupců

Pořadí sloupců můžete také změnit v sekci nastavení. Přejít na; nastavení sekce > Upřesnit > Responzivní > Reverzní sloupec a klikněte na ano.

Vytvořte alternativní sekci

Vytvořte alternativní sekce v zobrazení pro mobily a počítače. Sekce posuvníku někdy nevypadá tak užitečně na mobilu jako na počítači, takže místo posuvné sekce můžete použít jakoukoli jinou sekci. Můžete to udělat tak, že přejděte na kartu Upřesnit > zapněte / vypněte viditelnost části, kterou nechcete zobrazovat, a přidejte na ni alternativní obrázek.

Upravte šířku sloupce

Všechny části sloupců získají při zobrazení v mobilním zobrazení 100% šířku. Šířku lze však změnit podle šířky sloupce na mobilu. Pokud máte dva sloupce, můžete nastavit maximální šířku každé sekce na 50 %.

Závěr

Elementor přichází se všemi výkonnými funkcemi pro ovládání responzivního rozvržení sloupců všech velikostí obrazovky. Umožňuje vám znovu upravit každou sekci podle výběru režimu zobrazení. Udržování webu optimalizovaného pro mobily je nevyhnutelné, protože algoritmus Google považuje hodnocení webů optimalizovaných pro mobily za nejdůležitější. Responzivní weby jsou nejen nezbytné pro lepší SEO, ale musíte také získat větší návštěvnost, protože více než 80 % návštěvnosti pochází z mobilních zobrazení.

Tvůrce stránek Elementor nyní přichází s exkluzivními funkcemi, které uživatelům umožňují vytvořit web vhodný pro mobily bez velkého úsilí. Doufám, že můj článek bude pro vás užitečný a získáte všechny své odpovědi na to, jak vytvořit responzivní web pomocí Elementor.