Cum se creează o filă de comutare pentru un antet lipicios în Divi

Anteturile lipicioase pot fi eficiente pentru a menține meniul și alte CTA-uri importante accesibile pentru utilizatori. Dar, uneori, anteturile lipicioase pot deveni distractive, mai ales pentru antetele mari pe dimensiuni mai mici de ecran. De obicei, recurgem la micșorarea antetului și / sau ascunderea elementelor în stare lipicioasă pentru a crea mai mult spațiu pentru conținut. Cu toate acestea, crearea unei file de comutare pentru acele anteturi lipicioase ar putea fi o alternativă excelentă. Includerea unei mici file de comutare sub antetul lipicios oferă utilizatorilor opțiunea de a ascunde / afișa acel antet lipicios oricând doresc. În acest tutorial, vă vom arăta cum să creați o filă de comutare pentru un antet lipicios în Divi.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra filei Sticky Header Toggle pe care o vom construi în acest tutorial. Observați cum fila de comutare devine vizibilă după ce utilizatorul derulează dincolo de înălțimea antetului. Apoi utilizatorul poate comuta antetul lipicios făcând clic pe filă. Odată ce utilizatorul derulează înapoi în partea de sus a paginii, antetul este vizibil și fila este ascunsă.

Iată un codepen care demonstrează același concept.

Descărcați GRATUIT fila de comutare pentru șablonul antet Sticky

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa șablonul în biblioteca Divi, procedați în felul următor:

1. Navigați la Generatorul de teme Divi.
2. Faceți clic pe pictograma de portabilitate din partea dreaptă sus a paginii.
3. În fereastra pop-up de portabilitate, selectați fila de import.
4. Alegeți fișierul de descărcare de pe computer.
5. Apoi faceți clic pe butonul de import.

După ce ați terminat, șablonul va fi disponibil în Divi Theme Builder.

De acolo, puteți deschide setările șablonului și atribui șablonul oricărei sau tuturor paginilor site-ului dvs. web pentru a testa rezultatele. Sau puteți face clic pe deschideți editorul de șabloane de antet pentru a edita aspectul șablonului.

Să trecem la tutorial, nu-i așa?

Partea 1: Încărcarea șablonului de antet Premade în Divi Theme Builder

Pentru a accelera procesul de construcție pentru acest tutorial, vom folosi un antet prefabricat care poate fi descărcat gratuit de pe blogul nostru.

Descărcați șablonul

Pentru a obține șablonul de antet premat, accesați postarea care conține șablonul GRATUIT de antet și subsol pentru pachetul de aspect al interpretului Divi.

Apoi introduceți adresa de e-mail în opțiunea de e-mail. După ce ați terminat, veți vedea butonul „Descărcați fișierele”. Faceți clic pe buton pentru a descărca fișierul.

Odată ce fișierul este descărcat, dezarhivați fișierul JSON.

Importați șablonul

Apoi, navigați la Divi> Theme Builder. Și faceți clic pe pictograma de portabilitate din partea dreaptă sus a paginii.

Selectați fila Import, alegeți fișierul JSON pe care tocmai l-ați dezarhivat, debifați opțiunile și faceți clic pe butonul de import.

Apoi, selectați opțiunea „Importați-le ca machete statice ...” și faceți clic din nou pe butonul Import.

Deschideți Editorul de șabloane pentru antet

După ce șablonul a fost încărcat în generatorul de teme, ștergeți subsolul șablonului și faceți clic pe Salvați modificările. Apoi faceți clic pe pictograma de editare pentru a edita antetul personalizat al șablonului.

Deschideți Modul Straturi și Ștergeți modulul de cod existent

În editorul de aspect al antetului, deschideți meniul de setări din partea de jos a paginii și faceți clic pe pictograma de vizualizare a straturilor pentru a deschide straturile modale. Acest lucru ne va ajuta să accesăm elementele noastre Divi mai ușor înainte.

În modul straturi, faceți clic pe comutatorul Deschidere / Închidere toate pentru a putea vedea toate elementele Divi. În al doilea rând al secțiunii, ștergeți modulul de cod. Nu vom avea nevoie de acest cod personalizat pentru acest tutorial.

Partea 2: Crearea unui antet Sticky cu fila Toggle în Divi

Setările secțiunii

Pentru acest antet, vom face întreaga secțiune lipicioasă, astfel încât antetul să rămână în partea de sus a paginii atunci când derulați. De asemenea, vom oferi secțiunii o clasă CSS personalizată pentru a viza mai târziu cu codul nostru personalizat.

Deschideți setările secțiunii și actualizați următoarele:

• Clasa CSS: et-divi-sticky-header
• Poziție lipicioasă: lipiți-vă de sus

Crearea filei de comutare cu un modul Blurb

Apoi, vom crea tabul nostru de comutare folosind un modul blurb.

Pentru a face acest lucru, adăugați un nou modul blurb chiar în partea de jos a celui de-al doilea rând sub modulul meniu.

Apoi deschideți setările de blurb și actualizați conținutul după cum urmează:

• șterge conținutul titlului
• ștergeți conținutul corpului
• Utilizați pictograma: DA
• Pictogramă: săgeată sus (vezi captura de ecran)
• Culoare fundal: #ffffff

Sub fila Proiectare, actualizați următoarele:

• Culoare pictogramă: # 1a3066
• Utilizați dimensiunea fontului pictogramei: DA
• Pictogramă Dimensiune font: 40 px
• Lățime: 45 px
• Înălțime: 45 px

• Marja: 0 px
• Colțuri rotunjite: 12 px jos stânga, 12 px jos dreapta
• Transformă axa X tradusă: 100%
• Animație imagine / pictogramă: fără animație

NOTĂ: Cu transformarea Y transformată la 100%, pictograma se va deplasa în jos exact la 100% din înălțimea pictogramei (45 px).

Sub fila Advanced, actualizați următoarele:

• Clasa CSS: et-divi-sticky-toggle
• Poziție: Absolută
• Locație: dreapta jos
• Decalaj orizontal: 20 px
• Indicele Z: -1

Acum, că blurb-ul are o poziție absolută (cu traducerea de transformare Y 100%), blurb-ul (fila de comutare) va sta chiar sub întreaga secțiune a antetului. Acest lucru este important, astfel încât fila de comutare să rămână vizibilă / clicabilă atunci când afișăm / ascundem antetul la clic pe fila de comutare.

Adăugați codul personalizat

Pentru a adăuga funcționalitatea de care avem nevoie pentru acest comutator antet lipicios, va trebui să adăugăm câteva CSS și JQuery personalizate.

Pentru a face acest lucru, vom adăuga un nou modul de cod sub modulul blurb.

În caseta de conținut a codului, lipiți următorul CSS, asigurându-vă că înfășurați codul în etichetele de stil necesare.

.et-divi-sticky-toggle {
  visibility: hidden;
  opacity: 0;
  transition: all 400ms;
}

.et-divi-sticky-toggle:hover {
  cursor: pointer;
}

.et-divi-sticky-toggle.et-show-toggle {
  visibility: visible;
  opacity: 1;
}

.et-divi-sticky-header {
  transition: all 400ms !important;
}
.et-divi-sticky-header.et-hide-sticky-header {
  transform: translateX(0%) translateY(-100%) !important;
}

.et-divi-sticky-toggle .et-pb-icon {
  margin-bottom: 0px;
  transition: all 400ms;
}

.et-hide-sticky-header .et-divi-sticky-toggle .et-pb-icon {
  transform: rotateX(180deg);
}

Sub eticheta de script final care înconjoară CSS personalizat, lipiți următorul JQuery asigurându-vă că înfășurați codul în etichetele de script necesare.

jQuery(document).ready(function ($) {
  // variables for header and toggle
  $stickyHeader = $(".et-divi-sticky-header");
  $stickyToggle = $(".et-divi-sticky-toggle");

  // attach scroll event handler function to window that
  // uses the windows scroll position (winScrollTop) and
  // the height of the header (headerHeight) to hide/show
  // toggle once the user scrolls beyond the header height.
  $(window).on("scroll", function () {
    winScrollTop = $(window).scrollTop();
    headerHeight = $stickyHeader.height();
    if (
      winScrollTop >= headerHeight &&
      !$stickyToggle.hasClass("et-show-toggle")
    ) {
      $stickyToggle.addClass("et-show-toggle");
    } else if (
      winScrollTop < headerHeight &&
      $stickyToggle.hasClass("et-show-toggle")
    ) {
      $stickyToggle.removeClass("et-show-toggle");
      $stickyHeader.removeClass("et-hide-sticky-header");
    }
  });

  // attach click event function on toggle tab that
  // toggles the "et-hide-sticky-header" class.
  $stickyToggle.on("click", function (e) {
    $stickyHeader.toggleClass("et-hide-sticky-header");
  });
});

Rezultat final

Pentru a vizualiza rezultatul final, va trebui să atribuiți șablonul cu noul antet unei pagini sau tuturor paginilor site-ului dvs. web.

Pentru aceasta, salvați aspectul și ieșiți din editorul de șabloane de antet.

Apoi deschideți setările șablonului (pictograma roată) pentru șablon cu noul antet al filei lipicioase. Sub fila Utilizați pe, selectați Toate paginile și faceți clic pe butonul Salvare.

IMPORTANT: Aceasta va afișa antetul pe toate paginile site-ului dvs. web. Deci, asigurați-vă că utilizați un site de organizare și nu site-ul dvs. live.

Acum, deschideți orice pagină de pe site-ul dvs. pentru a vedea rezultatul.

Iată o previzualizare a modului în care va arăta pe desktop, tabletă și telefon.

Gânduri finale

În acest tutorial, v-am arătat cum să creați o filă de comutare pentru un antet lipicios. Aceasta poate fi o soluție utilă atât pentru dezvoltatorii care doresc să păstreze accesibil conținutului important al antetului lipicios, cât și pentru utilizatorii care doresc să ascundă sau să afișeze antetul respectiv ori de câte ori doresc. Sperăm că acest lucru va fi util pentru un viitor proiect!

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

Noroc!