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

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

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.

Dynamisk sidrubrik global rubrikmall 6

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

Exempel på modifiering av Divi-titel

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.

Välj en divimall

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

Ändra global divi-rubrik

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.

Anpassa divititeln

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.

Anpassa wordpress-identitet

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.

Import av Divi-modell

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

Ta bort mallen från sidfoten

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

Anpassa uppmaningen

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.

Konfigurera uppmaningsåtgärder

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 slogan för divisidor

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.

Lägg till en länk till hemsidan

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
Anpassa divi-teckensnitt

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
Lägg till anpassad divi-css-kod

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.

Anpassa divi-kontaktknappen

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%
Anpassa bakgrunden till divi-knappen

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.

Visa divislogan

Slutresultat

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

Slutresultat divi

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

Hur man skapar en sömlös övergång med rullningseffekter på 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.

Övergång mellan sektionsdel

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
Divi-parameteravsnitt

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
Konfiguration av divi-avstånd

avstånd

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

  • Övre marginal: 200px
  • Nedre marginal: 200px
Konfiguration av divi-linjeavstånd

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.

Våra tjänster som erbjuds av just nu experterna

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
Chef divi polis

avstånd

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

  • Nedre marginal: 50 pixlar (endast surfplatta och telefon)
Konfiguration av divi-textavstånd

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.

Textruta för innehållsdivi

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
Divi-textparameter

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
Synlig avdelare

Linje

Ändra sedan modulens linjefärg.

  • Linjefärg: # 000000
Avdelningsfärgbakgrund

dimensionering

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

  • Divider vikt: 3px
  • Bredd: 28%
Divi separator storlek

avstånd

Vi lägger också till en toppmarginal.

  • Övre marginal: 10px
Divi separator modulavstånd

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
Avsnitt 2 divi-avstånd

överflöden

Göm också överflödet.

  • Horisontellt överflöde: dold
  • Vertikalt överflöde: dold
Göm divi-modulen överflöd

Lägg till en ny rad

Kolumnstruktur

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

Välj en divi-layout

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
Divisionsektion för rännsten

avstånd

Ta sedan bort all standard övre och nedre stoppning.

  • Övre stoppning: 0px
  • Botten stoppning: 0px
Avståndsinställningar för Divi 1-radmodul

Inställningar för kolumn 1

Bakgrundsfärg

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

  • Bakgrundsfärg: # f7f7f7
Divi line modul bakgrundskonfiguration

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%
Radmodulens kolumninställningar

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)
Avståndsinställningar för divi-modul

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
Visa separator för divi 1

Linje

Ändra sedan modulens linjefärg.

  • Linjefärg: # 000000
Divi separator inställningar

dimensionering

Ändra även storlek på parametrarna.

  • Divider vikt: 3px
  • Bredd: 50%
Divi separator storlek

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.

Inställning av Divi-innehållsavsnitt

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.

Inställning av Divi-textmodul

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
Justering av teckensnitt för Divi-textform

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.

Inställning av textmodulinnehåll

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
Inställning av stil för Divi-knapp
  • Knappsnitt: kvartalsvis
  • Knappsnittets vikt: fetstil
Färginställningar för Divi-knappen

avstånd

Lägg också till anpassad stoppning.

  • Övre stoppning: 50px
  • Botten stoppning: 50px
  • Vänster padding: 100px
  • Höger stoppning: 100px
Inställningar för avstånd för divi-modulknapp

Placera

Och placera om knappen i enlighet därmed:

  • Position: Absolut
  • Plats: längst ner till vänster
Divi-knappmodulens positionsjustering

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.

Klon divi-modul

Ändra allt innehåll

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

Redigera innehållet i avsnittet

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
Använd divi-rullningseffekter

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
Konfigurera delningsavsnitt för blek animering

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
Divi-rullning aniation konfiguration

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
Divi line bleknar animering

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
Divi line-modul rullningsanimering

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
Divi line-modulens utseende animationsinställningar

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.

Slutlig demo

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

Hur man skapar en teammedlem som rullar karusell med 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.

Bläddra divi teammedlem

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)
Parameterkonfiguration

ö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
Konfiguration av överflöde

Lägg till rad 1

Kolumnstruktur

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

Välj divi-layout

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
Divi line parameter

avstånd

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

  • Övre stoppning: 100px
  • Botten stoppning: 100px
Konfiguration av linjeavstånd

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.

Möt teamet

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)
Divi textavstånd

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
Visa diviseparator

Linje

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

  • Linjefärg: # edf000
  • Linjestil: solid
  • Linjeposition: överst
Divi-avståndsstil

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
Storleksdelningslinjemodul

Lägg till en rad # 2

Kolumnstruktur

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

Divi-kolumnkonfiguration

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%
Rännans breddkonfiguration

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)
Konfiguration av linjeavståndsstil

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.

Divi-parameterradkonfiguration

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
Divi bakre kolonnkonfiguration

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
Lägg till bakgrundsbild för divikolumn

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;
Kod css divi kolumn

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.

Personnamn divi

Radera bild

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

Ta bort divi-bilden

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
Konfiguration av personmodulens bakgrund

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%
Divi-modul titel anpassning

Inställningar för kroppstext

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

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

Position textinställningar

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

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

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%
Divi person modulavstånd

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)
Avstånd för ändring av linjedivi

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
Konfiguration för animering av divi-rullning

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

Bläddra divi teammedlem

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

Hur du lägger till fler ikoner på sociala medier i 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:

Sociala ikoner divi

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 .

Alternativ för temadivi

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.

Divi wordpress

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.

Divi-artikelskapande

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.

Divi gutenberg layout

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.

Insättning av modul följer på sociala medier

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 .

Lägg till sociala nätverk sociala modul divi

Välj sedan en i listrutan.

Lägg till ett nytt socialt nätverk

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.

Anpassa sociala nätverk-knappen

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.

Anpassa sociala ikoner

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 .

Följ oss knappen divi

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.

Divi-knappen följer oss

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.

Divi-byggare

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 .

Lägg till en divi-modell

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

Divi-layout

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 .

Välj den sociala modulen

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.

Social ikon media modul divi

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

Utseende på divi med delningsknapp

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.

Divi social delningsmodul flytta

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.

sidofält ikoner

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.

Anpassning tema divi layout

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.

Lägg till en global sidfot

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

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

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.

Möjlig resultatdelning

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 .

Installera adavanced anpassade fält plugin

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.

Skapa ACF-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 regler

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
Lägg till AC-fält
Divi-fältanpassning

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
Konfigurera ACF-fält

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.

Divi produkt skapande

Fyll i fälten Produktfördelar

Och uppfylla fördelarna med produkten.

Fyll i fälten för divi-fördelar

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

Divi temabyggare

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.

Lägg till alla woocommerce-produkter

Ange modellkroppsmallredigeraren

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

Bygga divi 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
Divi-sektionens bakgrundskonfiguration

avstånd

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

  • Topp stoppning: 10px
  • Botten stoppning: 10px
Konfiguration av avdelningsavstånd

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:

Konfiguration av linjemodullayout

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%
Inställningar för linjemodulavstånd

avstånd

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

  • Hög intern marginal: 0px
  • Låg intern marginal: 0px
Avståndsinställningar för Divi Line-modul

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
Inställningar woo cart meddelandemodul divi

Färgbakgrund

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

  • Bakgrundsfärg: rgba (0,0,0,0)
Woo-vagnmodulens divi-inställningar

Textinställningar

Byt till fliken "Design" och ändra textstilsorten.

  • Textsteckensnitt: Karla
Divi-modul typsnitt inställningar

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
Färginställningar för Woo-varningsmeddelande
  • Knappsnitt: Oswald
  • Knappsnittform: Skift
Woo kundvagn meddelande modul färgdesignjustering
  • Hög intern marginal: 20px
  • Låg intern marginal: 20px
  • Vänster intern marginal: 50px
  • Intern högermarginal: 50px
Konfigurationsdesignmodul woo-kundmeddelande

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%
Divi line modul bakre justering

avstånd

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

  • Topp stoppning: 150px
Konfiguration av avstånd för Divi Line-modul

Lägg till en ny rad

Kolumnstruktur

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

Konfiguration av Divi-linjestil

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
Avdelningsmodul för rännsten

Förband

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

  • Topp stoppning: 0px
Divi-modulavståndskonfiguration

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;
Inställningar för Divi Line-modulstil

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
Woocommerce produktbildsinställningar

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
Justering av Divi-bildmodul

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
produkt fördelar rutnät

Titeltextinställningar

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

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

avstånd

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

  • Vänster marginal: 5%
  • Höger marginal: 5%
Inställning av Divi-titelmodul

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
Produktbeskrivningsmodulinställningar

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
Färgjusteringsmodul beskrivning divi

dimensionering

Ändra sedan bredden på olika skärmstorlekar.

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

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%
Divi produktbeskrivningsmodul

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
Textinställning för Divi-sammanfattningsmodul

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.

Bildmodul Sammanfattning divi konfiguration

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
Divi-justeringsmodul

Titeltextinställningar

Vi ändrar titeltextinställningarna nästa.

  • Titelstilsort: Oswald
  • Titel Typsnitt stil: versaler
  • Titeltextstorlek: 25px
Konfigurera teckensnitt för divi-sammanfattningsmodul

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
Konfigurera sammanfattning av textmodul div

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%
Konfigurera dimensionering av divi-sammanfattningsmodul

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)
Konfigurera avståndet för divisammanfattningsmodul

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;
Lägg till CSS-kod divi-modul

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.

Produktnamn divi avsnitt

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.

Divi sammanfattningsmodulbild

Ä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)
Divi-sammanfattningsmodulregler

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
Sammanfattningsmodul för rundad kantkonfiguration

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

  • Nedre kantbredd: 1 st
  • Nedre kantfärg: # 000000
Konfigurera divi-bottenmarginalen
Blurb-modul 2-inställningar

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

  • Nedre kantbredd: 1 st
  • Nedre kantfärg: # 000000
Sammanfattningsdel för konfigurationsgränsmodul
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
produkt fördelar rutnät

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
Lägg till inställningarna för kortdelmodulen

Fältinställningar

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

  • Fältets bakgrundsfärg: #ffffff
  • Fälttextfärg: # 000000
Konfigurera stilfärgmodul lägg till i kundvagnen
  • Rundade fält: 0px (alla hörn)
  • Bredden på fältens nedre kant: 1px
  • Färg på fältets nedre kant: # 000000
Konfigurera avståndet mellan delar

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
Konfigurera divi-knappdesign
  • Knappsnitt: Oswald
  • Knappsnittstil: versaler
Konfigurera divi-knappen
  • Övre stoppning: 20px
  • Botten stoppning: 20px
  • Vänster padding: 50px
  • Höger stoppning: 50px
Konfigurera dimensionering av divi-modul

avstånd

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

  • Övre marginal: 100px
  • Vänster marginal: 5%
Konfigurera divi-avstånd

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!

Spara divi-design
Spara divi-modifieringar

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.

Demoresultat

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

Hur du implementerar mörkt läge på din webbplats med 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.

Växla mörkt läge

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.

Divi avsnitt

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.

Divi sammanfattningsmodul

Conception

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

  • Ikonfärg: # 666666
  • Justering av bild / ikon: vänster
  • Ikonstorlek: 22 pixlar
Konfiguration av Divi-ikon
  • Bredd: 50px
  • Justering av modulen: centrum
  • Höjd: 25px
Konfiguration av delningsstorlek
  • Marginal: 0px låg
  • Rundade hörn: 4px
  • Kantbredd: 2px
  • Kantfärg: # 666666
Divi kantkonfiguration

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.

Divi-växlingsknapp

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
Växlingsknapp för teckensnitt

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.

Lägg till kodmodul

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
Divi CSS-kod

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
Css-väljardivisektion

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.

Välj layout 1 divi

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.

Lägg till i alla specialavdelningar

Textmoduler

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

Lägg till i textmoduler

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.

Rensa läge

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

Mörkt läge

Ytterligare resurser

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

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.