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


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
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 *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format