Elementor-secties en -kolommen uitlijnen

Terwijl je met Elementor , zul je merken dat het een beetje lastig is om je secties en kolommen op maat te positioneren. U moet kolommen en secties verticaal en horizontaal uitlijnen om een ​​responsieve "uitrekbare" lay-out te krijgen. Zonder deze uitlijning kunnen de elementen van kolommen met verschillende hoogtes niet op het scherm worden aangepast.

• Waarom moeten we op één lijn komen?
• Hoe werken kolommen of secties voor een responsief ontwerp?
• Hoe Elementor secties en kolommen uitlijnen?
• Gebruik Overflow Hidden om problemen met responsieve breedte op te lossen
• Zorgen voor positionering
• Relatieve eenheden
• Bepaal de diepte van elk element met behulp van de Z-Index
• De truc over dubbele functionaliteit
• Offsets
• De Gouden regel
• Conclusie

Waarom moeten we op één lijn komen?

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

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

Hoe werken kolommen of secties voor een responsief ontwerp?

Elementor 2.5 kunt u uw ontwerp en inhoud op maat positioneren. Met de nieuwe functie voor aangepaste positionering 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 indeling met drie kolommen heeft. Met behulp van aangepaste positionering kunt u een widget vanuit de rechterkolom naar de middelste kolom slepen en neerzetten, of hoe u het ook wilt.

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

Dus in plaats van drie kolommen naast elkaar te hebben, zou u alle drie de kolommen op elkaar kunnen stapelen. Het element verschijnt niet meer in de middelste kolom zoals op desktops.

Hoewel u 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 de gebruikers frustreren? Het ontwerp responsief en aanpasbaar maken is de juiste oplossing. Zodat het nergens crasht.

Trouwens, je moet letten op de relatie van de widget met de kolom erin.

Hoe Elementor secties en kolommen uitlijnen?

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

• Verticale uitlijning: u kunt de volgende instellingen voor de widgets kiezen. Maar een ding dat u in gedachten moet houden, is dat de inhoud in een kolom niet kan worden uitgelijnd met de eerste drie kolom verticale opties, dwz boven, midden en onder.
• Top
• Midden
• Bodem

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

• ^*Ruimte tussen - stelt de ruimte tussen widgets in aan het begin en aan het einde aan de rand van de kolom. De widgets zijn gelijk verdeeld, dwz er is gelijke ruimte ertussen.
• ^*Ruimte rond - 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 - het is gelijk tussen, ervoor en erna.

• 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 naar links uit
• Midden: plaatst 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 afstand van elkaar geplaatst, dwz er is gelijke afstand tussen de widgets
• 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 - het is gelijk tussen, ervoor en erna

Gebruik Overflow Hidden om problemen met responsieve breedte op te lossen

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

Dit veroorzaakt een echt frustrerende situatie voor mobiele bezoekers, waar 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

Zorgen voor positionering

Ook de plaatsing van de kolommen dient u zelf te verzorgen. U kunt aangepaste positionering instellen met Elementor 2.5 - absoluut en vast.

Het absolute standpunt 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 een sectie gebruikt, zal die sectie niet langs het bezoekersvenster bewegen.

De vaste positie verschilt van absoluut omdat het de sectie / het element op het gezichtspunt van de bezoeker laat blijven. Dus als de gebruiker door de pagina scrolt, blijft het element daar.

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 het responsieve ontwerp functioneler wordt als het gaat om verschillende schermafmetingen.

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

Bepaal 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, dwz 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 rechtsklikken gebruikt om een ​​element met aangepaste positionering te dupliceren, kan het lijken alsof rechtsklikken niet heeft gewerkt.

Maar zie. Dat is niet waar. De dubbele functionaliteit werkte prima en heeft het element gedupliceerd. Het is alleen zo dat, aangezien elk element exact dezelfde aangepaste positionering heeft, het gedupliceerde element PRECIES bovenop het andere element wordt gestapeld (waardoor de indruk wordt gewekt dat er geen duplicaat is gemaakt).

In eenvoudige bewoordingen: als u met succes één kolom hebt gemaakt, 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 duplicatie niet met de rechtsklikoptie. 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 zal het andere laten zien. Beide elementen zijn erg aanwezig. Als u één kolom dupliceert, wordt deze over de oude heen gestapeld. U kunt in de war raken. Maar maak je geen zorgen, je kunt het gewoon slepen en vervolgens gebruiken in je webpagina-ontwerp.

Offsets

Er zijn gevallen waarin u compensaties voor uw webpagina-inhoud moet instellen. Met Elementor kunt u eenvoudig een offset instellen. Dus als u een offset van 500 px vanaf de linkerkant instelt, blijft er ruimte over rond de inhoud 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 rechter offset in te stellen op een vergelijkbare waarde, aangezien de inhoud correct op het scherm wordt uitgelijnd.

Er zijn gevallen waarin u compensaties voor uw webpagina-inhoud moet instellen. Met Elementor kunt u eenvoudig een offset instellen. Dus als u een offset van 500 px vanaf de linkerkant instelt, blijft er ruimte over rond de inhoud 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 rechter offset in te stellen op een vergelijkbare waarde, aangezien de inhoud 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 wordt benaderd vanaf een ander platform. Het gebruik van relatieve eenheden voor het ontwerpen van uw secties zal resulteren in een responsiever ontwerp. De verandering in breedte kan perfect worden opgevangen met behulp van relatieve eenheden. Met "relatief" bedoelen we variërende eenheden zoals percentage of weergavebreedte (VW), in plaats van eenheden zoals pixels te corrigeren.

Conclusie

Elementor is een super gebruiksvriendelijke websitebouwer. Soms kan het voor problemen zorgen bij de weergave van websites als de website wordt geopend vanaf een mobiel of tablet. Met behulp van sectie- en kolomuitlijning kunt u uw websites heel gemakkelijk perfectioneren.