Az Elementor szakaszok és oszlopok igazítása

az Elementorral dolgozik , észre fogja venni, hogy kissé bonyolult a szakaszok és oszlopok egyéni elhelyezése. Az oszlopokat és szakaszokat függőlegesen és vízszintesen kell igazítania, hogy érzékeny „kitöltésre nyújtható” elrendezést érjen el. Ezen igazítás nélkül a változó magasságú oszlopok elemei nem állíthatók be a képernyőn.

• Miért kell igazodnunk?
• Hogyan működnek az oszlopok vagy szakaszok a reszponzív tervezésnél?
• Hogyan igazítsuk az Elementor szakaszokat és oszlopokat?
• Az érzékeny szélességi problémák megoldásához használja a Rejtett túlcsordulást
• Gondoskodni a pozicionálásról
• Relatív egységek
• Szabályozza az egyes elemek mélységét a Z-index segítségével
• A duplikált funkcionalitás trükkje
• Eltolások
• Az aranyszabály
• Következtetés

Miért kell igazodnunk?

Minden oszlopban vagy szakaszban a tartalom különböző kategóriákba sorolható. Ez lehet képek, szöveg és értékelések formájában. Az összerakott megjelenés érdekében javasolt a tartalom egységes megjelenése. Nem szabad csak úgy odadobni – lerakni – csak a fenéért.

Megfelelő igazítással a webhelyet ügyesebbnek és előkelőbbé teheti – így nem tűnik zsúfoltnak. Az igazítási opcióval több, különböző méretű widgetet állíthat egymás mellé ugyanabban az oszlopban.

Hogyan működnek az oszlopok vagy szakaszok a reszponzív tervezésnél?

Az Elementor 2.5 lehetővé teszi a design és a tartalom egyedi elhelyezését. Az új egyéni pozicionálási funkcióval a widgeteket tetszőleges helyre mozgathatja. Egy bizonyos szakaszon túl azonban ezt nem igazán lehet megtenni. Ezek a widgetek a benne lévő oszlophoz viszonyítva vannak. Ez problémákat okozhat a tervezés reakcióképességében.

Tegyük fel, hogy van egy háromoszlopos elrendezése. Az egyéni pozicionálás segítségével a jobb oldali oszlopból a középső oszlopba húzhat egy widgetet, vagy ahogy tetszik.

Ez azonban csak az asztali gépek látogatói számára előnyös, mert számukra rendben lesz. Problémát okoz azonban, ha a weboldalt mobilról érik el, mert az Elementor mobilon függőlegesen rakja egymásra az oszlopokat.

Tehát ahelyett, hogy három oszlop lenne egymás mellett, előfordulhat, hogy mindhárom oszlop egymásra rakódik. Az elem többé nem jelenik meg a középső oszlopban, mint az asztali számítógépeken.

Bár a mobilnézetet rejtett beállítással is okosan lehet csípni, de semmi garancia arra, hogy a legtöbben megtalálják. Szóval miért kell frusztrálni a felhasználókat? A tervezés érzékeny és alkalmazkodóvá tétele a megfelelő megoldás. Hogy ne csapjon le sehova.

Ehhez figyelnie kell a widget és a benne lévő oszlop viszonyára.

Hogyan igazítsuk az Elementor szakaszokat és oszlopokat?

Minden szakasz/oszlop esetében lépjen az elrendezési szakaszra, és állítsa be a következő igazítási beállításokat igényei szerint:

• Függőleges igazítás: kiválaszthatja a widgetek beállításait a következők közül. Egy dolgot azonban szem előtt kell tartania, hogy egy oszlop tartalma nem igazítható az első három oszlop függőleges beállításához, azaz a felső, a középső és az alsó oszlophoz.
• Top
• Középső
• Alsó

Ami azt illeti, van ^* három új lehetőség, amelyek igazán kényelmessé teszik a tartalom tetszés szerinti összehangolását.

• ^*Space Between – beállítja a teret a widgetek között az oszlop szélén az elején és a végén. A widgetek egyenlő távolságra vannak, azaz egyenlő távolság van közöttük.
• ^*Space Around – a widgetek közötti tér egyenlő, az élek pedig feleakkoraak, mint a widgetek közötti térköz.
• ^*Egyenletes térköz – a widgetek közötti tér egyenletes – egyenlő közöttük, előttük és utánuk.

• Vízszintes igazítás: ezzel az opcióval soron belüli pozicionálást hajthat végre, és vízszintesen igazíthatja az ugyanabban a sorban lévő soron belüli widgeteket. Az oszlopok tartalmát vízszintesen igazíthatja a következő beállításokkal:
• Start – az összes ikont balra igazítja
• Középen: az ikonokat az oszlop közepére helyezi
• End – az összes ikont jobbra állítja
• Space Between – a widgetek közötti tér az elején és a végén az oszlop szélén. A widgetek egyenlő távolságra vannak, azaz egyenlő távolság van közöttük
• Space Around – a widgetek közötti tér egyenlő, az élek pedig feleakkoraak, mint a widgetek között
• Egyenletes térköz – a widgetek közötti tér egyenletes – egyenlő közöttük, előttük és utánuk

Az érzékeny szélességi problémák megoldásához használja a Rejtett túlcsordulást

Amikor egy webhely mobilon való megjelenéséről van szó, nagy a valószínűsége annak, hogy olyan problémába ütközhet, amikor egy egyéni pozicionálású widget túlcsordul egy oszlop szélességén.  

Ez nagyon frusztráló helyzetet okoz a mobil látogatók számára, ahol vízszintesen görgethetnek. És ez nem valami olyasmi, amit a webhelyéhez kívánt. Ez a következőkkel javítható:

Elrendezés beállításai > Állítsa a Túlcsordulás beállítást Rejtett értékre

Ezzel a túlnyúló terület le lesz vágva, és nem lesz szükség vízszintes görgetésre

Gondoskodni a pozicionálásról

Az oszlopok elhelyezéséről is gondoskodni kell. Az Elementor 2.5-tel egyéni pozicionálást állíthat be – abszolút és rögzített.

Az abszolút pozicionálás az elem pozicionálása ahhoz a szakaszhoz vagy oszlophoz képest, amelyen belül tartózkodik. Tehát, ha abszolút pozicionálást használ egy elemhez vagy szakaszhoz, akkor az a szakasz nem mozdul el a látogató ablaka mentén.

A rögzített pozíció eltér az abszolúttól, mivel lehetővé teszi, hogy a szakasz/elem a látogató nézőpontjához rögzítve maradjon. Tehát, ha a felhasználó végiggörget az oldalon, az elem ott marad.

Relatív egységek

A weboldal tervezése során rá fog jönni, hogy többféleképpen is elhelyezheti az elemeket. Az abszolút pozicionáláshoz célszerű a relatív mértékegységeket használni, mivel ez funkcionálisabbá teszi a reszponzív kialakítást, ha különböző képernyőméretről van szó.

A relatív egység a képernyő relatív szélessége és magassága alapján állítja be magát, így lehetővé teszi az elemek vagy szakaszok átméretezését és jobban reagáló kialakítást. Ha a képpontok használatát választja, akkor több érzékeny szakaszt kell létrehoznia a különböző képernyőméretekhez.

Szabályozza az egyes elemek mélységét a Z-index segítségével

Ha „abszolút” vagy „rögzített” pozicionálást kíván használni a widgetekhez, sok olyan helyzet adódhat, amikor két vagy több widget átfedheti egymást, azaz egymás „hátán” helyezkednek el. Ezt elkerülheti a normál Z-index beállítással. Ez lehetővé teszi a mélység szabályozását, és lehetővé teszi annak kiválasztását, hogy mely widgetek jelenjenek meg az előtérben.

A duplikált funkcionalitás trükkje

Ha jobb kattintással másol egy elemet egyéni elhelyezéssel, akkor úgy tűnhet, hogy a jobb gombbal történő kattintás nem működött.

De lám. Ez nem igaz. A másolási funkció tökéletesen működött, és megkettőzte az elemet. Csupán arról van szó, hogy mivel minden elemnek pontosan ugyanaz az egyéni elhelyezése, a duplikált elem PONTOSAN a másik elem tetejére kerül (olyan benyomást keltve, hogy nem jött létre ismétlődés.).

Egyszerűen fogalmazva, ha sikeresen hoz létre egy oszlopot, szükség esetén megkettőzheti az oszlopot. Győződjön meg arról is, hogy a létrehozott oszlopok nem használnak egyéni elhelyezést. Ha igen, akkor a másolás nem működik a jobb gombbal történő kattintással. Használhatja azonban a duplikáció funkciót a korlátozás leküzdésére és az oszlop másolására.

Húzza egy kicsit a felső elemet, és megjelenik a másik. Mindkét elem nagyon ott van. Továbbá, ha megkettőz egy oszlopot, akkor az a régi fölé kerül. Lehet, hogy összezavarodsz. De ne aggódjon, egyszerűen húzhatja, majd felhasználhatja a weboldal tervezésében.

Eltolások

Vannak esetek, amikor eltolást kell beállítania a weboldal tartalmához. Az Elementorral egyszerűen beállíthatja az eltolást. Tehát, ha 500 képpontos eltolást állít be balról, akkor a bemeneti adatok alapján hely marad a tartalom körül. Hasonlóképpen a jobb oldalon is beállíthat eltolást. Jó gyakorlat, ha a bal és a jobb oldali eltolást is hasonló értékben állítja be, mivel a tartalom megfelelően lesz igazítva a képernyőn.

Vannak esetek, amikor eltolást kell beállítania a weboldal tartalmához. Az Elementorral egyszerűen beállíthatja az eltolást. Tehát, ha 500 képpontos eltolást állít be balról, akkor a bemeneti adatok alapján hely marad a tartalom körül. Hasonlóképpen a jobb oldalon is beállíthat eltolást. Jó gyakorlat, ha a bal és a jobb oldali eltolást is hasonló értékben állítja be, mivel a tartalom megfelelően lesz igazítva a képernyőn.

Az aranyszabály

A jobban reagáló tervezés érdekében használjon relatív mértékegységeket. Ennek az az oka, hogy az abszolút pozicionálás bonyolult lehet, ha a webhelyet egy másik platformról érik el. A relatív mértékegységek használatával a szakaszok megtervezéséhez érzékenyebb tervezést eredményez. A szélességváltozás a relatív mértékegységek segítségével tökéletesen kezelhető. A „relatív” kifejezésen a változó mértékegységeket, például a százalékot vagy a nézetszélességet (VW) értjük, nem pedig a rögzítő egységeket, például a képpontokat.

Következtetés

Az Elementor egy rendkívül felhasználóbarát webhelykészítő. Időnként kihívásokat jelenthet a webhely megjelenítése során, ha a webhelyet mobilról vagy táblagépről érik el. A szakasz- és oszlopigazítás segítségével igazán könnyedén tökéletesítheti weboldalait.