Wilt u uw functionaliteiten of producten presenteren in de vorm van een tabblad Divi met hover-effect?
Bent u op zoek naar nieuwe creatieve manieren om functies en/of producten op uw webpagina's te presenteren?
Als dat zo is, lees dan verder, want in dit artikel laten we u zien hoe u functies in tabbladen bij zweven kunt weergeven met alleen de ingebouwde opties van Divi. De mogelijkheden die je hebt met deze aanpak zijn eindeloos en je zult er zeker inzicht in krijgen Divi op een dieper niveau.
Het tab-hovereffect treedt alleen op op het bureaublad. Op kleinere schermformaten verschijnen ze in hun normale vorm.
Laten we gaan!
overzicht
Laten we, voordat we in deze tutorial duiken, eens kijken naar het resultaat dat we willen bereiken.
Laten we het creatieproces starten met Divi
Voeg een nieuw gedeelte toe
Achtergrond met kleurovergang
Voeg een nieuwe pagina toe of open een bestaande pagina en voeg een nieuwe sectie toe. Open de sectie-instellingen en voeg een verloopachtergrond toe aan de sectie.
- Linkerkleur: #f2f2f2
- Juiste kleur: #ffffff
- Gradiëntrichting: 87 graden
- Linker positie: 20%
- Juiste positie: 80%
tussenruimte
Wijzig vervolgens de volgende afstandsinstellingen:
- Opvulling (boven en onder): 0px
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:
Achtergrond kleur
Zonder nog modules toe te voegen, open je de rij-instellingen en verander je de achtergrondkleur.
- Achtergrondkleur: #ffffff
Maatvoering en uitlijning
In het tabblad Design, trek de optie naar beneden Afmetingen en wijzig de volgende instellingen:
- Gebruik aangepaste gootbreedte: YESS
- Gootbreedte: 1
- Breedte: 400px
- Rij-uitlijning: Links
Hover-afmetingen
Optie wijzigen Breedte in de instellingen voor de grootte van de muisaanwijzer. Hierdoor kan de lijn uitzetten tijdens het zweven.
- Breedte (zweven): 2 pixels
tussenruimte
Ga dan naar de afstandsinstellingen in de optie Spacing
- Opvulling (boven en onder): 0px
Rand (bureaublad)
Voeg '20px' toe aan de rechterbovenhoek van de lijn en voeg ook een linkerrand toe aan de lijn.
- Afgeronde hoeken (bureaublad): 20px (rechterbovenhoek)
- Breedte linkerrand: 20px
- Kleur linkerrand: #6d44ff
Rand bij zweven
Verwijder de afgeronde rechterbovenhoek van '20px' bij de muisaanwijzer door in plaats daarvan '0px' toe te voegen.
Box Shadow (bureaublad)
Voeg ten slotte een subtiele schaduw toe.
- Doos Schaduwvervaging Sterkte: 80px
- Box Shadow Spread-sterkte: -10px
- Schaduwkleur: rgba(0,0,0,0.11)
Zweef schaduw
En verander de schaduwkleur in een volledig transparante kleur bij het zweven.
- Doosschaduw: rgba(255,255,255,0)
Blurb-module aan rij toevoegen
Voeg inhoud toe
Nu we klaar zijn met het wijzigen van alle rij-instellingen, kunnen we doorgaan en een Blurb-module aan de kolom toevoegen. Voel je vrij om een andere module naar keuze te gebruiken.
Nadat u de module heeft toegevoegd, voegt u er enkele toe inhoud de votre choix.
Selecteer het icoon
Selecteer vervolgens een icoon naar keuze.
Pictogram instellingen
En verander het uiterlijk van het pictogram in de pictograminstellingen. Ga naar het tabblad Design
- Pictogramkleur: #5323ff
- Plaatsing afbeelding/pictogram: Boven
- Breedte afbeelding/pictogram: 50px
Instellingen voor teksttitels (desktop)
Wijzig vervolgens de titelinstellingen.
- Titel Lettertype: Poppins
- Tekstuitlijning: gecentreerd
- Titel Tekst Kleur: #5323ff
- Titel tekstgrootte: 25px
- Letterafstand: -1px
- Lijnhoogte: 1 em
Instellingen voor titeltekst aanwijzen
En verander de hoogte van de titelrij bij het aanwijzen.
- Hoogte titelregel: 1,5 em
Instellingen voor hoofdtekst (desktop)
Ga vervolgens naar de instellingen voor de hoofdtekst en breng enkele wijzigingen aan. Dit omvat het wijzigen van de tekstgrootte in '0px'. Dit zal ons helpen om de hoofdtekst alleen bij de muisaanwijzer te laten verschijnen.
- Lichaamslettertype: Poppins
- Lichaamslettergewicht: licht
- Tekstuitlijning: gecentreerd
- Lichaamstekstkleur: #000000
- Grootte hoofdtekst: 0px (desktop), 15px (tablet en telefoon)
- Lijnhoogte: 2,2 em
Instellingen voor hoofdtekst bij zweven
Wijzig de grootte van de zweeftekst om ervoor te zorgen dat de hoofdtekst bij het aanwijzen wordt weergegeven.
- Grootte hoofdtekst: 15px
Afstand (bureaublad)
Om de module wat ruimte te geven, passen we de volgende afstandsparameters aan:
- Opvulling (boven en onder): 80px
Zweefafstand
We gaan de instellingen voor de zweefafstand wijzigen.
- Opvulling (boven en onder): 80px
- Vulling (links en rechts): 20vw
Kloon rij 3 keer
Als je klaar bent met het bewerken van de eerste rij en de Blurb-module, kun je doorgaan en de rij zo vaak klonen als je wilt.
Regel- en Blurb-module bewerken #2
Kleur lijnrand wijzigen
Laten we beginnen met het veranderen van de kleur van de linkerrand van de lijn.
- Kleur linkerrand: #00ffcc
Blurb-inhoud en -pictogram bewerken
Open vervolgens de instellingen van de Blurb-module en wijzig het pictogram.
Kleur van pictogram van Blurb-module wijzigen
Met pictogramkleur.
- Pictogramkleur: #00eda6
Titelkleur wijzigen
En de kleur van de titeltekst.
- Titel tekstkleur: #00eda6
Bewerk lijn en Burb #3 module
Kleur rand lijn
Laten we de randkleur van de linkerrij veranderen.
- Kleur linkerrand: #afebff
Blurb-inhoud en -pictogram bewerken
Laten we ook het pictogram en wijzigen inhoud van de presentatietekst.
Kleur van pictogram van Blurb-module wijzigen
Verander ook de pictogramkleur.
- Pictogramkleur: #68d9ff
Tekstkleur titel wijzigen
En de kleur van de titeltekst ook.
- Titel tekstkleur: #68d9ff
Regel- en Blurb-module bewerken #4
Kleur lijnrand wijzigen
Wijzig in de volgende en laatste module ook de kleur van de linkerrand van de lijn.
- Kleur linkerrand: #dd87cf
Blurb-inhoud en -pictogram bewerken
Open de Blurb-module in de rij en wijzig het pictogram en de inhoud van de module.
Kleur van pictogram van Blurb-module wijzigen
Met pictogramkleur.
- Pictogramkleur: #dd6aca
Tekstkleur titel wijzigen
En de kleur van de titeltekst ook.
- Titel tekstkleur: #dd6aca
overzicht
Nu we de tutorial hebben doorgenomen, gaan we nog een laatste keer naar het resultaat kijken.
Download DIVI nu!!!
Conclusie
In dit artikel hebben we u laten zien hoe u de ingebouwde opties van Divi alleen kunt gebruiken om tabbladen te maken die beschikbaar zijn bij zweven.
Met deze aanpak kunt u interactief inhoud over functies of producten delen.
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.
...