Wilt u een origineel Divi-menu maken in de vorm van een ronddraaiend wiel tijdens het zweven?
Het maken van een draaiend menuwiel bij de muisaanwijzer is een leuke manier om handige links op uw Site web. Dit zou een geweldige manier zijn om meerdere call-to-actions in een header weer te geven om gebruikers te wijzen waar ze heen moeten. En het zou ook een cool subcategoriemenu zijn voor jouw blog.
In deze zelfstudie laten we u zien hoe u een roterend menuwiel maakt bij zweven in Divi. Dit kan worden gedaan met behulp van een combinatie van ingebouwde Divi-opties en enkele aangepaste CSS-fragmenten.
overzicht
Laten we, voordat we ingaan op deze tutorial, eens kijken naar het resultaat dat we willen bereiken.
Download DIVI nu!!!
Maak een nieuwe pagina met Divi Builder
Om te beginnen heb je het volgende nodig:
Ga vanuit het WordPress-dashboard naar Pagina's> Nieuwe toevoegen om een nieuwe pagina te maken.
Geef het een titel die voor jou logisch is en klik op Gebruik Divi Builder
klik vervolgens op Begin met bouwen (Bouw vanaf het begin)
Daarna heb je een leeg canvas om te beginnen met ontwerpen in Divi.
Ontwerp van het roterende menuwiel in Divi
Maak sectie en lijn 1
Voeg in de standaard aanwezige sectie een rij toe met de volgende kolomstructuur.
Voeg vervolgens een tekstmodule toe aan de regel met de volgende inhoud.
Werk vervolgens het tekstontwerp als volgt bij:
- Tekstlettertype: Share Tech
- Tekst Letterafstand: 1px
- Kop 2 Tekstgrootte: 8vw
Voeg regel 2 toe om het wiel te bouwen
Vervolgens moeten we een nieuwe rij toevoegen aan een kolom onder rij 1.
Voordat we beginnen met het toevoegen van onze tekstmodules voor onze links, moeten we onze lijn als een wiel ontwerpen. Er zullen veel optimalisaties nodig zijn in de rij om ons wielontwerp te maken.
Lees ook: Inhoud onthullen op Hover Section Divider in Divi
Om aan de slag te gaan, opent u Instellingen van rij 2 en werkt u het volgende bij:
- Achtergrondkleur: #02366b
- Linker achtergrondverloopkleur: rgba(0,0,0,0.45)
- Rechter achtergrondverloopkleur: #02366b
- Gradiënttype: circulair
- Radiale richting: midden
- Startpositie: 36%
- Eindpositie: 0%
- Gebruik aangepaste gootbreedte: JA
- Gootbreedte: 1
- Breedte: 500px
- Max. Breedte: 500px (desktop), automatisch (tablet en telefoon)
- Hoogte: 500px (desktop), automatisch (tablet en telefoon)
- Opvulling (bureaublad): 0px (boven en onder)
- Opvulling (tablet en telefoon): 20px (boven, onder en links)
- Marge (Telefoon): -10% (Rechts)
We moeten zowel de hoogte als de breedte van de lijn instellen op 500 pixels, zodat het een perfect vierkant is. Dit stelt ons in staat om het een perfecte ronde vorm te geven met behulp van Divi's optie voor afgeronde hoeken (randradius).
- Afgeronde hoeken: 50%
Vervolgens kunnen we als volgt een ander niveau van cirkelontwerp toevoegen met behulp van een doosschaduw:
- Doos Schaduwvervaging Sterkte: 0px
- Box Shadow Spread-sterkte: 210px
- Schaduwkleur: rgba (2,54,107,0.66)
Vervolgens voegen we een klein CSS-fragment toe om de inhoud van onze rij verticaal te centreren. Onder het tabblad Geavanceerd, voeg de volgende aangepaste CSS toe aan het hoofdelement.
display:flex;align-items:center;
Koppelingen toevoegen
Elke link in het wiel wordt gemaakt met een module Tekst. We zullen in totaal zes modules maken Tekst. Vijf van de modules Tekst bevat de links voor het wiel en de andere bevat de titel van het menu.
Begin met het maken van een nieuwe "Tekst" -module.
Werk vervolgens de tekstinstellingen als volgt bij:
- Romper: “Element 1”
- Tekstlettertype: Share Tech
- Tekstkleur: #ffffff
- Grootte: 16px (standaard), 20px (zweven)
- Letterafstand: 1px
- Hoogte tekstregel: 60px
- Breedte: 250px (desktop), automatisch (tablet en telefoon)
- Hoogte: 60px
- Opvulling (links): 20px
Bewaar de instellingen voor nu. Dupliceer vervolgens de tekstmodule 4 keer om in totaal 5 tekstmodules te maken.
Positionering Tekstlinks/modules
We zijn nu klaar om onze schakels langs de omtrek van het wiel te positioneren. Om dit te doen, zullen we elke module bijwerken Tekst met transformatieopties die de module op zijn plaats verplaatsen/vertalen en roteren.
Ontdek ook: Een vloeiend kolomraster maken bij zweven in divi
Om dit te vergemakkelijken, implementeert u de wireframe-weergavemodus en labelt u de tekstmodules, beginnend met link 1 bovenaan tot link 5 onderaan.
Link 1
We beginnen met het bewerken van link 1. Open de instellingen van de tekstmodule voor link 1 en werk het volgende bij:
- Transformeren vertalen (Y-as): 120 px (desktop), 0 px (tablet en telefoon)
- Transformeren Roteren (Z-as): 60 graden (desktop), 0 px (tablet en telefoon)
- Herkomst: 50% (midden rechts)
Link 2
Open de instellingen van de tekstmodule voor link 2 en werk het volgende bij:
- Transformeren
- Vertalen (Y-as): 60px (desktop), 0px (tablet en telefoon)
- Z-as rotatie: 30deg (desktop), 0px (tablet en telefoon)
- Herkomst: 50% (midden rechts)
Link 3
Aangezien de tekstmodule voor link 3 in het midden staat, kunnen we deze op zijn plaats laten.
Link 4
Open de instellingen van de tekstmodule voor link 2 en werk het volgende bij:
- Transformeren :
- Vertalen Y-as: -60px (desktop), 0px (tablet en telefoon)
- Z-asrotatie: -30deg (desktop), 0px (tablet en telefoon)
- Herkomst: 50% (midden rechts)
Link 5
Open de instellingen van de tekstmodule voor link 2 en werk het volgende bij:
- Transformeren :
- Vertalen Y-as: -120px (desktop), 0px (tablet en telefoon)
- Z-asrotatie: -60deg (desktop), 0px (tablet en telefoon)
- Herkomst: 50% (midden rechts)
Laten we nu het resultaat tot nu toe bekijken. Merk op hoe de links/teksten in de tekstmodules perfect langs de omtrek van de cirkel lopen.
Menulabel toegevoegd
Om het menulabel toe te voegen, moeten we nog een tekstmodule toevoegen bovenop de vijf tekstmodules die we al hebben. Ga je gang en voeg een nieuwe tekstmodule toe boven link 1.
Werk vervolgens de inhoud van de hoofdtekst bij met het volgende:
Menu
Om het ontwerp te versnellen, kopieert u vervolgens de tekstmodulestijlen voor link 3 en plakt u deze modulestijlen in de nieuwe tekstmodule.
Werk vervolgens het volgende bij:
- Hoogte tekstregel: 300px (desktop), 20px (tablet en telefoon)
- Hoogte: standaardinstelling herstellen (auto)
- Transformatierotatie (Z-as): 180 graden (desktop), 0 graden (tablet en telefoon)
- Oorsprong transformeren: 50% (midden rechts)
Als we klaar zijn, moeten we de Menu Label Text-module een absolute positie geven. Voeg hiervoor de volgende aangepaste CSS toe aan het hoofdelement:
position: absolute!important;
Ontdek nu het resultaat. Je zou moeten zien dat het menu-item ondersteboven staat aan de rechterkant van het wiel.
Draaiend zweefeffect toegevoegd aan lijn/wiel
Om het roterende zweefeffect aan de rij toe te voegen, werkt u de rij-instellingen als volgt bij:
- Transformatierotatie (Z-as): 180 graden (desktop), 0 graden (zweven), 0 graden (tablet en telefoon)
Werk vervolgens de overgangsinstellingen als volgt bij:
- Overgangsduur: 450ms
- Snelheidscurve-overgang: gemak-in-uit
Kijk nu hoe het wiel draait als je erover zweeft.
Een lay-out met twee kolommen voor de sectie maken
Momenteel bestaat de lay-out uit twee rijen met één kolom die op elkaar zijn gestapeld. We kunnen echter de eigenschap flex css gebruiken om de twee lijnen horizontaal uit te lijnen.
Om dit te doen, kunnen we een klein stukje aangepaste CSS aan de sectie toevoegen. Zodra dat is gebeurd, moeten we de afstand een beetje aanpassen om alles precies goed te krijgen.
Open de sectie-instellingen en voeg de volgende aangepaste css toe aan het hoofdelement:
display:flex;
Tussenruimte regel 1 bijwerken
Werk vervolgens de grootte en afstand van regel 1 als volgt bij:
- Breedte: 40% (bureaublad)
- Marge (desktop): 5% over
Eindresultaat
Laten we nu het eindresultaat bekijken.
Download DIVI nu!!!
Alternatief halfwielontwerp
Een interessant alternatief ontwerp is om de rechterhelft van het wiel buiten de sectie te verbergen, zodat de links worden verborgen en vervolgens worden onthuld bij de muisaanwijzer.
Om dit te doen, ga je gang en dupliceer je de hele sectie met de tekening die we zojuist hebben gemaakt.
Werk in de dubbele sectie de parameters in regel 1 als volgt bij:
- Breedte: 70% (bureaublad)
Werk vervolgens de instellingen in regel 2 bij om het wiel als volgt uit de sectie te duwen:
- Marge: -250px rechts
We moeten -250px gebruiken omdat de totale breedte van het wiel 500px is en we precies de helft van de lijn willen verbergen.
Stel vervolgens de zichtbaarheid van de sectie als volgt in op verborgen:
- Horizontale overloop: verborgen
- Verticale overloop: verborgen
Hier is het eindresultaat.
Download DIVI nu!!!
Conclusie
Een wiel met draaiende schakels is een van die stijlvolle ontwerpelementen die de bezoekers met een subtiel en uniek zweefeffect. En het is best verbazingwekkend hoe gemakkelijk dit ontwerp kan worden gedaan met de ingebouwde ontwerpinstellingen van Divi.
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.
...
