Tegye mobilbarátabbá Elementor webhelyét

Egy mobilbarát weboldal elengedhetetlen része minden online vállalkozásnak.

A Google a mobil oldalak betöltési sebességét kulcsfontosságú meghatározó tényezőként használja bármely webhely keresési rangsorolásában. Ez főként azért van, mert a globális webforgalom több mint fele mobilforgalomból származik.

Ezért egy mobilbarát weboldal elengedhetetlen mind a webhely állapota, mind a Google keresőmotorjában elért jobb helyezés szempontjából. Ebben a cikkben arra összpontosítunk, hogyan hozhatunk létre mobilbarát weboldalt az Elementor oldalkészítővel.

• Mi az Elementor reszponzív weboldal-dizájnja?
• A mobil, asztali és lapbeállítások módosítása
• Címsor módosítása mobilkijelzőn
• Margók vagy kitöltés beállítása mobilhoz
• Hozz létre minden oszlopot vízszintesen, és az minden eszközön csodálatosan fog alkalmazkodni
• Háttérkép módosítása mobil/asztali nézet szerint
• Bármely szakasz láthatóságának módosítása asztali/mobil nézetben
• Az oszlopok sorrendjének módosítása
• Hozz létre egy alternatív szakaszt
• Oszlopszélesség beállítása
• Következtetés

Mi az Elementor reszponzív weboldal-dizájnja?

A reszponzív elrendezés innovatív módon működik, mivel automatikusan átméretezi az összes tartalmat az egyes képernyőméretekhez. Automatikusan átméretezi a képeket és a tartalmat a mobilképernyőn, így a nézők könnyedén megtekinthetik a tartalmat.

Legtöbben olyan témát vásárolunk, amely azt állítja, hogy mobilra optimalizált; azonban a dolgok frusztrálóak lehetnek, ha a témád dizájnja teljesen összeomlik a mobilképernyőn.

Az ilyen helyzetek leküzdésére kidolgoztunk egy mobilra optimalizált megoldást, amellyel a weboldalad dizájnját a nulláról építheted fel az Elementor oldalkészítő reszponzív elrendezési eszközeivel. Ezeknek a mobilra optimalizált eszközöknek a segítségével a weboldalad elrendezésének bármely sarkát módosíthatod, különösen a tipográfiát, a kitöltést, a margókat és a mobil igazítást. Emellett mobilon is módosíthatod az oszlopbeállításokat és a sorrendet.

Mostantól szerkesztheted az oldalad mobil beállításait a mobil nézet módra váltva, és a következő beállítások bejelölésével igazíthatod őket a mobil elrendezéshez.

1. Ellenőrizd, hogy valamelyik címsor túl nagynak tűnik-e mobilképernyőn.
2. Ellenőrizd a tartalom kitöltéseit vagy a tartalom szélein lévő teret
3. Ellenőrizd az oldal hasábjainak igazítását, hogy tökéletesen néz-e ki; középre, jobbra vagy balra
4. Ellenőrizd az oszlopok sorrendjét, hogy helyesen jelennek-e meg, vagy módosítanod kell-e.

Most pedig ássunk mélyebbre, és derítsük ki, hogyan fognak működni a dolgok az Elementor oldalépítővel.

A mobil, asztali és lapbeállítások módosítása

Szinte az összes szerkeszthető funkciónál lehetőség van a mobil, asztali és fülbeállítások módosítására. Ehhez kattintson a menü alján található reszponzív módra

Címsor módosítása mobilkijelzőn

Néha előfordul, hogy egy félkövér és feltűnő címsort szeretnénk az asztali weboldalunkon, és ez tökéletesen néz ki az asztali képernyőn, de amikor bekapcsoljuk a mobil nézetet, a címsor elfoglalja az egész képernyőt, és nem tűnik beleillőnek.

A fülön és a mobilon bármely szövegelem méretét beállíthatod. Különböző szövegméreteket is beállíthatsz a mobil címsorokhoz, amelyek jól mutatnak mobil képernyőn, és jobban illeszkednek a képernyőhöz. Ezen a demó oldalon létrehoztam egy címsort, amely remekül mutat az asztali webhelyen, míg mobil képernyőn a teljes képernyőt elfoglalja.

Ha a címsor oszlop szerkesztési opciójára kattintok, beléphetek a tipográfia részbe, ahol beállíthatom a címsor méretét, ami asztali gépen és mobil képernyőn is jól néz ki. Mindkettőt külön tudom szabályozni. Az asztali webhelyem nézetében a címsor mérete 49 képpont, de mobil nézetben nem fér bele

Az újbóli beállításhoz kattints a mobilra reagáló módra > stílus > tipográfia > állítsd be a px méretet 30-ra, ami könnyen illeszkedik a mobil képernyőjéhez.

Margók vagy kitöltés beállítása mobilhoz

A kitöltés beállításakor nem ajánlott pixelben megadott értékeket használni, hanem EM-ben vagy százalékban megadott értékeket, mert ez a képernyő teljes méretéhez viszonyítva fogja megtartani a méretet.

Látható, hogy 70 képpontos kitöltést használtunk jobbra és balra, ami jól mutat asztali weboldalon; viszont mobilnézetben ez a beállítás teljes káosz.

Újra beállíthatjuk a kitöltést 17 px-re mindkét oldalon, akkor minden teljesen rendben lesz.

Alternatív megoldásként beállíthatod az összes oszlop méretét 750 képpontra, ahol a tartalom egy dobozban jelenik meg anélkül, hogy a képernyőt módosítani kellene asztali vagy mobil nézetben; a rendszer automatikusan beállítja a dobozon belüli tartalmat.

Hozz létre minden oszlopot vízszintesen, és az minden eszközön csodálatosan fog alkalmazkodni

Miután létrehoztad a vízszintes oszlopokat – amit a tervezők a legjobban preferálnak –, akkor megkettőzheted a szakaszokat, és időt takaríthatsz meg. Hozz létre egy szakaszt egyszerre, majd használd újra, ha jól megy, hogy időt takaríts meg.

Háttérkép módosítása mobil/asztali nézet szerint

Néhány háttérkép jól mutat asztali nézetben, de lehetséges, hogy a kép nem fog olyan jól mutatni, mint mobil képernyőjén. Gondolkodj kreatívan, és válassz egy másik képet a mobil képernyőjén. Eltérő mobil nézet kiválasztásához kattints a szakasz > stílus fülre > kattints az eszköz ikonra, és válaszd ki a mobil nézetet. Most, bármelyik képet is választod, az csak a mobil nézetben fog megjelenni.

Bármely szakasz láthatóságának módosítása asztali/mobil nézetben

Az eszköztől függően bármely szakasz vagy oszlop láthatóságát is szabályozhatja.

Előfordul, hogy a tartalmat vagy a képeket két vagy három részben, illetve külön oszlopban jelenítjük meg, de ezt nem szeretnénk mobilon megjeleníteni. Ezért az Elementor képes elrejteni azt a részt, amelyet nem szeretnénk megjeleníteni mobilnézetben.

Lépjen a > szakaszbeállítások > speciális > reszponzív menüpontra. Itt különböző lehetőségeket vagy vizuális beállításokat láthat; elrejtheti a szakaszt asztali gépen, a lapon vagy mobilon, az Ön preferenciáitól függően.

Az oszlopok sorrendjének módosítása

Az oszlopok sorrendjét a beállítások részben is megváltoztathatod. Lépj a következőre: beállítások > Speciális > Reszponzív > Oszlopok megfordítása, és kattints az Igen gombra.

Hozz létre egy alternatív szakaszt

Hozz létre alternatív szakaszokat mobil és asztali nézetben. Előfordulhat, hogy a csúszka szakasz nem tűnik olyan hasznosnak mobilon, mint asztali gépen, ezért a csúszka szakasz helyett használhatsz bármilyen más szakaszt. Ezt megteheted a Speciális lapon > be-/kikapcsolhatod a megjeleníteni nem kívánt szakasz láthatóságát, és hozzáadhatsz egy alternatív képet.

Oszlopszélesség beállítása

Mobil nézetben az összes oszlopszakasz 100%-os szélességű. Mobilon azonban a szélesség az oszlopszélességnek megfelelően módosítható. Ha két oszlopa van, akkor mindkét szakasz maximális szélességét 50%-ra állíthatja.

Következtetés

Az Elementor minden hatékony funkcióval rendelkezik, amelyekkel vezérelhető a reszponzív oszlopelrendezés minden képernyőmérethez. Lehetővé teszi az egyes szekciók beállítását a megtekintési módnak megfelelően. A mobilbarát weboldal fenntartása elkerülhetetlen, mivel a Google algoritmusa a mobilbarát weboldalakat tartja a legfontosabbnak. A reszponzív weboldalak nemcsak a jobb SEO eléréséhez elengedhetetlenek, hanem több forgalomra is szükség van, mivel a forgalom több mint 80%-a mobilmegtekintésekből származik.

Az Elementor oldalkészítő mostantól exkluzív funkciókkal rendelkezik, amelyek lehetővé teszik a felhasználók számára, hogy mobilbarát webhelyeket hozzanak létre különösebb erőfeszítés nélkül. Remélem, hasznosnak találtad a cikkemet, és minden kérdésre választ kaptál, hogyan hozhatsz létre reszponzív webhelyet az Elementor segítségével.