Comutarea siglei pe un antet fix în Divi

Este întotdeauna o idee minunată să creați diferite versiuni ale siglei dvs. cu culori și dimensiuni diferite. De exemplu, probabil ar trebui să aveți o versiune întunecată și deschisă a logo-ului, astfel încât să arate excelent pe diferite culori de fundal. Și având o versiune mai mică (mai puțin verticală și mai orizontală) a logo-ului pentru acele zone înguste ale site-ului dvs. web. Unul dintre cele mai bune locuri pentru a utiliza o versiune diferită a logo-ului dvs. se află pe antetul fix (sau lipicios).

În multe cazuri, antetul fix va avea nevoie de un stil diferit față de antetul principal. Dacă păstrați aceeași siglă, sunteți limitat în modul de stilare a antetului fix. Aici este util să ai un logo personalizat. Cu un logo separat personalizat special pentru antetul fix, îl puteți stiliza oricum doriți. Acest lucru vă oferă mai mult control asupra designului site-ului dvs.

În această postare vă voi arăta cum să:

1. Schimbați sigla cu una diferită când antetul fix este activ. (Acest lucru se poate face cu o singură linie de CSS)
2. Inversați culoarea logo-ului dvs. pe antetul fix.
3. Adăugați un efect de tranziție rece atunci când comutați sigla pe antetul fix.
4. Comutați și mutați sigla antetului centrat la aspectul implicit (aliniat la stânga) de pe antetul fix.

Să începem.

Trage cu ochiul

Iată o scurtă privire asupra a ceea ce vom realiza în acest tutorial.

Iată cum arată un comutator de logo simplu.

Iată comutatorul logo cu efect de tranziție.

Iată logo-ul care schimbă pozițiile din stilul de antet centrat.

Pregatirea

Înainte de a face orice altceva, asigurați-vă că completați următoarele:

1. Instalați cea mai recentă versiune a Divi.
2. Implementați o temă activă pentru copii Divi. Dacă aveți nevoie de ajutor pentru configurarea unei teme pentru copii, aceasta este tratată în această postare. Dacă aveți nevoie de ajutor suplimentar. Vă rugăm să contactați echipa noastră de asistență.
3. Creați două versiuni ale logo-ului dvs., care sunt ambele 200 × 131 și adăugați-le la biblioteca dvs. WordPress Media. Un logo va fi folosit pentru antetul principal și unul va fi folosit pentru antetul dvs. fix. Dacă puteți, faceți versiunea cu antet fix a logo-ului mai orizontală, astfel încât să nu fie spulberată vertical pe antetul fix mai mic. Iată un exemplu al logo-ului meu principal al antetului pe care îl folosesc. Iată un exemplu al logo-ului meu antet fix. Observați că am decupat textul pentru a crea un logo mai simplu și mai orizontal, care se potrivește frumos pe un antet cu înălțime mai mică. Nu este probabil ca oricine să poată citi textul oricum, iar marca este încă reprezentată.

   

4. Configurați meniul principal cu elemente de meniu.

După ce ați parcurs acești pași, sunteți gata să începeți.

Comutarea siglei pe un antet fix în Divi

Abonați-vă la canalul nostru Youtube

Comutarea siglei pe antetul dvs. fix folosind CSS

Înainte de a ajunge la CSS-ul personalizat, să configurăm setările meniului în cadrul personalizatorului de teme. Din backend-ul site-ului dvs. WordPress, accesați Theme Customizer> Header & Navigation> Header Format și asigurați-vă că ați selectat stilul de header implicit.

Apoi reveniți la setările Header & Navigation din Customizerul tematic. Selectați bara de meniu principală și actualizați următoarele:

Înălțimea meniului: 105
Logo Înălțime maximă: 80
Dimensiune text: 20

Acum reveniți la Antet și navigare. Selectați Setări de navigare fixe și actualizați următoarele:

Înălțimea meniului fix: 60
Dimensiune text: 20

Puteți adăuga restul setărilor pentru a se potrivi cu designul site-ului dvs. Este posibil ca înălțimile meniului și logo-ului să fie ajustate în funcție de nevoile dvs. Cu toate acestea, vă sugerez să păstrați aceste setări dacă doriți să adăugați efectul de tranziție, astfel încât dimensionarea să fie exactă. Puteți reveni oricând și îl puteți schimba mai târziu.

Inserați fragmentul CSS pentru a comuta sigla pe antetul fix

Una dintre cele mai simple modalități de a schimba imaginea logo-ului dvs. cu alta pe antetul fix este utilizarea proprietății CSS „conținut”. Dacă sunteți familiarizat cu CSS, aceasta este în mod normal ceea ce este utilizat atunci când adăugați conținut la un pseudo-element: before sau: after. În acest caz, îl vom folosi pentru a insera conținut nou (imaginea logo-ului dvs.) pentru a înlocui imaginea logo curentă.

Pentru a face acest lucru, accesați Theme Customizer> CSS suplimentar și introduceți următorul CSS.

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL);
}

Acum înlocuiți textul care spune „INSERAȚI O IMAGINE LOGO NOUĂ” cu imaginea reală a siglei.

Pentru a obține adresa URL, accesați biblioteca media din tabloul de bord WordPress și faceți clic pe imaginea pe care doriți să o adăugați. Puteți găsi adresa URL în partea dreaptă sus a ecranului care apare.

Asta e. Această soluție simplă vă va înlocui sigla cu una nouă numai atunci când antetul fix este activ în timp ce derulați pe toată pagina. Sigla implicită va reveni atunci când derulați înapoi la partea de sus a paginii.

Inversarea culorii logo-ului dvs.

Dacă doriți doar să adăugați o versiune întunecată sau deschisă a aceluiași logo pe antetul fix, este posibil să vă placă această soluție.

Folosind proprietatea de inversare CSS, puteți inversa culoarea logo-ului cu câteva linii de CSS. De exemplu, dacă sigla dvs. este neagră, inversarea culorii logo-ului ar deveni albă. Și dacă sigla este albă, se va inversa la negru. Pentru a adăuga acest stil la sigla dvs., accesați Theme Customizer> CSS suplimentar și adăugați următorul CSS (asigurați-vă că ștergeți sau comentați CSS adăugat anterior):

/*********************************
Invert Logo color on fixed header
*********************************/
.et-fixed-header #logo {
-webkit-filter: invert(100%);
filter: invert(100%);
}

Verificați rezultatul. Acesta este un logo negru care este inversat într-o versiune albă.

Adăugarea unui efect de tranziție atunci când comutați sigla pe antetul fix

Probabil că vă întrebați de ce voi acoperi un alt mod (mai robust) de a vă schimba sigla pe un antet fix. Motivul principal este acela că putem adăuga un efect de tranziție rece logo-ului atunci când acesta „trece” la antetul fix. Pentru a face acest lucru, avem nevoie de ambele imagini logo una lângă cealaltă pentru stilizare.

Adăugarea noului dvs. logo în fișierul Header.php

Pentru a adăuga o altă imagine logo în antetul dvs., trebuie să o adăugăm în fișierul header.php. Folosind un client FTP (cum ar fi FileZilla), accesați rădăcina fișierelor dvs. Divi Theme și faceți o copie a fișierului header.php.

Lipiți copia fișierului header.php în rădăcina folderului tematic copil.

Apoi, folosind editorul de text preferat, deschideți fișierul header.php. Găsiți codul html pentru linkul care conține imaginea logo-ului înfășurată în div cu clasa „logo_container”.

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

Vom adăuga un fragment similar de cod pentru a afișa o altă imagine în antetul dvs. Copiați și lipiți următorul cod direct sub el.

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="INSERT NEW LOGO IMAGE URL" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" class="second-logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

Observați că este o copie actualizată a codului original de deasupra acestuia, cu două diferențe. În primul rând, are o nouă adresă URL sursă de imagine pe care va trebui să o adăugați. Și în al doilea rând, este o clasă numită „al doilea logo”.

Din tabloul de bord WordPress, accesați biblioteca media și obțineți adresa URL pentru noua imagine de logo pe care doriți să o adăugați.

Apoi reveniți la fișierul header.php. Găsiți fragmentul de cod pe care tocmai l-ați creat și înlocuiți textul care citește „INSERAȚI ADRESA NOUĂ IMAGINE LOGO AICI” cu adresa URL a imaginii reale.

Salvați fișierul header.php.

Acum aveți două sigle care vor fi afișate unul lângă altul pe site-ul dvs. Șansele sunt că nu doriți să o lăsați așa, așa că haideți să adăugăm CSS personalizat necesar pentru a face efectul nostru de tranziție.

Adăugarea unei tranziții interesante atunci când sigla pornește antetul fix

Accesați Theme Customizer> CSS suplimentar și ștergeți (sau comentați) codul din secțiunea anterioară a acestui post (dacă este cazul). Apoi adăugați următoarele CSS personalizate:

@media all and (min-width: 980px){
/*********************************
show, hide, and transition logos for primary and fixed nav;
must have second logo in header.php file for this to work
**********************************/
#logo {
opacity:1;
display:inherit;
margin: 0 0 0 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#logo.second-logo {
opacity:0;
margin: 0 0 -200px -130px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #logo {
opacity: 0;
margin: -200px 0px 0 0px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;

}
.et-fixed-header #logo.second-logo {
opacity:1;
margin: 0 0 0 -90px !important;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

/*********************************
hides overflow on header container so logo doesn't show outsite header on transition
*********************************/
#main-header {
overflow: hidden;
}
}

Am comentat codul CSS pentru a vă informa despre ce face codul. Pe scurt, CSS scade și crește opacitatea fiecăruia dintre sigle în timp ce le mută în afara antetului. Astfel, aveți un efect de tranziție destul de interesant pentru sigla dvs. atunci când mergeți la antetul fix.

Schimbarea locației logo-ului dvs. antet centrat în stânga pentru antetul fix

Îmi place stilul antetului centrat pentru afișarea antetului, poate doriți să verificați locația acelui logo pe antetul fix. Pentru mine, prefer să am stilul de antet implicit (cu sigla aliniată la stânga) pe antetul meu fix. Principalul motiv este că având logo-ul în partea de sus a navigării mele tinde să facă antetul fix puțin prea înalt atunci când derulați pentru a vizualiza o pagină.

Pentru a trece de la o siglă centrată la o siglă aliniată la stânga, puteți adăuga următoarele CSS personalizate în caseta CSS suplimentară din Customizerul tematic. Mai întâi adăugați codul pentru a comuta sigla într-un mod rapid și ușor:

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL HERE);
}

Nu uitați să adăugați adresa URL a imaginii logo-ului.

Apoi adăugați următoarele pentru a regla plasarea siglei:

@media all and (min-width: 980px){
/*********************************
change centered logo on centered header style to default layout when fixed header is active
*********************************/
.et_header_style_centered header#main-header.et-fixed-header .logo_container {
float: left;
width: 20%;
}

.et_header_style_centered #main-header.et-fixed-header div#et-top-navigation {
width: 80%;
float: right;
height: 70px;
line-height: 70px;
text-align: right;
}
.et-fixed-header #top-menu-nav {
float: none!important;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
}

Notă: Asigurați-vă că ați eliminat orice CSS anterior din această postare care ar intra în conflict.

Asta e. Verificați rezultatul.

În încheiere

Este greu să nu te mândrești cu un logo bun. Deci, nu vă mulțumiți cu o versiune mică neeligibilă sau, și mai rău, ascundându-vă sigla în antetul fix. Opriți-l pentru o versiune personalizată cu o tranziție lină pe care clienții dvs. o vor aprecia.

Venind

În mod implicit, Divi nu include un antet fix pe mobil. Dar adăugarea unuia este foarte simplă. În următoarea mea postare vă voi arăta cum să adăugați un antet fix personalizat cu o altă siglă pe mobil. Iată o mică scurtă privire.

De abia aștept.

Nu uitați să postați comentariile dvs. mai jos. Dacă aveți probleme legate de configurarea și editarea fișierelor tematice ale copilului dvs., vă rugăm să contactați echipa noastră de asistență.

Noroc.