Vedieť, ako pridať dynamický nadpis stránky a slogan do globálnej hlavičky Divi, bude užitočné pri vytváraní webových stránok Divi. Existuje na to niekoľko dobrých dôvodov. Na jednej strane nie všetky stránky majú logo. Názov stránky je dobrou náhradou loga. Ďalším dôvodom je posilniť vašu značku vložením dôležitých informácií na vaše stránky, kde ich uvidí každý.
V tomto tutoriáli si ukážeme, ako pridať dynamický nadpis a slogan stránky do globálnej hlavičky Divi. Toto riešenie dynamicky extrahuje názov a slogan stránok z backendu WordPress. Navyše budete mať k dispozícii všetky výkonné možnosti Divi, ktoré vám umožňujú prispôsobiť názov a slogan, ako len chcete!
Možný výsledok
Tu je ukážka dizajnu, ktorý vytvoríme v tomto návode.
Všimnite si nadpis a slogan stránky v strede hore, ktorý sa zobrazuje dynamicky.
Stiahnutie zdarma
Pripojte sa k Divi Newlsetter a my vám pošleme e-mailom kópiu Divi Ultimate Landing Page Layout Pack a veľa ďalších zdroje, bezplatné a úžasné Divi tipy a triky. Nasledujte ho a za chvíľu budete majstrom Divi. Ak ste už prihlásený / -á na odber, jednoducho zadajte svoju e-mailovú adresu a kliknutím na tlačidlo Prevziať otvorte balík s rozložením.DOWNLOAD
Ak chcete šablónu importovať, prejdite do časti Divi> Generátor tém.
Kliknite na ikonu prenosnosti v pravom hornom rohu stránky.
V rozbaľovacom okne prenosnosti vyberte kartu import a vyberte súbor na stiahnutie z počítača.
Potom kliknite na tlačidlo importovať.
Po dokončení bude šablóna celkovej hlavičky k dispozícii v nástroji Divi Theme Builder.
V nasledujúcom texte sa presunieme k dizajnu.
Názov stránky a slogan na WordPress
Každý web vo formáte WordPress má názov a slogan. Názov stránky je v podstate názov stránky a slogan je krátka fráza, ktorá zvyčajne vysvetľuje, o čo sa jedná.
Nie je nezvyčajné pridať názov stránky pri inštalácii WordPress a zabudnúť na ňu.
A niektorí ľudia si ani neuvedomujú, že slogan existuje, nieto aby si našli čas na jeho aktualizáciu. Navyše, pri použití Divi téma, názov lokality a slogan sa na vašej lokalite predvolene nezobrazia, takže je ľahké ich prehliadnuť. Názov stránky a slogan sú však základnými prvkami webovej stránky a vyhľadávače ich rozpoznajú.
Nadpis a slogan stránok vo WordPress môžete kedykoľvek nájsť a aktualizovať tak, že prejdete na informačný panel WordPress a prejdete do časti Nastavenia> Všeobecné.
Alebo si môžete zvoliť inú trasu pomocou nástroja na prispôsobenie tém a aktualizovať názov stránky v rámci všeobecných nastavení.
Teraz, keď vieme, kde je názov stránky a slogan na backende WordPress, preskúmajme, ako ich môžeme pridať do hlavičky Divi!
Ako pridať dynamický názov stránky a slogan do globálnej hlavičky v časti Divi
Importuje sa vopred navrhnutá globálna šablóna hlavičky
V tomto výučbe sa zameriame na to, ako pridať dynamický nadpis a slogan stránky do existujúcej hlavičky namiesto vytvárania úplnej hlavičky úplne od začiatku. Ušetrí vám to čas a zvýši prehľadnosť. Takže na spustenie tohto návrhu hlavičky budeme importovať preddefinovanú globálnu šablónu hlavičky z našej štvrtý generátor tém .
Akonáhle budete mať stiahol si balík vytvorenie téma , rozbaľte súbor a nájdite súbor JSON z šablóna webovej stránky Default.
Potom choďte na Divi> Theme Builder.
Kliknite na ikonu prenosnosti vpravo hore. V kontextovom okne prenosnosti vyberte súbor JSON z šablóna webovej stránky predvolené a kliknite na tlačidlo Importovať.
Po pridaní šablóny do nástroja na tvorbu tém odstráňte šablónu päty a kliknutím upravte celkovú hlavičku.
Pridanie názvu a sloganu dynamického webu do hlavičky
V editore rozloženia šablón uvidíte vopred pripravenú hlavičku. Hneď môžeme začať robiť prispôsobenie.
Presunúť logo
Začnite potiahnutím obrazového modulu, ktorý zobrazuje logo (dynamicky), zo stredného stĺpca horného riadku do ľavého stĺpca horného riadku.
Pridajte modul výzvy na akciu, aby sa zobrazil nadpis a slogan webu
Potom pridajte do stredného stĺpca horného riadku (kde bolo logo) nový modul Výzva na akciu.
Na zobrazenie názvu a sloganu stránky použijeme modul Výzva na akciu.
Ale skôr ako začnete pridávať obsah, najskôr vyberte NIE, aby ste mohli použiť farbu pozadia.
Pridajte dynamický názov stránky
V nastaveniach obsahu umiestnite kurzor myši na pole na zadávanie nadpisov a kliknite na ikonu „Použiť dynamický obsah“. Potom v zozname vyberte možnosť „Názov stránky“.
Pridajte dynamický slogan stránok
Potom umiestnite kurzor myši na oblasť tela a vyberte ikonu „Použiť dynamický obsah“. Potom v zozname vyberte možnosť „Slogan stránky“.
Pridajte dynamický odkaz na domovskú stránku
Je bežné, že názov stránky po kliknutí presmeruje na domovskú stránku, najmä ak vymieňate logo. Ak chcete presmerovať celý kurz na domovskú stránku, pridajte odkaz na domovskú stránku ako dynamický obsah do adresy URL odkazu na kurz.
Dizajn textu názvu a sloganu webu
Teraz sa v záhlaví dynamicky zobrazuje názov a nadpis stránky. Teraz musíme len pridať štýl. Nezabudnite, že pre prispôsobenie názvu nadpisu je potrebné prispôsobiť názov stránky a text tela, aby navrhol slogan.
Prejdite na kartu Návrh a aktualizujte nasledujúce informácie:
- Písmo názvu: Heebo
- Hmotnosť písma názvu: tučné
- Štýl písma názvu: TT
- Veľkosť textu nadpisu: 32 pixelov (stolné počítače), 24 pixelov (tablety a telefóny)
- Rozstup nadpisu: 0.3m
- Text tela: Roboto
- Telo písma: kurzíva
- Farba textu tela:
- Veľkosť textu tela: 13 pixlov
- Medzerník: 0.1em
- Výška línie tela: 1m
Ak chcete pomôcť s centrovaním, odstráňte predvolené odsadenie pod textom tela pridaním nasledujúceho vlastného CSS do popisu propagácie:
čalúnenie: 0px
Dodatočné úpravy dizajnu
V tejto poslednej časti tutoriálu sa chystáme vykonať niekoľko ďalších úprav návrhu hlavičky, aby sa zabezpečilo, že položky zostanú vertikálne vycentrované v každom stĺpci a prepožičia tlačidlu jedinečný dizajn. K tagline tiež pridáme pred a za ostrú čiaru (len pre kopy).
Vertikálne centrovanie stĺpcov / obsahu
V súčasnosti je horný riadok aktívny „Vyrovnávať výšky stĺpcov“, ktorý využíva vlastnosť flex. Na to môžeme zarobiť pridaním malého css úryvku, aby sme sa ubezpečili, že všetky stĺpce zostávajú vertikálne vycentrované v rámci riadku. Ak to chcete urobiť, otvorte nastavenia pre horný riadok a do hlavného prvku pridajte nasledujúci CSS:
Zarovnať položky: stred;
Aktualizácia stĺpca pomocou tlačidla
Ďalej otvorte nastavenia pre stĺpec 3 v hornom riadku a vyberte farbu pozadia a výplň.
Aktualizácia pozadia tlačidla
Potom otvorte nastavenie modulu tlačidla a aktualizujte pozadie o nový gradient pozadia nasledovne:
- Gradient background Ľavá farba: #ffffff
- Farba gradientu na pravom pozadí: # 1dbf73
- Smer sklonu: 135deg
- Počiatočná pozícia: 10%
- Koncová pozícia: 0%
Pridanie pred a za znaky do sloganu
Každý prvok dynamického obsahu je možné zmeniť kliknutím na ikonu ozubeného kolieska. Ak chcete do sloganu pridať znaky pred a za, otvorte nastavenia modulu výzvy na akciu obsahujúceho slogan a kliknite na ikonu úprav v dynamickom obsahu sloganu webu. Potom pridajte znaky k položkám pred a za.
Konečný výsledok
Ak chcete vidieť výsledok, otvorte ľubovoľnú stránku na vašom webe. Mali by ste vidieť nádherný názov a slogan dynamického webu!
záverečné myšlienky
Je naozaj pekné, že môžete prispôsobiť celkovú hlavičku pomocou dynamického názvu a sloganu stránky. Zdá sa to ako niečo, čo bude užitočné pre mnoho webov. Páči sa mi tiež myšlienka zahrnúť okrem loga aj názov a slogan webu, aby bolo značka ešte silnejšie.
zdroj: Elegantná tému
