Hur man lägger till en dynamisk sajttitel och ett slogan till en global Divi-rubrik

ens Blair Jersyer | Juin 10, 2020 | Divi

Att veta hur man lägger till en dynamisk sidrubrik och en slogan till en Divi-huvudrubrik kommer att vara användbart när man skapar Divi-webbplatser. Och det finns några goda skäl att göra det. Å ena sidan har inte alla webbplatser en logotyp. En webbplatsrubrik är en bra logotypersättning. En annan anledning är att öka ditt varumärke genom att inkludera viktig information på din webbplats där alla kommer att se det.

I den här självstudien visar vi dig hur du lägger till en dynamisk sidtitel och slogan i en Divi global rubrik. Denna lösning kommer dynamiskt att extrahera webbplatsens titel och tagline från WordPress-backenden. Dessutom har du alla Divis kraftfulla designalternativ för att anpassa titeln och slogan hur du vill!

Möjligt resultat

Här är en förhandsgranskning av designen vi kommer att bygga i denna handledning.

Notera webbplatsens titel och tagline längst upp i mitten av rubriken som visas dynamiskt.

Gratis nedladdning

Gå med i Divi Newlsetter så skickar vi dig en kopia av Ultimate Divi Landing Page Layout Pack, tillsammans med massor av andra gratis och fantastiska Divi-resurser, tips och tricks. Följ det så blir du Divi-mästare på nolltid. Om du redan är prenumererad anger du bara din e-postadress nedan och klickar på Hämta för att komma åt layoutpaketet.LADDA NER

För att importera mallen, gå till Divi> Temagenerator.

Klicka på bärbarhetsikonen längst upp till höger på sidan.

I popup-fönstret bärbarhet väljer du importfliken och väljer nedladdningsfilen från din dator.

Klicka sedan på importknappen.

När den är klar kommer den övergripande rubrikmallen att finnas tillgänglig i Divi Theme Builder.

I det följande kommer vi att gå vidare till designen.

Webbplatsens titel och slogan på WordPress

Varje WordPress-webbplats har en sidtitel och en tagline. Webbplatsens titel är i grunden webbplatsens namn och tagline är en kort fras som vanligtvis förklarar vad det är.

Det är inte ovanligt att lägga till webbplatsens titel när du installerar WordPress och glömma den.

Och vissa människor inser inte ens att taglinjen finns, än mindre ta sig tid att uppdatera den. När du använder Divi-temat kommer dessutom webbplatsens titel och slogan inte att visas på din webbplats som standard, så det är lätt att ignorera dem. Webbplatsens titel och tagline är dock viktiga delar av webbplatsen och kommer att kännas igen av sökmotorerna.

Du kan när som helst hitta och uppdatera webbplatsens titel och tagline i WordPress genom att gå till WordPress-instrumentpanelen och navigera till Inställningar> Allmänt.

Du kan också ta en annan rutt med tematilpassaren för att uppdatera webbplatsens titel under de allmänna inställningarna.

Nu när vi vet var webbplatsens titel och slogan finns på WordPress-backend, låt oss undersöka hur vi kan lägga till dem i en Divi-rubrik!

Hur man lägger till en dynamisk webbplatstitel och ett slogan till en global rubrik i Divi

Importerar den fördesignade globala rubrikmallen

För den här handledningen kommer vi att fokusera på hur man lägger till den dynamiska webbplatsens titel och tagline till en befintlig rubrik istället för att skapa en fullständig rubrik från grunden. Det sparar tid och förbättrar tydligheten. Så för att starta denna rubrikdesign kommer vi att importera en fördefinierad global rubrikmall från vår fjärde teman generator pack .

När du har gjort det laddade ner paketet med skapa tema , packa upp filen och leta efter JSON-filens webbplatsmall.

Gå sedan till Divi> Theme Builder.

Klicka på bärbarhetsikonen längst upp till höger. I popup-fönstret portabilitet väljer du standardwebbplatsmallen JSON-fil och klickar på knappen Importera.

När mallen har lagts till i temabyggaren tar du bort sidfotmallen och klickar för att redigera den övergripande rubriken.

Lägga till en dynamisk webbplatstitel och tagline i rubriken

Inuti malllayoutredigeraren ser du att den färdiga rubriken redan är utformad. Vi kan börja göra våra anpassningar direkt.

Flytta logotyp

För att börja, dra bildmodulen som visar logotypen (dynamiskt) från den mellersta kolumnen i den översta raden till den vänstra kolumnen på den översta raden.

Lägg till en uppmaningsmodul för att visa webbplatsens titel och tagline

Lägg sedan till en ny Call to Action-modul i den mellersta kolumnen på den översta raden (där logotypen var).

Vi använder modulen Call to Action för att visa webbplatsens titel och tagline.

Men innan du börjar lägga till innehåll, välj först NEJ för att använda bakgrundsfärgen.

Lägg till en dynamisk webbplatstitel

Under innehållsinställningar, håll muspekaren över rubriken och klicka på ikonen "Använd dynamiskt innehåll". Välj sedan "Site Titel" i listan.

Lägg till ett dynamiskt webbplatsslogan

För sedan musen över kroppsområdet och välj ikonen "Använd dynamiskt innehåll". Välj sedan "Site Tagline" från listan.

Lägg till en dynamisk startsida länk

Det är vanligt att webbplatsens titel omdirigeras till hemsidan vid klick, speciellt om du byter ut logotypen. För att omdirigera hela kursen till hemsidan, lägg till hemsidans länk som dynamiskt innehåll till webbadressen till kurslänken.

Design av textens titel och slogan på webbplatsen

Nu visas webbplatsens titel och taglinje dynamiskt i rubriken. Allt vi behöver göra nu är att lägga till lite styling. Kom ihåg att vi måste anpassa titeltexten för att designa webbplatsens titel och karosstexten för att designa taglinjen.

Hoppa över till designfliken och uppdatera följande:

• Titel Typsnitt: Heebo
• Titel Typsnitt Vikt: Fet
• Titelstilsstil: TT
• Titeltextstorlek: 32px (skrivbord), 24px (surfplatta och telefon)
• Titelbokstavsavstånd: 0.3em
• Kroppstypsnitt: Roboto
• Body Font Style: kursiv
• Kroppstextfärg:
• Kroppsstorlek: 13px
• Body Letter Avstånd: 0.1em
• Kroppslinjehöjd: 1em

För att hjälpa till med centrering tar du ut standardfyllningen under karosstexten genom att lägga till följande anpassade CSS i kampanjbeskrivningen:

stoppning: 0px

Ytterligare designjusteringar

För den sista delen av tutorialen kommer vi att göra några ytterligare designjusteringar av rubriken för att se till att artiklarna förblir vertikalt centrerade i varje kolumn och för att ge knappen en unik design. Vi kommer också att lägga till en före och efter squiggly linje till taglinjen (bara för sparkar).

Centrera kolumnerna / innehållet vertikalt

Just nu är den översta raden aktiva ”Equalize Column Heights” som använder flex-egenskapen. Vi kan dra nytta av detta genom att lägga till ett litet css-utdrag för att se till att alla kolumner förblir vertikalt mitt i raden. För att göra detta, öppna inställningarna för den översta raden och lägg till följande CSS till huvudelementet:

align-items: center;

Uppdatera kolumnen med knappen

Därefter öppnar du inställningarna för kolumn 3 i den översta raden och tar ut bakgrundsfärgen och stoppningen.

Uppdatering av knappbakgrunden

Öppna sedan inställningen för knappmodul och uppdatera bakgrunden med en ny bakgrundsgradient enligt följande:

• Lutningsbakgrund Vänster färg: #ffffff
• Höger bakgrundsgradientfärg: # 1dbf73
• Lutningsriktning: 135deg
• Startposition: 10%
• Slutposition: 0%

Lägga till före och efter tecken i slogan

Varje element för dynamiskt innehåll kan ändras genom att klicka på kugghjulsikonen. För att lägga till före och efter tecken till slogan, öppna inställningarna för uppmaningen till modulen som innehåller slogan och klicka på redigeringsikonen på det dynamiska innehållet i webbplatsens slogan. Lägg sedan till tecknen i posterna före och efter.

Slutresultat

För att se resultatet, öppna en sida på din webbplats. Du bör se den dynamiska webbplatsens titel och tagline visas vackert!

Avslutande tankar

Det är riktigt trevligt att du kan anpassa en övergripande rubrik med en dynamisk sidrubrik och tagline. Detta verkar vara något som kommer att vara användbart för många webbplatser. Jag gillar också idén att inkludera webbplatsens titel och tagline förutom logotypen för en ännu starkare representation av varumärket.

källa: Elegant tema

Hur man skapar en sömlös övergång med rullningseffekter på Divi

ens Blair Jersyer | Juin 9, 2020 | Divi

När du utformar din tjänstesida vill du se till att dina besökare märker alla olika tjänster som du tillhandahåller. I många fall kommer detta bara att vara en specifik tjänst som de letar efter, men om du tillhandahåller ett strömlinjeformat sätt i din servicestruktur är det troligare att dina besökare behandlar dem alla. 

I den här handledningen visar vi dig hur du blir kreativ med Divis rullningseffekter och skapar en sömlös serviceövergång. Du kan också ladda ner JSON-filen gratis!

Låt oss gå.

Möjligt resultat

Innan vi dyker in i handledningen, låt oss ta en titt på resultatet på olika skärmstorlekar.

1, återskapa strukturen för elementen

Lägg till avsnitt 1

avstånd

Börja med att lägga till ett nytt avsnitt på sidan du arbetar med. Öppna sektionsinställningarna och ändra vadderingsvärdena på olika skärmstorlekar.

• Övre stoppning: 80px (skrivbord och surfplatta), 0px (telefon)
• Botten stoppning: 80px

Lägg till en ny rad

Kolumnstruktur

Fortsätt att lägga till en ny rad med följande kolumnstruktur:

dimensionering

Utan att lägga till fler moduler, öppna radparametrarna och tillämpa följande ändringar på dimensioneringsparametrarna:

• Använd en anpassad rännbredd: Ja
• Rännbredd: 1
• Bredd: 90%
• Max bredd: 1580px

avstånd

Lägg sedan till en anpassad övre och undre marginal.

• Övre marginal: 200px
• Nedre marginal: 200px

Lägg till en textmodul i 1-kolumnen

Lägg till H2-innehåll

Det är dags att lägga till moduler, börjar med en textmodul i kolumn 1. Ange önskat H2-innehåll.

H2 textinställningar

Gå till fliken moduldesign och ändra H2-textinställningarna enligt följande:

• Avdelning 2 Polis: kvartalsvis
• Rubrik 2 Textstorlek: 80px (skrivbord), 50px (surfplatta), 40px (telefon)
• Höjden på huvudets linje 2: 1.2em

avstånd

Lägg sedan till en lägre marginal på surfplattan och telefonen.

• Nedre marginal: 50 pixlar (endast surfplatta och telefon)

Lägg till en textmodul i 2-kolumnen

Lägg till innehåll

Låt oss gå vidare till andra kolumnen. Där är den första modulen vi behöver en textmodul med lite beskrivningsinnehåll.

Textinställningar

Byt till fliken moduldesign och ändra textinställningarna i enlighet med detta:

• Textstilsort: stuga
• Textstilsstil: versaler
• Textfärg: # 000000
• Textstorlek: 18 px (skrivbord), 15 px (surfplatta), 13 px (telefon)
• Avstånd mellan textbokstäver: 3px (skrivbord), 1px (surfplatta och telefon)
• Höjd på textrad: 3em

Lägg till en separationsmodul i kolumn 2

synlighet

Nästa och sista modul vi behöver i den här kolumnen är en separationsmodul. Se till att alternativet "Visa separator" är aktiverat.

• Visa separator: Ja

Linje

Ändra sedan modulens linjefärg.

• Linjefärg: # 000000

dimensionering

Gör sedan några ändringar i dimensioneringsparametrarna.

• Divider vikt: 3px
• Bredd: 28%

avstånd

Vi lägger också till en toppmarginal.

• Övre marginal: 10px

Lägg till avsnitt 2

avstånd

Låt oss gå vidare till nästa vanliga avsnitt. Ta bort standard toppdynan från avsnittet.

• Övre stoppning: 0px

överflöden

Göm också överflödet.

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

Lägg till en ny rad

Kolumnstruktur

Fortsätt att lägga till en första rad med följande kolumnstruktur:

dimensionering

Utan att lägga till fler moduler öppnar du linjeparametrarna, öppnar dimensioneringsparametrarna och gör följande ändringar:

• Använd en anpassad rännbredd: Ja
• Rännbredd: 1
• Utjämna kolumnhöjder: Ja
• Bredd: 90%
• Max bredd: 1580px

avstånd

Ta sedan bort all standard övre och nedre stoppning.

• Övre stoppning: 0px
• Botten stoppning: 0px

Inställningar för kolumn 1

Bakgrundsfärg

Öppna sedan inställningarna för kolumn 1 och ändra bakgrundsfärgen.

• Bakgrundsfärg: # f7f7f7

avstånd

Slutför kolumninställningarna genom att lägga till anpassade utfyllnadsvärden på olika skärmstorlekar.

• Övre stoppning: 200 px (skrivbord), 100 px (surfplatta och telefon)
• Botten stoppning: 200 px (skrivbord), 100 px (surfplatta och telefon)
• Vänster stoppning: 8%
• Höger stoppning: 8%

Inställningar för kolumn 2

avstånd

Fortsätt genom att öppna inställningarna i kolumn 2. Gå till fliken avancerad och lägg till anpassade utfyllnadsvärden på olika skärmstorlekar.

• Topp stoppning: 100px (skrivbord), 50px (surfplatta och telefon)
• Botten stoppning: 200px
• Vänster stoppning: 150 px (skrivbord), 0 px (surfplatta och telefon)

Lägg till en separationsmodul i kolumn 1

synlighet

I den första kolumnen är den första modulen vi behöver en separationsmodul. Se till att alternativet "Visa separator" är aktiverat.

• Visa separator: Ja

Linje

Ändra sedan modulens linjefärg.

• Linjefärg: # 000000

dimensionering

Ändra även storlek på parametrarna.

• Divider vikt: 3px
• Bredd: 50%

Lägg till en textmodul i 1-kolumnen

Lägg till H3-innehåll

Nästa modul vi behöver i kolumn 1 är en textmodul med H3-innehåll.

H3 textinställningar

Byt till fliken moduldesign och ändra H3-textinställningarna:

• Avdelning 3 Polis: kvartalsvis
• Textfärg på artikel 3: # 000000
• Artikel 3 Textstorlek: 50 px (skrivbord), 40 px (surfplatta), 35 px (telefon)
• Höjden på huvudets linje 3: 1.1em

Lägg till en textmodul i 2-kolumnen

Lägg till innehåll

I den andra kolumnen är den första modulen vi behöver en textmodul med lite beskrivningsinnehåll.

Textinställningar

Ändra modulens textinställningar enligt följande:

• Textstilsort: stuga
• Textstilsstil: versaler
• Textstorlek: 18 px (skrivbord), 15 px (surfplatta), 13 px (telefon)
• Avstånd mellan textbokstäver: 3px (skrivbord), 1px (surfplatta och telefon)
• Höjd på textrad: 3em

Lägg till en knappmodul i 2-kolumnen

Lägg till en kopia

Nästa och sista modul vi behöver är en knappmodul. Ange en kopia efter eget val.

Knappinställningar

Ställ sedan in knappen.

• Använd anpassade stilar för knappen: Ja
• Knapptextstorlek: 20 pixlar
• Knapptextfärg: #ffffff
• Knappens bakgrundsfärg: # 000000
• Knappens bredd: 0px

• Knappsnitt: kvartalsvis
• Knappsnittets vikt: fetstil

avstånd

Lägg också till anpassad stoppning.

• Övre stoppning: 50px
• Botten stoppning: 50px
• Vänster padding: 100px
• Höger stoppning: 100px

Placera

Och placera om knappen i enlighet därmed:

• Position: Absolut
• Plats: längst ner till vänster

Klona linjen så många gånger som behövs

När du har slutfört hela raden och alla dess moduler kan du klona hela linjen tre gånger.

Ändra allt innehåll

Se till att redigera allt innehåll i dubbla rader.

2. Använd rullningseffekter

Första radens rullningseffekter

Horisontell rörelse

När du har slutfört alla raderna i ditt avsnitt är det dags att lägga till rullningseffekterna. Öppna den första raden i sektionen och lägg till horisontell rörelse.

• Aktivera horisontell rörelse: Ja
• Startförskjutning: -5
• Genomsnittlig offset: 0 (vid 26%)
• Slutförskjutning: 0
• Trigger motion-effekt: mitt i elementet

Tona in och ut

Använd också en inkommande och utgående blekningseffekt.

• Aktivera fade in och ut: Ja
• Initial opacitet: 100%
• Genomsnittlig opacitet: 100% (vid 50%)
• Slut opacitet: 0% (till 53%)
• Trigger motion-effekt: mitt i elementet

Mellanradens rullningseffekter

Vertikal rörelse

Därefter lägger vi till rullningseffekter till alla rader mellan den första och den sista raden i avsnittet. Använd först en vertikal rörelse:

• Aktivera vertikal rörelse: Ja
• Startförskjutning: -4
• Genomsnittlig offset: 0 (vid 26%)
• Slutförskjutning: 0
• Motion trigger-effekt: mitt i elementet

Tona in och ut

Aktivera också en in- och ut-blekningseffekt.

• Aktivera fade in och ut: Ja
• Initial opacitet: 0%
• Genomsnittlig opacitet: 100% (från 27% till 50%)
• Slutförskjutning: 0 (vid 53%)
• Trigger motion-effekt: mitt i elementet

Senaste radrulleffekter

Vertikal rörelse

Öppna sedan sektionens sista rad och lägg till följande vertikala rörelse:

• Aktivera vertikal rörelse: Ja
• Startförskjutning: -4
• Genomsnittlig offset: 0 (vid 26%)
• Slutförskjutning: 0
• Trigger motion-effekt: mitt i elementet

Tona in och ut

Med en inkommande och utgående blekningseffekt så är du klar!

• Aktivera fade in och ut: Ja
• Initial opacitet: 0%
• Genomsnittlig opacitet: 100% (från 27% till 50%)
• Slut opacitet: 100% (till 53%)
• Trigger motion-effekt: mitt i elementet

Slutresultat

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.

Avslutande tankar

I den här artikeln har vi visat dig hur du skapar en vacker serviceövergång med de rullande effekterna av Divi. Redan innan en servering försvinner börjar den andra dyka upp, vilket ger en trevlig övergång tilltalande för ögat. Detta tillvägagångssätt hjälper dig att markera varje tjänst på en individuell nivå. Du kan också ladda ner JSON-filen gratis! Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarfältet nedan.

Hur man skapar en teammedlem som rullar karusell med Divi

ens Blair Jersyer | Juin 9, 2020 | Divi

När du skapar din About-sida vill du antagligen också presentera dina teammedlemmar. På så sätt tillåter du besökare att interagera med människorna bakom ditt företag. Om du letar efter ett sätt att liva upp dina teammedlemmar på rullningen kan den här handledningen vara för dig. Vi skapar en karussell för teammedlemmar som flyttar automatiskt när dina besökare bläddrar på sidan. 

Demonstration

Innan vi dyker in i handledningen, låt oss ta en titt på resultatet på olika skärmstorlekar.

Början av befruktningen

Lägg till en ny sektion

avstånd

Börja med att lägga till ett nytt vanligt avsnitt på sidan du arbetar med. Öppna sektionsinställningar och lägg till anpassad stoppning på olika skärmstorlekar.

• Övre stoppning: 200 px (skrivbord), 100 px (surfplatta och telefon)
• Botten stoppning: 200 px (skrivbord), 100 px (surfplatta och telefon)

överflöden

För att se till att inget horisontellt rullningsfält visas i vår design kommer vi att dölja sektionsöverflöden i den avancerade fliken.

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

Lägg till rad 1

Kolumnstruktur

Fortsätt att lägga till en ny rad i avsnittet med följande kolumnstruktur:

dimensionering

Utan att lägga till några moduler ännu, öppna radinställningarna, växla till designfliken och ändra bredden och den maximala bredden i storleksinställningarna.

• Bredd: 90%
• Max bredd: 1580px

avstånd

Vi lägger också till anpassad övre och undre stoppning.

• Övre stoppning: 100px
• Botten stoppning: 100px

Lägg till en textmodul i kolumnen

Lägg till H2-innehåll

Det är dags att lägga till moduler, börjar med en första textmodul. Ange det H2-innehåll du väljer.

H2 textinställningar

Gå till fliken moduldesign och ändra H2-textinställningarna enligt följande:

• Teckensnitt titel 2: Quicksand
• Teckensnitt titel 2: halvfet
• Textfärg på artikel 2: # 000000
• Rubrik 2 Textstorlek: 70 px (skrivbord), 50 px (surfplatta), 40 px (telefon)

Lägg till en separationsmodul i kolumnen

synlighet

Lägg sedan till en separationsmodul. Se till att alternativet "Visa separator" är aktiverat.

• Visa separator: Ja

Linje

Gör sedan några ändringar i radinställningarna.

• Linjefärg: # edf000
• Linjestil: solid
• Linjeposition: överst

dimensionering

Och slutföra modulparametrarna genom att ändra dimensioneringsparametrarna i enlighet därmed:

• Divider vikt: 20px
• Bredd: 11%
• Justering av modulen: vänster
• Höjd: 20px

Lägg till en rad # 2

Kolumnstruktur

Till nästa rad! Använd följande kolumnstruktur:

dimensionering

Utan att lägga till fler moduler öppnar du linjeparametrarna och modifierar dimensioneringsparametrarna enligt följande:

• Använd en anpassad rännbredd: Ja
• Rännbredd: 2
• Bredd: 100%
• Max bredd: 100%

avstånd

Lägg sedan till vänster och höger polstring på endast de mindre skärmarna.

• Vänster stoppning: 5% (endast surfplatta och telefon)
• Höger stoppning: 5% (endast surfplatta och telefon)

Kolumnparametrar (5x)

Nu, i de närmaste tre stegen i denna handledning, kommer vi att göra några ändringar i kolumnerna. Tillämpa de tre stegen på var och en av kolumnerna i din rad.

Lutningbakgrund

Lägg först till en lutningsbakgrund i varje kolumn.

• 1-färg: rgba (255,255,255,0)
• 2-färg: rgba (0,0,0,0,84)
• Lutningstyp: linjär
• Startposition: 25%
• Slutposition: 86%
• Placera övertoningen ovanpå bakgrundsbilden: Ja

Bakgrundsbild

Ladda sedan upp en bakgrundsbild efter eget val. Den här bakgrundsbilden representerar varje lagmedlem, så använd en annan bild för varje kolumn.

• Bakgrundsstorlek: Omslag
• Bakgrundsbildens position: Mitt

Huvudelementet

Fyll i kolumninställningarna genom att lägga till anpassad CSS till huvudplattelementet i varje kolumn. Dessa rader med CSS-kod hjälper oss att placera kolumnerna under varandra på surfplattan istället för att ha två sida vid sida.

bredd: 100%! viktigt; marginal: 50px 0px 50px 0px! viktigt;

Lägg till en personmodul i kolumnen

Lägg till innehåll

För att dela information om teammedlemmar använder vi en personmodul. Lägg till den första Person-modulen i kolumn 1 och använd vilket innehåll du vill ha.

Radera bild

Radera sedan bilden. Vi använder istället kolumnens bakgrundsbild.

Bakgrundsbild

Vi lägger sedan till ett bildöverlägg som modulens bakgrundsbild. Du hittar den vi använder genom att ladda ner mappen i början av denna handledning.

• Bakgrundsstorlek: Omslag
• Bakgrundsbildens position: Mitt

Titeltextinställningar

Gå till fliken moduldesign och ändra titeltextinställningarna enligt följande:

• Titelnivå: H3
• Titel typsnitt: Quicksand
• Titel typsnitt vikt: fetstil
• Titelfärg: #ffffff
• Titeltextstorlek: 230%

Inställningar för kroppstext

Ändra också inställningarna för kroppstext.

• Kroppstypsnitt: Open Sans
• Kroppstextfärg: #ffffff
• Kroppslinjens höjd: 2,2 em

Position textinställningar

Gör sedan några ändringar i positionstextinställningarna.

• Font Position: Open Sans
• Position i textfärg: # edf000

avstånd

Och slutför modulinställningarna genom att lägga till anpassade utfyllnadsvärden i avståndsinställningarna.

• Övre stoppning: 70%
• Nedre stoppning: 10%
• Vänster stoppning: 10%
• Höger stoppning: 10%

Duplicera Person-modulen 4 gånger

När du har slutfört Personmodulen kan du klona hela modulen fyra gånger.

Placera dubbletter i de återstående kolumnerna

Placera duplicerade moduler i de återstående fyra kolumnerna på raden. Se till att redigera innehållet också.

Vänd rad till en automatisk rullkarusell

Ändra storleken på rad nr 2

För att göra denna rad till en automatisk rullning av teammedlemskarusell måste vi öppna radinställningarna igen och ändra bredden och den maximala bredden i storleksinställningarna.

• Bredd: 180%
• Maximal bredd: 220% (skrivbord), 100% (surfplatta och telefon)

Lägg till horisontell rörelse av linje # 2

Slutför radinställningarna genom att lägga till horisontell rörelse till inställningarna för bläddringseffekten på fliken avancerat så är du klar!

• Aktivera horisontell rörelse: Ja
• Starta offset:
  • Kontor: 2,5
  • Tablet och telefon: 0
• Genomsnittlig offset: 0 (vid 40%)
• Slutförskjutning:
  • Kontor: -25 (62%)
  • Tablet och telefon: 0
• Trigger motion-effekt: mitt i elementet

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

Avslutande tankar

I denna handledning har vi visat dig hur du blir kreativ med Divis inbyggda rullningseffekter. Specifikt har vi återskapat en vacker, automatisk rullning teammedlemskarusell. När besökare rullar ner på sidan visas en annan del av karusellen.

Hur du lägger till fler ikoner på sociala medier i Divi

ens Blair Jersyer | Juin 8, 2020 | Divi

Med Divi kan du styra och designa alla detaljer på din webbplats, från sidhuvud till sidfot. Ett av de mest klickade elementen på någon webbplats är ikoner för sociala medier. En engagerad publik vill hitta dig någon annanstans och lära känna dig. Uppenbarligen vill du göra det så enkelt som möjligt. 

Så vi visar dig hur du aktiverar ytterligare ikoner för sociala medier i Divis temalternativ, hur du använder Divi Builder för att infoga sociala medieikoner var som helst på en sida eller ett inlägg och hur du utnyttjar kraften. av Divi Builder-temat för att lägga till ikoner för sociala medier till alla sidor och krogar på din webbplats.

Hur du enkelt aktiverar ytterligare sociala medieikoner i Divi-sidfoten

Det enklaste sättet att lägga till fler ikoner för sociala medier på din Divi-webbplats är att gå till panelen Tema alternativ , aktiverar alternativen för Facebook, Twitter, Instagram och RSS. Då är allt du behöver göra att ange dina profil-URL: er i fälten. När du gör detta ser du dem visas som ikonlänkar i sidans sidfot:

Gå till din WordPress-instrumentpanelsmeny Divi - Temaalternativ och klicka på fliken Général . Bläddra ner för att se nätverksväxeln. Se också till att ange webbadresserna för varje Divi social ikon som du aktiverar precis under dessa växlar. Annars visas ikonen, men genom att klicka på den kommer användaren ingenstans. Använder en # istället för en URL kommer användaren att hålla sig på sidan istället för att omdirigera dem till en 404 sida .

Bläddra till slutet av temalternativen och klicka Spara ändringar . Nu kan du gå till sidans sidfot och klicka på de sociala ikonerna för att testa dem!

Om du inte ser ikonerna i sidfoten ska du kontrollera tematilpassaren under Utseende - anpassa och se till att Visa sociala ikoner markeras under sidfotalternativen.

Om du emellertid vill ha ännu fler alternativ för sociala sidfotikoner, fortsätt rulla ner till vårt avsnitt om Divi Theme Builder där vi diskuterar både anpassade mallar och övergripande standardvärden.

Hur man använder Divi Builder för att lägga till trackers på sociala medier på en sida eller publicera innehåll

Ibland kan det vara mycket meningsfullt att lägga ytterligare ikoner för sociala medier mellan block av text, bilder eller annat innehåll i sidorna eller inläggen. Din målsida eller Om-sidan, till exempel, skulle vara ett bra ställe att lägga till ytterligare sociala ikoner för att låta besökare veta hur de ska få kontakt med dig. De kommer definitivt att sticka ut mer än bara att länka till dina sociala profiler med vanlig text. Dessutom letar människor efter igenkännliga ikoner.

Du kan använda Divi Builder för att infoga ikoner för sociala medier direkt på dina sidor eller inlägg med hjälp av social media tracking .

Varje gång du skapar eller öppnar en befintlig sida eller artikel i din WordPress-instrumentpanel, ser du en stor lila knapp som frågar om du vill använda Divi Builder eller inte.

Och det gör det naturligtvis. Klicka bara Använd Divi Builder för att börja bygga din sida eller publicera från grunden (eller från en av våra fördefinierade layouter ). Dessutom kan du inkludera Divi sociala medieikoner om du använder standardredigeraren för WordPress. Allt du behöver göra är att infoga ett block av Divi-layout och följ samma steg som vi följer nedan.

Du kan använda verktyget för att utforma din sida eller ditt inlägg som du vill med hjälp av de tillgängliga sidbyggnadsmodulerna. Om det är första gången du använder Divi Builder kanske du vill kolla in den här översikten först för att få en klar förståelse för hur den fungerar.

När du är redo att lägga till sociala medieikoner på din sida klickar du på den svarta cirkeln + i avsnittet där du vill placera dina sociala medieikoner och bläddra tills rutan med social media tracking visas.

Du blir ombedd att välja de sociala nätverk du vill ha innan du kan börja anpassa dem. Klicka på Lägg till ett nytt socialt nätverk .

Välj sedan en i listrutan.

Med det valda, lägg till webbadressen till din profil. Alternativt kan du välja färg, lutning, bakgrund etc. specifikt för dess ikon.

När du har lagt till ditt första sociala nätverk kan du fortsätta lägga till andra nätverk genom att följa samma steg. De kommer alla att listas under fliken Innehåll av sociala medier spårningsinställningar . Du kan redigera, kopiera eller ordna om dem genom att dra och släppa dem på plats.

När du har lagt till dina sociala nätverk, gå till flikarna Innehåll et Conception för att spela med andra anpassningsalternativ. Du kan ändra allt från rutans skugga, gränsens radie, avståndet, filtren och till och med introduktionsanimationen för ikonmodulen. Du har också möjlighet att inkludera en knapp Följ för att alla dina ikoner ska få mer uppmärksamhet åt dem. När du är klar klickar du på den gröna fästingen .

Du kan sedan flytta ikonerna runt din sida och arbeta med deras avstånd och layout som du tycker passar. (De Divi-transformationsalternativ är förresten fantastiskt för det.) När du är nöjd med alla dina beslut, tryck på grön knappen Spara (eller publicera) i det nedre högra hörnet för att registrera din nya ikon för sociala medier. Om du inte ser knappen Publicera / spara trycker du på lila ellipsis (tre prickar) längst ned i mitten av skärmen för att expandera menyn.

Därefter kommer dina sociala medieikoner att finnas direkt på din webbplats.

Använd Divi Theme Builder för att lägga till ikoner för sociala medier

Som vi nämnde ovan är Divi Theme Builder ett kraftfullt verktyg som ger dig fullständig kontroll över nästan alla aspekter av din webbplats. Så om du vill lägga till ikoner för sociala medier var som helst, har temageneratorn täckt dig.

För att börja med temageneratorn går du till Divi - Temagenerator i din WordPress dashboard.

Det handlar mycket om att lägga till sociala medieikoner i en befintlig Divi-temabyggare-layout. Eller till en ny! Det spelar ingen roll om du lägger till sidans sidhuvud, sidfot eller övergripande kropp - eller till och med vissa kategorier eller andra specialiserade sidtyper. Du kommer att följa samma process.

Vi hittar först avsnittet vi vill lägga till. Återigen kan den vara global eller personlig. Om du aldrig har använt temabyggaren förut är det enkelt. Vi kommer att lägga till ikoner för sociala medier i enskilda inlägg. Du kan därför börja med att klicka på Lägg till en ny modell och välja Alla meddelanden ou Meddelanden i specifika kategorier . Kontrollera sedan de kategorier du vill inkludera. Klicka sedan på Skapa en mall .

Om du redan har konfigurerat mallar klickar du bara på Redigera penna eller dubbelklicka på det avsnitt du vill ändra.

Processen att lägga till ikoner för sociala medier här är densamma som beskrivs ovan i generatorn. Men eftersom du använder temabyggaren istället för att bara redigera en enskild sida, kommer ikonerna inte att visas precis där du väljer. Mallar kan läggas till i sidhuvud, sidfot och globala mallar. Och du kan välja hur och när de ska visas utan att behöva konfigurera dem en gång. Inte sida för sida, som du skulle göra ovan.

Om vi ​​till exempel vill inkludera ikonerna för sociala medier under inläggstiteln, men ovanför inläggets innehåll på varje blogginlägg vi publicerar, lägger vi bara till en modul i följ sociala nätverk. Klicka på cirkeln Noir + och välj det i dialogrutan Sätt i en modul .

Dra bara modulen dit du vill att ikonerna för sociala medier ska visas. (Vi använder trådramsläge för denna placering). Då behöver du bara lägga till de sociala nätverk du vill visa. Sedan anpassar du storlek och färg som du gjorde ovan.

Och precis så lade du till några ikoner för sociala medier i Divi-temageneratorn. De kommer att visas i alla blogginlägg du skapar (i det här exemplet).

Och om du inte gillar hur de ser ut, är temageneratorn lätt att anpassa. Dra dem bara till en annan plats, till exempel längst upp i sidofältet.

Se till att klicka på den gröna knappen Enregistrer i hörnet. Nu laddas varje blogginlägg med den här mallen på webbplatsen upp med dina sociala medieikoner längst upp i sidofältet.

Lägga till ikoner för sociala medier i sidhuvudet och sidfoten med Divi Theme Builder

Kanske fungerar standardikonerna för sociala medier i Divi-inställningarna inte för dig eller erbjuder inte tillräckligt med anpassning. I så fall kan du alltid använda temabyggaren för att anpassa den mer fullständigt. 

I valfri mall kan du lägga till en anpassad sidfot. Detta ersätter standard Divi. Alla mallar utan en anpassad mall visar standardtemaelementet. Ikoner för sociala medier kan skilja sig från inlägg till sidarkiv, beroende på dina användares behov.

Du kan också lägga till en global sidfot som kommer att ersätta allt andra sidfot du skapat. (Detta gäller även globala organ och rubriker). 

Om du har utformat fyra anpassade sidfot för inlägg, sidor, projekt och kategorier men sedan skapat en global sidfot visas bara den globala sidfoten. 

Globala mallar är utmärkta för ikoner för sociala medier på webbplatsen för kanske en tidning eller ett varumärke. Medan anpassade mallar med sociala ikoner kan vara bäst för enskilda skapare som ingår i ett nätverk.

Genom att använda Divi Builder för anpassade sidhuvuden, sidfot och kroppsmallar kan du lägga till ikoner för sociala medier i nästan vilken del av Divi du vill. Du är inte begränsad till standarddesignerna eller behöver gräva i WordPress-filsystemet. Med temageneratorn kan du dessutom använda något av Divis designalternativ för att sprida upp ikoner för sociala medier och få dem att sticka ut på rätt sätt för varje publik.

Slutsats

När du har standardalternativen för Divi-sidfot, Divi Builder-verktyget för inlägg och sidor, kraften i Divi Theme Builder, finns det ingen anledning till varför du behöver installera ett plugin för att lägga till ikoner för sociala medier på din webbplats. Divi ger dig full kontroll över hur dina sociala ikoner ser ut och var de är. 

Oavsett om du behöver marknadsföra ett varumärke, en gästförfattare, en stabil innehållsskapare eller bara de platser där du kan hitta online, har Divi ett sätt att göra det. Vi är ensidiga, men vi tycker att det är det enklaste, enklaste och mest snygga sättet att lägga till ikoner för sociala medier på din webbplats.

Skapa ett dynamiskt fördelningsnät för WooCommerce-produkter

ens Blair Jersyer | Juin 8, 2020 | Divi

Sättet du utformar din produktsida har omedelbar inverkan på dina besökares beteende. En väl utformad och personlig produktsidedesign kan göra det lättare för besökare att bestämma om de vill köpa din produkt. Om du letar efter ett sätt att göra din produktsida mer engagerande kommer du antagligen att gilla den här guiden. 

Vi visar dig hur du inkluderar ett dynamiskt produktnät i din design med Divi och plugin-programmet Advanced Custom Fields. Vi börjar med att skapa en grupp fält för fördelar. Vi fyller sedan i de anpassade fälten på vår produktsida och inkluderar det dynamiska innehållet i vår produktsidemall. 

Möjligt resultat

Innan vi dyker in i handledningen, låt oss ta en snabb titt på resultatet på olika skärmstorlekar.

1. Installera ACF-plugin- och produktfördelningsfältgrupp-pluginet

Installera plugin-programmet Advanced Custom Fields

För att visa de olika produktfördelarna i baksidan av våra produkter använder vi det kostnadsfria plugin-programmet Advanced Custom Fields. Gå till din WordPress-backend> Plugins> Lägg till nytt> Hitta ACF-plugin> Installera> Aktivera .

Gå till anpassade fält och lägg till en ny grupp fält

När du har installerat och aktiverat ACF-plugin kan du komma åt dina anpassade fält och lägga till en ny grupp fält.

Fältgruppsinställningar

Ge din nya fältgrupp en titel och låt den endast visas på produktsidorna.

• "Meddelandetyp" är lika med "Produkt"

Lägg till ett första fält

Fortsätt genom att lägga till ett nytt fält för titeln på din första produktfördel.

• Fältetikett: Fördelstitel 1
• Fälttyp: text

Upprepa steget för de återstående fälten

Gör detsamma för de andra fördelarna med produkten och deras beskrivningar. Alla dessa fält kräver "Text" -fältstypen som tilldelats dem.

• Tjänstens namn 1
• Beskrivning av förmåner 1
• Tjänstens namn 2
• Beskrivning av förmåner 2
• Tjänstens namn 3
• Beskrivning av förmåner 3
• Tjänstens namn 4
• Beskrivning av förmåner 4

2. Lägg till fördelar till produkter

Öppna eller lägg till en ny produkt

När din fältgrupp och dina fält har skapats kan du lägga till produktfördelar i dina produkter på individuell nivå. Öppna en produkt efter eget val eller skapa en ny.

Fyll i fälten Produktfördelar

Och uppfylla fördelarna med produkten.

3. Skapa en produktsidamall i Divi Theme Builder

Gå till Divi Theme Builder och lägg till en ny mall

Det är dags att börja med Divi! För att skapa en ny mall, gå till Divi Theme Builder och klicka på "Lägg till en ny mall".

Använd en mall på alla produkter

Vi använder den här mallen på alla produkter, men välj gärna produkter med en specifik kategori eller etikett istället.

Ange modellkroppsmallredigeraren

Ange sedan modellens kropp genom att klicka på "Lägg till en anpassad kropp" och välja "Skapa en anpassad kropp".

Redigera avsnitt 1

Bakgrundsfärg

När du är inne i mallredigeraren kommer du att märka ett avsnitt. Öppna det avsnittet och ändra bakgrundsfärgen till svart.

• Bakgrundsfärg: # 000000

avstånd

Gå vidare till sektionens designflik och lägg till vissa anpassade topp- och bottenunderlag.

• Topp stoppning: 10px
• Botten stoppning: 10px

Lägg till en ny rad

Kolumnstruktur

Låt oss fortsätta genom att lägga till en ny rad i avsnittet som har följande struktur:

avstånd

Utan att lägga till några mod, låt oss öppna radinställningarna och göra några avståndsjusteringar.

• Använd personlig ränna: Ja
• Rännbredd: 1
• Bredd: 90%
• Maximal bredd: 100%

avstånd

Ta bort alla inre avstånd uppifrån och ned.

• Hög intern marginal: 0px
• Låg intern marginal: 0px

Lägg till Woo Cart Notice-modulen i kolumnen

Dynamiskt innehåll

Den enda modulen vi behöver på den här raden och avsnittet är Woo Cart Notice-modulen. Se till att "Den här produkten" är valt i det dynamiska avsnittet.

• Produkt: Den här produkten

Färgbakgrund

Öppna sedan modulinställningarna och använd en transparent bakgrund.

• Bakgrundsfärg: rgba (0,0,0,0)

Textinställningar

Byt till fliken "Design" och ändra textstilsorten.

• Textsteckensnitt: Karla

Knappinställning

Avsluta insticksinställningarna genom att definiera stilinställningarna:

• Använd anpassade stilar för knapp: Ja
• Knapptextstorlek: 20px
• Knapptextfärg: # 000000
• Knappbakgrund: # ffd623
• Knappens bredd: 0px
• Avrundad kantknapp: 0px

• Knappsnitt: Oswald
• Knappsnittform: Skift

• Hög intern marginal: 20px
• Låg intern marginal: 20px
• Vänster intern marginal: 50px
• Intern högermarginal: 50px

Lägg till avsnitt 2

Lutningbakgrund

Lägg till ytterligare ett vanligt avsnitt under det föregående. Öppna sedan inställningarna och använd en gradientbakgrund enligt följande:

• Färg 1: # 000000
• Färg 2: #ffffff
• Startposition:
  • Skrivbord: 30%
  • Tablett: 57%
  • Telefon: 54%
• Slutposition:
  • Skrivbord: 30%
  • Tablett: 57%
  • Telefon: 54%

avstånd

Låt oss gå till fliken Design och lägga till en hög intern marginal.

• Topp stoppning: 150px

Lägg till en ny rad

Kolumnstruktur

Fortsätt genom att lägga till en ny rad med samma struktur som visas nedan:

dimensionering

Utan att lägga till några mods ännu, öppnar vi inställningarna och ändrar avståndet enligt följande:

• Använd anpassade rännor: Ja
• Rännutrymme: 1
• Bredd: 95%
• Maximal bredd: 2560px
• Linjejustering: centrum

Förband

Vi kommer också att ta bort den övre inre marginalen.

• Topp stoppning: 0px

Huvudelementet

Och för att centrera innehållet i kolumnen på skrivbordet använder vi två rader CSS-kod i huvudelementet i radmodulen.

Desktop:

display: flex; align-items: center;

Surfplatta & telefon:

display: block;

Lägg till Woo Image-modulen i kolumn 1

Dynamiskt innehåll

Det är dags att lägga till moduler, vi börjar med Woo Images-modulen i kolumn 1. Se till att ”Den här produkten” är vald.

• Produkt: Den här produkten

Vertikal rullningsanimeringseffekt

Vi lägger till subtil rörelse i bilden med hjälp av den horisontella rörelse-rullningseffekten på den avancerade fliken.

• Aktivera vertikal rörelse: Ja
• Starta offset:
  • Kontor: -4
  • Tablet och telefon: 0
• Genomsnittlig offset: 0
• Slutförskjutning: 0
• Trigger motion-effekt: mitt i elementet

Lägg till Woo-titelmodulen i kolumn 2

Dynamiskt innehåll

I kolumn 2 är den första moden vi behöver en Woo-titelmod. Se till att "Den här produkten" har valts i området för dynamiskt innehåll.

• Produkt: Den här produkten

Titeltextinställningar

Gå sedan till fliken design och utforma titeltexten enligt följande:

• Titel typsnitt: Oswald
• Titelstilsstil: versaler
• Titelfärg: # ffd623
• Titeltextstorlek: 80px

avstånd

Slutför Woo-titelmodulen genom att lägga till vänster- och högermarginaler.

• Vänster marginal: 5%
• Höger marginal: 5%

Lägg till Woo-beskrivningsmodulen i kolumn 2

Dynamiskt innehåll

Låt oss gå vidare till nästa modul, som är en Woo-beskrivningsmodul. Vi använder följande dynamiska innehåll för detta:

• Produkt: Den här produkten
• Beskrivningstyp: Kort beskrivning

Textinställningar

Byt till fliken moduldesign och ändra textinställningarna i enlighet med detta:

• Textsteckensnitt: Karla
• Textfärg: #dbdbdb
• Textstorlek: 17 px (skrivbord och surfplatta), 15 px (telefon)
• Textradhöjd: 1,9 em

dimensionering

Ändra sedan bredden på olika skärmstorlekar.

• Bredd: 59% (skrivbord), 82% (surfplatta och telefon)

avstånd

Slutför Woo-beskrivningsmodulen genom att lägga till anpassade marginalvärden i avståndsinställningarna.

• Övre marginal: 50px
• Nedre marginal: 100px
• Vänster marginal: 5%
• Höger marginal: 5%

Lägg till Blurb-modulen i 2-kolumnen

Dynamiskt innehåll

För att visa produktfördelarna som vi har lagt till i den första delen av denna tutorial kommer vi att använda Blurb-modulerna. Lägg till en första Blurb-modul och använd det dynamiska innehållet i den första fördelen som produceras för titeln och kroppen.

• Titel: Fördelningsavdelning 1
• Kropp: Fördelningsbeskrivning 1

Ladda upp bild

Ladda upp en bild eller använd en ikon du väljer. Du kan hitta de som vi har använt under hela denna tutorial i den nedladdningsmapp som du kunde ladda ner i början av denna tutorial.

Inställningar för bild / ikon

Gå vidare till modulens designflik och ändra bild / ikoninställningarna enligt följande:

• Bild / Ikon Placering: Överst
• Bild / ikon Justering: Vänster

Titeltextinställningar

Vi ändrar titeltextinställningarna nästa.

• Titelstilsort: Oswald
• Titel Typsnitt stil: versaler
• Titeltextstorlek: 25px

Inställningar för kroppstext

Tillsammans med kroppsinställningarna.

• Body typsnitt: Karla
• Textstorlek: 17 px (skrivbord och surfplatta), 15 px (telefon)
• Kroppslinjens höjd: 1,9 em

dimensionering

Gå sedan till storleksinställningarna och ändra bredderna. Det är viktigt att använda en huvudbredd mindre än 50%, detta gör att vi kan visa två Blurb-moduler sida vid sida i nästa steg.

• Bildbredd: 25%
• Bredd: 49%

avstånd

Vi kommer också att lägga till utrymmen runt Blurb-modulen med anpassade utfyllnadsvärden på olika skärmstorlekar.

• Övre stoppning: 8%
• Nedre stoppning: 8%
• Vänster stoppning: 8% (skrivbord och surfplatta), 2% (telefon)
• Höger stoppning: 8% (skrivbord och surfplatta) 2% (telefon)

Huvudelement

Nu ska vi se till att Sammanfattningsmodulen visar texten bredvid varandra, i två steg. Först ser vi till att modulbredden är mindre än 50% (som vi gjorde i föregående steg). Därefter använder vi fastigheten på raden. Vi lägger till den här CSS-egenskapen på huvudelementet i det avancerade avsnittet.

display: inline-block;

Klona sammanfattningsmodulen 3 gånger

När du har slutfört den första Blurb-moden kan du klona den tre gånger. Du märker automatiskt att Blurb-modulerna visas i ett rutnät.

Redigera Blurb-modulbilderna

Redigera bilden i varje duplicerad Blurb-pod. Du hittar dem i nedladdningsmappen som du kanske har laddat ner i början av den här artikeln.

Ändra det dynamiska innehållet i Blurb-modulen

Ändra också det dynamiska innehållet i varje duplikat Blurb-modul.

• Titel: Tjänstens namn (2,3 eller 4)
• Kropp: beskrivning av fördelarna (2,3 eller 4)

Lägg gränser till Blurb-moduler individuellt

Blurb-modul 1-inställningar

För att avsluta utformningen av vårt nät kommer vi att lägga till gränser till Blurb-modulerna på en individuell nivå. Öppna den första Blurb-moden och använd en rak kant.

• Höger kantbredd: 1 st
• Höger kantfärg: # ffd623

Lägg också till en underkant till den första Blurb-modulen.

• Nedre kantbredd: 1 st
• Nedre kantfärg: # 000000

Blurb-modul 2-inställningar

Öppna sedan den andra Blurb-modulen och använd en underkant.

• Nedre kantbredd: 1 st
• Nedre kantfärg: # 000000

Blurb-modul 3-inställningar

Slutför nätdesignen genom att lägga till en rak kant till den tredje Blurb-modulen.

• Höger kantbredd: 1 st
• Höger kantfärg: # ffd623

Lägg till Woo Lägg i kundvagn Modul i kolumn 2

Dynamiskt innehåll

Den sista modulen vi behöver i vår design är en Woo Add to Cart-modul. Se till att "Den här produkten" har valts i området för dynamiskt innehåll.

• Produkt: Den här produkten

Fältinställningar

Gå till nästa designflik och ändra fältinställningarna.

• Fältets bakgrundsfärg: #ffffff
• Fälttextfärg: # 000000

• Rundade fält: 0px (alla hörn)
• Bredden på fältens nedre kant: 1px
• Färg på fältets nedre kant: # 000000

Knappinställningar

Ställ sedan in knappen i enlighet därmed:

• Använd anpassade stilar för knappen: Ja
• Knapptextstorlek: 20 pixlar
• Knappens textfärg: # 000000
• Knappens bakgrundsfärg: # ffd623
• Knappens bredd: 0px
• Knappens radie: 0px

• Knappsnitt: Oswald
• Knappsnittstil: versaler

• Övre stoppning: 20px
• Botten stoppning: 20px
• Vänster padding: 50px
• Höger stoppning: 50px

avstånd

Och slutför modulparametrarna genom att lägga till anpassade marginalvärden.

• Övre marginal: 100px
• Vänster marginal: 5%

3. Spara modifieringarna i temageneratorn och förhandsgranska resultatet

När du är klar med att utforma produktsidamallen kan du spara alla dina Theme Builder-ändringar och visa resultaten på dina produkter!

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.

Avslutande tankar

I den här artikeln har vi visat dig hur du blir kreativ med din nästa Divi-produktsidemall. Specifikt har vi visat dig hur du inkluderar ett dynamiskt produktnyttanät för att lägga till ytterligare fördelar på din produktsida. Vi skapade den här självstudien med Divi i kombination med plugin-programmet Advanced Custom Fields. Du kan också ladda ner JSON-filen gratis! Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarfältet nedan.

Hur du implementerar mörkt läge på din webbplats med Divi

ens Blair Jersyer | Juin 1, 2020 | Divi

Dark Mode fortsätter att bli populär som ett bekvämt alternativ för användare att uppleva webben med mindre belastning på ögonen. Låt oss inse det, vi tenderar alla att spendera mer tid på att stirra på skärmar än vad vi förmodligen borde, så någon extra bekvämlighet för användarupplevelsen (som mörkt läge) kan gå långt. 

Operativsystem, program och webbläsare inkluderar vanligtvis inbyggda funktioner i mörkt läge, men vissa utvecklare tar det till en annan nivå genom att inkludera en anpassad mörkupplevelse för sin webbplats. Tanken är att ta mer kontroll över hur deras webbplats ser ut i mörkt läge utan att behöva kompromissa med varumärke och / eller design.

I den här handledningen visar vi dig hur du skapar ett anpassat mörkt läge som växlar i Divi från grunden utan ett plugin. Med denna funktion för att växla i mörkt läge har du kontroll över designen för mörkt läge och har en bättre användarupplevelse skräddarsydd för ditt varumärke.

Låt oss börja!

undersökningen

Här är en förhandsgranskning av designen vi kommer att bygga i denna handledning.

Här är det anpassade mörka läget som vi ska skapa.

Och här är före och efter för mörkt läge tillämpat på en av våra fördefinierade layouter.

Och här är det mörka läget som läggs till i en global rubrik. Lägg märke till hur ljus / mörkt läge kvarstår när du surfar på webbplatsen.

Del 1: Bygga omkopplaren från mörkt läge

I den här första delen av handledningen ska vi bygga ett mörkt läge som växlar med en sida i Divi. När växeln har skapats med koden kommer du att kunna spara den i Divi-biblioteket och lägga till den på vilken plats som helst på din webbplats.

För att komma igång, lägg till en rad i en kolumn i standardavsnittet när du bygger från grunden med Divi på framsidan.

Lägg till sammanfattningsmodul

För att bygga den anpassade växeln kommer vi att designa en Blurb-modul med lite anpassad CSS.

Lägg till en ny presentationstextmodul till raden.

Innehåll

Ta bort standarddummyinnehållet för titeln och brödtexten. Lägg sedan till fyrkantig ikon istället för bilden.

Conception

Gå till designinställningarna och uppdatera följande:

• Ikonfärg: # 666666
• Justering av bild / ikon: vänster
• Ikonstorlek: 22 pixlar

• Bredd: 50px
• Justering av modulen: centrum
• Höjd: 25px

• Marginal: 0px låg
• Rundade hörn: 4px
• Kantbredd: 2px
• Kantfärg: # 666666

Anpassad CSS

När designen är på plats byter du till den avancerade fliken. Under Custom CSS, lägg till följande Custom CSS till huvudelementet för att se till att överflödet inte döljs av utformningen av de rundade hörnen.

överflöd: synligt! viktigt;

Lägg sedan till följande anpassade CSS i After-elementet:

innehåll: "lätt"; position: absolut; vänster: -35px; topp: 0px;

Detta lägger till en etikett till Blurb-modulen som vi kommer att ändra från "ljus" till "mörk" på klick.

Kroppstextdesign

Eftersom texten för post-pseudo-element ärver kroppstextstilarna, kan vi lägga till texttextstilarna med Divi-alternativen enligt följande:

• Kroppstypsnitt: Roboto
• Kroppens textfärg: # 666666
• Kroppstextstorlek: 13px
• Spacing av kroppens bokstäver: 1px

Lägga till anpassad kod med en kodmodul

För att lägga till den nödvändiga koden (CSS / JQuery) för att använda den mörka lägesomkopplingen kommer vi att använda en kodmodul.

Skapa en ny kodmodul under Blurb-modulen i samma kolumn.

Klistra sedan in följande kod i kodområdet:

/*** Dark Mode Toggle Styles*/.et-dark-mode {transition: all .5s;}.et-dark-toggle {cursor: pointer;transition: all .5s;}body.et-dark-mode .et-dark-toggle {border-color: #666666;}body.et-dark-mode .et-dark-toggle:after {content:"dark";color: #666666;left: 54px;}body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {text-align:right;}body.et-dark-mode .et-dark-toggle .et-pb-icon {color: #666666;}/*** Body Dark Mode Style*/body.et-dark-mode {background-color: #23282d !important;}/*** Divi Element Dark Mode Styles** Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".*//* Section with dark mode */.et_pb_section.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;background-blend-mode: overlay;transition: opacity .5s ease-in-out;color: #dddddd !important;}/* Row with dark mode */.et_pb_row.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Column with dark mode */.et_pb_column.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Module with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode {background-color: transparent !important;color: #dddddd !important;}/* Text Headings with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,.et_pb_module.et-dark-mode-capable.et-dark-mode h1,.et_pb_module.et-dark-mode-capable.et-dark-mode h2,.et_pb_module.et-dark-mode-capable.et-dark-mode h3,.et_pb_module.et-dark-mode-capable.et-dark-mode h4,.et_pb_module.et-dark-mode-capable.et-dark-mode h5,.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {color: #dddddd !important;}function storageAvailable(type) {try {var storage = window[type],x = '__storage_test__';storage.setItem(x, x);storage.removeItem(x);return true;}catch(e) {return e instanceof DOMException && (// everything except Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.length !== 0;}}jQuery(document).ready(function($) {var storageAvailable = window.storageAvailable('sessionStorage');$(".et-dark-toggle").click(function() {$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");if ( storageAvailable ) {$("body").hasClass("et-dark-mode") ?sessionStorage.setItem('etDarkModeEnabled','1'):sessionStorage.removeItem('etDarkModeEnabled');}});if (storageAvailable) {'1' == sessionStorage.getItem('etDarkModeEnabled') ?$(".et-dark-mode-capable,body").addClass("et-dark-mode"):$(".et-dark-mode-capable,body").removeClass("et-dark-mode");}});

Lägga till anpassade CSS-klasser

Anpassad kod kräver att du lägger till en anpassad CSS-klass i Blurb-modulen eller växeln. Detta gör det möjligt för blurb att utlösa funktionerna för att växla och klicka på mörkt läge.

Blurb modul klass

Öppna inställningarna för Blurb-modulen och lägg till en anpassad CSS-klass enligt följande:

• CSS-klass: et-dark-toggle

Klass med mörkt läge

Vi måste också lägga till en anpassad CSS-klass till varje Divi-element som vi vill ha möjlighet för mörkt läge. När elementet väl har CSS-klassen ärver det det anpassade CSS "mörka läget" i koden som vi lade till efter att mörkt läge var aktiverat. Denna metod ger oss mer kontroll över vår design i mörkt läge, eftersom vissa element kanske inte behöver stylas i mörkt läge.

Till att börja med kan vi lägga till mörkt läge till det avsnitt som innehåller vårt mörka läge växla.

Öppna sektionsparametrarna och lägg till följande CSS-klass:

• CSS-klass: et-dark-mode-kapabel

Del 2: Lägga till Dark Mode-funktioner på en Divi-sida

Nu när vi har CSS-koden och klasserna på plats är vi redo att använda Dark Mode-funktionalitet och design på en hel sida i Divi. För att göra detta kommer vi att använda vår premade-layout för mobilappens målsida.

För att lägga till layouten öppnar du inställningsmenyn längst ner i den visuella byggaren och klickar på ikonen Lägg till ny layout.

Välj sedan layouten för mobilappens målsida från fliken Fördefinierade layouter.

Se till att alternativet "Ersätt befintligt innehåll" INTE är valt. Du vill inte radera avsnittet med växla i mörkt läge.

Eftersom stilen för mörkt läge endast kommer att gälla för element med CSS-klassen "kapabel och mörk-läge", kan vi välja att lägga till sidan på olika sätt.

1. Vi kan lägga till CSS-klassen till varje element på sidan separat.
2. Vi kan utöka CSS-klassen till element över hela sidan (det skulle vara snabbare än att göra det manuellt). Vi kan till exempel öppna sektionsinställningar för det översta avsnittet och utöka CSS-klassen för det avsnittet till alla avsnitt på sidan.
3. Vi kan lägga till CSS-klassen i elementets globala standardvärden. Detta kommer att tillämpa CSS-klassen på alla webbplatsövergripande element och lägga till mörkt läge för hela webbplatsen. Vi kan till exempel öppna sektionsinställningar och klicka på den globala standardikonen för att ändra standardvärdena för globala avsnitt. Sedan kan vi lägga till CSS-klassen och registrera den som en CSS-klass för alla delar av webbplatsen.

Lägga till CSS-klassen till sidelement

I det här exemplet uppdaterar vi sidelementen genom att lägga till CSS-klassen i globala standardvärden i avsnitt och textmoduler. Och vi kommer också att göra några tillägg till de andra elementen på sidan när vi går.

Alla avsnitt

För att lägga till CSS-klassen i alla sektioner, öppna inställningarna för den övre sektionen som innehåller växlingen för mörkt läge. Ändra sedan sektionens globala standardvärden och lägg till följande CSS-klass i avsnittet globala standardvärden:

• CSS-klass: et-dark-mode-kapabel

Alla specialiserade avsnitt

Lägg också till CSS-klassen till de globala standardvärdena i det specialiserade avsnittet.

Textmoduler

Öppna sedan inställningarna för en av textmodulerna på sidan och lägg till samma CSS-klass i de globala textinställningarna.

För att testa resultatet, gå till startsidan och klicka på det mörka läget för att växla högst upp på sidan.

Så här ska sidan se ut i klart läge.

Och här är hur sidan ska se ut i mörkt läge.

Ytterligare resurser

Här är andra resurser som kan vara av intresse för dig.

• Hur man anpassar typografi och layout på Divi
• Hur du lägger till ett avslöjbart glidande samtal till handling på Divi
• Så här anpassar du elementen på samma rad på Divi
• Så här skapar du animerade sektioner genom att klicka på Divi Builder

Avslutande tankar

Att utrusta din Divisida med en anpassad växling i mörkt läge kan vara ett bra sätt att öka användarupplevelsen och skapa en helt ny design som både glädjer och lindrar ögat. Jag hoppas att detta kommer att vara användbart för dig.