Wanneer u uw Over-pagina maakt, wilt u waarschijnlijk ook uw teamleden daar voorstellen. Door dit te doen, staat u de bezoekers interactie met de mensen achter uw bedrijf. Als u op zoek bent naar een manier om de sectie van uw teamleden tijdens het scrollen te animeren, vindt u deze tutorial misschien nuttig. We gaan een automatisch scrollende carrousel voor teamleden maken die beweegt wanneer uw bezoekers blader door de pagina.
Demonstratie
Laten we, voordat we in de tutorial duiken, het resultaat op verschillende schermformaten bekijken.
Begin van de conceptie
Voeg een nieuw gedeelte toe
tussenruimte
Begin met het toevoegen van een nieuwe reguliere sectie aan de pagina waaraan u werkt. Open sectie-instellingen en voeg aangepaste opvulling toe op verschillende schermformaten.
- Bovenste vulling: 200 px (bureau), 100 px (tablet en telefoon)
- Vulling onderkant: 200px (bureau), 100px (tablet en telefoon)
overflows
Om ervoor te zorgen dat er geen horizontale schuifbalk in ons ontwerp wordt weergegeven, verbergen we sectie-overlopen op het geavanceerde tabblad.
- Horizontale overloop: verborgen
- Verticale overloop: verborgen
Regel # 1 toevoegen
Kolomstructuur
Ga door met het toevoegen van een nieuwe regel aan de sectie met behulp van de volgende kolomstructuur:
sizing
Open, zonder nog modules toe te voegen, de rij-instellingen, ga naar het ontwerp-tabblad en verander de breedte en maximale breedte in de maatinstellingen.
- Breedte: 90%
- Maximale breedte: 1580 px
tussenruimte
We voegen ook aangepaste boven- en ondervulling toe.
- Bovenste vulling: 100 px
- Vulling onderkant: 100px
Voeg een tekstmodule toe aan de kolom
Voeg H2-inhoud toe
Het is tijd om modules toe te voegen, te beginnen met een eerste tekstmodule. Voer het in inhoud H2 naar keuze.
H2 tekstinstellingen
Ga naar het tabblad moduleontwerp en wijzig de H2-tekstinstellingen als volgt:
- Lettertype titel 2: Quicksand
- Titel 2 van het lettertype: semi-vetgedrukt
- Tekstkleur van item 2: # 000000
- Kop 2 Tekstgrootte: 70 px (desktop), 50 px (tablet), 40 px (telefoon)
Voeg een scheidingsmodule toe aan de kolom
zichtbaarheid
Voeg vervolgens een scheidingsmodule toe. Zorg ervoor dat de optie "Show Separator" is ingeschakeld.
- Scheidingsteken tonen: Ja
lijn
Breng vervolgens enkele wijzigingen aan in de lijninstellingen.
- Lijnkleur: # edf000
- Lijnstijl: solide
- Lijnpositie: Top
sizing
En voltooi de moduleparameters door de dimensioneringsparameters dienovereenkomstig te wijzigen:
- Gewicht verdeler: 20px
- Breedte: 11%
- Uitlijning van de module: links
- Hoogte: 20px
Voeg een regel # 2 toe
Kolomstructuur
Naar de volgende rij! Gebruik de volgende kolomstructuur:
sizing
Zonder meer modules toe te voegen, opent u de lijnparameters en wijzigt u de grootteparameters als volgt:
- Gebruik een aangepaste gootbreedte: Ja
- Dakgootbreedte: 2
- Breedte: 100%
- Max breedte: 100%
tussenruimte
Voeg vervolgens alleen links en rechts padding toe op de kleinere schermen.
- Linker opvulling: 5% (alleen tablet en telefoon)
- Rechter opvulling: 5% (alleen tablet en telefoon)
Kolomparameters (5x)
Nu, in de volgende drie stappen van deze tutorial, gaan we enkele wijzigingen aanbrengen in de kolommen. Pas de drie stappen toe op elk van de kolommen in uw rij.
Achtergrond met kleurovergang
Voeg eerst een verloopachtergrond toe aan elke kolom.
- 1-kleur: rgba (255,255,255,0)
- 2-kleur: rgba (0,0,0,0,84)
- Gradient type: lineair
- Startpositie: 25%
- Eindpositie: 86%
- Plaats het verloop bovenop de achtergrondafbeelding: Ja
Achtergrond afbeelding
Upload vervolgens een achtergrondafbeelding naar keuze. Deze achtergrondafbeelding vertegenwoordigt elk teamlid, dus gebruik voor elke kolom een andere afbeelding.
- Grootte achtergrondafbeelding: Cover
- Positie van de achtergrondafbeelding: midden
Hoofdelement
Voltooi de kolominstellingen door aangepaste CSS toe te voegen aan het hoofdtabletelement van elke kolom. Met deze regels CSS-code kunnen we de kolommen onder elkaar op de tablet plaatsen in plaats van twee naast elkaar.
breedte: 100%! belangrijk; marge: 50px 0px 50px 0px! belangrijk;
Voeg een persoonsmodule toe aan de kolom
Voeg inhoud toe
Om informatie over teamleden te delen, gebruiken we een Persoonsmodule. Voeg de eerste Persoonsmodule toe aan kolom 1 en gebruik de inhoud de votre choix.
Verwijder afbeelding
Verwijder vervolgens de afbeelding. We gebruiken in plaats daarvan de achtergrondafbeelding van de kolom.
Achtergrond afbeelding
Vervolgens zullen we een afbeeldingsoverlay toevoegen als achtergrondafbeelding van de module. Je kunt degene die we gebruiken vinden door de map aan het begin van deze tutorial te downloaden.
- Grootte achtergrondafbeelding: Cover
- Positie van de achtergrondafbeelding: midden
Instellingen voor titeltekst
Ga naar het tabblad moduleontwerp en wijzig de titeltekstinstellingen als volgt:
- Titel niveau: H3
- Titellettertype: Drijfzand
- Titel font weight: bold
- Titeltekstkleur: #ffffff
- Titeltekstgrootte: 230%
Instellingen hoofdtekst
Wijzig ook de instellingen voor de hoofdtekst.
- Body Font: Open Sans
- Body tekstkleur: #ffffff
- Lichaamslijnhoogte: 2,2 em
Positie tekstinstellingen
Breng vervolgens enkele wijzigingen aan in de positietekstinstellingen.
- Lettertype positie: Open Sans
- Tekstkleur positie: # edf000
tussenruimte
En voltooi de module-instellingen door aangepaste opvulwaarden toe te voegen aan de afstandsinstellingen.
- Bovenste padding: 70%
- Onderste vulling: 10%
- Linker vulling: 10%
- Juiste opvulling: 10%
Dupliceer de persoonsmodule 4 keer
Nadat je de persoonsmodule hebt voltooid, kun je de hele module vier keer klonen.
Plaats duplicaten in de overige kolommen
Plaats dubbele modules in de resterende vier kolommen van de rij. Zorg ervoor dat u ook de inhoud.
Verander Row in een Auto Scroll Carousel
Verander de grootte van lijn # 2
Om deze rij om te zetten in een auto-scrollende carrousel voor teamleden, moeten we de rij-instellingen opnieuw openen en de breedte en maximale breedte in de maatinstellingen wijzigen.
- Breedte: 180%
- Maximale breedte: 220% (bureau), 100% (tablet en telefoon)
Voeg horizontale beweging van lijn # 2 toe
Voltooi de lijninstellingen door horizontale beweging toe te voegen aan de scrolleffectinstellingen in het geavanceerde tabblad en je bent klaar!
- Activeer horizontale beweging: Ja
- Offset starten:
- Kantoor: 2,5
- Tablet en telefoon: 0
- Gemiddelde offset: 0 (bij 40%)
- Einde offset:
- Kantoor: -25 (tegen 62%)
- Tablet en telefoon: 0
- Trigger motion effect: midden van element
overzicht
Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.
Bureau
Final gedachten
In deze zelfstudie hebben we u laten zien hoe u creatief kunt worden met de ingebouwde schuifeffecten van Divi. Concreet hebben we een prachtige automatisch scrollende carrousel voor teamleden nagebouwd. Wanneer de bezoekers scroll door de pagina, een ander deel van de carrousel verschijnt.
