Tegye mobilbarátabbá Elementor webhelyét

A mobilra reszponzív weboldal minden online vállalkozás létfontosságú része.

A Google a mobiloldalak betöltési sebességét használja minden webhely keresési rangsorolásának kulcsfontosságú tényezőjeként. Főleg azért, mert a globális internetes forgalom több mint fele mobilforgalomból származik.

Ezért egy mobil reszponzív webhely elkerülhetetlen mind a webhely egészsége, mind a Google keresőmotorban való jobb helyezése érdekében. Ebben a cikkben arra összpontosítunk, hogyan hozhatunk létre mobilreszponzív webhelyet az Elementor oldalkészítővel.

• Mi az Elementor reszponzív weboldaltervezése?
• A mobil, az asztali és a lap beállításainak módosítása
• Állítsa be a címsort a mobil kijelzőjén
• Állítsa be a kitöltést vagy a Margins for Mobile-t
• Hozzon létre minden oszlopot vízszintesen, és csodálatosan igazodik minden eszközön
• A 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
• Módosítsa az oszlopok sorrendjét
• Hozzon létre egy alternatív szakaszt
• Állítsa be az oszlop szélességét
• Következtetés

Mi az Elementor reszponzív weboldaltervezése?

A reszponzív elrendezés innovatív módon működik azáltal, hogy az összes tartalmat automatikusan méretezi az egyes képernyőméreteknek megfelelően. Automatikusan átméretezi a képeket és a tartalmat a mobil képernyőjén, hogy a nézők minden erőfeszítés nélkül megtekinthessék a tartalmat.

A legtöbben olyan témát vásárolunk, amely állítása szerint mobilra is érzékeny; azonban a dolgok frusztrálóak lehetnek, ha a téma kialakítása teljesen összeomlik a mobil képernyőjén.

Az ilyen helyzetek leküzdésére egy olyan mobil reszponzív megoldást dolgoztunk ki, amellyel az Elementor oldalkészítő reszponzív elrendezési eszközeivel a semmiből felépítheti weboldalát. Ezekkel a mobileszközökre érzékeny eszközökkel módosíthatja webhelye elrendezésének bármely sarkát, különösen a tipográfiát, a kitöltést, valamint a margó- és mobiligazítást. Ezenkívül módosíthatja az oszlop beállításait és a sorrendet a Mobilon.

Mostantól szerkesztheti oldala mobilbeállításait, ha átvált a mobilnézet módra, és ellenőrizze a következő beállításokat a mobil elrendezésnek megfelelő beállításhoz.

1. Ellenőrizze, hogy valamelyik címsor nem tűnik-e túl nagynak a mobil képernyőjén.
2. Ellenőrizze a tartalom kitöltését vagy a tartalom oldalain lévő helyet
3. Ellenőrizze az oldaloszlop-igazítást, hogyan néz ki tökéletesen; középre, jobbra vagy balra
4. Ellenőrizze az oszlopok sorrendjét, ha megfelelő sorrendben jelennek meg, vagy módosítani kell.

Most ássunk mélyebbre, és derítsük ki, hogyan fognak működni a dolgok az Elementor Page Builder segítségével.

A mobil, az asztali és a lap beállításainak módosítása

Szinte minden szerkeszthető funkcióban lehetőség van a mobil, asztali számítógép és lap beállítások módosítására. ha a menü alján az érzékeny módra kattint

Állítsa be a címsort a mobil kijelzőjén

Néha félkövér és jól látható címsort szeretnénk az asztali webhelyünkön, és az asztali képernyőn teljesen jól néz ki, de amikor bekapcsolja a Mobil nézetet, a címsor az egész képernyőt elfoglalja, és nem úgy tűnik, hogy belefér.

Bármely szövegelem szövegméretét módosíthatja a lapon és a Mobilon. Különböző szövegméreteket is beállíthat a mobil fejlécekhez, amelyek jól mutatnak a mobil képernyőjén, és jobban illeszkednek a képernyőhöz. Ezen a bemutató oldalon létrehoztam egy címsort, amely jól néz ki az asztali webhelyen, míg a mobil képernyőjén a teljes képernyőt elfoglalja.

Ha a címsoroszlop szerkesztési lehetőségére kattintok, beléphetek a tipográfiai részbe, ahol beállíthatom a címsor méretét, ami jól mutat asztali gépen és mobil képernyőjén is. Mindkettőt külön tudom irányítani. Az én asztali webhelynézetemben a címsor mérete 49 képpont, de a mobil nézetben nem fér bele

Az újraállításhoz rákattintok a mobil reszponzív módra > stílus > tipográfia > a px méretet 30-ra állítom, ami könnyen elfér a mobil képernyőjén.

Állítsa be a kitöltést vagy a Margins for Mobile-t

A kitöltés beállításakor nem ajánlott pixelben megadott értékeket használni az EM-ben vagy százalékban beállított értékek helyett, mert így a méret a képernyő teljes méretéhez viszonyítva megmarad.

Látható, hogy 70 képpontos kitöltést használtunk jobbra és balra, ami jól mutat az asztali webhelyen; ennek a beállításnak a mobilnézete azonban teljes káosz.

A párnázást mindkét oldalon átállíthatjuk 17 px-re, akkor teljesen rendben van.

Alternatív megoldásként beállíthatja a teljes oszlopot 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; automatikusan beállítja a doboz tartalmát.

Hozzon létre minden oszlopot vízszintesen, és csodálatosan igazodik minden eszközön

Ha vízszintesen hoz létre oszlopot, amelyet a tervezők a leginkább kedvelnek, akkor megkettőzheti a szakaszokat, és időt takaríthat meg. Hozzon létre egyszerre egy részt, majd használja fel újra, ha jól megy, hogy időt takarítson meg.

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

Egyes háttérképek jól néznek ki az asztali nézetben, de lehetséges, hogy a kép nem lesz olyan nagyobb, mint a mobil képernyőjén. Tehát gondolkodjon kreatívan, és válasszon más képet a mobil képernyőjén. Másik mobilnézet kiválasztásához kattintson a szakaszra > stílus fülre, majd kattintson az eszköz ikonjára, és válassza ki a mobilnézetet. Mostantól bármelyik képet is választja, az csak a mobilnézetben fog megjelenni.

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

Bármely szakasz vagy oszlop láthatóságát is szabályozhatja az eszköznek megfelelően.

Előfordul, hogy tartalmainkat vagy képeinket két-három részben vagy különböző oszlopokban jelenítjük meg, de nem szeretjük megjeleníteni Mobilon. Ezért az Elementor el tudja rejteni azt a részt, amelyet nem szeretne mobilnézetben megjeleníteni.

Lépjen a > szakaszbeállítások > speciális > reszponzív elemre. Itt különböző lehetőségeket vagy vizuális beállításokat láthat; elrejtheti a szakaszt az asztalon, elrejtheti a lapon vagy elrejtheti a Mobilon, ízlése szerint.

Módosítsa az oszlopok sorrendjét

Az oszlopok sorrendjét a beállítások részben is módosíthatja. Menj ide; szakasz beállításai> Speciális > Reszponzív > Fordított oszlop, majd kattintson az igen gombra.

Hozzon létre egy alternatív szakaszt

Hozzon létre alternatív szakaszokat mobil és asztali nézetben. Néha a csúszka szakasz nem tűnik olyan hasznosnak a mobileszközön, mint az asztalon, így a csúszka szakasz használata helyett bármilyen más részt használhat. Ezt úgy teheti meg, hogy Ugrás a Speciális lapra > kapcsolja be/ki annak a szakasznak a láthatóságát, amelyet nem szeretne megjeleníteni, és adjon hozzá egy alternatív képet.

Állítsa be az oszlop szélességét

Az összes oszlopszakasz 100%-os szélességet kap, ha mobilnézetben tekinti meg őket. A szélesség azonban módosítható az oszlopszélességnek megfelelően a Mobilon. Ha két oszlopa van, az egyes szakaszok maximális szélességét 50%-ra állíthatja.

Következtetés

Az Elementor minden olyan hatékony funkcióval rendelkezik, amelyekkel az összes képernyőméretnél szabályozható az érzékeny oszlopelrendezés. Lehetővé teszi az egyes szakaszok újrabeállítását a nézetmód kiválasztásának megfelelően. A mobilbarát webhely fenntartása elkerülhetetlen, mert a Google algoritmusa a mobilbarát webhelyek rangsorolását tartja a legtöbbnek. A reszponzív weboldalak nemcsak a jobb SEO eléréséhez elengedhetetlenek, hanem nagyobb forgalomra is szükség van, mert a forgalom több mint 80%-a mobilmegtekintésekből származik.

Az Elementor oldalkészítő immár exkluzív funkciókkal rendelkezik, amelyek lehetővé teszik a felhasználók számára, hogy különösebb erőfeszítés nélkül mobilbarát webhelyet hozzanak létre. Remélhetőleg hasznosnak találja cikkemet, és minden választ megkapott arra vonatkozóan, hogyan hozhat létre reszponzív webhelyet az Elementor használatával.