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 Nyhetsbrev så skickar vi en kopia av Divi Ultimate Landing Page Layout Pack med e-post, plus massor av mer medel, gratis och fantastiska Divi tips och tricks. Följ den så blir du en 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 tagline existerar, än mindre ta sig tid att uppdatera den. Dessutom, när du använder Divi-tema, kommer webbplatsens titel och tagline inte att vara synliga på din webbplats som standard, så det är lätt att förbise dem. Däremot är webbplatsens titel och slagord väsentliga delar av webbplatsen och kommer att kännas igen av sökmotorer.
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 hitta JSON-filen för webbplats mall Standard.
Gå sedan till Divi> Theme Builder.
Klicka på portabilitetsikonen uppe till höger. I popup-portabilitetsfönstret väljer du JSON-filen från webbplats mall standard och klicka 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
