Gelijke kolomhoogte instellen op Elementor

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…

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).

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.

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.

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.

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

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.

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) .