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.
Bemærk webstedets titel og tagline øverst i midten af overskriften, der vises dynamisk.
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.
Når den er afsluttet, vil den overordnede headerskabelon være tilgængelig i Divi Theme Builder.
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.
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.
Eller du kan tage en anden rute ved hjælp af tematilpasseren til at opdatere webstitens titel under de generelle indstillinger.
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.
Når skabelonen er føjet til temabyggeren, skal du slette sidefodskabelonen og klikke for at redigere den overordnede overskrift.
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).
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.
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.
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 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.
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
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
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;
Opdatering af kolonnen med knappen
Åbn derefter indstillingerne for kolonne 3 i den øverste række og tag baggrundsfarve og polstring ud.
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%
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.
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!
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