Kako oblikovati logotip za prečkanje menijske vrstice znotraj glave Divi

Rifat Divi Tutorials Apr 19, 2022

Divi nam daje ogromno priložnosti, da naše spletne strani okrasimo na različne načine, v Diviju pa je na voljo veliko možnosti, ki resnično lahko ustvarijo osupljive dizajne. Ali ste kdaj razmišljali o ustvarjanju glave, kjer bo vaš logotip stal čez primarni in sekundarni menijski vrstici? No, to se bomo naučili danes. To je inovativen način za prikaz vaše glave. Zato ne izgubljajmo več časa in poglejmo, kako to storiti!

Sneak Peak

To je zasnova glave, ki jo bomo ustvarili danes.

Prvi razdelek: Globalna predloga glave

Najprej moramo ustvariti globalno predlogo glave. Če želite to narediti, pojdimo na možnost »Divi > Theme Builder« na nadzorni plošči in kliknite »Dodaj globalno glavo«.

Kliknite možnost »Dodaj globalno glavo« in videli boste spustni meni. Izberite "Zgradi globalno glavo" in se pomaknite naprej.

Ustvarite neverjetna spletna mesta

Z najboljšim brezplačnim graditeljem strani Elementor

Začni zdaj

Drugi razdelek: Oblikovanje glave

Dodajanje: Poseben oddelek

Za izdelavo tega dizajna bomo izbrali razdelek Posebnosti .

Struktura stolpcev

Prosimo, izberite označeno strukturo stolpcev za razdelek.

Barva ozadja: 1. stolpec

Zdaj odprite nastavitev stolpca 1 v novo ustvarjenem razdelku Posebnosti in spremenite barvo ozadja.

  • Barva ozadja: rgba(255,191,0,0,27)

Dimenzioniranje

Na kartici Načrt spremenite naslednje vrednosti.

  • Izenači višino stolpcev: Da
  • Uporabite širino žleba po meri: Da
  • Širina žleba: 1
  • Notranja širina: 100%
  • Notranja največja širina: 2580 slikovnih pik

Razmik

Zdaj se premaknite na nastavitev Razmika na istem zavihku Design.

  • Zgornje oblazinjenje: 0px
  • Spodnje odmikanje: 0px
  • Zgornje odmikanje stolpca 1: 0px
  • Spodnji stolpec 1: 0px
  • Zgornje odmikanje stolpca 2: 0px
  • Spodnji stolpec 2: 0px

ID-ji CSS stolpcev

Na zavihku Napredno uporabimo ID CSS po meri za oba stolpca.

  • 1. stolpec CSS ID: glava-prvi-stolpec
  • 2. stolpec CSS ID: glava-drugi-stolpec

Dodajanje: slikovni modul v 1. stolpec

Nalaganje slike

Zdaj dodajte slikovni modul v stolpec 1 in vstavite svoj logotip.

Poravnava

Zdaj se pomaknite na zavihek načrtovanja in spremenite poravnavo slike.

  • Poravnava slike: središče

Dimenzioniranje

V razdelku za velikost spremenite vrednost največje širine.

Vidnost

Zdaj skrijte ta modul pred manjšimi napravami, onemogočili bomo vidnost mobilnega in tabličnega računalnika.

Dodajanje: vrstica 1 v stolpec 2

Struktura stolpcev

Označeno strukturo stolpcev bomo dodali v stolpec 2 s posebnimi razdelki. To bo delovalo kot naša prva vrstica.

Barva ozadja

Uporabite barvo ozadja iz nastavitev vrstice.

  • Barva ozadja: rgba(161,99,255,0.1)

Razmik

Na zavihku Načrt spremenite nastavitve razmika na naslednji način:

  • Zgornje oblazinjenje: 10px
  • Spodnji odmik: 10px
  • Levo oblazinjenje: 5%
  • Desno oblazinjenje: 5%

Meja

Zdaj naredite nekaj sprememb v nastavitvah obrob.

  • Širina spodnje obrobe: 3px
  • Širina leve obrobe: namizje: 3px, tablica & Telefon: 0px
  • Barva obrobe: #6c2eb9

Glavni element CSS

Zdaj zapišite kodo CSS v blok "Glavni element" na zavihku Napredno.

display: flex;
justify-content: center;
align-items: center;

Vidnost: Skrij stolpec 1 & 2

Vidnost stolpca 1 & 2 bomo skrili za manjše naprave za poenostavitev načrtovanja. Tako bo naš dizajn čistejši.

Dodajanje: modul socialnih medijev v stolpec 1

Dodatek za socialno omrežje

Dodajmo modul za spremljanje družbenih medijev v prvi stolpec. Izberite želeno platformo družbenih medijev in dodajte tukaj.

Spremeni barvo za ikono ozadja &

Naredili bomo nekaj barvnih prilagoditev modula za spremljanje družbenih medijev.

  • Barva ozadja: #DBDD54
  • Barva ikone: rgba(123,15,255,0,46)

Meja

Zdaj iz nastavitev obrob zaokrožite naše družabne ikone.

  • Vsi vogali: 100px

Dodajanje: besedilni modul v stolpec 2

Vsebina modula &

Dodajte besedilni modul v stolpec 2 in dodajte slogan ali kar koli po vaši izbiri.

Nastavitve besedila

Spremenite slog besedila.

  • Pisava besedila: Poppins
  • Poravnava besedila: na sredino

Dodajanje: modula gumbov v stolpec 3

Vsebina modula &

V stolpcu 3 dodajte modul gumbov in vsebino po vaši izbiri.

Poravnava gumbov

Na zavihku za načrtovanje spremenite poravnavo gumba, da ga je mogoče popolnoma postaviti na naprave različnih velikosti zaslona.

  • Poravnava gumbov: namizje: desno, tablica & Telefon: sredina

Nastavitve gumba

Zdaj nekaj prilagodite gumbu, da bo bolj privlačen.

  • Uporabite sloge po meri za gumb: Da
  • Velikost besedila gumba: 14px
  • Barva besedila gumba: #DBDD54
  • Barva ozadja gumba: #158DD8
  • Pisava gumba: Poppins
  • Teža pisave gumba: krepko
  • Slog pisave gumba: velike črke
  • Pokaži ikono gumba: Da
  • Postavitev ikone gumba: levo

Razmik

Sedaj naredite naslednje spremembe vrednosti polnila.

  • Zgornje oblazinjenje: 10px
  • Spodnji odmik: 10px
  • Levo odmik: 50 slikovnih pik
  • Desno odmikanje: 30 slikovnih pik

Dodajanje: vrstica 2 v stolpec 2

Struktura stolpcev

Zdaj bomo dodali zadnjo vrstico temu modulu stolpca.

Barva ozadja

Za ozadje uporabite naslednjo barvo.

  • Barva ozadja: rgba(161,99,255,0.1)

Razmik

Prilagodite nastavitve razmika med vrsticami ’s.

  • Zgornje oblazinjenje: 20px
  • Spodnje odmikanje: 20 slikovnih pik
  • Levo oblazinjenje: 5%
  • Desno oblazinjenje: 5%

Meja

Nato uporabite naslednje nastavitve obrobe:

  • Širina leve obrobe: namizje: 3px, tablica & Telefon: 0px
  • Barva leve obrobe: #6c2eb9

Dodajanje: menijski modul v 2. stolpec

Zdaj izberite meni, ki ga potrebujete, in ga nastavite.

Naložite logotip za telefon tabličnega računalnika &

Dodajte logotip za naprave z manjšim zaslonom.

Nastavitve besedila menija

Zdaj naredite nekaj prilagoditev besedila menija, da bo videti bolj organizirano.

  • Pisava menija: Poppins
  • Barva besedila menija: #6c2eb9
  • Velikost besedila menija: 16px

Nastavitve besedila spustnega menija

Zdaj dodajte barvo črte v naš spustni meni.

  • Barva vrstice spustnega menija: rgba(0,0,0,0)

Nastavitve ikon

Zdaj spremenite nastavitve ikon.

  • Barva ikone nakupovalnega vozička: #6c2eb9
  • Barva ikone za iskanje: #6c2eb9
  • Barva ikone menija za hamburgerje: #6c2eb9

Dimenzioniranje

Uporabite največjo širino logotipa na tabličnem računalniku in telefonu.

  • Največja širina logotipa: Tablični računalnik: 70px & Telefon: 50px

Dodajanje: kodnega modula v stolpec 1

Da bi spremenili našo zasnovo glave, bomo naredili nekaj prilagoditev CSS. Če želite to narediti, dodajte kodni modul v stolpec 1. Zdaj kopirajte spodnjo kodo in jo prilepite v ta modul. Poskrbite, da jih postavite med kodo sloga .

@media all and (min-width: 980px) {
#header-first-column {
width: 10% !important;
display: flex;
justify-content: center;
align-items: center;
}
 
#header-second-column {
width: 90% !important;
}
}
 
@media all and (max-width: 980px) {
#header-first-column {
display: none;
}
}

Tretji razdelek: Shranite dizajn

Končali smo z oblikovanjem. Vse je odlično postavljeno, zdaj pa shranimo dizajn in si oglejmo rezultat. Kliknite ikono križa v zgornjem desnem kotu. Pripeljal vas bo na nadzorno ploščo in kliknite shrani dizajn.

Končni videz

Takole je torej videti naš končni dizajn.

Zaključek

Prej smo omenili, da lahko z Divijem v svoj dizajn vnesete več in več ustvarjalnosti. Obstaja veliko načinov, kako narediti svoje spletno mesto predstavljivo in Divi vam lahko zagotovi vso to podporo. Upam, da vam bo današnja vadnica pomagala sestaviti edinstveno glavo za vaše spletno mesto. Lahko delite svoje misli in če vam je ta vadnica všeč, vas bo s prijazno delitvijo ODLIČNI!