Elementor-secties en -kolommen uitlijnen

Terwijl u met Elementor , zult u merken dat het een beetje lastig is om uw secties en kolommen op maat te positioneren. U moet kolommen en secties verticaal en horizontaal uitlijnen om een ​​responsieve “uitrek-tot-vul”-indeling te verkrijgen. Zonder deze uitlijning zullen de elementen van kolommen met verschillende hoogtes er niet in slagen zich op het scherm aan te passen.

• Waarom moeten we op één lijn komen?
• Hoe werken kolommen of secties voor een responsief ontwerp?
• Hoe Elementor-secties en -kolommen uitlijnen?
• Om responsieve breedteproblemen op te lossen, gebruikt u Overflow Hidden
• Zorg dragen voor positionering
• Relatieve eenheden
• Beheer de diepte van elk element met behulp van de Z-Index
• De truc over dubbele functionaliteit
• Compensaties
• De gouden regel
• Conclusie

Waarom moeten we op één lijn komen?

In elke kolom of sectie kan de inhoud uit verschillende categorieën bestaan. Dit kan de vorm hebben van afbeeldingen, tekst en beoordelingen. Voor een samengesteld uiterlijk wordt aanbevolen dat er uniformiteit is in het uiterlijk van de inhoud. Het mag daar niet zomaar worden weggegooid – gedumpt – voor de lol.

Met een goede uitlijning kunt u de website netter en stijlvoller laten lijken, zodat deze er niet rommelig uitziet. Met de uitlijningsoptie kunt u meerdere widgets van verschillende groottes naast elkaar in dezelfde kolom aanpassen.

Hoe werken kolommen of secties voor een responsief ontwerp?

Met Elementor 2.5 kunt u uw ontwerp en inhoud op maat positioneren. Met de nieuwe aangepaste positioneringsfunctie kunt u de widgets naar elke locatie verplaatsen. Maar je kunt het niet echt doen buiten een bepaald gedeelte. Deze widgets zijn relatief ten opzichte van de kolom waarin ze zich bevinden. Dit kan een probleem veroorzaken in de responsiviteit van het ontwerp.

Stel dat u een lay-out met drie kolommen heeft. Met behulp van aangepaste positionering kunt u een widget van de rechterkolom naar de middelste kolom slepen en neerzetten, of hoe u maar wilt.

Maar dit zal alleen de desktopbezoekers ten goede komen, omdat het er voor hen goed uit zal zien. Het zal echter een probleem veroorzaken als de website vanaf mobiel wordt benaderd, omdat Elementor de kolommen op mobiel verticaal stapelt.

Dus in plaats van drie kolommen naast elkaar te hebben, kan het zijn dat alle drie de kolommen op elkaar zijn gestapeld. Het element verschijnt niet langer in de middelste kolom zoals op desktops.

Hoewel je de mobiele weergave slim kunt aanpassen met een verborgen instelling, is er geen garantie dat de meerderheid van de mensen deze kan vinden. Dus waarom zou je de gebruikers frustreren? Het ontwerp responsief en aanpasbaar maken is de juiste oplossing. Zodat het nergens crasht.

Overigens moet u letten op de relatie van de widget tot de kolom waarin deze zich bevindt.

Hoe Elementor-secties en -kolommen uitlijnen?

Ga voor elke sectie/kolom naar de lay-outsectie en stel de volgende uitlijningsopties in volgens uw vereisten:

• Verticaal uitlijnen: u kunt uit de volgende instellingen voor de widgets kiezen. Maar één ding moet u in gedachten houden: de inhoud van een kolom kan niet worden uitgelijnd met de eerste drie verticale kolomopties, dat wil zeggen boven, midden en onder.
• Bovenkant
• Midden
• Onderkant

Overigens zijn er ^* drie nieuwe opties die het erg handig maken om de inhoud naar wens af te stemmen.

• ^*Ruimte tussen – stelt de ruimte in tussen widgets aan het begin en aan het einde aan de rand van de kolom. De widgets zijn op gelijke afstanden geplaatst, dat wil zeggen dat er gelijke ruimte tussen zit.
• ^*Ruimte rondom – de ruimte tussen de widgets is gelijk en de randen zijn half zo groot als de ruimte tussen de widgets.
• ^*Ruimte gelijkmatig – de ruimte tussen widgets is uniform: ertussen, ervoor en erna is deze gelijk.

• Horizontaal uitlijnen: met deze optie kunt u inline positionering uitvoeren en de inline widgets, die zich in dezelfde rij bevinden, horizontaal uitlijnen. U kunt de inhoud van de kolommen horizontaal uitlijnen met behulp van deze opties:
• Start- lijnt alle pictogrammen links uit
• Midden: positioneert de pictogrammen in het midden van de kolom
• Einde: zet alle pictogrammen aan de rechterkant
• Ruimte tussen – de ruimte tussen widgets aan het begin en aan het einde aan de rand van de kolom. De widgets zijn op gelijke afstanden geplaatst, dat wil zeggen dat er gelijke ruimte tussen zit
• Ruimte rondom – de ruimte tussen de widgets is gelijk en de randen zijn half zo groot als de ruimte tussen de widgets
• Ruimte gelijkmatig – de ruimte tussen widgets is uniform: ertussen, ervoor en erna is deze gelijk

Om responsieve breedteproblemen op te lossen, gebruikt u Overflow Hidden

Als het gaat om de weergave van een website op mobiele apparaten, is de kans groot dat u een probleem tegenkomt waarbij een widget met aangepaste positionering de breedte van een kolom overschrijdt.  

Dit zorgt voor een erg frustrerende situatie voor mobiele bezoekers, waarbij ze horizontaal kunnen scrollen. En dit is niet iets dat u voor uw website had gewild. Dit kan worden opgelost door:

Lay-outinstellingen > Stel de optie Overloop Verborgen

Door dit te doen, wordt het overtollige gebied afgesneden en hoeft u niet horizontaal te scrollen

Zorg dragen voor positionering

Je moet ook zorgen voor de plaatsing van de kolommen. Met Elementor 2.5 kunt u aangepaste positionering instellen: absoluut en vast.

De absolute positionering is de positionering van het element ten opzichte van de sectie of kolom waarin u zich bevindt. Dus als u absolute positionering voor een element of sectie gebruikt, zal die sectie niet langs het bezoekersvenster bewegen.

De vaste positie verschilt van absoluut, omdat hierdoor de sectie/het element gefixeerd blijft in het gezichtspunt van de bezoeker. Dus als de gebruiker door de pagina scrollt, blijft het element daar staan.

Relatieve eenheden

Terwijl u uw webpagina ontwerpt, zult u merken dat er meerdere manieren zijn waarop u de elementen kunt positioneren. Voor absolute positionering is het een goed idee om relatieve eenheden te gebruiken, omdat responsief ontwerp hierdoor functioneler wordt als het gaat om verschillende schermformaten.

De relatieve eenheid past zichzelf aan op basis van de relatieve breedte en hoogte van het scherm, waardoor de elementen of secties zichzelf kunnen aanpassen en een beter responsief ontwerp ontstaat. Als u ervoor kiest om pixels te gebruiken, moet u meerdere responsieve secties maken voor verschillende schermformaten.

Beheer de diepte van elk element met behulp van de Z-Index

Als u 'absolute' of 'vaste' positionering voor de widgets gaat gebruiken, zullen er veel situaties zijn waarin twee of meer widgets elkaar kunnen overlappen, dat wil zeggen dat ze “op” elkaar worden gestapeld. U kunt dit voorkomen door de normale Z-index-instelling te gebruiken. Hiermee kunt u de diepte bepalen en kunt u kiezen welke widgets op de voorgrond verschijnen.

De truc over dubbele functionaliteit

Als u met de rechtermuisknop klikt om een ​​element met aangepaste positionering te dupliceren, kan het lijken alsof het klikken met de rechtermuisknop niet heeft gewerkt.

Maar kijk eens. Dat is niet waar. De duplicaatfunctionaliteit heeft prima gewerkt en heeft het element gedupliceerd. Het is alleen zo dat, aangezien elk element exact dezelfde aangepaste positionering heeft, het gedupliceerde element PRECIES op het andere element wordt gestapeld (waardoor de indruk wordt gewekt dat er geen duplicaat is gemaakt).

Simpel gezegd: als u één kolom met succes maakt, kunt u de kolom dupliceren wanneer dat nodig is. Zorg er ook voor dat de kolommen die u maakt geen aangepaste positionering gebruiken. Als dit het geval is, werkt dupliceren niet met de rechtermuisknop. U kunt echter de duplicaatfunctie gebruiken om de beperking te omzeilen en de kolom te kopiëren.

Sleep het bovenste element een klein beetje en het andere wordt zichtbaar. Beide elementen zijn zeer aanwezig. Wanneer u één kolom dupliceert, wordt deze bovendien over de oude heen gestapeld. Het kan zijn dat u in de war raakt. Maar maak je geen zorgen, je kunt het gewoon slepen en vervolgens gebruiken in het ontwerp van je webpagina.

Compensaties

Er zijn gevallen waarin u compensaties voor de inhoud van uw webpagina moet instellen. Met Elementor kunt u eenvoudig de offset instellen. Als u dus een offset van 500 px vanaf de linkerkant instelt, blijft er ruimte rond de inhoud over op basis van uw invoer. Op dezelfde manier kunt u ook de offset aan de rechterkant instellen. Het is een goede gewoonte om zowel de linker- als de rechterverschuiving op een vergelijkbare waarde in te stellen, omdat de inhoud dan correct op het scherm wordt uitgelijnd.

Er zijn gevallen waarin u compensaties voor de inhoud van uw webpagina moet instellen. Met Elementor kunt u eenvoudig de offset instellen. Als u dus een offset van 500 px vanaf de linkerkant instelt, blijft er ruimte rond de inhoud over op basis van uw invoer. Op dezelfde manier kunt u ook de offset aan de rechterkant instellen. Het is een goede gewoonte om zowel de linker- als de rechterverschuiving op een vergelijkbare waarde in te stellen, omdat de inhoud dan correct op het scherm wordt uitgelijnd.

De gouden regel

Gebruik relatieve eenheden voor een beter responsief ontwerp. Dit komt omdat absolute positionering lastig kan zijn wanneer de website toegankelijk is vanaf een ander platform. Het gebruik van relatieve eenheden bij het ontwerpen van uw secties zal resulteren in een responsiever ontwerp. Met behulp van relatieve eenheden kan de verandering in breedte perfect worden opgevangen. Met ‘relatief’ bedoelen we variërende eenheden zoals percentage of weergavebreedte (VW), in plaats van eenheden zoals pixels vast te leggen.

Conclusie

Elementor is een super gebruiksvriendelijke websitebouwer. Soms kan dit problemen opleveren bij de weergave van websites als de website toegankelijk is vanaf mobiel of tablet. Met behulp van sectie- en kolomuitlijning kunt u uw websites heel eenvoudig perfectioneren.