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.
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; A dolgok azonban 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.
Most ássunk mélyebbre, és derítsük ki, hogyan fognak működni a dolgok az Elementor Page Builder segítségével.
Szinte minden szerkeszthető funkcióban lehetőség van a mobil, asztali és lap beállítások módosítására. ha a menü alján az érzékeny módra kattint
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. Asztali oldalnézetemben a címsor mérete 49 képpont, de 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.
A párnázások 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 ez megtartja a méretet a teljes képernyőmérethez képest.
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.
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.
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 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.
Az oszlopok sorrendjét a beállítások részben is módosíthatja. Menj; szakasz beállításai> Speciális > Reszponzív > Fordított oszlop, majd kattintson az igen gombra.
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.
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, akkor az egyes szakaszok maximális szélességét 50%-ra állíthatja.
Az Elementor minden olyan hatékony funkcióval rendelkezik, amelyekkel vezérelheti az összes képernyőméret érzékeny oszlopelrendezését. 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 veszi a leginkább figyelembe. A reszponzív weboldalak nem csak 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.
A webhely fejlécei és láblécei alapvető elemek. A legtöbb esetben a fejléc navigációt biztosít…
A két legnépszerűbb WordPress téma a piacon az Astra és az OceanWP. Szakmai…
Egy kiváló hírwebhely létrehozásához nem szükséges webtervezővé válni. Mi…
A Newspaper téma az egyik legjelentősebb WordPress téma, amelyet a tagDiv, egy…
Amikor egy online áruház létrehozásáról van szó, a WooCommerce a legjobb beépülő plugin . Azt…
A fejléc általában az első dolog, amit az ember meglát, amikor felkeresi a webhelyét,…
Megjegyzések megtekintése
Świetny post! Bardzo odpowiada na moje potrzeby. Stworzyłam stronę ale widok mobilny mi się rozjechał. Dziękuję za wskazówki. Są bardzo pomocne 🙂
Szuper! Előfordulhat, hogy nem tudja felhasználni ezeket az információkat, amíg be nem olvasta. Wielkie dzięki za pomoc :)
Szia! Az oszlopok sorrendjének megváltoztatásához használhatja közvetlenül a drag'n drop-ot vagy a szakaszböngészőt. A láthatóságról annyit, hogy a szakasz speciális beállításai, ki kell kapcsolnia az asztali, táblagép és mobil láthatóságot.
hogyan kell reszponzív párnázást csinálni?
Szia, a padding nem pontosan reagál, ez egy fix érték. Ha reszponzív problémája van, eltérő kitöltési értéket kell megadnia az asztali számítógéphez, a táblagéphez és a telefonhoz