Vill du ha innehåll som uppenbarar sig när du håller muspekaren över expanderbara hörnflikar i Divi?
Det är alltid roligt att upptäcka kreativa nya sätt att interagera med användare med hjälp av hovringseffekter. Ett bra sätt att göra detta är att avslöja innehåll när du svävar med hjälp av expanderbara hörnflikar. Detta gör att användaren kan föra muspekaren över en flik i hörnet av en kolumn eller bild för att utöka en överlagring med ytterligare användbart innehåll för användaren.
I den här handledningen kommer vi att skapa en helt unik Divi-layout som avslöjar innehåll när du svävar med hjälp av expanderbara hörnflikar. Faktum är att vi kommer att visa dig hur du designar en utdragbar hörnflik för de fyra hörnen av en kolumn i Divi.
Låt oss börja!
undersökningen
Här är en snabb titt på layouten för de utdragbara hörnflikarna som vi kommer att bygga tillsammans. Lägg märke till hur vackert symmetriska hovringseffekterna och innehållet är.
Skapa en ny sida med Divi Builder
Från WordPress-instrumentpanelen, gå till Sidor> Lägg till nytt för att skapa en ny sida.
Ge den en titel som är vettig för dig och klicka Använd Divi Builder
klicka sedan på Börja bygga (Bygg från grunden)
Efter det har du en tom duk för att börja designa i Divi.
Skapa layouten för utökningsbara innehållsöverlägg i Divi
Design av en utdragbar hörngering från det nedre högra läget
För att börja, lägg till en rad med två kolumner i det vanliga avsnittet.
Innan du lägger till en modul, uppdatera linjeparametrarna enligt följande:
Använd anpassad rännbredd: JA
Rännans bredd: 4
För detta första element som visas kommer vi att skapa en kolumnbakgrundsbild som kommer att ha en hörnflik (med hjälp av en modul blurb) längst ner till höger i kolumnen som expanderar och täcker hela kolumnen/bilden vid hovring.
När texten är på plats öppnar du radinställningarna, uppdaterar följande:
Bakgrundsbild [infoga bild]
Bakgrundsbildstorlek: Verklig storlek
OBS: För det här exemplet använder vi de genomskinliga bakgrundsbilderna för öl tagna från layoutpaketet «Bryggeri". De är 128 pixlar gånger 359 pixlar, vilket är anledningen till att vi använder den faktiska bildstorleken.
Kant till kolumn 1
Rundade hörn: 10px längst ner till höger
Kantbredd (höger och botten): 2px
Kantfärg (höger och botten): #e94558
Anpassad CSS och overflow
På fliken Avancerat lägger du till följande anpassade CSS till huvudelementet:
height: 400px;
Dropdown-alternativ 'Synlighet' och gör följande ändringar:
Horisontellt överflöde: Dold
Vertikalt överflöde: Dold
Lägg till innehåll till Blurb-modulen
Vi är nu redo att börja anpassa Blurb-modulen i kolumn 1. Öppna modulinställningarna och uppdatera följande:
Titel: Mango IPA
Kropp:
<p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
<p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
<p>4.8% ABV / 4 IBUs</p>
Bild: Lägg till samma bild som används för kolumnbakgrunden
Anpassning av Blurb-modul
Ge texten en bakgrundsfärg som svävar på följande sätt:
Bakgrund (Skrivbord): transparent
Desktop (hovra): rgba(255,255,255,0.9)
Under fliken Designa, uppdatera följande:
Bild/ikonplacering: Höger
Titeltypsnitt: Oswald
Teckensnittsvikt: Halvfet
Typsnittsstil: TT
Textstorlek: 40px
Brödtextfärg (skrivbord): transparent
Brödtextfärg (svävare): #121212
Bild/ikonbredd: 100px (dator), 64px (telefon)
Innehållsbredd: 100 %
Höjd: 100%
Stoppning (Skrivbord): 15 % (överst och neder), 8 % (vänster och höger)
Stoppning (sväva): 8 % (överst, botten, vänster och höger)
Rundade hörn (Skrivbord): 20px uppe till vänster
Rundade hörn (Hover): 10px uppe till vänster
Kantbredd (överst och vänster): 4px (skrivbord), 2px (hovra)
För att vända den utvalda bilden på höger sida, lägg till följande anpassade CSS till området Blurb-innehåll :
direction: rtl
OBS: "rtl" står för "Höger till vänster", som ändrar standardordningen för innehållet (vänster till höger).
Resultat
Låt oss se slutresultatet av att vår hörnflik expanderar från den nedre högra positionen. Lägg märke till hur den expanderar för att fylla hela kolumnen när du håller muspekaren.
Design av en utdragbar hörngering från nedre vänstra positionen
Duplicera kolumn
För att skapa hörnfliken som expanderar från den nedre vänstra positionen kan vi återstarta designen genom att duplicera hela kolumnen. Öppna radinställningar och dubblera kolumn 1. Ta sedan bort den extra kolumnen så att du bara har två exakta dubbletter.
Uppdatera inställningarna för 2-kolumnen
Öppna sedan kolumn 2-inställningarna och uppdatera följande:
Rundade hörn: 10 px längst ner till vänster
Kantbredd (höger): 0px
Kantbredd (vänster): 2px
Färg: #e94558
Uppdatera parametrarna för Blurb-modulen
Uppdatera sedan Blurb-inställningarna enligt följande:
Textjustering: höger
Rundade hörn (Skrivbord): 20px uppe till höger
Rundade hörn (Hover): 10px uppe till höger
Vänster kantbredd: 0px
Höger kantbredd: 4px (skrivbord), 2px (hovra)
Höger kantfärg: #e94558
Transform Translate (X-Axis) (Skrivbord): -30 %
Transform Origin (Desktop): längst ner till vänster
Se sedan till att ta bort den anpassade CSS i Blurb-innehållsområdet.
Resultat
Här är resultatet. Lägg märke till hur den här är symmetrisk med den första och växer från den nedre vänstra positionen i kolumnen.
Design av en utdragbar hörngering från det övre högra läget
Vi är nu redo att påbörja våra sista två expanderande hörngeringsdesigner. För att få ett försprång, låt oss duplicera hela raden som innehåller texten vi redan har designat.
Uppdatera inställningarna för 1-kolumnen
Öppna sedan inställningarna för dubblettraden, öppna sedan inställningarna för kolumn 1 och uppdatera följande:
Rundade hörn: 10px uppe till höger
Nedre kantbredd: 0px
Övre kantbredd: 2px
Översta kantfärg: #e94558
Uppdatera parametrarna för Blurb-modulen
Öppna sedan Blurb-modulinställningen och uppdatera följande:
Rundade hörn (Skrivbord): 20px längst ner till vänster
Rundade hörn (Hover): 10px längst ner till vänster
Övre kantbredd: 0px
Nedre kantbredd: 4px (skrivbord), 2px (hovra)
Nedre kantbredd: #e94558
Transform Translate (Y-axel) (Skrivbord): -50 %
Transform Ursprung: uppe till höger
Anpassad CSS
Just nu kan vi bara se den nedre vänstra delen av presentationsmodulen som inte visar vår titel som de andra två presentationerna i raden ovan. För att kunna visa titeln på fliken måste vi flytta om titeln längst ner till vänster i texten med anpassad CSS.
Lägg till följande anpassade CSS till området Blurb-titel :
position: absolute;
bottom: 0;
left: 15px;
Lägg sedan till följande CSS i innehållsområdet Blurb-innehåll :
direction: rtl;
height: 100%;
Design av en utdragbar hörngering från det övre vänstra läget
För vår fjärde och sista expanderande hörnflikareffekt placerar vi den i det övre vänstra hörnet för att slutföra den symmetriska designen av hela rutnätslayouten.
Uppdatera inställningarna för 2-kolumnen
Öppna inställningar för kolumn 2 under radinställningar och uppdatera följande:
Borders Hörn: 10 px uppe till vänster
Nedre kantbredd: 0px
Övre kantbredd: 2px
Översta kantfärg: #e94558
Uppdatera parametrarna för Blurb-modulen
Öppna sedan Blurb-modulens textinställningar i kolumn 2 och uppdatera följande:
Rundade hörn (Skrivbord): 20px längst ner till höger
Rundade hörn (Hover): 10px nedre höger
Övre kantbredd: 0px
Nedre kantbredd: 4px (skrivbord), 2px (hovra)
Nedre kantfärg: #e94558
Uppdatera sedan omvandlingsalternativen:
Transform Translate (Y-axel) (Skrivbord): -50 %
Transform Ursprung: överst till vänster
Anpassad CSS
Lägg sedan till följande anpassade CSS till området Blurb-titel :
position: absolute;
bottom: 0%;
right: 0%;
Lägg även till följande CSS i rutan Blurb-innehåll :
height: 100%;
Avsluta designen av layouten
Avsnittets bakgrundsfärg
Lägg till en sektionsbakgrundsfärg enligt följande:
Bakgrund: #efefef
Lägg till titel
För att skapa titeln, lägg till en rad i en kolumn i mitten av de två raderna
Hörnflikarna som visas i denna handledning kommer definitivt att fungera för alla typer av innehåll du vill visa upp på din Divi-webbplats.
Du behöver inte heller använda alla fyra hörnen. Du kan till exempel skapa en rutnätslayout för bilder genom att bara använda flikarna i det övre högra hörnet för att visa innehåll när du håller muspekaren.
Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Vill du skapa ett rutnät med Divi som är flytande när du svävar?
Om du älskar att bygga webbplatser med användarinteraktion i åtanke, kommer du att älska den här handledningen.
Idag ska vi visa dig hur du skapar ett genomskinligt rutnät vars bakgrundsbild avslöjas så snart någon svävar över ett av elementen. Designen är initialt enkel och ren. Detta resulterar i en trevlig svävande upplevelse.
I den här handledningen går vi igenom skapelseprocessen steg för steg.
Låt oss gå.
undersökningen
Innan vi dyker in i handledningen, låt oss ta en snabb titt på resultatet på olika skärmstorlekar.
office
Mobil
Låt oss börja skapa processen i Divi
Lägg till ett nytt avsnitt
Bakgrundsfärg
Lägg till ett nytt avsnitt på sidan du arbetar på.
Öppna först avsnittsinställningarna och använd en vit bakgrundsfärg.
Bakgrund: #ffffff
Lägg till rad #1
Strukturen av kolonnen
Fortsätt genom att lägga till en ny rad med följande kolumnstruktur:
dimensionering
Utan att lägga till några moduler ännu, öppna linjeinställningarna, gå till fliken Designa, dra ned alternativet Storlek och ändra storleksparametrarna enligt följande:
Använd anpassad rännbredd: JA
Ränna med: 1
Bredd: 100 %
Max bredd: 100 %
avstånd
Dra sedan ner alternativet Förband och ändra följande inställningar:
Utfyllnad (topp och botten): 0px
gräns
I alternativet Kant gör du även följande ändringar:
Kantstilar (överst och neder): 1px
Kantfärg (överst och neder): #d3d3d3
Inställningar för kolumn 1
Hover bakgrund
Låt oss sedan anpassa inställningarna för kolumn 1. Använd en övertoningsfyllning på hovringen.
Färg 1: rgba(255,255,255,0)
Färg 2: #000000
Gradienttyp: Linjär
Positionsfärg 1: 30 %
Placera gradient ovanför gradientbild: JA
Bakgrundsbild på hovring
Ladda också upp en bakgrundsbild som visas när du svävar.
Bakgrundsbildstorlek : Omslag
Bakgrundsbild Position: Mitten
CSS klass
Och slutför kolumninställningarna genom att tilldela följande CSS-klass på fliken Advanced Open water :
CSS-klass: svävkolumn
Lägg till text #1-modul till kolumn 1
Lägg till text i storlek H3 (Rubrik 3)
Det är dags att lägga till moduler, börja med en första textmodul i kolumn 1. Infoga en text som du väljer.
H3 textinställningar
Byt sedan till fliken Designa i modulen och ändra H3-textparametrarna enligt följande:
Typsnitt: Oswald
Fontvikt Fontvikt: ultralätt
Rubrik 3 Teckensnittsstil: TT
Textfärg: #0a0a0a
Rubrik 3 Textstorlek:
Desktop: 3vw
Surfplatta: 7vw
Telefon: 14vw
Rubrik 3 Bokstavsavstånd: -2px
dimensionering
Ändra bredden på olika skärmstorlekar i storleksinställningarna.
Bredd :
Desktop: 44 %
Tabletter: 48 %
Telefon: 50 %
avstånd
Låt oss också ändra följande parametrar i alternativet Förband.
Marginal (botten): 25vh
Vaddering (topp och botten): 5 %
Vaddering (vänster och höger): 4%
gräns
Därefter lägger vi till kanter till höger och nedan.
Kantbredd (höger och botten): 1px
Kantfärg (höger och botten): #d3d3d3
CSS klass
Och vi kommer också att slutföra modulinställningarna genom att tilldela följande CSS-klass till textmodulen:
CSS-klass: hover-titel
Lägg till text #2-modul till kolumn 1
Lägg till innehåll
Lägg till ytterligare en textmodul precis under den föregående med det beskrivningsinnehåll du väljer.
Textinställningar
Byt till flik Designa i modulen och ändra textparametrarna i enlighet med detta:
Texttypsnitt : Karla
Textfärg: #ffffff
Storlek:
Desktop: 0,8 vw
Surfplatta: 2vw
Telefon: 3.6vw
Linjehöjd: 2,2 em
avstånd
Använd även anpassade marginalvärden.
Vaddering (botten): 10 %
Vaddering (vänster och höger): 9%
CSS klass
Och slutför modulparametrarna med följande CSS-klass för modulen:
CSS-klass: hover-text
Lägg till en "Button"-modul i kolumn 1
Lägg till en beskrivning
Nästa och sista modul vi behöver är en modul Knappen. Ange en beskrivning av ditt val.
Knappinställningar
Ändra modulparametrarna enligt följande:
Använd anpassade stilar för knapp: JA
Knapptextstorlek:
Desktop: 1vw
Surfplatta: 2,5 vw
Telefon: 4vw
Knappkantsbredd: 0px
Kantradie: 0px
Knapptypsnitt: Karla
Visa knappikon: JA
Knappikon Placering: Höger
Visa endast ikon på över för knapp: NEJ
avstånd
Lägg också till anpassade avståndsvärden.
Marginal (botten): 8 %
Marginal (vänster och höger): 9 %
Vaddering (botten): 5 %
Vaddering (höger): 20 %
box skugga
Applicera sedan en boxskugga.
Box Shadow horisontell position: 0px
Box Shadow Vertikal Position: 2px
Skuggfärg: #000000
CSS klass
Och slutför modulinställningarna genom att tilldela följande CSS-klass till knappen:
CSS-klass: svävknapp
Återanvänd kolumn 1
Ta bort kolumn 2, 3 och 4
Nu när vi har konstruerat den första kolumnen kan vi återanvända den. Det första vi ska göra är att ta bort de tomma kolumnerna från vår rad.
Klona kolumn 1 tre gånger
Vi kommer att återanvända kolumn 1 genom att klona den tre gånger.
Ändra bakgrundsbilder när du håller muspekaren över dubbletter av kolumner
Ändra sedan bakgrundsbilderna för dubblettkolumnen i varje dubblettkolumn.
Redigera duplicerat innehåll
Ändra även modulinnehållet i varje dubblettkolumn.
Unika kolumnkanter
Kolumn 1
Vi kommer att behöva tillämpa unika gränsinställningar på varje kolumn, med början i kolumn 1.
Kantbredd (höger):
Desktop: 1px
Surfplatta: 1px
Telefon: 0px
Färg (höger): #d3d3d3
Kantbredd (botten):
Desktop: 0px
Surfplatta: 1px
Telefon: 1px
Kantfärg (botten): #d3d3d3
Kolumn 2
Därefter har vi kolumn 2.
Kantbredd (höger):
Desktop: 1px
Surfplatta: 1px
Telefon: 0px
Färg (höger): #d3d3d3Border Width (nedre):
Desktop: 0px
Surfplatta: 1px
Telefon: 1px
Kantfärg (botten): #d3d3d3
Kolumn 3
Och vi kommer att använda följande kantinställningar för kolumn 3:
Kantbredd (höger):
Desktop: 1px
Surfplatta: 1px
Telefon: 0px
Färg (höger): #d3d3d3
Kantbredd (botten):
Desktop: 0px
Surfplatta: 1px
Telefon: 1px
Kantfärg (botten): #d3d3d3
Lägg till anpassad CSS till sidinställningar
Öppna sidinställningar
Nu när hela designen är på plats återstår bara att lägga till lite anpassad CSS-kod för att hjälpa till att utlösa hovringseffekter på modulerna. För att göra detta, öppna sidinställningarna.
I den här artikeln visade vi dig hur du skapar en vacker svävande design.
Specifikt har vi skapat ett kolumnrutnät som börjar enkelt och rent. Så fort besökare håller muspekaren över ett visst rutnätselement avslöjas bakgrundsbilden och modulstilar ändras.
I den här handledningen visar vi dig hur du skapar en global roterad rubrik som visas på vänster sida av dina sidor och inlägg. Bakgrundsfärgen på sidhuvudet är helt genomskinlig, vilket gör att innehållet på sidan/inlägget kan visas.
Vi såg till att den globala rubriken förblir fixerad på vänster sida medan vi rullade och vi gjorde även menyn till en mobilvänlig version.
I den här handledningen visar vi dig hur du återskapar designen från grunden!
Låt oss gå.
undersökningen
Innan vi dyker in i handledningen, låt oss ta en snabb titt på resultatet vi vill uppnå.
Gå till Divis temabyggare och börja skapa en global header
Från WordPress-instrumentpanelen, gå till Divi > Theme Builder
Klicka på "Lägg till global rubrik"
Välj "Bygg global header".
Börja skapa den globala sidhuvudet
Lägg till en ny sektion
Bakgrundsfärg
Väl i mallredigeraren kan du öppna avsnittet redan där och ändra bakgrundsfärgen på olika skärmstorlekar.
Bakgrundsfärg: rgba(0,0,0,0) (Skrivbord), #FFFFFF (Surfplatta och telefon)
dimensionering
Gå till fliken Designa, dra ned alternativet Storlek och ändra sedan parametrarna för sektionsstorlek.
Bredd: 5vw (dator), 100% (surfplatta och telefon)
Min höjd: 100 vw (dator), auto (surfplatta och telefon)
avstånd
Dra sedan ner alternativet mellanrum och ändra inställningarna enligt följande:
Stoppning (topp och botten): 2vw
Skugga låda
Gå sedan till Box skugga och lägg till anpassad boxskugga på olika skärmstorlekar.
Box Shadow horisontell position: 32px (Skrivbord), 0px (Surfplatta och telefon)
Box Shadow Blur Styrka: 49px
Spridningsstyrka: 0px (dator), 19px (surfplatta och telefon)
Skuggfärg: rgba(0,0,0,0.12)
Lägger till anpassad CSS
Vi kommer också att se till att den globala sidhuvudet förblir fixerat till vänster sida genom att lägga till några rader med CSS-kod till huvudsektionselementet.
Se till att även lägga till dessa rader med CSS-kod till huvudelementet när du håller muspekaren över avsnittet.
position: fixed;
top: 0;
Standard synlighet
Öka sedan z-indexet i positionsparametrarna.
Z-index: 99999
Hover synlighet
Se till att samma värde gäller när du svävar.
Z-index: 99999
Lägg till en ny rad
Strukturen av kolonnen
När du har slutfört avsnittsinställningarna fortsätter du genom att lägga till en ny rad med följande kolumnstruktur:
dimensionering
Utan att lägga till några moduler ännu, öppna linjeinställningarna och ändra storleksinställningarna.
Använd anpassad rännbredd: JA
Rännans bredd: 1
avstånd
Ta också bort alla standardmarginaler.
Utfyllnad (topp och botten): 0px
Kolumnparametrar
Tillagd anpassad CSS (surfplatta och telefon)
På surfplatta och telefon väljer vi en helt annan display. Vi kommer att placera tre olika moduler bredvid varandra. För att göra detta måste vi lägga till lite CSS-kod.
Öppna kolumninställningarna, gå till fliken Advanced Open water och infoga följande rader med CSS-kod i utrymmet Huvudelementet för surfplatta och telefon:
Ändra färgen på menytexten när du håller muspekaren.
Menytextfärg: #afafaf
Rullgardinsmenyn
Vi gör också några ändringar i rullgardinsmenyn.
Färg på rullgardinsmenyn: #000000
Rullgardinsmeny Textfärg: #000000
ikoner
Ändra sedan färgen på hamburgermenyns ikon.
Hamburgermenyikon Färg: #000000
avstånd
Och lägg till anpassade marginalvärden på olika skärmstorlekar.
Marginal (överst och neder): 18 vw (dator), 0 vw (surfplatta och telefon)
Marginal (vänster och höger): -13vw (dator), 0vw (surfplatta och telefon)
Transformera rotationen
Nu, för att skapa rotationseffekten, ska vi leka med modulens transformationsrotationsvärden.
Vänster: 270 grader (skrivbord), 0 grader (surfplatta och telefon)
Lägg till modulen "Följ sociala medier" i kolumnen
Lägg till sociala nätverk
Låt oss gå vidare till modulen "Social Media Follow", som är nästa och sista modul vi behöver för att slutföra vår globala pivoterade rubrik. Lägg till några valfria sociala nätverk.
Återställ ikonstilar för sociala medier
Fortsätt genom att återställa inställningarna för varje socialt nätverk individuellt. Detta kommer att hjälpa oss att bli av med deras bakgrundsfärg.
uppriktning
Byt sedan till fliken Designa av modulen och ändra inriktningen av modulen på olika skärmstorlekar.
Justeringsmodul: Vänster (Skrivbord), Höger (Surfplatta och telefon)
Ikoninställningar
Ändra slutligen även ikoninställningarna.
Ikonfärg: #000000
Använd anpassad ikonstorlek: JA
Ikon Teckenstorlek: 2,1 vw
Spara konstruktorändringar och visa resultatet
När du har slutfört alla moduler kan du spara mallen, avsluta Divis temabyggare och se 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.
I den här artikeln visade vi hur du skapar en roterad global rubrik. Om du inte väljer något annat kommer den globala rubriken vi skapade att visas på alla dina inlägg och sidor.
Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Vill du göra dina sociala medieikoner klibbiga med Divi?
Med Divis inbyggda "klibbiga" alternativ kan du enkelt designa en klibbig "Social Media Follow"-modul som kommer att hålla dessa sociala medieikoner framme när användaren rullar ner på sidan.
Dessutom, genom att lägga till anpassad stil till modulen i det klibbiga tillståndet, kan vi skapa unika designövergångar när vi byter till det klibbiga tillståndet medan vi rullar.
Så om du letar efter full kontroll över din knappdesign på sociala medier, är den här handledningen för dig!
undersökningen
Här är en kort översikt över resultatet som vi kommer att få i denna handledning.
Skapa en ny sida med "Divi Builder"
Från WordPress-instrumentpanelen, gå till "Sidor > Lägg till nytt"
Ge den en titel som är vettig för dig och klicka sedan på "Använd DiviBuilder"
För den här handledningen kommer vi att använda en fördefinierad layout. För att göra detta, klicka på "Bläddra i layouter"
Hitta och välj layout "Mode designer"
Välj layout "Landning" Klicka sedan på "Använd den här layouten"
Design av modulen "Social Media Follow" i Divi
Skapandet av sektionen
Lägg till en ny vanlig sektion i layouten.
Flytta sedan det nya avsnittet till toppen av sidan (eller var du vill lägga till dina sociala medier följ länkar).
Öppna avsnittsinställningarna och uppdatera bakgrundsfärgen så att den matchar layouten enligt följande:
Bakgrundsfärg: #fff9f2
Under fliken Designaexpandera alternativet Avstånd och ändra följande parametrar:
Utfyllnad (topp och botten): 10px
Skapandet av linjen
Lägg till en rad i en kolumn inuti avsnittet.
Öppna linjeinställningarna, dra ned alternativet Avstånd och ändra inställningarna enligt följande:
Använd anpassad rännbredd: JA
Rännans bredd: 1
Bredd: 100 %
Max bredd: 100 %
Fortsätt genom att scrolla nedåt i alternativet Förband
Utfyllnad (topp och botten): 0px
Skapande av den klibbiga "Social Media Follow"-modulen
När sektionen och linjen är på plats, lägg till en ny modul "Följ sociala medier" vid linjen.
Uppdatering av modulinställningar
Öppna inställningarna för modulen "Följ sociala medier".
Det första vi behöver göra är att lägga till en klibbig position till modulen.
Under fliken Advanced Open water, dra ned alternativet Ruleffekter och uppdatera följande:
Sticky Position: Håll dig till toppen
När positionen är i det klibbiga tillståndet kommer du att kunna rikta in stilen på modulen i det klibbiga tillståndet (ungefär som du kan för hovratillståndet). Detta kan göras genom att hålla muspekaren över ett alternativ och klicka på nålikonen.
TRICK: Bakgrundsfärgen ändras automatiskt för att matcha varumärket för sociala medier. Du kan kopiera den här färgen och lägga till den som bakgrundsfärg för svävarstatus för ikonen. Detta kommer att visa det sociala nätverkets standardbakgrundsfärg när du håller muspekaren över ikonen.
Du kan nu växla mellan flikarna för att se bakgrundsfärgen för alla tre tillstånden (skrivbord, hovra och sticky).
Låt oss sedan ge ikonen en snygg oval form och en kant för att matcha layouten bättre. Under fliken Designa, uppdatera följande:
För närvarande har ikonen en cirkelform. För att få en mer oval form ändrar vi avståndsinställningarna enligt följande:
Marginal (vänster och höger): 15px (Skrivbord), 0px (Sticky), 0px (telefon)
Utfyllnad (vänster och höger): 16px (dator), 14px (surfplatta), 0px (telefon)
Duplicera socialt nätverk
Nu när vi har designat det första sociala nätverket kan vi duplicera ikonen för att skapa andra.
För att göra detta, öppna modulinställningarna Media SocialFollow och klicka på dubblettikonen. För det här exemplet, låt oss skapa 4 till.
Nu behöver vi bara uppdatera vart och ett av de nya sociala nätverken. Eftersom detta kommer att ändra bakgrundsfärgen måste du också uppdatera bakgrundsfärgen för varje.
För att göra detta, öppna inställningarna för det andra sociala nätverket och uppdatera följande:
Knappar för sociala medier är nästan alltid en nyckelfunktion på en webbplats. De är ett av de primära sätten att koppla sociala mediekanaler till en webbplats. Det är därför modulen "Följ sociala medier" of Divi innehåller alla nätverksikoner och designalternativ du behöver för att skapa den perfekta lösningen för din webbplats.
Vill du lägga till teaserinnehåll till en rullningsbar surfplatta på Divi?
Att lägga till teaser-innehåll på din webbplats kan vara en effektiv marknadsföringsstrategi. Det fungerar särskilt bra för att marknadsföra saker som e-böcker. Du ger dem en förhandstitt på innehållet så att de vill ha mer.
I dagens handledning visar vi dig hur du visar upp teaserinnehåll i en rullgardinsplatta i Divi.
För att göra detta kommer vi att dra nytta av Divis inbyggda alternativ för att förvandla en kolumn till en rullgardinsbehållare (designad för att se ut som en surfplatta) som kan innehålla vilken typ av innehåll du vill.
Du kan använda den för att marknadsföra de första kapitlen i vilken e-bok som helst, visa provdesigner från din portfölj eller någon annan typ av innehåll.
Låt oss börja!
undersökningen
Här är en snabb titt på surfplattan med rullningsbart innehåll som vi kommer att skapa i den här handledningen.
Skapa en ny sida med Divi Builder
Gå till i WordPress-instrumentpanelen "Sidor > Lägg till nytt"
Ge en titel som är vettig för dig och klicka sedan "Använd DiviBuilder"
klicka sedan på "Börja bygga"
Surfplattadesign med rullningsbart teaserinnehåll i Divi
Skapa den nedrullningsbara tablettbehållaren med en Divi-kolumn
Lägg till en rad
Börja med att skapa en rad med två kolumner med en vanlig sektion.
Inställningar för kolumn 1
Bakgrundsfärg
Öppna inställningarna för kolumn 1 och lägg till en vit bakgrund till kolumnen.
Bakgrund: #ffffff
Kant och marginal
Gå till fliken Designa rullgardinsmenyn Förband och ändra inställningarna enligt följande:
Utfyllnad (överst, botten, vänster och höger): 25px (överst, botten, vänster, höger)
Dra sedan ner alternativet Border och ändra inställningarna därefter:
Rundade hörn: 20px
Kantbredd: 30px
Kantfärg: #000000
Skugga låda
Dra ner alternativet för att ge surfplattans design lite djup Box skugga och lägg till följande boxskugga:
Box Shadow: se skärmdump
Box Shadow (horisontell och vertikal) Position: 5 px
Skuggfärg: #555555
Anpassad kolumnhöjd och bredd med CSS
Nyckeln till att göra kolumninnehåll rullningsbart är att ge det en definierad höjd. Detta kommer att få innehållet att svämma över kolumnhöjden.
Vi vill också att surfplattans bildförhållande ska förbli konsekvent, så det är en bra idé att ge kolumnen en maximal bredd också.
För att ge kolumnen en anpassad höjd och bredd, gå till fliken Advanced Open water och uppdatera följande:
Sous Anpassad CSS, lägg till följande CSS för skrivbordsskärmen (huvudelement):
height:650px;
max-width: 488px;
Aktivera sedan fliken för annan display och klistra in följande anpassade CSS för telefondisplayen för huvudelementet:
Som nämnts tidigare har kolonnen nu en definierad höjd som oundvikligen kommer att få innehållet i kolonnen att svämma över vertikalt.
För att säkerställa att överflödande innehåll kan ses genom att rulla nedåt i kolumnen, ställ in alternativet för vertikal översvämning för synlighet till "skrolla". För att göra detta, expandera alternativet Sikt flik Advanced Open water
Vertikalt spill: Bläddra
Lägg till teaser-innehåll i rullgardinskolumnen
Vid det här laget är kolumnen (eller hyllan) redo för innehåll. Du kan använda vilken Divi-modul som helst i den här kolumnen för att skapa ditt förhandsgranskningsinnehåll.
I det här exemplet lägger vi till dummy e-boksinnehåll som kommer att bestå av en modul blurb (för att visa den första uppmaningen), en modul Bild (för att visa bokomslaget) och en modul text (för att visa några kapitel i e-boken).
Rullande CTA (Call to Action) med bokomslagsbakgrund
Det första teaserinnehållet vi kommer att lägga till är en modul blurb som kommer att fungera som en uppmaning till handling "rulla för att förhandsgranska".
Vi kommer att använda en presentationsikon, titel och bakgrund med ett bokomslag som bakgrundsbild och en färggradientöverlagring.
Lägg till en modul i spaltkolumnen blurb.
Uppdatera innehållet enligt följande:
Titel: Bläddra för att läsa ett utdrag
Dropdown-alternativ "Bild och ikon"
Använd ikon: Ja
Ikon: se skärmdump
Dra sedan ner alternativet Bakgrund och lägg till en gradient
Färg på vänster sida: rbga(0,0,0,0,0.0)
Höger sida färg: #ffffff
Startposition: 20%
Slutposition: 85 %
Fyrkantig gradient ovanför bakgrundsbild : JA
Lägg sedan till bokomslagsbilden. För bästa resultat, lägg till en bild cirka 600 x 850 px .
På fliken Design uppdaterar du följande stilar för ikonen och titeln:
Ikonfärg: #000000
Ikonteckensnittsstorlek: 80px (dator och surfplatta), 70px (telefon)
Titel Teckensnitt: Montserrat
Titel Textjustering: centrerad
Textfärg: #000000
Sedan kan vi flytta ikonen och rubriken ner i kolumnen genom att lägga till en övre marginal.
Uppdatera följande om du vill ha storlek och utrymme för texten:
Höjd: 100%
Marginal: 25px (botten)
Utfyllnad: 400px (dator och surfplatta), 270px (telefon)
Bilden av bokomslaget
Nästa teaserinnehåll kommer att vara en bild av bokomslaget. För att lägga till en bild lägger du bara till en bildmodul under Blurb-modulen.
Ladda sedan upp samma bild som används för blurb-bakgrunden.
Innehållet i textförhandsgranskningen
Vårt sista teaserinnehåll kommer att vara texten som kommer att innehålla några fiktiva kapitel från vår e-bok. För att lägga till texten, lägg till en ny textmodul under föregående bild.
Klistra sedan in följande HTML-kod i brödtextfliken:
<h3>Chapitre 1</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<h3>Chapitre 2</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Under fliken Design uppdaterar du rubrikstilen och avståndet enligt följande (Rubrik 3):
Typsnitt: Montserrat
Teckensnittsvikt: Ultra fet
Textjustering: Centrerad
Linjehöjd: 1,3 em
Vaddering: 10 % (topp och botten)
Några sista detaljer
Uppdatera radparametrar
Med innehållet på plats måste vi göra några justeringar av raden för att göra designen mer responsiv. Öppna Linjeinställningar och uppdatera följande:
Bredd: 100% (dator), 90% (surfplatta och telefon)
Max bredd: 1px (dator), 080px (surfplatta och telefon)
Lägg till ytterligare innehåll i kolumn 2
Vid det här laget kan vi lägga till ytterligare innehåll till kolumn 2 om det behövs. För det här exemplet lade vi till en textmodul och en knappmodul och anpassade dem på samma sätt som designen som visas i vårt e-bokslayoutpaket.
Kolla in rullgardinsmenyn som finns på den bärbara surfplattan.
Och det är så designen hamnar på surfplattan och telefonens skärm.
Slutsats
Det kanske bästa med den här rullande surfplattans design är dess mångsidighet. Eftersom surfplattan i huvudsak är en Divi-kolumn kan du använda valfritt antal Divi-moduler (text, bild, knapp) för att designa innehållet du vill visa upp.
Förhoppningsvis kommer detta att vara användbart nästa gång du behöver visa teaserinnehåll på din webbplats.
En helskärmsreglage kan fungera utmärkt som din hemsidas startsida.
Helskärmsaspekten håller alltid viktigt innehåll ovanför mitten. Och skjutreglaget tillåter användare att se ytterligare innehåll utan att behöva rulla ner på sidan.
Att skapa ett helskärmsreglage med Divi är förvånansvärt enkelt att göra. Nyckeln är att ge din skjutreglage en höjd i förhållande till höjden på webbläsaren, och sedan ta bort eventuella ytterligare marginal- och breddbegränsningar på den överordnade raden eller sektionen.
På bara några minuter kan du skapa ett helskärmsreglage som expanderar för att fylla hela skärmen vid sidladdning och ser bra ut på alla enheter.
Låt oss börja.
undersökningen
Här är en kort översikt över skjutreglaget vi kommer att skapa i den här handledningen.
Skapa en ny sida med Divi Builder
Gå till i WordPress-instrumentpanelen Sidor> Lägg till nytt
Ge en titel som är relevant för dig och klicka på 'Använd Divi Builder'
Klicka till slut "Börja bygga"
Efter det kommer du att ha en tom sida för att börja designa i Divi.
Skapa en helskärmsreglage i Divi
Avsnitt och radkonfiguration
För att komma igång lägger du till en rad med en kolumn i avsnittet.
sektionsmarginal
Innan du lägger till en modul, öppna avsnittsinställningarna, gå till fliken Designa, dra ned alternativet Förband och ändra inställningarna enligt följande:
Utfyllnad (topp och botten): 0px
Linjeinställningar
Öppna sedan linjeinställningar och uppdatera följande på fliken Designa :
Bredd: 100 %
Max bredd: 100 %
Utfyllnad (topp och botten): 0px
Med alla dessa inställningar på plats kan vi nu gå vidare till att skapa själva skjutreglaget.
Skapande av helskärmsreglaget
För att skapa helskärmsskjutaren, lägg till en ny skjutreglagemodul på raden.
Lägg till bilder till varje bild
Innan du uppdaterar de allmänna bildinställningarna, öppna standardinställningarna för första bildspelet
Lägg till en bild och en bakgrundsbild på bilden. I det här exemplet använder vi samma bild för diabilden och bakgrundsbilden (ca 1920px x 1500px).
Öppna sedan inställningarna för den andra bilden
Lägg till en annan bild och bakgrundsbild från den föregående till bilden.
Observera att du kan lägga till så många bilder du vill.
Uppdatera skjutreglageinställningar
Nu när varje enskild bild har en unik bild och bakgrundsbild är vi redo att uppdatera skjutreglageinställningarna i allmänhet.
Gå tillbaka till reglageinställningarna och uppdatera följande under fliken Designa :
Täcka över
Använd bakgrundsöverlägg: JA
Bakgrundsöverlagringsfärg: rgba(27,18,38,0.74)
Box skugga
Box Shadow Style: Se Capture (1)
Box Shadow (horisontell och vertikal) Position: -8vw
Box Shadow Spridningsstyrka: -6,5 vw
Skuggfärg: #cf1259
Titeltext
Redigera titelinställningar
Titel Teckensnitt: Montserrat
Titel Teckensnittsvikt: Ultra fet
Textstorlek: 5vw (dator), 40px (surfplatta och telefon)
kropp text
Redigera beskrivningstextinställningarna enligt följande:
Kroppstypsnittsvikt: Halvfet
Brödtextstorlek: 16px
Linjehöjd: 1.8 em
Knappstilar
Använd anpassade stilar för knapp: JA
Knapptextstorlek: 16px
Bakgrund: #cf1259
Kantbredd: 0px
Kantradie: 0px
Teckensnittsvikt: Fet
Typsnittsstil: TT
Utfyllnad (topp och botten): 15px
Utfyllnad (vänster och höger): 30px
Reglagets höjd och innehållsbredd
Innehåll Max bredd: 90 %
Min höjd: 100vh
Genom att ge skjutreglaget en minsta höjd på 100vh säkerställs att skjutreglaget spänner över hela höjden av webbläsarfönstret. Detta är nyckeln till att skapa en helskärmsskjutare.
Skjutreglaget kommer redan att sträcka sig över hela bredden av webbläsarfönstret, eftersom linjebredden är 100 %.
Skjutreglage pilar
Under fliken Avancerat uppdaterar du storleken och positionen för skjutpilarna genom att lägga till följande anpassade CSS i CSS-området Skjut pilar :
font-size: 8vw !important;
margin-top: -4vw;
Detta kommer att förstora Slider-pilarna på stora skärmstorlekar och förminska dem till en mindre storlek på mobilen.
Subtrahera rubrikhöjd från reglagehöjd
Om du har en rubrik på sidan kommer helskärmsreglaget faktiskt att sträcka sig en bit under webbläsarfönstret.
Detta beror på att rubrikhöjden sänker Slider som för närvarande har en höjd på 100vh (100% av fönstrets/webbläsarens höjd). För att förhindra att skjutreglaget trycks in under webbläsarens vyport kan du lägga till en CSS-funktion calc () för att subtrahera höjden på rubriken från höjden på reglaget.
Du måste veta höjden på rubriken (dator och mobil) för att detta ska fungera. Om du använder standard Divi-huvudet, blir rubrikens höjd 80px. Således måste skjutreglagets höjd vara 100vh – 80px.
För att lägga till den anpassade höjden, öppna Slider-inställningarna och lägg till följande anpassade CSS till huvud Slider-elementet och även för varje bild:
Och så här ser designen ut på surfplatta och telefon.
Slutsats
De viktigaste stegen för att skapa en helskärmsreglage i Divi är att konfigurera sektionen och raden så att den sträcker sig över hela webbläsarens bredd, och sedan ge reglaget en minimihöjd på 100vh.
Om du använder en rubrik kan du lägga till ett anpassat CSS-kodavsnitt som subtraherar höjden på rubriken för att säkerställa att helskärmsreglaget inte sträcker sig förbi botten av webbläsaren.
Med dessa nyckelsteg på plats kan du ytterligare anpassa skjutreglaget (och bilderna) hur du vill med alla kraftfulla funktioner som ingår i Divi Builder.
Använd den för att skapa vackra och effektiva reglage som fyller vilken skärm som helst på vilken enhet som helst.
Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Sekretess och cookies: denna webbplats använder cookies. Genom att fortsätta att surfa på denna webbplats godkänner du vår användning av den.
För att ta reda på mer, inklusive hur du kontrollerar cookies, se följande:
Cookies policy
