Znalost přidání dynamického názvu webu a sloganu do globální záhlaví Divi bude užitečná při vytváření webových stránek Divi. A je k tomu několik dobrých důvodů. Na jedné straně ne všechny weby mají logo. Název webu je dobrá náhrada loga. Dalším důvodem je posílení vaší značky zahrnutím důležitých informací na vaše stránky, kde je uvidí každý.

V tomto kurzu vám ukážeme, jak přidat název a slogan dynamického webu do globálního záhlaví Divi. Toto řešení dynamicky extrahuje název a slogan webu z backendu WordPress. Navíc budete mít všechny výkonné možnosti designu Divi, abyste si mohli upravit název a slogan, jakkoli chcete!

Možný výsledek

Zde je ukázka designu, který postavíme v tomto tutoriálu.

Šablona globální hlavičky dynamického názvu webu 6

Všimněte si nadpisu a sloganu stránky uprostřed střední části záhlaví, které se dynamicky zobrazuje.

Příklad úpravy názvu Divi

Stažení zdarma

Připojte se k Divi Newlsetter a my vám zašleme e-mailem kopii balíčku Divi Ultimate Landing Page Layout Pack a spoustu dalších ressources, bezplatné a úžasné Divi tipy a triky. Následujte to a za chvíli budete Divi Masterem. Pokud jste již přihlášeni k odběru, jednoduše zadejte svou e-mailovou adresu a kliknutím na Stáhnout otevřete balíček rozvržení.DOWNLOAD

Chcete-li šablonu importovat, přejděte do části Divi> Generátor motivů.

Klikněte na ikonu přenositelnosti v pravém horním rohu stránky.

V rozevíracím okně přenositelnosti vyberte kartu importu a vyberte soubor ke stažení z počítače.

Poté klikněte na tlačítko import.

Vyberte divi šablonu

Po dokončení bude celková šablona záhlaví k dispozici v nástroji Divi Theme Builder.

Upravit globální záhlaví divi

V následujícím se přesuneme k designu.

Název webu a slogan na WordPress

Každý web WordPress má název webu a slogan. Název webu je v podstatě název webu a slogan je krátká fráze, která obvykle vysvětluje, o co se jedná.

Při instalaci WordPress není neobvyklé přidat název webu a zapomenout na něj.

Přizpůsobte si název divi

A někteří lidé si ani neuvědomují, že slogan existuje, natož aby si našli čas na jeho aktualizaci. Navíc při použití Divi téma, název webu a slogan nebudou na vašem webu ve výchozím nastavení viditelné, takže je snadno přehlédnete. Název webu a slogan jsou však základními prvky webu a vyhledávače je rozpoznávají.

Název a slogan webu můžete ve WordPressu kdykoli vyhledat a aktualizovat tak, že přejdete na řídicí panel WordPressu a přejdete na Nastavení> Obecné.

obecné nastavení wordpressu

Nebo můžete použít jinou cestu pomocí přizpůsobovače motivu a aktualizovat název webu v obecném nastavení.

Přizpůsobte si identitu wordpressu

Nyní, když víme, kde je název webu a slogan na backendu WordPress, prozkoumejme, jak je můžeme přidat do záhlaví Divi!

Jak přidat dynamický název webu a slogan do globální záhlaví v Divi

Import předem navržené šablony globálního záhlaví

V tomto tutoriálu se zaměříme na to, jak přidat název a slogan dynamického webu do existujícího záhlaví namísto vytvoření úplného záhlaví od začátku. Ušetří vám čas a zlepší přehlednost. Takže pro spuštění tohoto návrhu záhlaví importujeme předdefinovanou globální šablonu záhlaví z našeho čtvrtá sada generátorů témat .

Jakmile máte stáhl balíček vytvoření téma , rozbalte soubor a najděte soubor JSON šablona webových stránek výchozí.

Pak přejděte na Divi> Theme Builder.

Klikněte na ikonu přenositelnosti vpravo nahoře. Ve vyskakovacím okně přenositelnosti vyberte soubor JSON šablona webových stránek výchozí a klepněte na tlačítko Importovat.

Import modelu Divi

Jakmile je šablona přidána do nástroje pro tvorbu motivů, odstraňte šablonu zápatí a kliknutím upravte celkovou hlavičku.

Odebrat šablonu ze zápatí

Přidání názvu a sloganu dynamického webu do záhlaví

Uvnitř editoru rozložení šablony uvidíte předem připravenou záhlaví. Okamžitě můžeme začít provádět přizpůsobení.

Přesunout logo

Chcete-li začít, přetáhněte modul obrázku, který zobrazuje logo (dynamicky), ze středního sloupce horního řádku do levého sloupce horního řádku.

Přidejte modul výzvy k akci a zobrazte název a slogan webu

Poté přidejte nový modul Výzva k akci do prostředního sloupce horního řádku (kde bylo logo).

Přizpůsobte výzvu k akci

K zobrazení názvu a sloganu webu použijeme modul Výzva k akci.

Ale než začnete přidávat obsah, nejprve vyberte NE, chcete-li použít barvu pozadí.

Nakonfigurujte akce s výzvou k akci

Přidejte dynamický název webu

V nastavení obsahu umístěte kurzor na pole pro zadávání nadpisů a klikněte na ikonu „Použít dynamický obsah“. Poté v seznamu vyberte možnost „Název webu“.

Dynamická šablona divi 1

Přidejte dynamický slogan webu

Poté najeďte myší nad oblast těla a vyberte ikonu „Použít dynamický obsah“. Poté v seznamu vyberte možnost „Slogan webu“.

Přidejte slogan webu divi

Přidejte dynamický odkaz na domovskou stránku

Je běžné, že název webu po kliknutí přesměruje na domovskou stránku, zvláště pokud nahrazujete logo. Chcete-li přesměrovat celý kurz na domovskou stránku, přidejte odkaz na domovskou stránku jako dynamický obsah do adresy URL odkazu na kurz.

Přidejte odkaz na domovskou stránku

Návrh textu názvu a sloganu webu

Nyní se na záhlaví dynamicky zobrazuje název a popisek webu. Nyní musíme jen přidat styl. Nezapomeňte, že musíme upravit text nadpisu tak, aby byl navržen nadpis webu, a text těla, aby navrhoval slogan.

Přejděte na kartu Návrh a aktualizujte následující:

  • Písmo názvu: Heebo
  • Titulek písma: tučné
  • Styl písma názvu: TT
  • Velikost textu nadpisu: 32 px (na ploše), 24 pixelů (na tabletu a telefonu)
  • Rozmístění nadpisu: 0.3em
  • Tělo Font: Roboto
  • Styl písma těla: kurzíva
  • Barva textu těla:
  • Velikost textu: 13px
  • Mezera mezi písmeny: 0.1em
  • Výška linie těla: 1m
Přizpůsobte si titulní písmo divi

Chcete-li pomoci s centrováním, odstraňte výchozí výplň pod textem těla přidáním následujícího vlastního CSS do popisu propagace:

odsazení dole: 0px
Přidejte vlastní kód divi css

Další úpravy designu

V této poslední části tutoriálu provedeme některé další úpravy návrhu záhlaví, aby se zajistilo, že položky zůstanou vertikálně vystředěny v každém sloupci, a dá tlačítku jedinečný design. K tagline přidáme také před a za šikmý řádek (jen pro kopy).

Svisle centrování sloupců / obsahu

Právě teď je horní řádek aktivní „Vyrovnat sloupcové výšky“, který používá vlastnost flex. Můžeme to vydělávat přidáním malého fragmentu CSS, abychom se ujistili, že všechny sloupce zůstávají vertikálně vystředěny uvnitř řádku. Chcete-li to provést, otevřete nastavení pro horní řádek a do hlavního prvku přidejte následující CSS:

Zarovnat položky: střed;
Dynamický titulek divi

Aktualizace sloupce pomocí tlačítka

Dále otevřete nastavení pro sloupec 3 v horním řádku a odstraňte barvu pozadí a výplň.

Přizpůsobte tlačítko kontaktu divi

Aktualizace pozadí tlačítka

Poté otevřete nastavení modulu tlačítka a aktualizujte pozadí novým gradientem pozadí následujícím způsobem:

  • Pozadí přechodu Levá barva: #ffffff
  • Barva přechodu na pravé pozadí: # 1dbf73
  • Směr přechodu: 135deg
  • Počáteční pozice: 10%
  • Koncová pozice: 0%
Přizpůsobte pozadí tlačítka divi

Přidání před a za znaky do sloganu

Každý prvek dynamického obsahu lze změnit kliknutím na ikonu ozubeného kola. Chcete-li do sloganu přidat znaky před a za, otevřete nastavení modulu výzvy k akci obsahujícího slogan a klikněte na ikonu úprav v dynamickém obsahu sloganu webu. Poté přidejte znaky k položkám před a po.

Zobrazit slogan divi

Konečný výsledek

Chcete-li zobrazit výsledek, otevřete libovolnou stránku na vašem webu. Měli byste vidět nádherný název a slogan dynamického webu!

Konečný výsledek divi

Závěrečné myšlenky

Je opravdu hezké mít možnost přizpůsobit celkovou hlavičku pomocí dynamického názvu a sloganu. Zdá se to jako něco, co bude užitečné pro mnoho webů. Také se mi líbí myšlenka zahrnout kromě loga i název webu a slogan pro ještě silnější zastoupení značky.

Zdroj: Elegantní téma