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 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.

  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 számítógép és a lap beállításainak módosítása

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

Á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. 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.

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

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.

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; 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, akkor 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 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.

Holderkhu

élőben:.cid.e495888558d5265f

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.

    • 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

Legutóbbi hozzászólások

A fejlécek és láblécek használata az Elementorral

A webhely fejlécei és láblécei alapvető elemek. A legtöbb esetben a fejléc navigációt biztosít…

2022. január 6

WordPress téma összehasonlítás: Astra vs OceanWP

A két legnépszerűbb WordPress téma a piacon az Astra és az OceanWP. Szakmai…

2022. január 2

A WordPress hírtéma összehasonlítása: Újság vs. Astra

Egy kiváló hírwebhely létrehozásához nem szükséges webtervezővé válni. Mi…

2021. október 25

Hozzon létre egy hírekkel kapcsolatos webhelyet Újság témával

A Newspaper téma az egyik legjelentősebb WordPress téma, amelyet a tagDiv, egy…

2021. október 18

Hogyan építsünk fel e-kereskedelmet az Avada WooCommerce builder segítségével

Amikor egy online áruház létrehozásáról van szó, a WooCommerce a legjobb beépülő plugin . Azt…

2021. október 4

A ragadós fejléc és a görgetőeffektusok használata az Elementorral

A fejléc általában az első dolog, amit az ember meglát, amikor felkeresi a webhelyét,…

2021. szeptember 21