Gå till innehållet

Hur man skapar en segmenterad cirkulär meny med Divi Blurbs

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Det är alltid kul att vara kreativ med Divis omvandlingsalternativ. De låter dig skapa fantastiska "off the beaten track" -designer. Och i denna handledning ska vi förvandla Divi-texter till en vacker segmenterad cirkulär meny som växer och kollapsar vid klick. Tricket med att skapa segmenterade områden (som ett cirkeldiagram) är att använda omvandlingens lutning på ett ganska unikt sätt.

undersökningen

Här är en översikt över den segmenterade cirkulära menyn som vi kommer att bygga i denna handledning.

segment divi divi-meny

Vad du behöver för att komma igång

För att börja måste du göra följande:

  1. Om du inte har gjort det ännu, installera och aktivera det installerade Divi-temat (eller Divi Builder-plugin-programmet om du inte använder Divi-temat).
  2. Skapa en ny sida i WordPress och använd Divi Builder för att redigera sidan i front-enden (visuell konstruktör).

Efter det har du en tom duk för att börja designa i Divi.

Skapa rad för menyalternativ

Lägg till en rad med en kolumn i det vanliga standardavsnittet.

Lägg till en ny divi-linje

Styling the Row

Innan vi lägger till en modul, låt oss ringa raden för att få vår cirkulära form och bakgrundsfärg. Öppna radinställningarna och uppdatera följande:

  • Bakgrundsfärg: #8857f2
  • Använd en anpassad rännbredd: JA
  • Rännbredd: 1
  • Bredd: 30em
  • Höjd: 30em
  • Klädsel: 0px längst upp, 0px längst ner

Lägg sedan till de rundade hörnen och lådans skugga.

Rundade hörn: 50%
Box Shadow: se skärmdump

Rundad hörndellinje

Vi kommer tillbaka för att lägga till några extra anpassningar till raden, men för tillfället kan vi börja lägga till våra introduktionsanteckningar.

Skapa suddigheter för menyn

Lägg till ny blurb-text till raden i en kolumn inuti den cirkulära raden.

Divi-kommentarmodul

Blurb styling # 1

Uppdatera innehållet i den första blurb för att inkludera en titel och ikon.

  • Titel: länk
  • Använd ikonen: YES
  • Ikon: se skärmdump

Uppdatera sedan designparametrarna enligt följande:

  • Bakgrundsfärg: #773ef2
  • Bakgrundsfärg (muspekare): #222222
  • Ikonfärg: #ffffff
  • Ikon Typstorlek: 40px (skrivbord), 30px (surfplatta)
  • Justering av texten: centrum

Modifiering av divi sammanfattningsmodul

Uppdatera sedan textens stil på följande sätt:

  • Typ av teckensnitt: Archivo Narrow
  • Titel Typsnitt: TT
  • Färgtextitel: #ffffff
  • Texttitelstorlek: 14px (skrivbord), 12px (surfplatta)

Därefter måste vi placera referenstexten med anpassad CSS. Gå till fliken Avancerat och lägg till följande anpassade CSS-kod i huvudelementet:

position: absolut! viktigt; vänster: 50%; överst: 50%;

Gå tillbaka till fliken Design och uppdatera blurb-storlek och avstånd enligt följande:

  • Bredd: 15em
  • Höjd: 15em
  • Marginal: -15em kvar

Detta placerar det nedre högra hörnet av presentationsteksten direkt i mitten av cirkeln.

Modifiering av marginal- och måttöversiktsmodulen

Skapa segmentet med hjälp av transformationsalternativen

För att göra blurb till ett segment av en cirkel kommer vi att luta och rotera blurb. För att göra detta, uppdatera följande transformationsalternativ:

  • Transform X-axel lutning: 60deg

Lutningstransformation

  • Transformationens ursprung: 100% 100% (längst ner till höger)

Eftersom det nedre högra hörnet av vår blurb ligger direkt i mitten av cirkeln, vill vi att ursprunget till transformationen också ska ställas ned till höger. Detta kommer att säkerställa att spetsen på den sneda blurb ligger i mitten av cirkeln, vilket gör det till segmentet.

segment divi divi-meny

Lås upp innehåll

I verkligheten är allt vi vill luta formen på blurb för att skapa formen på segmentet, inte det interna innehållet (dvs. ikonen och texten). Men eftersom detta inte är möjligt, lägg bara till en transformegenskap i blurb-innehållet som vänder förspänningseffekten så att den ser ut som normal. För att göra detta, gå till fliken Avancerat och lägg till följande anpassade CSS:

Innehållsändring css-modul återupptasCSS Blurb Content:

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

transform: skev (-60deg) rotera (-75deg); position: absolut; höjd: 27em; bredd: 27em; nedre: -13.5em; höger: -13.5em;

Minska sedan marginalen mellan ikonen och titeln genom att lägga till följande CSS-kod för Blurb-bilden:

Blurb Image CSS

marginal-botten: 15px;

Och nu, eftersom innehållet i blurb sträcker sig bortom blurb (även om du inte kan se det), måste vi dölja överflödet enligt följande:

  • Horisontellt överflöde: dold
  • Vertikalt överflöde: dold

Om vi ​​inte lägger till detta kommer vi att ha ett oönskat flyoverutrymme.

Skapa resten av världen

För att skapa resten av blurb, distribuera wireframe-vy och duplicera befintlig blurb 5 gånger för totalt 6 identiska blurb-layouter.

Kopia av CV-modulen

Förvrängningsrotation # 2

Öppna sedan inställningarna för Blurb # 2 och rotera modulen enligt följande:

  • Transformera Z-axelns rotation: 30deg

Ändra fel på en modul

Detta roterar text nr 2 medurs från cirkelns mittpunkt.

Ändra modul css divi rotationsmodul CV

Sedan kan vi fortsätta att rotera resten av presentationsteksten i steg om 30 grader för att skapa en halvcirkel av segment.

Rotera blurb # 3

Öppna inställningar för Blurb # 3 och uppdatera följande:

  • Transformera Z-axelns rotation: 60deg

Förvrängningsrotation # 4

Öppna inställningar för Blurb # 4 och uppdatera följande:

  • Transformera Z-axelns rotation: 90deg

Rotera blurb # 5

Öppna inställningar för Blurb # 5 och uppdatera följande:

  • Transformera Z-axelns rotation: 120deg

Rotera blurb # 6

Öppna inställningar för Blurb # 6 och uppdatera följande:

  • Transformera Z-axelns rotation: 150deg

Här är resultatet hittills.

Slutresultat

Skapa menyknappen

För att skapa menyknappen kommer vi att minska storleken på ett helt avsnitt och sedan använda en presentationsikon för knappdesignen.

För att göra detta börjar du med att lägga till ett nytt regelbundet avsnitt under det aktuella avsnittet.

Lägg till en ny divisektion

Lägg sedan till en rad med en kolumn i avsnittet.

Lägg till ett avsnitt i en divikolumnSkapa blurb-ikonen för knappen

Lägg sedan till en suddig modul till linjen.

Lägg till en sammanfattningsmodul andra avsnitt

Radera standardinnehållet i titeln och kroppen och använd en ikon enligt följande:

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

  • Använd ikonen: YES
  • Ikon: plussymbol (se skärmdump)

Modifiering av modulöversiktsikonen

Fortsätt uppdatera inställningarna enligt följande:

  • Ikonfärg: # 222222
  • Använd ikonstorlek: JA
  • Ikonstorlek: 50 pixlar
  • Bild / ikonanimering: ingen animering

Lägg sedan till följande anpassade CSS-kod i huvudelementet för att ta bort standardmarginalen under ikonen.

CSS huvudelement

marginal-botten: 0px;

Radfyllning

Ta sedan bort standardfyllningen från raden.

  • Klädsel: 0px längst upp, 0px längst ner

Avsnitt inställningar

För att slutföra knappen kommer vi att forma vårt avsnitt till en cirkel.

Öppna avsnittinställningarna och uppdatera följande objekt:

  • Bredd: 100px
  • Höjd: 100px
  • Klädsel: 0px längst upp, 0px längst ner
  • Rundade hörn: 50%
  • Box Shadow: se skärmdump

Ändra CV-divi-modulen

Ge honom sedan en vit bakgrund.

  • Bakgrundsfärg: #ffffff

På fliken Avancerat lägger du till följande anpassade CSS-kod till huvudelementet för att placera knappen som fixerad längst ner i fönstret.

position: fast! viktigt; botten: -50px; vänster: 50%; marginal-vänster: -50px;

Konfiguration av divisektionstil

Vi måste också lägga till en CSS-klass som kan riktas in med vår jQuery. Lägg till följande:

  • CSS-klass: transform_target

Omvandla meny divi

Uppdatera sedan Z-indexet (fortfarande i samma fönster) så att knappen förblir över resten av sidinnehållet.

  • Z-index: 12

Placera den cirkulära menyraden

Nu när menyknappen är på plats måste vi placera raden som innehåller vår segmenterade cirkulära meny så att den också är fixerad och centrerad längst ner på sidan med endast den övre halvan av cirkeln synlig.

För att göra detta, öppna parametrarna för raden som innehåller menylayouten och lägg till följande anpassade CSS:

CSS huvudelement

position: fast! viktigt; nedre: -10em; vänster: 25%; marginal-vänster: -15em; marginal-botten: -5em;

Uppdatera z-index enligt följande:

  • Z-index: 11

Modifiering av Divi-linjestil

Lägg sedan till följande CSS-klass.

  • CSS-klass: has-transform

För att omvandla css-linjen

Slutligen måste vi helt kollapsa (eller kollapsa) den cirkulära menyn med hjälp av transformskalan. Detta gör det möjligt för oss att aktivera och inaktivera effekten med jQuery, som kommer att expandera och dölja menyn vid klick.

Uppdatera följande objekt:

  • Omvandlingsskala: 1%

Divi line transformation

Med vår segmenterade cirkulära meny och menyknapp på plats behöver du bara lägga till anpassade CSS och jQuery för att slutföra knappfunktionen.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Lägga till extern anpassad CSS till sidinställningar

Öppna sidinställningar från menyn längst ner på den visuella byggaren och lägg till följande anpassade CSS under fliken Avancerat:

.for-transform, .transform_menu .and-pb-icon, .toggle-transform-animation {övergång: alla 400ms enkel-in-out; } .for-transform, .toggle-transform-animation {font-size: 14px; } .toggle-transform-animation {transform: none! viktigt; } .transform_target {cursor: pointer; } .toggle-active-target .and_pb_blurb .et-pb-icon {transform: rotateZ (45deg); } @media all och (max-bredd: 980px) {.to-transformera {-webkit-mask-image: -webkit-radial-gradient (vit, svart); } .for-transform, .toggle-transform-animation {font-size: 10px; }}

CSS anpassar divisidanLägga till jQuery med en kodmodul

Därefter distribuerar du visningsläget för trådram och lägger till en kodmodul under menyknappen.

Sätt i divi-kodmodulenLägg sedan till följande kod i modulen.

(function($) {
$(document).ready(function(){
$('.transform_menu').click(function(){
$(this).toggleClass('toggle-active-target');
$('.pour-transformer').toggleClass('toggle-transform-animation');
});
});
})( jQuery );

Divi-modulkod

Slutresultat

Låt oss nu se det slutliga resultatet på en live-sida.

Divi-modulanimeringMenyn fungerar bra med din nuvarande sida eller en av våra fördefinierade layouter som du kan lägga till genom att klicka på ikonen Mer i inställningsmenyn.

Ställa in storleken på cirkulärmenyn

Den segmenterade cirkulära menyn är konstruerad med hjälp av em-längdenheter som är relativt teckensnittstorleken för överordnad kropp. Detta gör det lättare att öka och minska storleken på menyn. För att ändra teckensnittsstorleken är allt du behöver göra att ändra teckensnittsstorleksegenskapen för pour-transform-klassen som riktar sig till raden i den anpassade CSS som vi lade till i sidinställningarna.

Avslutande tankar

I denna handledning har vi förklarat hur man skapar en segmenterad cirkulär meny i Divi genom att vara kreativ med Divis transformationsalternativ. Vi använde också anpassad CSS för uppgifter som fast positionering och lutande blurb-innehåll för menyalternativ.

JQuery tillåter oss att slå på och av egenskapen för omvandlingsskala för att skapa menyn expanderande och kollaps när du klickar på menyknappen.

Sammantaget tror jag att du kommer att hitta mycket inspiration i denna handledning.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
1 aktier
del1
tweet
Enregistrer