Behöver för att skapa en transparent flytande meny i Divi ?
Letar du efter ett sätt att placera din övergripande rubrik ovanför huvudsektionerna på dina sidor? I handledningen Divi Idag ska vi visa dig exakt hur du gör det.
Vi kommer att skapa en fantastisk global rubrik från början (med hjälp av konstruktören av teman de Divi) och vi kommer att tillämpa en flytande effekt på menyraden.
Låt oss gå.
undersökningen
Innan vi dyker in i den här handledningen, låt oss ta en snabb titt på resultatet vi vill uppnå.
Gå till Divis Theme Builder och lägg till en ny mall
allez på Divi > Theme Builder.
Skapa den globala rubriken med Divi Theme Builder
Klicka på "Lägg till global rubrik" och fortsätt genom att välja "Bygg global rubrik".
Avsnitt inställningar
Bakgrundsfärg
Väl i mallredigeraren kommer du att märka ett avsnitt på sidan. Öppna det här avsnittet och ändra bakgrundsfärgen till en helt transparent färg. Detta gör att allt under avsnittet visas.
- Bakgrund: rgba(0,0,0,0)
dimensionering
Gå sedan till fliken Sektionsstil och ändra den maximala bredden.
- Maximal bredd (se skärmdump): 100 %
avstånd
Ta också bort alla standardinterna övre och nedre marginaler.
- Innermarginal Vertex: 0px
- Nedre intern marginal: 0px
Z-index
Och för att se till att avsnittet håller sig på toppen av allt innehåll Från hjältesektionen kommer vi att behöva öka z-indexet i synlighetsinställningarna.
- Z-index: 99999
Lägg till en ny rad
Strukturen av kolonnen
När du har slutfört avsnittsinställningarna kan du lägga till en ny rad med följande kolumnstruktur:
dimensionering
Utan att lägga till några moduler öppnar du radinställningarna och ändrar storleksinställningarna enligt följande:
- Harmonisera kolumnhöjder: Ja
- Maximal bredd: 100%
- Maximal bredd: 100%
avstånd
Lägg sedan till anpassade interna marginaler (överst och nedre).
- Maximal inre marginal: 2vw
- Nedre inre marginal: 0vw
Huvudelement
Gå sedan till fliken Avancerat och se till att kolumnerna stannar bredvid varandra på mindre skärmstorlekar genom att lägga till en enda rad med CSS-kod till huvudradelementet.
display: flex;
Kolumn 2
Bakgrundsfärg
Fortsätt genom att öppna kolumn 2-inställningarna och ändra bakgrundsfärgen till en halvtransparent färg.
- Bakgrundsfärg: rgba (255,255,255,0.71)
gräns
Lägg även till en nedre kant i kolumnen.
- Nedre kantbredd: 2px
- Knapp och nedre kantfärg: #f4583f
Skugga låda
Och skapa en flytande effekt genom att lägga till en subtil boxskugga.
- Shadow Box: [View Capture]
- Startposition: 20px
- Bow Shadow Blur Styrka: 50px
- Box Shadow Spridningsstyrka: -20px
- Textningstypsnittsfärg: rgba(0,0,0,0.23)
Lägg till en bildmodul i kolumn 1
Ladda ner logotyp
När du har slutfört rad- och kolumninställningarna är det dags att lägga till modulerna, börja med en bildmodul i kolumn 1. Ladda upp en logotyp med en transparent bakgrund.
uppriktning
Växla till fliken Modulstil och ändra justeringen.
- Bildjustering: Centrerad
dimensionering
Ändra även modulens bredd i storleksinställningarna.
- Maximal bredd: 8 vw (dator), 14 vw (surfplatta), 21 vw (telefon)
Lägg till menymodul i kolumn 2
Välj en meny
Låt oss gå till nästa kolumn. Där är den enda modul vi behöver en menymodul. Välj en valfri meny.
Ta bort bakgrundsfärg
Gå sedan till bakgrundsinställningar och ta bort bakgrundsfärgen.
Disposition
Växla till fliken Modulstil och ändra layouten.
- Stil: Centrerad
- Rullgardinsmeny: ner
Menytext
Stil också inställningarna för menytext.
- Menyteckensnitt: Mulish
- Menytextfärg: #6f6666
- Textstorleksmeny: 1vw (dator), 2vw (surfplatta), 3vw (telefon)
Rullgardinsmenyn
Ändra sedan inställningarna från rullgardinsmenyn.
- Färg på rullgardinsmenyn: #f4583f
ikoner
Använd samma färg för hamburgermenyns ikonfärg i ikoninställningarna.
- Hamburgermenyikon Färg: #f4583f
avstånd
Slutför modulinställningarna genom att lägga till topp- och bottenutfyllnad i inställningarna för mellanrum.
- Maximal inre marginal: 1,5 vw
- Nedre innermarginal: 1,5 vw
Lägg till knappmodulen i kolumn 3
Lägg till text på knappen
Låt oss gå vidare till nästa och sista kolumn. Lägg till en knappmodul med en text som du väljer.
uppriktning
Ändra sedan modulens inriktning.
- Knappinriktning: centrerad
Knappinställningar
Fortsätt genom att anpassa knappen därefter:
- Använd anpassade stilar för Knapp: Ja
- Knapptextstorlek: 0,9 vw (dator), 1,5 vw (surfplatta), 2,5 vw (telefon)
- Knappens textfärg: #ffffff
- Bakgrundsknapp: #f4583f
- Knappkantsbredd: 0 pixlar
- Knappens kantfärg: #f4583f
- Kantradieknapp: 0 pixlar
- Button Font: Mulish
- Knapp för svagt ljus: fet text
avstånd
Komplettera modulinställningarna genom att lägga till anpassad stoppning på olika skärmstorlekar.
- Topp och botten intern marginal: 1vw (dator), 2vw (surfplatta), 3vw (telefon)
- Vänster och höger inre marginal: 2vw (dator), 3vw (surfplatta), 4vw (telefon)
Ytterligare avsnittsparametrar
Standard huvudobjekt
När du har slutfört den allmänna anpassningen finns det ytterligare en sak att göra; placera avsnittet ovanför innehåll på din sida. För att göra detta måste vi lägga till två rader med CSS-kod till huvudelementet i avsnittet.
position: absolute;
top: 0;
Huvudelement vid hover
Se till att lägga till samma rader med CSS till huvudelementets hovringsalternativ. Detta kommer att förhindra att avsnittet flimrar när du håller muspekaren över det.
position: absolute;
top: 0;
Spara konstruktorändringar och visa resultatet
När du har slutfört avsnittet kan du spara den globala rubriken och visa resultatet på din webbplats!
undersökningen
Nu när vi har gått igenom alla steg, låt oss ta en sista titt på resultatet.
Ladda ner DIVI nu!!!
Slutsats
Så ! Det var allt för den här artikeln. Vi visade dig hur du skapar en flytande och transparent menyrad med Divis Theme Builder. Rubriken placeras ovanför den första delen av din sida eller ditt inlägg.
För att bekanta dig med Divis Theme Builder kan du också läsa vår artikel om Hur man skapar en global rubrik med Divis Theme Builder
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
