Gå till innehållet

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

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

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.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

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.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
0 aktier
del
tweet
Enregistrer