Divi: Hoe maak je een teamledensectie als carrousel

Wilt u dat uw teamleden worden gepresenteerd in de vorm van een carrousel met? Divi ?

Wanneer u uw Over-pagina opzet, wilt u waarschijnlijk ook uw teamleden daar opnemen. Door dit te doen, sta je toe bezoekers om in contact te komen met de mensen achter uw bedrijf. 

Als u op zoek bent naar een manier om de sectie van uw teamleden te animeren over scrollen, dan zult u deze tutorial geweldig vinden. 

We gaan een prachtige, automatisch scrollende carrousel voor teamleden maken die beweegt als jouw bezoekers blader door de pagina.

Laten we gaan.

overzicht

Laten we, voordat we in de tutorial duiken, even kijken naar het resultaat op verschillende schermformaten.

Desktopcomputer

Mobiele versie

Laten we beginnen met ontwerpen met Divi

Lees ook: Divi: inhoud onthullen door over de sectiescheiding te bewegen

Voeg een nieuw gedeelte toe

Interne Magiërs

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.

• Opvulling (boven en onder): 200px (desktop), 100px (tablet en telefoon)

zichtbaarheid

Om ervoor te zorgen dat er geen horizontale schuifbalken in ons ontwerp verschijnen, verbergen we sectie-overlopen in het tabblad Geavanceerd.

• Horizontale overloop: verborgen
• Verticale overloop: verborgen

Voeg regel #1 . toe

Structuur van de kolom

Ga verder door een nieuwe rij aan de sectie toe te voegen met behulp van de volgende kolomstructuur:

Breedte

Zonder nog modules toe te voegen, open de regelinstellingen, ga naar het tabblad Design en verander de breedte en maximale breedte in de maatinstellingen.

• Breedte: 90%
• Maximale breedte: 1px

tussenruimte

We voegen ook aangepaste boven- en ondervulling toe.

• Opvulling (boven en onder): 100px

Voeg een tekstmodule toe aan de kolom

Inhoud in H2-formaat toevoegen

Het is tijd om modules toe te voegen, te beginnen met een eerste tekstmodule. Voer een in inhoud H2 maat naar keuze.

H2 tekstinstellingen

Overschakelen naar tabblad Design van de module en wijzig de H2-tekstparameters als volgt:

• Lettertype: Drijfzand
• Lettergewicht: Semi Vet
• Tekstkleur: #000000
• Tekstgrootte: 70px (desktop), 50px (tablet), 40px (telefoon)

Voeg een "Divider"-module toe aan de kolom

zichtbaarheid

Voeg dan een module toe verdeler. Zorg ervoor dat de optie "Toon Divider" is ingeschakeld.

• Show Divider: JA

lijn

Breng vervolgens enkele wijzigingen aan in de lijninstellingen.

• Lijnkleur: #edf000
• Stijl: Solide
• Lijnpositie: Boven

Afmetingen

En voltooi de moduleparameters door de maatparameters dienovereenkomstig aan te passen:

• scheidingsgewicht: 20px
• Breedte: 11%
• Uitlijningsmodule: links
• Hoogte: 20px

Voeg regel 2 . toe

Structuur van de kolom

Volgende rij! Gebruik de volgende kolomstructuur:

Afmetingen

Open, zonder nog modules toe te voegen, de rij-instellingen en wijzig de formaatinstellingen als volgt:

• Aangepaste gootbreedte gebruiken: Ja
• Gootbreedte: 2
• Breedte: 100%
• Maximale breedte: 100%

Afstand (alleen tablet en telefoon)

Voeg vervolgens alleen linker- en rechteropvulling toe op kleine schermformaten.

• Vulling (links en rechts): 5% (alleen tablet en telefoon)

Kolomparameters (5x)

In de volgende drie stappen van deze zelfstudie gaan we nu enkele wijzigingen aanbrengen in de kolommen. Pas de drie stappen toe op elk van de kolommen in uw rij.

Achtergrond verloop

Voeg eerst een verloopachtergrond toe aan elke kolom.

• Gradiëntstops (25%): rgba (255,255,255,0)
• Gradiëntstops (86%): rgba (0,0,0,0.84)
• Type: Lineair
• Vierkant verloop boven 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: omslag
• Positie achtergrondafbeelding: midden

Aangepaste CSS toegevoegd (alleen tablet)

Voltooi de kolominstellingen door aangepaste CSS toe te voegen aan het hoofdelement (Voor weergave Tablet alleen) van elke kolom. 

Deze regels CSS-code helpen ons de kolommen onder elkaar op de tablet te plaatsen, in plaats van er twee naast elkaar te hebben.

width: 100% !important;
margin: 50px 0px 50px 0px !important;

Voeg een 'Persoon'-module toe aan de kolom

Voeg inhoud toe

Om informatie over teamleden te delen, gebruiken we een module Persoon. 

Voeg de eerste Persoonsmodule toe aan kolom 1 en gebruik de inhoud de votre choix.

Verwijder afbeelding

Verwijder vervolgens de afbeelding. In plaats daarvan gebruiken we de achtergrondafbeelding van de kolom.

Achtergrond afbeelding

Vervolgens voegen we een afbeeldingsoverlay toe als achtergrondafbeelding van de module.

• Grootte achtergrondafbeelding: omslag
• Positie achtergrondafbeelding: midden

Instellingen voor titeltekst

Overschakelen naar tabblad Design module en wijzig de instellingen voor de titeltekst als volgt:

• Titel Kopniveau: H3
• Titel Lettertype: Drijfzand
• Lettergewicht: Vet
• Titel Tekst Kleur: #ffffff
• Titel tekstgrootte: 230%

Instellingen hoofdtekst

Wijzig ook de instellingen voor de hoofdtekst.

• Lichaamslettertype: Open Sans
• Tekstkleur: #ffffff
• Lijnhoogte: 2,2 em

Instellingen voor berichttekst van teamleden

Breng vervolgens enkele wijzigingen aan in de tekstinstellingen van de positie van het teamlid.

• Positie Lettertype: Openen zonder
• Positie Tekstkleur: #edf000

tussenruimte

En voltooi de module-instellingen door aangepaste opvulwaarden toe te voegen aan de afstandsinstellingen.

• Vulling: 70% (boven), 10% (onder, links en rechts)

Kloon de module "Persoon" vier keer

Nadat je de persoonsmodule hebt voltooid, kun je de hele module vier keer klonen.

Plaats duplicaten in de resterende kolommen

Plaats dubbele modules in de resterende vier kolommen van de rij. 

Zorg er ook voor dat u de inhoud.

Verander een rij in een automatisch scrollende carrousel

Zie ook: Divi: Een vloeiend kolomraster maken bij zweven

Verander rijgrootte #2

Om van deze regel een automatisch scrollende carrousel te maken, moeten we de regelinstellingen opnieuw openen en de breedte en maximale breedte wijzigen in de formaatinstellingen.

• Breedte: 180%
• Maximale breedte: 220% (desktop), 100% (tablet en telefoon)

Voeg horizontale beweging toe aan regel 2

Voltooi de lijninstellingen door horizontale beweging toe te voegen aan de instellingen voor scrolleffecten in het tabblad Geavanceerd onder optie Scroll effecten en je bent klaar!

• Horizontale beweging inschakelen: Ja
• Startoffset:
  • Bureaublad: 2,5
  • Tablet & telefoon: 0
• Mid-offset: 0 (tot 40%)
• Eindverschuiving:
  • Bureaublad: -25 (tot 62%)
  • Tablet & telefoon: 0
• Bewegingseffecttrigger: midden van element

overzicht

Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.

Desktopcomputer

Download DIVI nu!!!

Mobiele weergave

Download DIVI nu!!!

Conclusie

In dit artikel hebben we je laten zien hoe je creatief kunt worden met de ingebouwde scroll-effecten van Divi. 

Concreet hebben we een prachtige carrousel nagebouwd met automatisch scrollende teamleden. Wanneer de bezoekers scroll door de pagina, een ander deel van de carrousel verschijnt.

We hopen dat deze tutorial je zal inspireren voor je volgende projecten. Divi. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.

U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren.

Aarzel niet om ook onze gids te raadplegen over 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.

...