Preskoči na glavni sadržaj

Kako dodati naslov dinamičkog web mjesta i slogona u zaglavlje globalne divi

Divi: najlakša tema za WordPress

Divi: najbolja WordPress tema svih vremena!

više 901.000 preuzimanja, Divi je najpopularnija WordPress tema na svijetu. Kompletan je, jednostavan za korištenje i dolazi s više od 62 besplatnih predložaka. [Preporučeno]

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.

Predložak globalnog zaglavlja dinamičnog naslova web stranice 6

Zabilježite naslov i slogan web mjesta na vrhu sredine zaglavlja koji se dinamički prikazuje.

Primjer izmjene naslova Divi

Besplatno preuzimanje

Pridružite se Divi Newlsetteru i e-poštom ćemo vam poslati kopiju Ultimate Divi Landing Page Layout Pack, zajedno s tonama drugih besplatnih i nevjerojatnih Divi resursa, savjeta i trikova. 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.

Odaberite predložak za divi

Jednom dovršen, cjelokupni predložak zaglavlja bit će dostupan u Divi Theme Builderu.

Izmijenite globalno zaglavlje divi

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.

Jednostavno izradite svoju web stranicu s Elementor-om

Elementor vam omogućuje jednostavno stvaranje bilo kojeg dizajna web stranice s profesionalnim izgledom. Prestanite plaćati skupo za ono što možete učiniti sami. [Slobodni]

Prilagodite naslov divi

A neki ljudi ni ne shvaćaju da slogan postoji, a kamoli da odvoje vrijeme da ga ažuriraju. Uz to, kada koristite temu Divi, naslov stranice i slogan neće biti zadani na vašoj web lokaciji, pa ih je lako zanemariti. Međutim, naslov i slogan web mjesta bitni su dijelovi web mjesta i bit će prepoznati od strane tražilica.

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.

Prilagodite wordpress identitet

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 zadani JSON datoteku predloška web stranice.

Zatim idite na Divi> Graditelj tema.

Kliknite ikonu prenosivosti u gornjem desnom kutu. U skočnom prozoru za prenosivost odaberite zadanu datoteku JSON predloška web stranice i kliknite gumb Uvezi.

Uvoz Divi modela

Nakon što se predložak doda u graditelj tema, izbrišite predložak podnožja i kliknite za uređivanje ukupnog zaglavlja.

Uklonite predložak iz podnožja

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.

Tražite li najbolje WordPress teme i dodatke?

Preuzmite najbolje dodatke i WordPress teme na Envato i jednostavno stvorite svoju web stranicu. Već više od preuzimanja 49.720.000. [ISKLJUČIVO]

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).

Prilagodite poziv na akciju

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.

Konfigurirajte akcije poziva na akciju

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 slogan divi stranice

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.

Dodajte vezu na početnu stranicu

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
Prilagodite font naslova divi

Da biste pomogli sa centriranjem, izvadite zadani padding ispod teksta tijela dodavanjem sljedećeg prilagođenog CSS-a u Promo opis:

donji dio: 0px
Dodajte prilagođeni divi css kôd

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.

Jednostavno izradite svoju mrežnu trgovinu

Preuzmite besplatnu WooCommerce, najbolji e-trgovinski dodatak za prodaju fizičkih i digitalnih proizvoda na WordPressu. [Preporučeno]

Prilagodite gumb za divi kontakt

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%
Prilagodite pozadinu gumba za divi

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.

Prikažite slogan divi

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!

Konačni rezultat divi

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

Ovaj članak sadrži komentare 0

Ostavi komentar

Vaša email adresa neće biti objavljena. Obavezna polja su označena *

Ova web stranica koristi Akismet kako bi smanjila neželjene. Saznajte više o načinu upotrebe podataka o vašim komentarima.

Povratak na vrh
0 dionice
udio
cvrkut
Prijaviti