Door de nieuwe versleepbare formaatopties van Divi te gebruiken, kunnen we niet alleen zeer responsieve websites maken, maar kunnen we ook unieke interacties creëren. Met deze opties kunt u elke optie aanpassen Site web u maakt en past de structuur van uw pagina's aan op basis van de huidige ontwerptrends.
In deze tutorial laten we u in het bijzonder zien hoe u hover-secties kunt maken met Divi. We zullen een nieuwe pagina maken en de weergave van alle sectietitels toestaan, maar elke sectie wordt alleen geopend door te zweven (desktop) of op te klikken (mobiel). Zodra je een ander gedeelte opent, wordt het gedeelte dat je eerder hebt geopend automatisch gesloten. We beginnen met het uitleggen van de algemene aanpak en gaan verder met het opnieuw maken van het onderstaande voorbeeld. We hopen dat deze tutorial je aanmoedigt om je eigen ontwerpen voor hover-secties te maken!
Laten we gaan!
overzicht
Laten we, voordat we in de tutorial duiken, eerst het resultaat bekijken.
Ontwerpfase
Voordat we in de zelfstudie duiken, bespreken we de techniek die wordt gebruikt om rollover-secties te maken. U kunt deze techniek toepassen op elk type Site web je bouwt, in elke stijl.
1. Voeg het eerste gedeelte toe aan uw pagina
Stel dat u een nieuw ontwerp start op een geheel nieuwe pagina. Het eerste dat u moet doen, is een nieuwe reguliere sectie toevoegen.
2. Voeg een nieuwe regel toe inclusief een sectietitel
Vervolgens kunt u doorgaan door een nieuwe regel toe te voegen met een tekstmodule inclusief uw sectietitel. Je kunt ook een scheidingsmodule toevoegen en iets dat aangeeft dat de lijn groter wordt bij het aanwijzen of aanraken. Het is belangrijk om de sectietitel te scheiden van de rest van de sectie inhoud van de sectie. Zorg er dus voor dat er voldoende ruimte overblijft tussen de sectietitel en alles wat volgt.
3. Pas de rest van de inhoud van de sectie
De ontwerpelementen die volgen op de sectietitels zijn geheel aan jou. U kunt een sectie zo lang of zo kort maken als u wilt en elke ontwerpstijl gebruiken.
4. Wijzig de standaardhoogten en beweeg over de sectie
Nadat u de sectie en alle ontwerpelementen heeft verfijnd, is het tijd om het rollover-effect te creëren. De standaardhoogte van uw sectie is zo ontworpen dat deze alleen overeenkomt met de sectietitel. Tijdens het zweven keert de sectie terug naar de oorspronkelijke grootte.
5. Verticale overloop verbergen
Een ander belangrijk onderdeel van deze techniek verbergt de verticale overloop. Zodra u een standaard maximale hoogte voor uw sectie heeft ingesteld die kleiner is dan de oorspronkelijke sectiehoogte, wordt een overloop gecreëerd. Om ervoor te zorgen dat de overloop niet wordt weergegeven, moet u ervoor zorgen dat deze verborgen is in de zichtbaarheidsinstellingen van de sectie.
5. Herhaal de stappen voor alle secties van de pagina.
Herhaal dezelfde stappen voor alle secties van uw pagina om een duidelijke gebruikerservaring te creëren die uw bezoekers zal waarderen.
Begin van het ontwerp!
Voeg een nieuw gedeelte toe
Standaard achtergrondkleur
Nu we de aanpak in dit bericht hebben gevolgd, is het tijd om dingen in actie te brengen! Voeg een normaal eerste gedeelte toe aan een geheel nieuwe pagina van uw Site web WordPress en open de sectie-instellingen. Wijzig de standaardachtergrondkleur van uw sectie in een kleur naar keuze.
- Achtergrondkleur: # 000000
Vlieg over de achtergrondkleur
Verander deze zwevende achtergrondkleur.
- Achtergrondkleur: #ffffff
Rij 1 toevoegen
Kolomstructuur
Ga door met het toevoegen van de eerste regel aan uw sectie met behulp van de volgende kolomstructuur:
Voeg een tekstmodule toe
Voeg H2-inhoud toe
Voeg een tekstmodule toe aan uw volgende nieuwe regel. Voeg een H2-kopie toe met het '▼' -symbool terwijl de sectie zich ontvouwt.
H2 tekstinstellingen
Ga naar het tabblad Moduleontwerp en wijzig de H2-tekstinstellingen.
- Kop 2-lettertype: Trebuchet
- Titel 2 Lettergewicht: Ultra vet
- Titel 2 tekstuitlijning: links
- Titel 2 Tekstkleur: #ff0f3b
- Titel 2-tekstgrootte: 100-pixels (desktop), 80-pixels (tablet), 60-pixels (telefoon)
- Titel 2 Letterafstand: -5px
Voeg een deelmodule toe
zichtbaarheid
De tweede en laatste module die we nodig hebben in deze rij is een deelmodule. Zorg ervoor dat u de optie "Scheidingsteken weergeven" inschakelt in de zichtbaarheidsinstellingen.
- Divider weergeven: Ja
Kleur
Ga vervolgens naar het tabblad Ontwerpen en verander de kleur van het scheidingsteken.
- Kleur: #ff0f3b
sizing
Wijzig ook de maatparameters van de module.
- Gewicht verdeler: 2px
- Breedte: 14%
Voeg de 2-regel toe
Kolomstructuur
Volgende rij! Dit is waar je alle inhoud die u wilt weergeven na het aanwijzen van de muis (desktop) of klikken (tablet en mobiel). We gebruiken de volgende kolomstructuur, maar houd er rekening mee dat u zoveel rijen en modules kunt toevoegen als u wilt en deze kunt aanpassen aan uw behoeften:
Voeg een tekstmodule toe aan de 1-kolom
Voeg inhoud toe
Plaats een tekstmodule in de eerste kolom met de inhoud van uw keuze.
Tekst instellingen
Ga naar het tabblad Ontwerpen van de tekstmodule en verander de oriëntatie van de tekst.
- Tekstoriëntatie: uitvullen
Voeg een tekstmodule toe aan de 2-kolom
Voeg inhoud toe
Voeg ook een tekstmodule toe aan de tweede kolom met de inhoud van uw keuze.
Tekst instellingen
Verander nogmaals de oriëntatie van de tekst in de tekstinstellingen van de module.
- Tekstoriëntatie: uitvullen
Voeg de maatparameters toe aan de sectie
Standaard maatvoering
Zodra je je sectie hebt voltooid, is het tijd om het zweefeffect te creëren. Open de sectie-instellingen en verander de maximale hoogte voor verschillende schermformaten:
- Maximale hoogte: 300px (desktop), 280px (tablet), 260px (telefoon)
zweven
Schakel ook de hover-optie in op maximale hoogte en voeg een waarde toe die hoog genoeg is om alle elementen te dekken, ongeacht de schermgrootte. Deze waarde zorgt ervoor dat al uw elementen worden weergegeven zonder de oorspronkelijke grootte van de sectiecontainer te overschrijden.
- Maximale hoogte: 5000px
Verticale overloop
Ga dan naar het tabblad Geavanceerd van de sectie en verander de verticale overloop. Hiermee wordt alle inhoud verborgen die buiten de sectiecontainer valt.
- Verticale overloop: verborgen
Transitions
Om een soepele overgang te creëren, wijzigen we ook de overgangsinstellingen op het tabblad Geavanceerd.
- Duur van de overgang: 800ms
- Overgangstijd: 500 ms
Kloon de hele sectie zo vaak als je wilt
Nadat u de eerste flyover-sectie hebt gemaakt, kunt u deze zo vaak als u wilt klonen.
Verander sectietitels
Natuurlijk wilt u de dubbele sectietitels wijzigen.
Wijzig de kleuren van de H2-tekst
Om variaties in het ontwerp te creëren, zullen we ook de tekstkleuren van de modules wijzigen die in het onderstaande afdrukscherm zijn gemarkeerd.
- Titel 2 Tekstkleur: #c4c4c4
Wijzig de kleuren van het scheidingsteken
Met de scheidingskleuren die bij de tekstmodules horen.
- Kleur: #c4c4c4
overzicht
Nu alle stappen zijn voltooid, laten we het resultaat nog een keer bekijken.
Final gedachten
In dit artikel hebben we u laten zien hoe u op een creatieve manier Divi's nieuwe versleepbare formaatopties kunt gebruiken om unieke interacties te creëren met behulp van zweefsecties op elke website die u maakt. We zijn begonnen met het uitleggen van de aanpak en gaan verder door het ontwerpvoorbeeld helemaal opnieuw te maken. U kunt het JSON-bestand ook gratis downloaden! Als u vragen of suggesties heeft, laat dan een reactie achter in de opmerkingen hieronder.
