Divi: Så avslöjar du innehåll när du håller muspekaren över flikar

Divi: Så avslöjar du innehåll när du håller muspekaren över flikar

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.

Expanderbara hörnflikar i Divi

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.

Läs också vår guide om Divi: Hur man skapar ett rutnät för flytande kolumner vid hovring

Låt oss börja med att lägga till en Blurb-modul.

Lägg till Blurb-modul till kolumn 1

Inställningar för kolumn 1

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)
  • Kantfärg (överst och vänster): #e94558
Transformeringsalternativ (Skrivbord)
  • Transformskala (X och Y): 50 %
  • Transformera Översätt
    • Y-axel: 50 %
    • X-axel: 30 %

Läs också vår guide om: Divi: Hur man skapar en klibbig sidfot med "Reveal"-effekt

  • Transform Ursprung: botten och höger
Transformeringsalternativ (hovra)
  • Transformeringsskala (Y och X) (Hover): 100 %
  • Transformera Översätt (Y och X) (Sveving): 0 %

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

Lägg sedan till en textmodul.

Lägg till innehållet: "Seasonal".

Uppdatera sedan följande inställningar:

  • Typsnitt: Merriweather
  • Teckensnittsvikt: Fet
  • Stil: TT
  • Textjustering: Centrerad
  • Textfärg: #999999
  • Storlek: 50px (dator), 30px (surfplatta), 24px (telefon)
  • Bokstavsavstånd: 1em
Utdragbar i Divi
  • Utfyllnad (vänster): 50px (dator), 30px (surfplatta), 24px (telefon)
Utdragbar i Divi

Slutresultat

Kolla in slutresultatet av layouten med expanderande hörnflikar.

Expanderbara hörnflikar i Divi

Och här är designen på mobilen.

Expanderbara hörnflikar i Divi

Ladda ner DIVI nu!!!

Slutsats

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.

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.

.

Divi: Hur man skapar ett rutnät för flytande kolumner vid hovring

Divi: Hur man skapar ett rutnät för flytande kolumner vid hovring

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å. 

Se även: Divi: Hur man skapar en anpassad sidfot

Ö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.

Läs också vår guide om: Divi: Hur man skapar en klibbig sidfot med "Reveal"-effekt

Lägg till CSS-kod

Och kopiera och klistra in följande rader med CSS-kod:

.hover-column:hover .hover-title {
background-color: #000000;
}
 
.hover-column:hover .hover-title h3 {
color: white !important;
}
 
.hover-button {
color: black;
}
 
.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}
 
.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}
 
.hover-column:hover::before {
opacity: 0;
}

undersökningen

Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur det ser ut på olika skärmstorlekar.

office

Grid med flytande Divi på svävaren

Mobil

Grid med flytande Divi på svävaren

Ladda ner DIVI nu!!!

Slutsats

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.

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.

.

Divi: Hur man skapar en global sidosubrik

Divi: Hur man skapar en global sidosubrik

Vill du skapa en global sidhuvud med Divi?

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å.

Sido global header med Divi

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.

position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;

På att sväva över avsnittet

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:

display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;

Lägg till en bildmodul i kolumnen

Ladda ner logotyp

Det är dags att börja lägga till moduler! Den första modulen vi behöver är en bildmodul. Ladda upp en semi-transparent logotypbildfil som du väljer.

dimensionering

Gå sedan till fliken Designa och ändra bredden på olika skärmstorlekar.

  • Bredd: 4 vw (dator), 12 vw (surfplatta), 16 vw (telefon)

Omvandlingsskala

Öka storleken på modulen genom att ändra inställningarna för transformationsskala efteråt.

  • Höger: 170 % (Skrivbord), 100 % (Surfplatta och telefon)
  • Låg: 170 % (dator), 100 % (surfplatta och telefon)

"Översätt översätt"

Och tryck modulen åt höger genom att ändra följande parametrar

  • Nederst: 1vw (dator), 0vw (surfplatta och telefon)

Lägg till en menymodul i kolumnen

Välj menyn att lägga till

Nästa modul vi behöver är Menymodulen. Välj en valfri meny.

Ta bort bakgrundsfärg

Ta sedan bort bakgrundsfärgen från modulen.

Disposition

Gå sedan till fliken Designa och ändra layoutinställningarna.

  • Stil: Centrerad
  • Rullgardinsmeny Riktning: Nedåt

Menytextinställningar

Ändra även menytextinställningarna.

  • Aktiv länkfärg: #cecece
  • Menyteckensnitt: Montserrat
  • Meny Teckensnittsvikt: Fet
  • Textfärg: #000000
  • Menytextstorlek: 0,9 vw (skrivbord), 2 vw (surfplatta), 2,5 vw (telefon)

Menytext vid muspekaren

Ä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.

office

Sido global header med Divi

Ladda ner DIVI nu!!!

Slutsats

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.

Se också 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.

.

Divi: Hur man skapar ett klibbigt avsnitt för "följ på sociala medier".

Divi: Hur man skapar ett klibbigt avsnitt för "följ på sociala medier".

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.

klibbiga sociala nätverk med Divi

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.

Under fliken Designa, uppdatera följande:

  • Justeringsmodul: Center
  • Ikonfärg: #000000 (Skrivbord), #ffffff (Hover), #ffffff (Sticky)
  • Bredd: 100 %
  • Max bredd: 100 %
  • Utfyllnad: 20px (överst), 12px (botten), 10px (vänster och höger)

Inställningar för sociala medier

När modulinställningarna är klara kan vi nu rikta vår uppmärksamhet mot att styla de individuella sociala medieikonerna. 

För att göra detta kommer vi först att anpassa en social nätverksikon. Sedan kommer vi att duplicera det sociala nätverket för att skapa de andra.

Du bör redan ha två sociala nätverk under standardinnehållsfliken. Ta bort en och klicka för att redigera den återstående.

Väl i de sociala nätverksinställningarna väljer du ett socialt nätverk och uppdaterar bakgrundsfärgerna för skrivbord, hovring och klibbiga tillstånd.

  • Socialt nätverk: TikTok (eller vad som helst)
  • Bakgrund: transparent (Skrivbord), #fe2c55 (Hover), #000000 (Sticky)

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:

  • Rundade hörn: 50 %
  • Kantbredd: 1px
  • Kantfärg: #000000 (Skrivbord), Transparent (Hover)

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:

  • Socialt nätverk: Facebook
  • Bakgrund: transparent (Skrivbord), #3b5998 (Hover)

Fortsätt med samma process för att uppdatera resten av de sociala nätverken.

Slutresultat

Låt oss nu se resultatet som erhållits på olika skärmstorlekar.

klibbiga sociala nätverk med Divi

Ladda ner DIVI nu!!!

klibbiga sociala nätverk med Divi
klibbiga sociala nätverk med Divi

Ladda ner DIVI nu!!!

Slutsats

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. 

Vi hoppas att denna handledning kommer att vara användbar för dig i dina nästa Divi-projekt. Om du vill veta mer om Divi, tveka inte att besöka vår katalog med Divi tutorials. Du kan också konsultera Hur man skapar bloggsidan med Divi Blog-modulen 

Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarfältet nedan.

Du kan dock också konsultera våra resurserom 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 tidendela den här artikeln på dina olika sociala nätverk.

.

Divi: Hur man skapar en surfplatta med rullningsbart teaserinnehåll

Divi: Hur man skapar en surfplatta med rullningsbart teaserinnehåll

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:

max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;
Vertikalt spill: rulla

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.

Divi-surfplatta med rullande innehåll för teasers

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.

Ladda ner DIVI nu!!!

Slutresultat

Låt oss nu se det slutliga resultatet.

Kolla in rullgardinsmenyn som finns på den bärbara surfplattan.

Scrollbar surfplatta på Divi

Och det är så designen hamnar på surfplattan och telefonens skärm.

Scrollbar surfplatta på Divi
Scrollbar surfplatta på Divi

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.

Om du vill veta mer om Divi, tveka inte att besöka vår katalog med Divi tutorials. Du kan också konsultera Hur man skapar bloggsidan med Divi Blog-modulen 

Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarfältet nedan.

Du kan dock också konsultera våra resurserom 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 tidendela den här artikeln på dina olika sociala nätverk.

.

Divi: Hur man skapar en helskärmsreglage

Divi: Hur man skapar en helskärmsreglage

Vill du skapa en helskärmsreglage med Divi?

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.

Divi helskärmsreglage

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:

min-height: calc(100vh - 80px)!important;

Slutresultat

Här är det slutliga resultatet.

helskärmsreglage med Divi

Ladda ner DIVI nu!!!

Och så här ser designen ut på surfplatta och telefon.

helskärmsreglage med Divi
helskärmsreglage med Divi

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.

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.

.