Wilt u een teamledensectie maken met Elementor ?
Dan ben je hier aan het juiste adres. Vandaag laten we je zien hoe je een geweldige teamledensectie kunt maken met de Builder-pagina Elementor.
Om deze tutorial te voltooien, heb je een Elementor pro-versie, omdat we aangepaste CSS-code gebruiken wat alleen mogelijk is met de pro-versie vanElementor. Als je dit nog niet hebt gedaan, update het dan.
En om te begrijpen waar we het over hebben in deze tutorial, nodigen we je uit om de volgende video te bekijken:
Maak om te beginnen een pagina aan en bewerk deze met Elementor.
Plaats vervolgens een structuur met 3 kolommen in de laatste en vervolgens in het paneel, onder het tabblad Inhoud, stel Hoogte in op Min Hoogte en selecteer VH Min Hoogte en stel vervolgens de schuifregelaar in op 100.
Laten we de middelste kolom selecteren om deze te bewerken en naar het tabblad Geavanceerd gaan. Laten we alle interne marges op 30 zetten.
Laten we een binnenste sectie-widget in deze kolom invoegen en vervolgens een van de kolommen in de binnenste sectie verwijderen en vervolgens in het paneel onder het tabblad Inhoud, laten we ook de hoogte instellen op Min. hoogte en de schuifregelaar op 450px.
Op deVerticale uitlijning kiezen Bas en overloop kiezen Masker.
In het tabblad Style Verander de achtergrond in klassiek en selecteer een afbeelding uit uw bibliotheek.
Lees onze gids op: Hoe maak je een productkaart aan met Elementor
Op het zuiden Positie Selecteer Superieur gecentreerd, Bijlage op scrollen, Zeg nog eens op niet herhaald et Maat op Bedekken
In grenzen definieer de borders op 12.
Laten we schaduweffecten toevoegen. Laten we in Shade of box aanpassen Verticaal op 22, Flou op 40 et Diffuser op -10.
Laten we een . toevoegen Titelwidget in de Interne sectie en geef een naam aan ons lid en middelpunten de widget.
Lees ook: Hoe de koptekst op pagina scrollen te veranderen met Elementor
In het tabblad Style , Laten we het aanpassen tekst kleur en typografie Kiezen 22 voor de lettergrootte en 500 voor vet, Transformatie op Hoofdletters et letterafstand op 1.2
Laten we dan de . dupliceren titelwidget en wijzig de titel van de tweede widget en kies in typografie 15 voor de lettergrootte en 500 voor de breedte, transformatie aan Defect en letterafstand aan 1.2
Laten we naar het tabblad gaan vergevorderd en definieer de Bovenmarge op -15. Laten we de widget Social Media Icons toevoegen aan onze Inner sectie.
Laten we naar het tabblad gaan Style , verander de kleur in Aangepast, maak de primaire kleur transparant en stel de binnenmarges in op 0.30
In het tabblad vergevorderd, Definieer de marges Hoog op -15 en laag op 20
Selecteer vervolgens de kolom van de binnenste sectie om deze te wijzigen en in het tabblad Style selecteer type klassiek en op kleur laten we grijpen #FFFFFF28.
Lees ook: Hoe blader je door een lange afbeelding van een portfolio met Elementor
Selecteer vervolgens de kolom van de binnenste sectie om deze te wijzigen en in het tabblad vergevorderd in het veld CSS-klassen, laten we grijpen leden-info
Selecteer vervolgens Binnenste gedeelte dan in het tabblad vergevorderd in het veld Aangepaste CSS, plak de volgende code:
/ * CSS-glaseffect * /
kiezer {
–Hoogte: 150px;
–Onder: -150px;
overloop: verborgen! belangrijk;
}
selector .member-info {
hoogte: var (–hoogte);
positie: absoluut;
achtergrond-filter: vervagen (15px);
onder: 0;
overgang: .5s gemak-in-uit;
}
Plak na de eerste CSS-code het volgende:
/ * CSS om te verbergen of te tonen bij zweven * /
selector .member-info {
onder: var (–onder);
}
selector: hover .member-info {
onderkant: 0px;
}
Wanneer u nu over de afbeelding beweegt, verschijnt de ledeninformatie.
Dupliceer de kolom 2 keer en verwijder de andere lege kolommen
Selecteer vervolgens het Binnenste gedeelte en verander de achtergrondafbeelding in de afbeelding van een ander teamlid, verander hun naam en beroep, doe hetzelfde met de andere kolom.
Bekijk een voorbeeld van uw werk op tablet en mobiel terwijl u de marges verbetert en meer voor een betere weergave.
En zo kun je een prachtige sectie Teamleden maken
Download Elementor Pro nu!
Conclusie
Alstublieft ! Dat is het voor deze zelfstudie die u laat zien hoe u een teamlidsectie maakt. Als u zich zorgen maakt over hoe u er moet komen, laat het ons dan weten in de commentaires.
U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
