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.
Hol találja meg ezeket a lehetőségeket? Nem léteznek. Ez a Premium Elementor-ra vonatkozik? Ha igen, meg kell említenie a cikkében, hogy az emberek ne pazarolják az idejüket, hogy végigolvassák.
Szia,
Estoy maquetando az Elementor Pro-val.
Quiero poner dos banners, uno pegado a la izquierda y otro pegado a la derecha de la pantalla. Para ello he creado: – una seccion para cada banner.
– un encabezado con una frase, a la cual he puesto de fondo una imagen.
Una de ella deberia ir pegada a la derecha de la pantalla (margen izquierda 0 kép). Algun consejo? Köszönöm szépen!
Szia, az első dolog, amit megvizsgálnék, az a függőleges oszlop igazítási beállítása, amelyet a bejegyzés első részében ismertetek.
Egészségére,
Buongiorno, tutto chiaro, grazie!
Ma mi stavo domandando se è possibile inserire tre righe (con tre pulsanti uno sotto l'altro) nella stessa colonna. Cerco di spiegarmi meglio: vorrei dividere una sezione in due colonne.
In quella di sinistra metterei la foto di una cover, e nella colonna di sinistra vorrei mettere tre pulsanti (uno sopra l'altro), equidistanti e centrati rispetto alla colonna di sinistra, che rimandano ai tre modelli di smartphone per i quali laè disponi borító a fotón. Sto cercando ovunque, ma non trovo nulla che indichi che si possa fare.
Sono aperta a tutti i suggerimenti
Grazie
Scusate, ho appena capito fare (l'ho capito per errore). Scusate il zavaró és grazie lo stesso
Szia, rendben van, biztos, hogy ez lehetséges, akár függőlegesen is centrálhatja az egyes oszlopok tartalmát
Itt van egy probléma az alineación que nincs logó oldószer. El contenido se queda a un lado, la imagen, titulo y texto. No logro centrarlo (solo hay una columna pero es como si la mitad o más no se pudieran usar, ni poner otro cuadro de texto) No me había pasado nunca y no se que más probar. Ha sido al editar para tamaño móvil, ha ha quedado así a lado todo cuando cambio and escritorio! Alguien sabe que puede ser? He probado todo lo que pone en el artículo y parece que nada funciona 🤗
Helló, azt hiszem, először is ellenőriznie kell az összes igazítást szakaszokban, majd oszlopokban, majd tartalomblokkokban. Az is lehetséges, hogy témája CSS -je szerepet játszik ebben az összehangolásban.
jó napot!
je m'arrache les cheveux car je n'arrive pas à aligner 3 colones à l'horizontale.
Sur le brouillon elles paraissent toutes parfaitement alignées, mais lorsque je prévisualise les modifs, les colonnes se retrouvent toutes imbriquées et de différentes tailles (largeurs et hauteur) sur le côté gauche de l'écran. je voudrais qu'elles fassent toutes la même taille et qu'elles soient parfaitement aligner. faire komment?
Szia,
Az igazítási probléma az oszlopok tetején jelenik meg?
Hola, tengo instalado elementor pro pero cuando agrego una nueva sección no aparecen las opciones de alineación horizontal y alineación vertical.
Hay que que instalated un extradicional? Gracias
Szia, megvan az Elementor ingyenes vagy Pro verziója? Talán ez a probléma.
Hola, tengo la version pro de elementor y no figura ninguna de las opciones que indicas, que puede ser?
Szia! Az Elementor pro mely opciói nem jelennek meg?
Halló,
ich habe im lábléc verschiedene kütyü. das oberste ist immer eine headline, darunter stichpunkte. da ich nicht zwei unterschiedliche textarten in einen kasten schreiben kann (h4 und p) muss ich das in 2 sections machen. wo kann ich nun den abstand der wordpress szakaszok zueinander verringern? es ist zwischen der headline und dem text einfach zu viel platz.
danke für eure hilfe
Szia, több lehetőség is van a szövegek közötti térköz mérséklésére: lehet szakasz, oszlop vagy widget margó vagy kitöltés VAGY fontopció, például sormagasság.
Jó napot.
l'ajustement de la taille des colonnes avec la souris est bloqué, lehetetlen de modifier leur taille. Megjegyzés puis je Solutionner ce problème. Merci d'vance.
Szia, az oszlop jobb felső sarkába kattintva szerkesztheti a méretet az Elementor beállításaiban.
Bonjour je souhaite créer un tableau de 4 lignes et 3 colonnes, et souhaite fusionner les 4 case de la première colonne pour y insérer une image… Un idée ?
Merci !
Szia, nem lehet cellákat egyesíteni, létre kell hozni egy sort, és bele kell másolni a tartalmat
Bonjour Tristan,
Avant tout, merci pour le temps que vous consacrez à nous (qui nous arrachons les cheveux… sur des coquilles qui… 🙂
)
Mais, lehetetlen de retrouver la manip'. Et…. je m'arrache les cheveux du coup. Mon besoin (pour relevantre à notre maquette): Une section globale dans laquelle mon fond est une video en continu, et par dessus, j'ai trois lignes de textes qui viennent se superposer (dont une qui aura du code pour une előadás en rotation Mais ça, c'est autre chose).
C'est l'alignement qui me pose souci. Une idee…?
Je désespère … Merciiiiii
Szia! A teendődhöz videó hátteret használnék a fő Elementor részben, majd hozzáadnék egy belső részt oszlopokkal és szöveggel
Bonsoir,
Est-il possible de modifier la position des elemments d'une page?
J'ai un menu déroulant qui passe sous les elements en dehors de son bloc… Comment requester aux autres blocs d'être en arrière? Merci d'vance!
Szia, igen, ez lehetséges, de egyéni CSS-t kell használnia. Az Elementorban kiválaszthatja a következőt: {z-index: 100}