Doriți să creați un antet global lateral cu Divi?
În acest tutorial, vă vom arăta cum să creați un antet global rotit care apare în partea stângă a paginilor și postărilor dvs. Culoarea de fundal a antetului este complet transparentă, permițând cuprins a paginii/postării.
Ne-am asigurat că antetul global rămâne fix în partea stângă în timpul derulării și am făcut, de asemenea, meniul o versiune pentru dispozitive mobile.
În acest tutorial, vă vom arăta cum să recreați designul de la zero!
Să mergem.
studiu
Înainte de a pătrunde în tutorial, să aruncăm o privire rapidă asupra rezultatului pe care vrem să-l obținem.
Accesați generatorul de teme Divi și începeți să creați un antet global
Din tabloul de bord WordPress, accesați Divi > Theme Builder
Faceți clic pe „Adăugați antet global”
selecta „Construiți antet global”.
Începeți să creați antetul lateral global
Adăugați o secțiune nouă
Culoare de fundal
Odată ajuns în editorul de șabloane, puteți deschide secțiunea deja acolo și puteți schimba culoarea de fundal pe diferite dimensiuni de ecran.
- Culoare de fundal: rgba(0,0,0,0) (desktop), #FFFFFF (tabletă și telefon)
dimensionarea
Accesați fila Amenajări, trageți în jos opțiunea dimensionarea și apoi modificați parametrii de dimensionare a secțiunii.
- Lățime: 5vw (desktop), 100% (tabletă și telefon)
- Înălțime minimă: 100 vw (desktop), automat (tabletă și telefon)
spaţierea
Apoi trageți în jos opțiunea Spațiere și modificați setările după cum urmează:
- Căptușeală (sus și jos): 2vw
Cutie de umbră
Apoi mergi la Box Shadow și adăugați umbră de casetă personalizată pe diferite dimensiuni de ecran.
- Poziție orizontală a umbrei casetei: 32 px (desktop), 0 px (tabletă și telefon)
- Intensitatea estomparii umbrei casetei: 49px
- Puterea de răspândire: 0px (desktop), 19px (tabletă și telefon)
- Culoare umbră: rgba(0,0,0,0.12)
Adăugarea CSS personalizat
De asemenea, ne vom asigura că antetul lateral global rămâne fix în partea stângă, adăugând câteva linii de cod CSS la elementul secțiunii principale.
position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
La trecerea cursorului peste secțiune
Asigurați-vă că adăugați, de asemenea, aceste linii de cod CSS la elementul principal la trecerea cursorului în secțiune.
position: fixed;
top: 0;
Vizibilitatea implicită
Apoi creșteți indicele z în parametrii de poziție.
- Index Z: 99999
Vizibilitatea cu mouse-ul
Asigurați-vă că se aplică aceeași valoare atunci când treceți cu mouse-ul.
- Index Z: 99999
Adăugați o linie nouă
Structura coloanei
După ce ați finalizat setările secțiunii, continuați prin adăugarea unui nou rând folosind următoarea structură de coloane:
dimensionarea
Fără a adăuga încă module, deschideți setările liniei și modificați setările de dimensionare.
- Utilizați lățimea jgheab personalizată: DA
- Lățimea jgheabului: 1
spaţierea
De asemenea, eliminați toate marginile implicite.
- Umplutură (sus și jos): 0px
Parametrii coloanei
S-a adăugat CSS personalizat (tabletă și telefon)
Pe tabletă și telefon, optăm pentru un afișaj total diferit. Vom plasa trei module diferite unul lângă celălalt. Pentru a face acest lucru, va trebui să adăugăm un cod CSS.
Deschideți setările coloanei, accesați fila Avansat și introduceți următoarele rânduri de cod CSS în spațiu Elementul principal pentru tableta si telefon:
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
Adăugați un modul Imagine în coloană
Descărcați logo-ul
Este timpul să începeți să adăugați module! Primul modul de care avem nevoie este un modul Image. Încărcați un fișier imagine cu logo semi-transparent la alegere.
dimensionarea
Apoi accesați fila Amenajări și modificați lățimea pe diferite dimensiuni de ecran.
- Lățime: 4 vw (desktop), 12 vw (tabletă), 16 vw (telefon)
Scara de transformare
Măriți dimensiunea modulului modificând ulterior setările scalei de transformare.
- Dreapta: 170% (desktop), 100% (tabletă și telefon)
- Scăzut: 170% (desktop), 100% (tabletă și telefon)
„Traduceți Traduceți”
Și împingeți modulul spre dreapta modificând următorii parametri
- Jos: 1vw (desktop), 0vw (tabletă și telefon)
Adăugați un modul Meniu la coloană
Selectați meniul de adăugat
Următorul modul de care avem nevoie este modulul Meniu. Selectați un meniu la alegere.
Eliminați culoarea de fundal
Apoi eliminați culoarea de fundal din modul.
Dispoziţie
Apoi accesați fila Amenajări și modificați setările de aspect.
- Stil: centrat
- Meniu derulant Direcție: în jos
Setări text din meniu
Modificați, de asemenea, setările pentru textul meniului.
- Culoare Active Link: #cecece
- Font meniu: Montserrat
- Greutate font meniu: aldine
- Culoare text: #000000
- Dimensiunea textului meniului: 0,9 vw (desktop), 2 vw (tabletă), 2,5 vw (telefon)
Textul meniului la trecerea cursorului
Schimbați culoarea textului meniului la trecerea cursorului.
- Culoarea textului meniului: #afafaf
Meniul de derulare
De asemenea, facem câteva modificări setărilor meniului derulant.
- Culoarea liniei meniului drop-down: #000000
- Culoarea textului meniului derulant: #000000
icoane
Apoi schimbați culoarea pictogramei meniului de hamburger.
- Culoarea pictogramei meniului Hamburger: #000000
spaţierea
Și adăugați valori de marjă personalizate pe diferite dimensiuni de ecran.
- Marja (sus și jos): 18 vw (desktop), 0 vw (tabletă și telefon)
- Marja (stânga și dreapta): -13vw (desktop), 0vw (tabletă și telefon)
Transformarea rotației
Acum, pentru a crea efectul de rotație, ne vom juca cu valorile de rotație de transformare ale modulului.
- Stânga: 270 de grade (desktop), 0 grade (tabletă și telefon)
Adăugați modulul „Urmărire pe rețelele sociale” în coloană
Adăugați rețele sociale
Să trecem la modulul „Urmărire pe rețelele sociale”, care este următorul și ultimul modul de care avem nevoie pentru a finaliza antetul pivot global. Adăugați câteva rețele sociale la alegere.
Resetați stilurile pictogramelor rețelelor sociale
Continuați prin resetarea setărilor pentru fiecare rețea socială în mod individual. Acest lucru ne va ajuta să scăpăm de culoarea lor de fundal.
aliniere
Apoi treceți la fila Amenajări a modulului și modificați alinierea modulului pe diferite dimensiuni de ecran.
- Modul de aliniere: stânga (desktop), dreapta (tabletă și telefon)
Setări pictograme
În cele din urmă, modificați și setările pictogramei.
- Culoare pictogramă: #000000
- Utilizați dimensiunea pictogramei personalizată: DA
- Dimensiunea fontului pictogramei: 2,1 vw
Salvați modificările constructorului și vizualizați rezultatul
Odată ce ați finalizat toate modulele, puteți salva modelul, puteți ieși din constructor tematică de Divi și vizualizați rezultatul pe dvs site-ul web !
studiu
Acum că am parcurs toți pașii, să aruncăm o ultimă privire asupra rezultatului.
Birou
Descărcați DIVI acum!!!
Concluzie
În acest articol, v-am arătat cum să creați un antet global rotit. Dacă nu alegeți altfel, antetul global pe care l-am creat va apărea pe toate postările și paginile dvs.
Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
Vezi și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
