Znanje kako dodati dinamični naslov web stranice i slogan u Divi globalno zaglavlje bit će korisno pri izradi Divi web stranica. Postoji nekoliko dobrih razloga za to. S jedne strane, nemaju sve web lokacije logotip. Naslov web stranice dobra je zamjena za logotip. Drugi je razlog jačanje vaše marke uključivanjem vitalnih podataka na vašu web lokaciju gdje će ih svi vidjeti.
U ovom vodiču pokazat ćemo vam kako dodati dinamični naslov web stranice i slogan u globalno zaglavlje Divi. Ovo rješenje dinamički će izdvojiti naslov i slogan stranice iz pozadine WordPressa. Uz to, imat ćete sve moćne Divijeve mogućnosti dizajna za prilagodbu naslova i slogana kako god želite!
Mogući ishod
Ovdje je pregled dizajna koji ćemo graditi u ovom vodiču.
Zabilježite naslov i slogan web mjesta na vrhu sredine zaglavlja koji se dinamički prikazuje.
Besplatno preuzimanje
Pridružite se Divi Newlsetteru i poslat ćemo vam e-poštom kopiju Divi Ultimate Landing Page Layout Packa, plus mnoštvo drugih sredstva, besplatni i nevjerojatni Divi savjeti i trikovi. Slijedite ga i začas ćete postati Divi majstor. Ako ste već pretplaćeni, jednostavno unesite svoju adresu e-pošte u nastavku i kliknite preuzmi da biste pristupili paketu izgleda.preuzimanje
Da biste uvezli predložak, idite na Divi> Generator tema.
Kliknite ikonu prenosivosti u gornjem desnom dijelu stranice.
U skočnom prozoru za prenosivost odaberite karticu za uvoz i odaberite datoteku za preuzimanje s računala.
Zatim kliknite gumb za uvoz.
Jednom dovršen, cjelokupni predložak zaglavlja bit će dostupan u Divi Theme Builderu.
U nastavku teksta preći ćemo na dizajn.
Naslov stranice i slogan na WordPressu
Svaka WordPress stranica ima naslov stranice i slogan. Naslov web stranice u osnovi je naziv stranice, a slogan je kratka fraza koja obično objašnjava što je to.
Nerijetko je dodati naziv stranice prilikom instaliranja WordPressa i zaboraviti ga.
Neki ljudi čak i ne shvaćaju da slogan postoji, a kamoli odvojili vrijeme da ga ažuriraju. Osim toga, kada koristite Divi tema, naslov web-mjesta i slogan neće biti vidljivi na vašem web-mjestu prema zadanim postavkama, pa ih je lako previdjeti. Međutim, naslov stranice i slogan bitni su elementi web stranice i tražilice će ih prepoznati.
Naslov i slogan web lokacije možete pronaći i ažurirati u WordPressu u bilo kojem trenutku tako što ćete otići na WordPress nadzornu ploču i pomaknuti se do Postavke> Općenito.
Ili možete krenuti drugom rutom pomoću alata za prilagodbu tema da biste ažurirali naslov web mjesta u općim postavkama.
Sada kada znamo gdje su naslov i slogan web mjesta na WordPress pozadini, istražimo kako ih možemo dodati u Divi zaglavlje!
Kako dodati dinamičan naslov i slogan globalnom zaglavlju u Divi-ju
Uvoz unaprijed dizajniranog globalnog predloška zaglavlja
Za ovaj se vodič usredotočit ćemo na to kako dodati dinamični naslov web stranice i slogan postojećem zaglavlju, umjesto da stvaramo potpuno zaglavlje od nule. Uštedjet ćete vrijeme i poboljšati preglednost. Dakle, da bismo započeli ovaj dizajn zaglavlja, uvest ćemo unaprijed definirani globalni predložak zaglavlja iz našeg četvrti tematski generator .
Jednom je preuzeli paket od kreiranje tema , raspakirajte datoteku i pronađite JSON datoteku predložak web stranice Zadana.
Zatim idite na Divi> Graditelj tema.
Kliknite ikonu prenosivosti u gornjem desnom kutu. U skočnom prozoru prenosivosti odaberite JSON datoteku iz predložak web stranice zadano i kliknite gumb Uvezi.
Nakon što se predložak doda u graditelj tema, izbrišite predložak podnožja i kliknite za uređivanje ukupnog zaglavlja.
Dodavanje dinamičnog naslova web stranice i slogana u zaglavlje
Unutar uređivača izgleda predloška vidjet ćete već izrađeno unaprijed napravljeno zaglavlje. Prilagođavanja možemo započeti odmah.
Premjesti logotip
Za početak povucite modul slike koji prikazuje logotip (dinamički) iz srednjeg stupca gornjeg retka u lijevi stupac gornjeg retka.
Dodajte modul poziva na akciju za prikaz naslova web stranice i slogana
Zatim dodajte novi modul Poziv na akciju u srednji stupac gornjeg reda (tamo gdje je bio logotip).
Za prikaz naslova web stranice i slogana upotrijebit ćemo modul Poziv na akciju.
No prije nego što započnete s dodavanjem sadržaja, prvo odaberite NE da biste koristili boju pozadine.
Dodajte dinamičan naslov web lokacije
U postavkama sadržaja zadržite pokazivač iznad okvira za unos naslova i kliknite ikonu "Koristi dinamički sadržaj". Zatim s popisa odaberite "Naslov web mjesta".
Dodajte dinamički slogan web lokacije
Zatim zadržite pokazivač miša iznad područja tijela i odaberite ikonu "Koristi dinamički sadržaj". Zatim s popisa odaberite "Oznaka web mjesta".
Dodajte dinamičnu vezu na početnu stranicu
Uobičajeno je da naslov web mjesta preusmjeri na početnu stranicu, posebno ako zamjenjujete logotip. Da biste cijeli tečaj preusmjerili na početnu stranicu, dodajte vezu na početnu stranicu kao dinamički sadržaj na URL veze na tečaj.
Dizajn teksta naslova i sloga stranice
Sada se naslov i oznaka stranice dinamički prikazuju na zaglavlju. Sve što sada moramo učiniti je dodati neki styling. Imajte na umu da moramo prilagoditi tekst naslova da bismo dizajnirali naslov web stranice i tekst tijela da bismo dizajnirali liniju.
Skočite na karticu dizajna i ažurirajte sljedeće:
- Titula naslova: Heebo
- Težina naslova: Bold
- Stil naslova: TT
- Veličina teksta naslova: 32px (desktop), 24px (tablet i telefon)
- Razmak između naslova: 0.3em
- Krstionica za tijelo: Roboto
- Stil fonta tijela: kurziv
- Boja teksta tijela:
- Veličina teksta tijela: 13px
- Razmak između slova na tijelu: 0.1em
- Visina linije tijela: 1em
Da biste pomogli sa centriranjem, izvadite zadani padding ispod teksta tijela dodavanjem sljedećeg prilagođenog CSS-a u Promo opis:
donji dio: 0px
Dodatne prilagodbe dizajna
Za ovaj posljednji dio udžbenika napravit ćemo nekoliko dodatnih dizajnerskih prilagodbi zaglavlja kako bi stavke ostale vertikalno centrirane u svakom stupcu i gumbu donijele jedinstven dizajn. Na oznaku ćemo dodati i liniju prije i poslije (samo za udarce).
Okomito centriranje stupaca / sadržaja
Upravo je gornji red aktivan "Izjednači visine stupca" koji koristi svojstvo flex. To možemo iskoristiti dodavanjem malog isječka css kako bismo osigurali da svi stupci ostaju okomito centrirani u retku. Da biste to učinili, otvorite postavke gornjeg retka i dodajte sljedeći CSS glavnom elementu:
poravnati predmeti: središte;
Ažuriranje stupca gumbom
Zatim otvorite postavke za stupac 3 u gornjem redu i izvadite boju pozadine i podloge.
Ažuriranje pozadine gumba
Zatim otvorite postavku modula gumba i ažurirajte pozadinu novim gradijentom pozadine kako slijedi:
- Gradivna pozadina Lijeva boja: #ffffff
- Desna boja gradijenta pozadine: # 1dbf73
- Smjer gradijenta: 135deg
- Početna pozicija: 10%
- Krajnji položaj: 0%
Dodavanje slova i prije znakova u slogan
Svaki element dinamičnog sadržaja može se promijeniti klikom na ikonu zupčanika. Da biste sloganu dodali znakove prije i poslije, otvorite postavke modula poziva na akciju koji sadrži slogan i kliknite ikonu za uređivanje na dinamičnom sadržaju slogana web stranice. Zatim dodajte znakove u unos prije i poslije.
Konačni rezultat
Da biste vidjeli rezultat, otvorite bilo koju stranicu na svojoj web lokaciji. Trebali biste vidjeti lijepo prikazan dinamični naslov stranice i slogan!
Završne misli
Zaista je lijepo što možete prilagoditi cjelokupno zaglavlje s dinamičnim naslovom web stranice i sloganom. Ovo se čini kao nešto što će biti korisno za mnoge web stranice. Također mi se sviđa ideja da uz logotip uvrstite naslov stranice i slogan za još jaču zastupljenost marke.
Izvor: Elegantna tema
