Wilt u schaduw- en zweefeffecten gebruiken in? Divi maken inhoud interactief en val op Site web ?
Zorg ervoor dat uw Site web onderscheiden van vergelijkbare websites kan moeilijk zijn. Maar als je er eenmaal bent, is het bijna altijd de moeite en het denken waard.
Wij laten u zien hoe u kunt creëren inhoud interactief bij het maken van websites met Divi.
Laten we gaan!
overzicht
Laten we, voordat we in deze tutorial duiken, even kijken naar het resultaat dat je kunt verwachten.
Desktopcomputer
Mobile
Laten we beginnen met de realisatie met Divi!
Voeg een nieuw gedeelte toe
Achtergrond kleur
Maak een nieuwe pagina of open een bestaande en voeg er een gewone sectie aan toe. Open sectie-instellingen en verander de achtergrondkleur.
- Achtergrond: #03006d
tussenruimte
Ga vervolgens naar de instellingen voor sectie-afstand en wijzig als volgt:
- Opvulling (boven en onder): 50px
Voeg een nieuwe regel toe
Structuur van de kolom
Ga verder door een nieuwe rij aan de sectie toe te voegen met behulp van de volgende kolomstructuur.
sizing
Ga vervolgens naar de maatinstellingen en laat de lijn de volledige breedte van het scherm vullen.
- Gebruik aangepaste gootbreedte: JA
- Gootbreedte: 1
- Breedte: 100%
tussenruimte
Laten we ook de volgende afstandsinstellingen wijzigen:
- Vulling (rechts): 9vw (desktop), 5vw (tablet en telefoon)
- Vulling (rechts): 5vw (tablet en telefoon)
Voeg een tekstmodule toe aan kolom 1
Voeg inhoud toe
Als u klaar bent met het bewerken van rij-instellingen, voegt u de eerste tekstmodule toe aan kolom 1.
Voeg het eerste teken toe als alineatekst. Dan de inhoud die u als lijsttekst wilt weergeven.
Tekstinstellingen (bureaublad)
Ga dan naar het tabblad Designen wijzig de standaardinstellingen voor alineatekst. Zorg ervoor dat u dezelfde kleur gebruikt voor de sectietekst en achtergrond.
- Lettergewicht: Ultra Bold
- Tekstkleur: #03006d
- Tekstgrootte: 27vw (desktop), 0vw (tablet en telefoon)
- Lijnhoogte: 1,1 em
- Tekstschaduw: Zie opname
- Schaduwvervagingssterkte: 0,01em
- Schaduwkleur: #ffffff
- Tekstuitlijning: Links
Instellingen voor tekst met muisaanwijzer
Om het mooie hover-effect te creëren, moeten we deze instellingen voor de tekst van de zweefparagraaf wijzigen.
- Tekstkleur (zweven): #ffffff
- Schaduwkleur (zweven): rgba (255,255,255,0)
Lijstinstellingen (bureaublad)
Ga verder door naar de lijstinstellingen te gaan.
- Lettergewicht: Licht
- Tekstkleur lijst: #ffffff
- Tekstgrootte lijst: 0px (desktop), 18px (tablet en telefoon)
- Stijl Positie: Cirkel
- Ongeordende lijststijl Positie: Buiten
- Inspringing van ongeordend lijstitem: 0px
Tekstinstellingen weergeven bij zweven (Hover)
We willen dat de lijsttekst bij de muisaanwijzer verschijnt. Dit is de reden waarom we de grootte van de tekst bij de muisaanwijzer zullen veranderen.
- Tekstgrootte ongeordende lijst (hover): 18px
tussenruimte
Ga verder door naar de instellingen voor moduleafstand te gaan en breng daar ook enkele wijzigingen aan.
- Marge (onder): 50px (tablet en telefoon)
- Marge (rechts): -4vw (desktop), 0vw (tablet en telefoon)
Kloon tekstmodule 4 keer en plaats duplicaten in de resterende kolommen
Nu we klaar zijn met het wijzigen van de eerste module in kolom 1, kloon de module vier keer. Plaats vervolgens elk van de duplicaten in de resterende kolommen. We zullen elk van de duplicaten aanpassen aan wat we willen.
Wijzig de tekstmodule in kolom 2
Bewerk inhoud
Open het duplicaat in kolom 2 en bewerk de inhoud.
Afstand wijzigen
Ga vervolgens naar de afstandsinstellingen en wijzig de aangepaste margewaarden.
- Marge (onder): 50px (tablet en telefoon)
- Marge (links en rechts): -2vw (desktop), 0vw (tablet en telefoon)
- Rechtermarge: -2vw (desktop), 0vw (tablet en telefoon)
Wijzig de tekstmodule in kolom 3
Bewerk inhoud
Wijzig ook de inhoud van het duplicaat in kolom 3.
Afstand wijzigen
Met afstandsinstellingen in het ontwerptabblad.
- Marge (links): 2,5 vw
- Marge (rechts): 1,5 vw
Wijzig de tekstmodule in kolom 4
Bewerk inhoud
Ga verder door de instellingen van de tekstmodule in kolom 4 te openen en bewerk de inhoud daar ook.
Afstand wijzigen
Ga vervolgens naar het tabblad Ontwerpen en wijzig de aangepaste margewaarden in de Afstandsinstellingen.
- Marge (links): -6vw
- Marge (rechts): 2vw
Wijzig de tekstmodule in kolom 5
Inhoud
Maak plaats voor het laatste duplicaat. Bewerk de inhoud in het inhoudsgebied.
Afstand wijzigen
Met aangepaste afstandsinstellingen.
- Marge (links): -7vw
- Marge (rechts): 3vw
overzicht
Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.
Lees ook: Divi : Hoe u de winkelwagen- en zoekpictogrammen van de module “Menu over volledige breedte” kunt aanpassen
Bureau
Mobile
Download DIVI nu!!!
Conclusie
Wij weten hoe belangrijk het is om ervoor te zorgen dat uw Site web onderscheidt zich van andere websites. Met de ingebouwde opties van Divi kunt u zo creatief zijn als u wilt.
Dit artikel is een voorbeeld van hoe u interactieve hover-inhoud kunt maken.
We hopen dat deze tutorial je zal inspireren voor je volgende Divi-projecten. 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, raadpleeg onze gids op 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.
...
