Jak zarovnat sekce a sloupce Elementor

Když pracujete s Elementorem , všimnete si, že je trochu složité přizpůsobit umístění sekcí a sloupců. Abyste dosáhli responzivního rozvržení „roztažením do vyplnění“, musíte sloupce a sekce zarovnat svisle a vodorovně. Bez tohoto zarovnání se prvky sloupců s různou výškou na obrazovce neupraví.

• Proč se potřebujeme sladit?
• Jak fungují sloupce nebo sekce pro responzivní design?
• Jak zarovnat sekce a sloupce Elementor?
• Chcete-li vyřešit problémy s citlivou šířkou, použijte Skryté přetečení
• Péče o polohování
• Relativní jednotky
• Ovládejte hloubku každého prvku pomocí Z-Indexu
• Trik o duplicitní funkčnosti
• Ofsety
• Zlaté pravidlo
• Závěr

Proč se potřebujeme sladit?

V každém sloupci nebo sekci může být obsah různých kategorií. Může být ve formě obrázků, textu a hodnocení. Pro celkový vzhled se doporučuje jednotný vzhled obsahu. Nemělo by se to tam jen tak házet – vysypat – jen tak proboha.

S dobrým zarovnáním můžete vytvořit web, aby vypadal úhledněji a elegantněji, takže nebude vypadat přeplněně. Pomocí možnosti zarovnání můžete upravit několik widgetů různých velikostí vedle sebe ve stejném sloupci.

Jak fungují sloupce nebo sekce pro responzivní design?

Elementor 2.5 vám umožňuje vlastní umístění vašeho návrhu a obsahu. Díky nové funkci přizpůsobení polohy můžete widgety přesunout na libovolné místo. Ale nemůžete to udělat za určitý úsek. Tyto widgety jsou relativní ke sloupci, ve kterém jsou. To může způsobit problém s odezvou návrhu.

Předpokládejme, že máte rozložení ve třech sloupcích. Pomocí vlastního umístění můžete widget přetáhnout z pravého sloupce do středového sloupce nebo jakkoli chcete.

Ale bude to přínosem pouze pro návštěvníky počítačů, protože jim to bude připadat v pořádku. Pokud se však na web přistupuje z mobilu, způsobí to problém, protože Elementor na mobilu ukládá sloupce vertikálně.

Takže místo tří sloupců vedle sebe můžete zažít všechny tři sloupce naskládané na sobě. Prvek se již nebude zobrazovat v prostředním sloupci jako na stolních počítačích.

Mobilní pohled sice můžete chytře vyladit se skrytým nastavením, ale není zaručeno, že ho většina lidí najde. Proč tedy uživatele frustrovat? Udělat design tak, aby reagoval a přizpůsobil se, je tím správným řešením. Aby se to nikde nesrazilo.

V tomto případě musíte věnovat pozornost vztahu widgetu ke sloupci, který je uvnitř.

Jak zarovnat sekce a sloupce Elementor?

Pro každou sekci/sloup přistaňte na sekci rozvržení a nastavte následující možnosti zarovnání podle vašich požadavků:

• Vertikální zarovnání: můžete si vybrat nastavení pro widgety z následujících. Ale jednu věc, kterou musíte mít na paměti, je, že obsah ve sloupci nelze zarovnat s prvními třemi vertikálními možnostmi sloupce, tj. nahoře, uprostřed a dole.
• Nahoru
• Střední
• Dno

V tomto ohledu existují ^* tři nové možnosti, díky nimž je opravdu pohodlné zarovnat obsah podle vašich představ.

• ^*Mezera mezi – nastavuje mezeru mezi widgety na začátku a na konci na okraji sloupce. Widgety jsou rovnoměrně rozmístěny, tj. je mezi nimi stejný prostor.
• ^*Prostor kolem – prostor mezi widgety je stejný a okraje jsou poloviční než prostor mezi widgety.
• ^*Prostor rovnoměrně – prostor mezi widgety je jednotný – je stejný mezi, před a za nimi.

• Horizontální zarovnání: pomocí této možnosti můžete provádět vložené umístění a vodorovně zarovnat vložené widgety, které jsou ve stejném řádku. Obsah sloupců můžete zarovnat vodorovně pomocí těchto možností:
• Start – zarovná všechny ikony doleva
• Střed: umístí ikony doprostřed sloupce
• Konec – nastaví všechny ikony doprava
• Mezera mezi – mezera mezi widgety na začátku a na konci na okraji sloupce. Widgety jsou rovnoměrně rozmístěny, tj. je mezi nimi stejný prostor
• Prostor kolem – prostor mezi widgety je stejný a okraje jsou poloviční než prostor mezi widgety
• Prostor rovnoměrně – prostor mezi widgety je jednotný – je stejný mezi, před a za nimi

Chcete-li vyřešit problémy s citlivou šířkou, použijte Skryté přetečení

Pokud jde o vzhled webu na mobilu, je vysoká pravděpodobnost, že narazíte na problém, kdy widget s vlastním umístěním překročí šířku sloupce.  

To způsobuje opravdu frustrující situaci pro mobilní návštěvníky, kdy mohou horizontálně rolovat. A to není něco, co jste pro svůj web chtěli. To lze opravit:

Nastavení rozvržení > Nastavte Přetečení na Skrytý

Tímto způsobem bude přesahující oblast oříznuta a nebude nutné vodorovné posouvání

Péče o polohování

Musíte se také postarat o umístění sloupů. Pomocí Elementor 2.5 můžete nastavit vlastní umístění – absolutní a pevné.

Absolutní umístění je umístění prvku vzhledem k sekci nebo sloupu, ve kterém se nacházíte. Pokud tedy použijete absolutní umístění k prvku nebo sekci, tato sekce se nebude pohybovat v okně návštěvníka.

Pevná poloha je odlišná od absolutní, protože umožňuje sekci/prvku zůstat fixován k pohledu návštěvníka. Pokud tedy uživatel posouvá stránku, prvek tam zůstane.

Relativní jednotky

Při navrhování své webové stránky zjistíte, že existuje několik způsobů, jak umístit prvky. Pro absolutní umístění je dobré používat relativní jednotky, protože díky tomu bude responzivní design funkčnější, pokud jde o různé velikosti obrazovky.

Relativní jednotka se sama nastavuje na základě relativní šířky a výšky obrazovky, což umožňuje prvkům nebo sekcím, aby samy změnily velikost a lépe reagovaly na design. Pokud se rozhodnete používat pixely, musíte vytvořit více responzivních sekcí pro různé velikosti obrazovky.

Ovládejte hloubku každého prvku pomocí Z-Indexu

Pokud budete pro widgety používat „absolutní“ nebo „pevné“ umístění, nastane mnoho situací, kdy se dva nebo více widgetů mohou překrývat, tj. jsou naskládány „na sebe“. Tomu se můžete vyhnout použitím normálního nastavení Z-indexu. To vám umožní ovládat hloubku a umožní vám vybrat si, které widgety se zobrazí v popředí.

Trik o duplicitní funkčnosti

Pokud používáte klepnutí pravým tlačítkem k duplikování prvku s vlastním umístěním, může to vypadat, že klepnutí pravým tlačítkem nefungovalo.

Ale hle. To není pravda. Duplicitní funkce fungovala perfektně a duplikovala prvek. Jde jen o to, že protože každý prvek má přesně stejné vlastní umístění, duplikovaný prvek se naskládá PŘESNĚ na druhý prvek (což vytváří dojem, že nebyl vytvořen žádný duplikát).

Jednoduše řečeno, pokud úspěšně vytvoříte jeden sloupec, můžete sloupec v případě potřeby duplikovat. Také se ujistěte, že sloupce, které vytvoříte, nepoužívají vlastní umístění. Pokud ano, pak duplikace nebude fungovat s možností kliknutí pravým tlačítkem. K překonání omezení a zkopírování sloupce však můžete použít duplicitní funkci.

Přetáhněte trochu horní prvek a odkryje se ten druhý. Oba prvky jsou tam hodně. Také, když duplikujete jeden sloupec, bude se skládat přes ten starý. Můžete se zmást. Ale nebojte se, můžete jej jednoduše přetáhnout a poté použít v designu vaší webové stránky.

Ofsety

Existují případy, kdy potřebujete nastavit offsety obsahu vaší webové stránky. S Elementorem můžete snadno nastavit offset. Pokud tedy nastavíte odsazení 500 pixelů zleva, bude kolem obsahu ponechán prostor na základě vašeho zadání. Podobně můžete také nastavit offset na pravé straně. Je dobrým zvykem nastavit odsazení vlevo i vpravo na podobnou hodnotu, aby byl obsah na obrazovce správně zarovnán.

Existují případy, kdy potřebujete nastavit offsety obsahu vaší webové stránky. S Elementorem můžete snadno nastavit offset. Pokud tedy nastavíte odsazení 500 pixelů zleva, bude kolem obsahu ponechán prostor na základě vašeho zadání. Podobně můžete také nastavit offset na pravé straně. Je dobrým zvykem nastavit odsazení vlevo i vpravo na podobnou hodnotu, aby byl obsah na obrazovce správně zarovnán.

Zlaté pravidlo

Pro lepší responzivní design použijte relativní jednotky. Je to proto, že absolutní umístění může být složité, když se na web přistupuje z jiné platformy. Použití relativních jednotek pro návrh sekcí povede k citlivějšímu návrhu. Změnu šířky lze perfektně zvládnout pomocí relativních jednotek. „Relativní“ máme na mysli různé jednotky, jako jsou procenta nebo šířka pohledu (VW), spíše než fixní jednotky, jako jsou pixely.

Závěr

Elementor je super uživatelsky přívětivý tvůrce webových stránek. Občas to může představovat problémy při zobrazení webu, pokud je web přístupný z mobilu nebo tabletu. S pomocí zarovnání sekcí a sloupců můžete své webové stránky udělat dokonalými se skutečnou lehkostí.