Az Elementor szakaszok és oszlopok összehangolása

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 az adaptív tervezésnél?
• Hogyan igazítsuk az Elementor szakaszokat és oszlopokat?
• A reagáló szélességi problémák kijavításához használja a Rejtett túlcsordulás funkciót
• A pozicionálás gondozása
• Relatív egységek
• A Z-Index segítségével ellenőrizze az egyes elemek mélységét
• Trükk a duplikált funkcionalitásról
• Eltérések
• Az aranyszabály
• Következtetés

Miért kell igazodnunk?

Minden oszlopban vagy szakaszban a tartalom különböző kategóriákba sorolható. Lehet képek, szövegek és értékelések formájában. Az összerakott megjelenés érdekében ajánlatos, hogy a tartalom megjelenése egységesen érvényesüljön. Nem szabad csak úgy odadobni - kidobni - csak a fene miatt.

Jó összehangolással a weblap rendezettebbé és klasszabbá válhat, hogy ne tűnjön zsúfoltnak. Az igazítási opcióval több, különböző méretű widgetet állíthat be egymás mellett, ugyanabban az oszlopban.

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

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. De egy bizonyos szakaszon túl 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árom oszlopos elrendezése. Az egyedi pozicionálás segítségével a jobb oldali oszlopból a widget áthúzhatja a középső oszlopba, vagy akár tetszik.

De ez csak az asztali látogatók javát szolgálja, mert számukra rendben fog kinézni. Ugyanakkor problémát okoz majd, ha a webhelyet mobiltelefonról érik el, mert az Elementor az oszlopokat függőlegesen a mobilra rakja.

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

Annak ellenére, hogy okosan hozzáigazíthatja a mobil nézetet egy rejtett beállításhoz, de nincs garancia arra, hogy az emberek többsége megtalálja. Tehát miért csalódná a felhasználókat? A megfelelő megoldás az, ha a tervezést érzékeny és adaptívvá teszi. Annak érdekében, hogy sehol ne essen össze.

Ebben a tekintetben figyelni kell a widget viszonyára az ott található oszlopra.

Hogyan igazítsuk az Elementor szakaszokat és oszlopokat?

Minden szakaszhoz / oszlophoz szálljon le az elrendezési szakaszra, és állítsa be a következő igazítási lehetőségeket az Ön igényei szerint:

• Függőleges igazítás: az alábbiak közül választhat a kütyü beállításait. De egy dolgot, amelyet szem előtt kell tartania, az az, hogy az oszlop tartalma nem igazítható az első három oszlop függőleges opciójához, azaz a felső, a középső és az alsóhoz.
• felső
• Középső
• Alsó

Ebből a szempontból ^* három új lehetőség van, amelyek igazán kényelmessé teszik a tartalom tetszés szerinti igazítását.

• ^*Space Between - a widget közötti helyet állítja be az oszlop elején és végén, az oszlop szélén. A kütyüek egyenlő távolságra vannak, azaz azonos hely van közöttük.
• ^*Hely körül: a kütyü közti távolság megegyezik, és az élek felére haladnak a kütyü közti távolságig.
• ^*Hely egyenletesen - a kütyü közti tér egyenletes - egyenlő közöttük, előtt és után.

• Vízszintes igazítás: ezzel az opcióval elvégezheti az inline pozicionálást, és vízszintesen igazíthatja az ugyanabban a sorban lévő belső modulokat. Az oszlopok tartalmát vízszintesen igazíthatja a következő lehetőségekkel:
• Start - az összes ikont balra igazítja
• Középpont: az ikonokat az oszlop közepére helyezi
• Vége - az összes ikont jobbra állítja
• Szóköz - a kütyük közötti tér az elején és a végén az oszlop szélén. A kütyük egyenlő távolságra vannak, azaz egyenlő tér van közöttük
• Kör körüli tér - a kütyük közötti tér megegyezik, és az élek fele akkora, mint a kütyük között
• Tér egyenletesen - a kütyük közötti tér egyenletes - egyenlő közöttük, előttük és utánuk

A reagáló szélességi problémák kijavításához használja a Rejtett túlcsordulás funkciót

Amikor egy webhely megjelenik a mobiltelefonon, nagy a valószínűsége annak, hogy problémába ütközhet, amikor az egyedi pozícióval rendelkező widget túllépi az oszlop szélességét.  

Ez valóban csalódást okoz a mobil látogatók számára, ahol vízszintesen görgethetnek. És ez nem valami, amit a webhelyén akartál. Ezt a következőkkel lehet megjavítani:

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

Ezzel elvágja a túllépő területet, és nem lesz szükség vízszintes görgetésre

A pozicionálás gondozása

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 pozícionálás az elem pozícionálása ahhoz a szakaszhoz vagy oszlophoz képest, amelyen belül tartózkodik. Tehát, ha abszolút pozícionálást használ egy elemhez vagy szakaszhoz, akkor ez a szakasz nem mozog a látogató ablakán.

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

Relatív egységek

Weboldalának megtervezésekor rájön, hogy az elemek elhelyezésének többféle módja van. Az abszolút pozícionáláshoz célszerű relatív egységeket használni, mivel ez az adaptív kialakítást funkcionálisabbá teszi, ha a különböző képernyőméretekről van szó.

A relatív egység a képernyő relatív szélessége és magassága alapján állítja be önmagát, így az elemek vagy szakaszok átméretezhetők, és jobban reagálnak a kialakításra. Ha úgy dönt, hogy pixeleket használ, akkor több adaptív szakaszt kell létrehoznia a különböző képernyőméretekhez.

A Z-Index segítségével ellenőrizze az egyes elemek mélységét

Ha „abszolút” vagy „rögzített” pozícionálást fog használni a kütyükhöz, akkor sok olyan helyzet fordul elő, amikor két vagy több kütyü átfedheti egymást, azaz egymásra rakódnak. Ezt elkerülheti a normál Z-index beállítás használatával. Ez lehetővé teszi a mélység szabályozását, és lehetővé teszi, hogy kiválassza, melyik widget jelenik meg az előtérben.

Trükk a duplikált funkcionalitásról

Ha a jobb egérgombbal kattint egy elem másolására egyedi elhelyezéssel, akkor úgy tűnhet, hogy a jobb egérgombbal nem sikerült működni.

De íme. Ez nem igaz. Az ismétlődő funkcionalitás tökéletesen működött, és lemásolta az elemet. Csak annyi, hogy mivel minden elemnek pontosan ugyanaz az egyedi pozícionálása, a duplikált elem PONTOSAN a másik elem tetejére került (azt a benyomást kelti, hogy nem jött létre duplikátum.).

Egyszerűbben fogalmazva, ha sikeresen létrehoz egy oszlopot, szükség esetén lemásolhatja az oszlopot. Győződjön meg arról is, hogy a létrehozott oszlopok nem használnak-e egyéni pozicionálást. Ha mégis, akkor a duplikáció nem működik a jobb gombbal. Használhatja azonban a duplikátum funkciót a korlát leküzdésére és az oszlop másolására.

Húzza egy kicsit a felső elemet, és ez feltárja a másikat. Mindkét elem nagyon ott van. Továbbá, ha másol egy oszlopot, akkor az a régi fölé kerül. Összezavarodhat. De ne aggódjon, egyszerűen húzza, majd felhasználhatja a weblap tervezésénél.

Eltérések

Vannak esetek, amikor beszámítania kell a weboldal tartalmát. Az Elementor segítségével könnyedén beállíthatja az ellentételezést. Tehát, ha balról 500px-es eltolást állít be, akkor a bemenet alapján marad hely a tartalom körül. Hasonlóképpen beállíthatja az eltolást a jobb oldalon is. Jó gyakorlat, ha a bal és a jobb oldali eltolást is hasonló értékre állítjuk be, mivel a tartalom megfelelően illeszkedik a képernyőre.

Vannak esetek, amikor beszámítania kell a weboldal tartalmát. Az Elementor segítségével könnyedén beállíthatja az ellentételezést. Tehát, ha balról 500px-es eltolást állít be, akkor a bemenet alapján marad hely a tartalom körül. Hasonlóképpen beállíthatja az eltolást a jobb oldalon is. Jó gyakorlat, ha a bal és a jobb oldali eltolást is hasonló értékre állítjuk be, mivel a tartalom megfelelően illeszkedik a képernyőre.

Az aranyszabály

A jobb adaptív tervezés érdekében használjon relatív egységeket. Az abszolút pozicionálás ugyanis bonyolult lehet, ha a webhelyet egy másik platformról érik el. Relatív egységek használata a szakaszok megtervezéséhez érzékenyebb tervezést eredményez. A szélességváltozás relatív egységek segítségével tökéletesen kezelhető. A „relatív” alatt a változó egységeket értjük, például a százalékot vagy a nézetszélességet (VW), nem pedig az egységek, például a pixelek rögzítését.

Következtetés

Az Elementor egy szuper felhasználóbarát weboldal-készítő. Időnként kihívást jelenthet a weboldal megjelenítésében, ha a webhelyet mobilról vagy táblagépről érik el. A szakaszok és oszlopok igazításának segítségével valódi könnyebbé teheti webhelyeit.