Cum se adaugă un antet fix personalizat pentru mobil utilizând Divi

Publicat: 2017-09-01

Dacă aveți un antet fix (sau o navigație) pe dispozitivul mobil, puteți crește gradul de utilizare a site-ului dvs. dacă este făcut corect. Navigarea fixă, în general, pare să fie cu 22% mai rapidă de navigat decât antetele standard. În această lume de mare viteză a tehnologiei, aceasta este o statistică considerabilă, chiar dacă a fost jumătate din asta.

Și, cu Divi, adăugarea unui antet fix pe site-ul dvs. se poate face cu câteva linii de CSS. Divi vă permite deja să vă personalizați antetele mobile utilizând Theme Customizer, dar în prezent nu există o setare încorporată pentru implementarea unui antet fix pentru mobil. În acest tutorial, vă voi arăta cum să adăugați un antet fix personalizat pe mobil care include următoarele:

O siglă diferită (mai mobilă) decât versiunea desktop.
Un antet mai scurt pentru a permite mai mult spațiu de vizionare disponibil.
O pictogramă de navigare cu hamburger mai mare care poate fi făcută clic pentru a facilita instalarea navului mobil.
Un fundal semitransparent care face antetul și mai intruziv atunci când vizualizați site-ul.

Iată o scurtă prezentare a aspectului antetului.

antet fix

Pregatirea

Această configurație este similară postării mele anterioare despre Comutarea siglei pe un antet fix. Înainte de a începe, asigurați-vă că completați următoarele:

Asigurați-vă că aveți instalată cea mai recentă versiune de Divi.
Creați un meniu principal activ pentru site-ul dvs.
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.
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ă.
Configurați meniul principal cu elemente de meniu.
Deoarece vom adăuga CSS personalizat pentru a realiza antetul fixat, nu este necesar să personalizăm antetul standard sau opțiunile antetului fix în Customizerul tematic. Dar, dacă doriți să copiați setările pentru dimensiunile meniului și logo-ului în exemplul meu, completați următoarele (acest lucru este complet opțional):

Accesați setările pentru antet și navigare 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

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

Cum se adaugă un antet fix personalizat pentru mobil utilizând Divi

Abonați-vă la canalul nostru Youtube

Noțiuni de bază

Vom implementa acest design introducând CSS personalizat în secțiunea CSS suplimentară din Personalizatorul temei Divi. Deoarece vom viza doar dispozitive mobile, vom înfășura toate CSS-urile noastre într-o interogare media care limitează stilul la lățimi ale browserului mai mici de 980 px. Continuați și începeți introducând următoarele în caseta CSS suplimentară:

@media (max-width: 980px) {



}

antet fix

Crearea antetului fix mobil utilizând CSS

Întrucât Divi adaugă deja o clasă numită „et-fixed-header” atunci când utilizatorul derulează pagina, putem folosi acel selector în CSS-ul personalizat pentru a crea și stiliza antetul nostru fix mobil.

Acest prim grup de CSS de mai jos face antetul fix (sau lipicios) în partea de sus a paginii și apoi reglează înălțimea antetului fix la 55 px. De asemenea, adaugă o culoare de fundal alb semitransparentă. Adăugați următoarele la CSS-ul dvs. suplimentar în Personalizatorul de teme din parantezele Media Query.

/*********************************
style mobile fixed header
*********************************/

.et_fixed_nav #main-header.et-fixed-header  {
position: fixed;
background: rgba(255,255,255,0.8); /*change header background color here*/
height: 55px;
}

.et-fixed-header .logo_container {
height: 55px;
}

.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}

Apple sugerează ca toate elementele care pot fi făcute clic pentru aplicațiile lor să aibă cel puțin 44 × 44 pixeli, astfel încât degetele și degetele noastre să poată face clic cu ușurință pe ele. Acesta ar fi un bun ghid pentru elementele din antetul fix mobil. Următorul CSS face ca pictograma de navigare să fie de 45 px.

/*********************************
make mobile fixed header navigation icon larger
*********************************/

.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}

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

În cele din urmă, să adăugăm mai multă înălțime pentru sigla noastră pe antetul fix, astfel încât să o putem vedea mai bine. Introduceți următorul CSS:

/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}

Asta e! Am terminat cu toții.
Iată colecția finală de CSS pentru a crea antetul fix mobil:

@media (max-width: 980px) {

/*********************************
style mobile fixed header
*********************************/

.et_fixed_nav #main-header.et-fixed-header  {
position: fixed;
background: rgba(255,255,255,0.8);
height: 55px;
}

.et-fixed-header .logo_container {
height: 55px;
}

.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}

/*********************************
make mobile fixed header navigation icon larger
*********************************/

.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}

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

/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}

}

Salvați setările. Acum aveți un antet fix mobil funcțional.

antet fix

Comutarea siglei pe antetul fix al telefonului mobil

Dacă doriți să utilizați o siglă diferită pentru antetul fix mobil, puteți face acest lucru destul de ușor cu unele jQuery. Tot ce aveți nevoie este adresele URL pentru ambele sigle pe care urmează să le utilizați. Prima adresă URL a imaginii logo-ului ar trebui să fie Logo-ul implicit pe care îl utilizați deja pentru site-ul dvs. A doua adresă URL a imaginii logo-ului ar trebui să fie logo-ul pe care doriți să îl utilizați pentru antetul fix mobil. Asigurați-vă că încărcați ambele sigle în biblioteca media și că recuperați adresa URL.

După ce aveți ambele adrese URL, accesați tabloul de bord WordPress și navigați la Divi> Opțiuni temă> Integrări. Găsiți caseta de introducere „Adăugați cod în capul blogului dvs.” și introduceți următorul script jQuery:

<script>
    var imageUrl = [
  'ENTER DESKTOP LOGO IMAGE URL',
  'ENTER MOBILE LOGO IMAGE URL',
    ];

    jQuery(window).on('scroll', function() {
        var $header = jQuery('header');
        var $logo = jQuery('#logo');

        if ((jQuery(window).width() < 981) &&
        ($header.hasClass('et-fixed-header'))) {
            return $logo.attr('src', imageUrl[1]);
        };

        return $logo.attr('src', imageUrl[0])
    });
</script>

antet fix

Acum înlocuiți textul „ENTER DESKTOP LOGO IMAGE URL” cu adresa URL a siglei pe care o utilizați în prezent pentru site-ul dvs.

Apoi înlocuiți textul „ENTER URL MOBILE LOGO IMAGE URL” cu adresa URL a siglei pe care doriți să o utilizați numai pentru dispozitivele mobile.

Salvați setările și verificați rezultatele.

antet fix

Suport pentru browser

În această postare, am creat antetul fix folosind numai CSS, bazându-mă foarte mult pe proprietatea CSS „poziție: fixă”. Această proprietate CSS poate fi incompatibilă cu versiunile mai vechi ale browserelor mobile, în special pe iOS Safari și Android. În prezent, „poziția: fixă” este acceptată destul de bine pe versiunile mai noi de browsere mobile (cu excepția Opera Mini).

Există alte pluginuri și soluții JavaScript mai robuste, dar am considerat că este mai bine să vă ofer versiunea simplă CSS. Vă rugăm să luați în considerare explorarea acestor opțiuni dacă această soluție nu funcționează pentru dvs.

Gânduri finale

Merită menționat faptul că anteturile fixe mobile pot fi în detrimentul utilizabilității. Deoarece continuă să blocheze partea superioară a browserului dvs. în orice moment, dacă nu sunteți atent, este posibil să pierdeți bunuri imobiliare valoroase fără un motiv întemeiat. Amintiți-vă, nu toată lumea are un phablet ca acest tip.

antet fix

De aceea, este important să vă personalizați antetul fix pentru dispozitivele mobile, oferindu-i o înălțime mai mică, o siglă diferită și un buton de navigare mai mare. Și adăugând câteva linii de CSS pe site-ul dvs. Divi, puteți avea un antet fix pe mobil fără a fi nevoie să utilizați un plugin terță parte. Deci, dacă are sens să adăugați unul la următorul dvs. proiect, mergeți la el. Dacă aveți acest tip de funcționalitate, puteți îmbunătăți interfața de utilizare a site-ului dvs. web.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!