Het is altijd leuk om creatief te zijn met de transformatie-opties van Divi. Ze stellen je in staat om fantastische ontwerpen te maken die buiten de gebaande paden vallen. En in deze tutorial gaan we Divi-teksten omzetten in een prachtig gesegmenteerd cirkelvormig menu dat met een klik groter en kleiner wordt. De truc om gesegmenteerde gebieden te maken (zoals een cirkeldiagram), is om de kanteling van de transformatie op een vrij unieke manier te gebruiken.
overzicht
Hier is een overzicht van het gesegmenteerde circulaire menu dat we in deze tutorial zullen bouwen.
Wat je nodig hebt om te beginnen
Om te beginnen, moet u het volgende doen:
- Installeer en activeer de . als u dat nog niet hebt gedaan Divi-thema geïnstalleerd (of de plug-in Divi Builder als u de Divi-thema).
- Maak een nieuwe pagina aan in WordPress en gebruik Divi Builder om de pagina op de front-end aan te passen (visual builder).
Daarna heb je een leeg canvas om in te ontwerpen Divi.
De regel voor menu-items maken
Voeg in de standaard reguliere sectie een rij van één kolom toe.
De rij stileren
Laten we, voordat we een module toevoegen, de rij bellen om onze ronde vorm en achtergrondkleur te krijgen. Open de rij-instellingen en werk het volgende bij:
- Achtergrondkleur: #8857f2
- Gebruik een aangepaste gootbreedte: JA
- Dakgootbreedte: 1
- Breedte: 30em
- Hoogte: 30em
- Bekleding: 0px bovenaan, 0px onderaan
Voeg vervolgens de afgeronde hoeken en de schaduw van de doos toe.
Afgeronde hoeken: 50%
Box Shadow: zie screenshot
We komen terug om wat extra aanpassingen aan de regel toe te voegen, maar voor nu kunnen we beginnen met het toevoegen van onze inleidende opmerkingen.
Maak blurbs voor het menu
Voeg nieuwe blurb-tekst toe aan de rij van een kolom in de cirkelvormige rij.
Blurb-stijl # 1
Update de inhoud van de eerste teksttekst met een titel en een pictogram.
- Titel: link
- Gebruik het pictogram: JA
- Icoon: zie screenshot
Werk vervolgens de ontwerpparameters als volgt bij:
- Achtergrondkleur: #773ef2
- Achtergrondkleur (zweven): #222222
- Pictogramkleur: #ffffff
- Pictogramlettergrootte: 40px (desktop), 30px (tablet)
- Uitlijning van de tekst: midden
Werk vervolgens de tekststijl van de titel als volgt bij:
- Titel van het lettertype: Archivo Narrow
- Titel Fontstijl: TT
- Titel tekstkleur: #ffffff
- Teksttitelgrootte: 14px (desktop), 12px (tablet)
Vervolgens moeten we de referentietekst positioneren met behulp van aangepaste CSS. Ga naar het tabblad Geavanceerd en voeg de volgende aangepaste CSS-code toe aan het hoofdelement:
positie: absoluut! belangrijk; links: 50%; boven: 50%;
Ga nu terug naar het tabblad Ontwerp en werk de blurb-grootte en spatiëring als volgt bij:
- Breedte: 15em
- Hoogte: 15em
- Marge: -15em resterend
Hiermee wordt de rechteronderhoek van de presentatietekst direct in het midden van de cirkel geplaatst.
Het segment maken met behulp van de transformatie-opties
Om de blurb in een segment van een cirkel te veranderen, gaan we de blurb kantelen en draaien. Werk hiervoor de volgende transformatie-opties bij:
- Transformeer X-as kanteling: 60 graden
- Oorsprong van transformatie: 100% 100% (rechtsonder)
Omdat de rechter benedenhoek van onze blurb zich direct in het midden van de cirkel bevindt, willen we dat de oorsprong van de transformatie ook rechtsonder wordt ingesteld. Dit zorgt ervoor dat de punt van de schuine blurb zich in het midden van de cirkel bevindt, waardoor het het segment wordt.
Inhoud ontgrendelen
In werkelijkheid willen we alleen de vorm van de flaptekst kantelen om de vorm van het segment te creëren, en niet de vorm van het segment inhoud intern (d.w.z. het pictogram en de tekst). Maar aangezien dit niet mogelijk is, hoeven we alleen maar een transformatie-eigenschap toe te voegen aan de inhoud blurb die het bias-effect omkeert, zodat het normaal lijkt. Ga hiervoor naar het tabblad Geavanceerd en voeg de volgende aangepaste CSS toe:
CSS Blurb-inhoud:
transform: skew (-60deg) roteren (-75deg); positie: absoluut; hoogte: 27em; breedte: 27em; onder: -13.5em; rechts: -13.5em;
Verklein vervolgens de marge tussen het pictogram en de titel door de volgende CSS-code voor de Blurb-afbeelding toe te voegen:
Blurb-afbeelding CSS
margin-bottom: 15px;
En nu, omdat de inhoudsruimte van de blurb verder reikt dan de blurb (ook al kun je hem niet zien), moeten we de overflow als volgt verbergen:
- Horizontale overloop: verborgen
- Verticale overloop: verborgen
Als we dit niet toevoegen, hebben we een ongewenste fly-overruimte.
Creëer de rest van de wereld
Om de rest van de blurb te maken, implementeert u wireframe-weergave en dupliceert u de bestaande blurb 5 keer voor in totaal 6 identieke blurb-lay-outs.
Rotatie roteren # 2
Open vervolgens de Blurb # 2-instellingen en draai de module als volgt:
- Transformeer Z-asrotatie: 30deg
Hierdoor wordt tekst nr. 2 met de klok mee gedraaid vanaf het middelpunt van de cirkel.
Vervolgens kunnen we doorgaan met het roteren van de rest van de presentatietekst in stappen van 30 graden om een halve cirkel van segmenten te maken.
Draai de blurb # 3
Open Blurb # 3-instellingen en update het volgende:
- Transformeer Z-asrotatie: 60deg
Rotatie roteren # 4
Open Blurb # 4-instellingen en update het volgende:
- Transformeer Z-asrotatie: 90deg
Draai de blurb # 5
Open Blurb # 5-instellingen en update het volgende:
- Transformeer Z-asrotatie: 120deg
Draai de blurb # 6
Open Blurb # 6-instellingen en update het volgende:
- Transformeer Z-asrotatie: 150deg
Hier is het resultaat tot nu toe.
De menuknop maken
Om de menuknop te maken, verkleinen we de grootte van een hele sectie en gebruiken we vervolgens een presentatiepictogram voor het knopontwerp.
Om dit te doen, begint u met het toevoegen van een nieuwe reguliere sectie onder de huidige sectie.
Voeg vervolgens een rij van één kolom toe aan de sectie.
Het Blurb-pictogram voor de knop maken
Voeg vervolgens een blurb-module toe aan de regel.
Verwijder de standaardinhoud van de titel en hoofdtekst en gebruik een pictogram als volgt:
- Gebruik het pictogram: JA
- Icoon: plusteken (zie screenshot)
Blijf de instellingen als volgt bijwerken:
- Icoonkleur: # 222222
- Gebruik de lettergrootte van het pictogram: JA
- Pictogram Lettergrootte: 50px
- Afbeelding / pictogramanimatie: geen animatie
Voeg vervolgens de volgende aangepaste CSS-code toe aan het hoofdelement om de standaardmarge onder het pictogram te verwijderen.
CSS hoofdelement
margin-bottom: 0px;
Rijvulling
Verwijder vervolgens de standaardvulling van de regel.
- Bekleding: 0px bovenaan, 0px onderaan
Sectie-instellingen
Om de knop te voltooien, zullen we onze sectie in een cirkel vormen.
Open de sectie-instellingen en update de volgende items:
- Breedte: 100px
- Hoogte: 100px
- Bekleding: 0px bovenaan, 0px onderaan
- Afgeronde hoeken: 50%
- Box Shadow: zie screenshot
Geef hem dan een witte achtergrond.
- Achtergrondkleur: #ffffff
Voeg op het tabblad Geavanceerd de volgende aangepaste CSS-code toe aan het hoofdelement om de knop vast onder aan het venster te plaatsen.
positie: vast! belangrijk; onder: -50px; links: 50%; margin-left: -50px;
We moeten ook een CSS-klasse toevoegen die kan worden getarget met onze jQuery. Voeg het volgende toe:
- CSS-klasse: transform_target
Werk vervolgens de Z-index bij (nog steeds in hetzelfde venster) zodat de knop boven de rest van de pagina-inhoud blijft.
- Z-index: 12
De ronde menuregel positioneren
Nu de menuknop op zijn plaats zit, moeten we de rij met ons gesegmenteerde cirkelvormige menu zo positioneren dat deze ook vast en gecentreerd onder aan de pagina staat met alleen de bovenste helft van de cirkel zichtbaar.
Open hiertoe de parameters van de regel met de menulay-out en voeg de volgende aangepaste CSS toe:
CSS hoofdelement
positie: vast! belangrijk; onder: -10em; links: 25%; margin-left: -15em; marge-bodem: -5em;
Werk de z-index als volgt bij:
- Z-index: 11
Voeg vervolgens de volgende CSS-klasse toe.
- CSS-klasse: has-transform
Ten slotte moeten we het cirkelvormige menu volledig inklappen (of inklappen) met behulp van de transformatieschaal. Dit stelt ons in staat om het effect met jQuery te activeren en te deactiveren, waardoor het menu met een klik wordt uitgevouwen en samengevouwen.
Update de volgende items:
- Schaal van transformatie: 1%
Met ons gesegmenteerde circulaire menu en menuknop hoeft u alleen de aangepaste CSS en jQuery toe te voegen om de knopfunctionaliteit te voltooien.
Externe aangepaste CSS toevoegen aan pagina-instellingen
Open de pagina-instellingen vanuit het menu onder aan de visuele builder en voeg de volgende aangepaste CSS toe op het tabblad Geavanceerd:
.for-transform, .transform_menu .and-pb-icon, .toggle-transform-animation {transition: alle 400ms gemak-in-uit; } .for-transform, .toggle-transform-animation {font-size: 14px; } .toggle-transform-animation {transform: geen! belangrijk; } .transform_target {cursor: pointer; } .toggle-active-target .and_pb_blurb .et-pb-icon {transform: rotateZ (45deg); } @media all en (max-width: 980px) {.to-transform {-webkit-mask-image: -webkit-radial-gradient (wit, zwart); } .for-transform, .toggle-transform-animation {font-size: 10px; }}
JQuery toevoegen met een codemodule
Implementeer vervolgens de wireframe-weergavemodus en voeg een codemodule toe onder de menuknop.
Voeg vervolgens de volgende code toe aan de module.
(function($) {
$(document).ready(function(){
$('.transform_menu').click(function(){
$(this).toggleClass('toggle-active-target');
$('.pour-transformer').toggleClass('toggle-transform-animation');
});
});
})( jQuery );
Eindresultaat
Laten we nu het eindresultaat op een live-pagina bekijken.
Het menu werkt goed met uw huidige pagina of een van onze vooraf gedefinieerde lay-outs die u kunt toevoegen door op het pictogram Meer in het instellingenmenu te klikken.
De grootte van het circulaire menu instellen
Het gesegmenteerde cirkelvormige menu is opgebouwd uit em lengte-eenheden die relatief zijn aan de lettergrootte van de hoofdtekst. Dit maakt het gemakkelijker om de grootte van het menu te vergroten en te verkleinen. Om de lettergrootte te wijzigen, hoeft u alleen maar de font-size-eigenschap van de pour-transform-klasse te wijzigen die zich richt op de regel in de aangepaste CSS die we hebben toegevoegd aan de pagina-instellingen.
Final gedachten
In deze tutorial hebben we uitgelegd hoe je een gesegmenteerd circulair menu in Divi kunt maken door creatief te zijn met de transformatie-opties van Divi. We hebben ook aangepaste CSS gebruikt voor taken zoals vaste positionering en schuine blurb-inhoud voor menu-items.
Met JQuery kunnen we de eigenschap transformatieschaal in- en uitschakelen om het uitvouw- en samenvouweffect van het menu te maken wanneer u op de menuknop klikt.
Over het algemeen denk ik dat je veel inspiratie zult vinden in deze tutorial.
