Door naar hoofdmenu

Hoe u een scrollcarrousel voor een teamlid maakt met Divi

Divi: het gemakkelijkste te gebruiken WordPress-thema

Divi: Het beste WordPress-thema aller tijden!

Meer 701.000-downloads, Divi is het populairste WordPress-thema ter wereld. Het is compleet, gemakkelijk te gebruiken en wordt geleverd met meer dan 62-vrije sjablonen. [Aanbevolen]

Wanneer u uw Over-pagina maakt, wilt u waarschijnlijk ook uw teamleden voorstellen. Door dit te doen, laat u bezoekers communiceren met de mensen achter uw bedrijf. Als je op zoek bent naar een manier om je teamleden op de scroll-pagina op te vrolijken, dan is deze tutorial misschien iets voor jou. We maken een automatisch scrollende carrousel voor teamleden die beweegt terwijl uw bezoekers door de pagina scrollen. 

Demonstratie

Laten we, voordat we in de tutorial duiken, het resultaat op verschillende schermformaten bekijken.

Blader door het divi-teamlid

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)
Parameter configuratie

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
Overloopconfiguratie

Regel # 1 toevoegen

Kolomstructuur

Ga door met het toevoegen van een nieuwe regel aan de sectie met behulp van de volgende kolomstructuur:

Kies de divi-indeling

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
Divi line-parameter

tussenruimte

We voegen ook aangepaste boven- en ondervulling toe.

  • Bovenste vulling: 100 px
  • Vulling onderkant: 100px
Regelafstand divi-configuratie

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 de H2-inhoud van uw keuze in.

Ontmoet het team

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)
Divi-tekstafstand

Voeg een scheidingsmodule toe aan de kolom

zichtbaarheid

Voeg vervolgens een scheidingsmodule toe. Zorg ervoor dat de optie "Show Separator" is ingeschakeld.

Creëer eenvoudig uw website met Elementor

Met Elementor kunt u eenvoudig elk website-ontwerp maken met een professionele uitstraling. Stop met betalen duur voor wat je zelf kunt doen. [Gratis]

  • Scheidingsteken tonen: Ja
Scheidingsteken weergeven

lijn

Breng vervolgens enkele wijzigingen aan in de lijninstellingen.

  • Lijnkleur: # edf000
  • Lijnstijl: solide
  • Lijnpositie: Top
Divi-afstandsstijl

sizing

En voltooi de moduleparameters door de dimensioneringsparameters dienovereenkomstig te wijzigen:

  • Gewicht verdeler: 20px
  • Breedte: 11%
  • Uitlijning van de module: links
  • Hoogte: 20px
Dimensionering divi line module

Voeg een regel # 2 toe

Kolomstructuur

Naar de volgende rij! Gebruik de volgende kolomstructuur:

Divi-kolomconfiguratie

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%
Goot breedte configuratie

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)
Configuratie van regelafstanden

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.

Divi-parameterlijnconfiguratie

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
Divi achterste kolomconfiguratie

Achtergrond afbeelding

Upload vervolgens een achtergrondafbeelding naar keuze. Deze achtergrondafbeelding vertegenwoordigt elk teamlid, dus gebruik voor elke kolom een ​​andere afbeelding.

Ben je op zoek naar de beste WordPress-thema's en -plug-ins?

Download de beste plug-ins en WordPress-thema's op Envato en maak eenvoudig uw website. Al meer dan 49.720.000-downloads. [EXCLUSIEF]

  • Grootte achtergrondafbeelding: Cover
  • Positie van de achtergrondafbeelding: midden
Voeg divi-kolom achtergrondafbeelding toe

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;
Code css divi kolom

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 gewenste inhoud.

Persoonsnaam divi

Verwijder afbeelding

Verwijder vervolgens de afbeelding. We gebruiken in plaats daarvan de achtergrondafbeelding van de kolom.

Divi-afbeelding verwijderen

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
Achtergrondconfiguratie van persoonsmodule

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%
Aanpassing van titels van Divi-modules

Instellingen hoofdtekst

Wijzig ook de instellingen voor de hoofdtekst.

  • Body Font: Open Sans
  • Body tekstkleur: #ffffff
  • Lichaamslijnhoogte: 2,2 em
Divi lichaamsaanpassing

Positie tekstinstellingen

Breng vervolgens enkele wijzigingen aan in de positietekstinstellingen.

  • Lettertype positie: Open Sans
  • Tekstkleur positie: # edf000
Divi-positie

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%
Divi person module-afstand

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

Maak eenvoudig uw online winkel

Download gratis WooCommerce, de beste e-commerce plug-ins om uw fysieke en digitale producten te verkopen op WordPress. [Aanbevolen]

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)
Regelafstand modificatie

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
Divi scrollende animatie-configuratie

overzicht

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

Bureau

Blader door het divi-teamlid

Final gedachten

In deze tutorial hebben we je laten zien hoe je creatief kunt worden met de ingebouwde scrolleffecten van Divi. In het bijzonder hebben we een mooie, automatisch scrollende carrousel voor teamleden gemaakt. Terwijl bezoekers naar beneden scrollen, verschijnt een ander deel van de carrousel.

Dit artikel bevat opmerkingen 0

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Deze site gebruikt Akismet om ongewenst te verminderen. Meer informatie over hoe uw opmerkingen worden gebruikt.

Terug naar boven
0 aandelen
aandeel
gekwetter
Enregistrer