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.

Divi-tabblad met zweefeffect

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
zweeftabbladen

Afstand (bureaublad)

Om de module wat ruimte te geven, passen we de volgende afstandsparameters aan:

  • Opvulling (boven en onder): 80px
zweeftabbladen

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
Divi-tabblad met zweefeffect

overzicht

Nu we de tutorial hebben doorgenomen, gaan we nog een laatste keer naar het resultaat kijken.

Divi-tabblad met zweefeffect

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.

...