Det er nyttigt, når man opretter Divi-websteder, at vide, hvordan man tilføjer en dynamisk sidetitel og et slogan til en global Divi-overskrift. Og der er et par gode grunde til at gøre det. På den ene side har ikke alle websteder et logo. En sitetitel er en god logoudskiftning. En anden grund er at øge dit brand ved at inkludere vigtige oplysninger på dit websted, hvor alle vil se det.

I denne vejledning viser vi dig, hvordan du tilføjer en dynamisk sidetitel og et slogan til et Divi globalt overskrift. Denne løsning udtrækker webstedets titel og tagline dynamisk fra WordPress-backend. Derudover har du alle Divis kraftfulde designmuligheder til at tilpasse titlen og sloganet, uanset hvad du vil!

Muligt resultat

Her er en forhåndsvisning af designet, vi vil bygge i denne tutorial.

Dynamisk sidetitel global header-skabelon 6

Bemærk webstedets titel og tagline øverst i midten af ​​overskriften, der vises dynamisk.

Eksempel på ændring af divi-titel

Gratis download

Tilmeld dig Divi Nyhedsbrevet, og vi sender dig en kopi af Divi Ultimate Landing Page Layout Pack, plus tonsvis mere ressourcer, gratis og fantastiske Divi tips og tricks. Følg den, og du bliver en Divi Master på ingen tid. Hvis du allerede er tilmeldt, skal du blot indtaste din e-mail-adresse nedenfor og klikke på download for at få adgang til layoutpakken.DOWNLOADE

For at importere skabelonen skal du gå til Divi> Temagenerator.

Klik på bærbarhedsikonet øverst til højre på siden.

I pop-up-vinduet til bærbarhed skal du vælge importfanen og vælge downloadfilen fra din computer.

Klik derefter på importknappen.

Vælg en divi-skabelon

Når den er afsluttet, vil den overordnede headerskabelon være tilgængelig i Divi Theme Builder.

Rediger global divi header

I det følgende vil vi gå videre til designet.

Webstedets titel og sloganet på WordPress

Hvert WordPress-websted har en sitetitel og en tagline. Webstedsnavnet er dybest set navnet på webstedet, og tagline er en kort sætning, der normalt forklarer, hvad det er.

Det er ikke ualmindeligt at tilføje sitetitel, når du installerer WordPress og glemme alt om det.

Tilpas divi-titel

Og nogle mennesker er ikke engang klar over, at tagline eksisterer, endsige tager sig tid til at opdatere den. Derudover, når du bruger Divi-tema, vil webstedets titel og tagline som standard ikke være synlige på dit websted, så det er nemt at overse dem. Sidens titel og tagline er dog væsentlige elementer på webstedet og vil blive genkendt af søgemaskiner.

Du kan til enhver tid finde og opdatere webstedets titel og tagline i WordPress ved at gå til WordPress-dashboardet og navigere til Indstillinger> Generelt.

generelle wordpress-indstillinger

Eller du kan tage en anden rute ved hjælp af tematilpasseren til at opdatere webstitens titel under de generelle indstillinger.

Tilpas wordpress identitet

Nu hvor vi ved, hvor sitetitel og slogan er på WordPress-backend, lad os undersøge, hvordan vi kan tilføje dem til en Divi-header!

Sådan føjes en dynamisk sidetitel og slogan til en global header i Divi

Import af den foruddesignede globale header-skabelon

Til denne vejledning vil vi fokusere på, hvordan du tilføjer den dynamiske webstetitel og tagline til en eksisterende header i stedet for at oprette en fuld header fra bunden. Det sparer tid og forbedrer klarheden. Så for at starte dette headerdesign importerer vi en foruddefineret global header-skabelon fra vores fjerde tema generator pakke .

Når du har det downloadede pakken med skabelse tema , pak filen ud og find JSON-filen til hjemmeside skabelon Standard.

Gå derefter til Divi> Theme Builder.

Klik på portabilitetsikonet øverst til højre. I pop op-portabilitetsvinduet skal du vælge JSON-filen fra hjemmeside skabelon standard og klik på knappen Importer.

Import af divi-model

Når skabelonen er føjet til temabyggeren, skal du slette sidefodskabelonen og klikke for at redigere den overordnede overskrift.

Fjern skabelonen fra sidefoden

Tilføjelse af en dynamisk sitetitel og tagline til overskriften

Inde i skabelonlayouteditoren vil du se den forhåndsindstillede overskrift, der allerede er designet. Vi kan begynde at foretage vores tilpasninger med det samme.

Flyt logo

For at starte skal du trække billedmodulet, der viser logoet (dynamisk) fra den midterste kolonne i den øverste række til den venstre kolonne i den øverste række.

Tilføj et opfordringsmodul for at få vist titlen på webstedet og tagline

Føj derefter et nyt opfordring til handling-modul til den midterste kolonne i den øverste række (hvor logoet var).

Tilpas opfordringen til handling

Vi bruger Call to Action-modulet til at vise sitetitel og tagline.

Men inden du begynder at tilføje indhold, skal du først vælge NEJ for at bruge baggrundsfarven.

Konfigurer opfordring til handling

Tilføj en dynamisk sidetitel

Hold markøren over titelindtastningsfeltet under indholdsindstillinger, og klik på ikonet "Brug dynamisk indhold". Vælg derefter "Sitetitel" på listen.

Dynamisk skabelon divi 1

Tilføj et dynamisk webstedsslogan

Hold derefter musen over kropsområdet, og vælg ikonet "Brug dynamisk indhold". Vælg derefter "Site Tagline" fra listen.

Tilføj et divisite-slogan

Tilføj et dynamisk startside-link

Det er almindeligt, at titlen på siden omdirigeres til hjemmesiden ved klik, især hvis du udskifter logoet. For at omdirigere hele kurset til hjemmesiden skal du tilføje linket til startsiden som dynamisk indhold til kursuslinkets URL.

Tilføj et link til startsiden

Design af webstitens titel og slogan-tekst

Nu vises webstittel og tagline dynamisk på overskriften. Alt hvad vi skal gøre nu er at tilføje noget styling. Husk, vi er nødt til at tilpasse titelteksten til at designe webstitens titel og kropsteksten for at designe tagline.

Spring over til designfanen, og opdater følgende:

  • Titeltype: Heebo
  • Titel Skriftvægt: Fed
  • Titel Font Style: TT
  • Titeltekststørrelse: 32px (desktop), 24px (tablet og telefon)
  • Afstand på titelbrev: 0.3 em
  • Kropsskrifttype: Roboto
  • Body font-stil: kursiv
  • Kropsfarve:
  • Kropsstørrelse: 13px
  • Afstand mellem kropsbrev og brev: 0.1 em
  • Body Line Højde: 1em
Tilpas divi-titelskrifttype

For at hjælpe med centrering skal du fjerne standardpolstringen under brødteksten ved at tilføje følgende brugerdefinerede CSS til Promo Description:

polstring-bund: 0px
Tilføj tilpasset divi css-kode

Yderligere designjusteringer

I denne sidste del af selvstudiet vil vi foretage nogle yderligere designjusteringer af overskriften for at sikre, at emnerne forbliver lodret centreret i hver søjle og for at give knappen et unikt design. Vi tilføjer også en før og efter squiggly linje til tagline (bare for spark).

Lodret centrering af kolonnerne / indholdet

Lige nu er den øverste række aktiv "Equalize Column Heights", der bruger flex egenskaben. Vi kan udnytte dette ved at tilføje et lille css-uddrag for at sikre, at alle kolonner forbliver lodret centreret inden for rækken. For at gøre dette skal du åbne indstillingerne for den øverste række og tilføje følgende CSS til hovedelementet:

align-items: center;
Dynamisk overskriftsdivi

Opdatering af kolonnen med knappen

Åbn derefter indstillingerne for kolonne 3 i den øverste række og tag baggrundsfarve og polstring ud.

Tilpas divi-kontaktknappen

Opdatering af knapbaggrunden

Åbn derefter knapmodulindstillingen, og opdater baggrunden med en ny baggrundsforløb som følger:

  • Gradient baggrund Venstre farve: #ffffff
  • Højre baggrundsgradientfarve: # 1dbf73
  • Gradientretning: 135deg
  • Startposition: 10%
  • Slutposition: 0%
Tilpas baggrunden for divi-knappen

Føjelse før og efter tegn til sloganet

Hvert element i dynamisk indhold kan ændres ved at klikke på tandhjulsikonet. For at tilføje før og efter tegn til sloganet skal du åbne indstillingerne for opfordringsmodulet, der indeholder sloganet, og klikke på redigeringsikonet på det dynamiske indhold i webstedets slogan. Føj derefter tegnene til posterne før og efter.

Vis divi-sloganet

Endelig resultat

For at se resultatet skal du åbne en hvilken som helst side på dit websted. Du skal se den dynamiske websteds titel og tagline vises smukt!

Slutresultat divi

endelige tanker

Det er virkelig rart, at du kan tilpasse et overordnet overskrift med en dynamisk sitetitel og tagline. Dette virker som noget, der vil være nyttigt for mange websteder. Jeg kan også godt lide ideen om at inkludere webstedets titel og tagline ud over logoet for endnu stærkere brandrepræsentation.

Kilde: Elegant tema