Gelijke kolomhoogte instellen op Elementor - DeLaatbusiness
prijsstrategie bepalen

Gelijke kolomhoogte instellen op Elementor

3 min


99
Dummy image 6 gratis internet marketing ebooks, klik hier voor download

Heeft de bouwer je ooit bang gemaakt? We voelden dat allemaal op een bepaald moment in onze ontwikkelaar / ontwerperfase. We zouden graag lay-outs maken waarvan we weten dat ze mogelijk zijn en zonder veel moeite. In deze Elementor-zelfstudie zal ik je begeleiden bij het maken van kolommen met gelijke hoogte met tekst aan de linkerkant en afbeelding aan de rechterkant met  Elementor . U hoeft zich geen zorgen te maken over het reactievermogen en hoe gemakkelijk het is, want ik verzeker u dat dat zo is.

Laat me allereerst zien hoe ons eindproduct eruit zal zien. Door elke stap in dit artikel te volgen, kunt u een resultaat bereiken dat bijna vergelijkbaar is met dit (uiteraard, ervan uitgaande dat u dat wilde). Alles moet soepel verlopen, zolang u de volgende stappen volgt. Nu…

Responsieve kolommen met dezelfde hoogte maken

Laten we beginnen! 
Stap 1
Maak een sectie met twee kolommen en stel de sectiebreedte in op volledige breedte. (OPMERKING: vergeet niet om de inhoudspositie in te stellen op MIDDEN).

Responsieve kolommen met dezelfde hoogte maken
Responsieve kolommen met dezelfde hoogte maken
Responsieve kolommen met dezelfde hoogte maken

Stap 2
Voeg een achtergrond toe aan de sectie zelf. Dit dient als achtergrond voor de tekstkolomzijde van de lay-out. Hoewel u desgewenst ook de achtergrond aan de kolom zelf kunt toevoegen.

Responsieve kolommen met dezelfde hoogte maken

Stap 3
Bewerk beide kolommen in de sectie die u heeft gemaakt. Stel de Widget Space in op 0. Voor de kolom waar u de tekst zou plaatsen, stelt u de opvulling in op% eenheden en op ongeveer 5,5 elk. Stel de opvulling in op 0 voor de kolom met de afbeelding.

Responsieve kolommen met dezelfde hoogte maken
Responsieve kolommen met dezelfde hoogte maken
Responsieve kolommen met dezelfde hoogte maken

Stap 4
Voeg de tekst in de tekstkolom toe en voeg de afbeelding rechts toe. Stel voor het afbeeldingsgedeelte de Uitlijning in op Midden en de Afbeeldingsgrootte op Volledig.

Responsieve kolommen met dezelfde hoogte maken

Stap 5:
Ga naar het tabblad Geavanceerd van de afbeelding> Responsief. Schakel de schakelknop Verbergen op bureaublad in.

Responsieve kolommen met dezelfde hoogte maken

Stap 6
Op de kolom waarin de afbeelding is geplaatst, stelt u dezelfde afbeelding in als de achtergrondafbeelding. Stel de positie, herhaling en grootte in zoals weergegeven in de onderstaande schermafbeelding.

Responsieve kolommen met dezelfde hoogte maken

Bedankt dat je zover bent gekomen! 🙂

Daar heb je het! De sectie reageert nu en toont de hele afbeelding op kleinere schermen. Als u wilt dat de bureaubladafbeelding groter wordt weergegeven, verhoogt u gewoon het percentage opvulling van de tekstkolom tot de gewenste hoogte  (dit geldt echter alleen voor opvulling boven en onder) .


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *