Sinds de nieuwe maatopties van Divi zijn uitgebracht, zijn er een paar tutorials die laten zien hoe je hover-onthullingen kunt maken. In deze tutorials worden de inhoud gemaskeerd werd verticaal geplaatst. In sommige gevallen wilt u echter misschien een horizontale onthulling creëren. In deze zelfstudie laten we u zien hoe u afbeeldingen kunt weergeven met behulp van de zweefrasters en overloopopties. Divi. Het uitvoeren van dit werk vereist een iets andere aanpak. We gaan een rij van één kolom gebruiken en alle modules onder elkaar plaatsen. Bij de muisaanwijzer veranderen we de kolom in een horizontaal raster. Je kunt het JSON-bestand ook gratis downloaden!
Laten we gaan.
overzicht
Laten we, voordat we in de tutorial duiken, snel kijken hoe deze eruitziet op verschillende schermformaten.
Laten we beginnen met recreëren!
Voeg een nieuw gedeelte toe
Begin met het toevoegen van een nieuw normaal gedeelte aan de pagina waaraan u werkt.
Voeg een nieuwe regel toe
Kolomstructuur
Ga door met het toevoegen van een nieuwe rij met behulp van de volgende kolomstructuur:
Standaard verloop achtergrond
Zonder meer modules toe te voegen, opent u de lijnparameters en voegt u de volgende gradiëntachtergrond toe:
- 1-kleur: #b1ffc4
- 2-kleur: #ffffff
- Gradiënttype: Radiaal
- Radiale richting: midden
- Startpositie: 28%
- Eindpositie: 28%
Vliegen over de achtergrond met kleurovergang
Wijzig de verloopachtergrond door met de muisaanwijzer te zweven.
- 1-kleur: #b1ffc4
- 2-kleur: #ffffff
- Gradiënttype: Radiaal
- Radiale richting: links
- Startpositie: 5%
- Eindpositie: 5%
tussenruimte
Ga naar de afstandsinstellingen en wijzig vervolgens de waarden voor opvulling en marge.
- Topvulling: 0px
- Vulling onderkant: 0px
- Bovenmarge: 50px
- Ondermarge: 50px
Standaardrand
Voeg een randradius van 50 pixels toe in de rechterbovenhoek en rechteronderhoek.
Zweef grens
Breng de hoeken naar "0px" zweven.
Standaard schaduw
Voeg vervolgens een subtiele boxschaduw toe met de volgende parameters:
- Box Shadow Blur Force: 50px
- Schaduwkleur: rgba (0,0,0,0.09)
Hover Box Shadow
Verwijder de schaduw uit het vak wanneer u erover vliegt en vervang de kleur van de schaduw door een volledig transparante kleur.
- Schaduwkleur: rgba (0,0,0,0)
Voeg een tekstmodule toe aan een kolom
Voeg H2-inhoud toe
Het is tijd om modules toe te voegen, te beginnen met een tekstmodule. Voer de inhoud H2 naar keuze.
H2 tekstinstellingen
Schakel over naar het tabblad Ontwerpen en wijzig de H2-tekstinstellingen dienovereenkomstig:
- Titel 2-lettertype: Acme
- Titel 2-lettertypestijl: onderstrepen
- Titel 2 Onderstreepkleur: #00ff3f
- Titel 2 Tekstkleur: #000000
- Titel 2 Tekstgrootte: 3vw
tussenruimte
Voeg vervolgens aangepaste vulwaarden toe.
- Beste opvulling: 6vw
- Vulling onderkant: 7vw
- Linker opvulling: 2vw
Voeg een afbeeldingsmodule toe aan de kolom
Afbeelding uploaden
De tweede module die we nodig hebben in deze kolom is een afbeeldingsmodule. Upload een landschapsafbeelding naar keuze.
Lichtbak
Activeer dan de lightbox-optie in de linkinstellingen.
- Open in de viewer: ja
sizing
En forceer de volledige breedte van de afbeelding in de formaatinstellingen. Dit zorgt ervoor dat het beeld bij alle schermformaten gevoelig blijft.
- Volledige breedte afdwingen: Ja
Clone Image Module tweemaal
Nadat u de eerste afbeeldingsmodule hebt voltooid, kunt u deze twee keer kopiëren.
Verander afbeeldingen
Verander de afbeeldingen in de twee duplicaten. Zorg ervoor dat de afbeeldingen die u uploadt dezelfde grootte hebben als de eerste afbeelding.
Voeg het rollover-effect toe aan de rij
sizing
Nu we de basisinstellingen voor rijen en pods hebben voltooid, is het tijd om het hover-effect te creëren! We beginnen met het wijzigen van de hoogte en breedte van de lijn en verbergen de overlopen. Open de instellingen voor de grootte van de rijen en breng de volgende wijzigingen aan:
- Gebruik een aangepaste gootbreedte: Ja
- Dakgootbreedte: 1
- Breedte: 20%
- Maximale breedte: 100%
- Hoogte: 15.9vw
zweven
Verklein de breedte naar "100%" tijdens het zweven. Hierdoor kunnen de afbeeldingen worden weergegeven zodra de lijn wordt bewogen.
- Breedte: 100%
zichtbaarheid
Schakel over naar het volgende geavanceerde tabblad en verberg de overlopen. Dit zorgt ervoor dat de afbeeldingen worden gemaskeerd voordat de bezoekers hover (desktop) of klik (tablet/mobiel) op de tekstmodule.
- Horizontale overloop: verborgen
- Verticale overloop: verborgen
Transitions
We veranderen ook de duur van de overgang in de overgangsparameters.
- Duur van de overgang: 0ms
Hoofdkolom rollover-element
Om een hover-raster te maken, openen we de kolominstellingen, gaan we naar het tabblad Geavanceerde opties en plaatsen we de volgende regels CSS-code in het hoofd-hover-element:
weergave: rooster; grid-template-columns: 20% 25% 25% 25%; grid-gap: 10px;
Kloon de regel twee keer
Zodra u de eerste rij heeft voltooid, kunt u deze zo vaak klonen als u wilt. Voor dit specifieke ontwerpvoorbeeld klonen we de rij twee keer.
Wijzig de verloopachtergrond van lijn 1
Wijzig de kleur van het eerste verloop op de verloopachtergrond van de tweede regel.
- 1-kleur: # ffdc96
Wijzig de verloopachtergrond van regel 2
Doe hetzelfde voor de derde rij.
- 1-kleur: # b7c7ff
Wijzig de kopie van de tekstmodule en de onderstreepte kleur van de twee duplicaten
Ga door met het wijzigen van de onderstreepte kleur van de duplicaten van de tekstmodule met de kopie en je bent klaar!
- Onderlijnde kleur # 1: # ffaa00
- Onderlijnde kleur # 2: # 0037ff
Final gedachten
In deze zelfstudie hebben we u laten zien hoe u afbeeldingen in horizontale zweefrasters kunt weergeven met behulp van de overloopopties. Divi. Afbeeldingen werden onthuld wanneer de muis op het bureaublad werd geplaatst en op tablet/telefoon werd geklikt. Hoewel we afbeeldingen hebben onthuld, kunt u de inhoud naar keuze door de parameters in de generator te wijzigen. We hopen dat deze tutorial je inspireert om je eigen alternatieve hover grid-ontwerpen te maken! Als je vragen of suggesties hebt, laat dan een reactie achter in het opmerkingengedeelte hieronder!
