Cum se construiește o casetă de notificare Divi pentru actualizări COVID-19 (descărcare GRATUITĂ)

Este întotdeauna nevoie de casete de notificare pe un site web. Acestea sunt adăugiri utile care furnizează informații importante utilizatorilor unde le pot vedea. Din păcate, epidemia crescândă de COVID-19 a lăsat multe site-uri web cu nevoia stringentă de a-și menține utilizatorii actualizați. O casetă de notificare este o modalitate excelentă de a o face.

Astăzi, oferim un aspect GRATUIT al secțiunii casetei de notificare Divi (completat cu tot codul / funcționalitatea necesară) pentru a fi adăugat la oricare dintre paginile sau șabloanele dvs. Divi.

Nu vă faceți griji, vă vom arăta și cum să-l construiți de la zero și cum să-l utilizați.

Să începem!

Trage cu ochiul

Iată o privire rapidă la caseta de notificări și modul în care funcționează.

Descărcați GRATUIT aspectul secțiunii casetei de notificare Divi

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 aspectul secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder. Amintiți-vă că acesta este un aspect al secțiunii, așa că va trebui să adăugați acest aspect la o pagină, postare sau șablon atunci când creați o nouă secțiune în constructor.

Consultați partea de jos a postării pentru a adăuga aspectul secțiunii casetei de notificări la o pagină sau șablon

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

Partea 1: Adăugarea unui nou aspect al secțiunii la biblioteca Divi

Pentru acest design, vom construi mai întâi caseta de notificare ca aspect de secțiune în Biblioteca Divi. În acest fel, odată ce aspectul secțiunii este complet și salvat, putem adăuga convenabil aspectul secțiunii din Libraria Divi la orice pagină, postare sau șablon Divi. Ideea este să o avem gata în bibliotecă pentru fiecare caz în care avem nevoie de o casetă / secțiune de notificare pentru site.

Adăugați un aspect

Pentru a începe, navigați la Divi> Biblioteca Divi.

Faceți clic pe butonul „Adăugați nou” pentru a adăuga un aspect nou în bibliotecă.

În fereastra pop-up Adăugare aspect nou, dați aspectului un nume (adică „Notificare secțiune”) și alegeți tipul de aspect „Secțiune”.

Apoi faceți clic pe Trimiteți.

Partea 2: Proiectarea aspectului secțiunii casetei de notificare

Construiți pe front-end

Aceasta va implementa editorul de aspect care funcționează la fel ca o pagină normală folosind Divi Builder. Deoarece dorim să construim aspectul vizual, faceți clic pe „Build On The Front End”.

Secțiunea Fundal și capitonare

Deschideți setările secțiunii și actualizați fundalul și căptușeala după cum urmează:

• Culoare stânga fundal degradat:
• Culoare dreaptă de fundal degradat:
• Căptușeală: 0 px sus, 0 px jos

Secțiunea CSS ID

Caseta de notificare va avea nevoie de unele CSS / JQuery personalizate pentru a oferi funcționalitatea care poate fi făcută clic pentru a închide caseta / secțiunea. Adăugați următorul ID CSS în secțiune, astfel încât să-l putem viza mai târziu cu cod.

• ID CSS: secțiunea de notificare

Adăugați rând și lățime rând

Adăugați un rând cu o coloană la secțiune.

Apoi actualizați setările rândurilor cu o lățime maximă după cum urmează:

• Lățime maximă: 700 px

Adăugați un modul de text pentru textul de notificare

În interiorul rândului, adăugați un nou modul de text. Aici vom adăuga conținutul textului pentru caseta de notificare.

Conținut text

Actualizați conținutul corpului cu textul necesar notificării, după cum urmează:

<h2>COVID-19 Notice</h2>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.

Proiectare text

Sub fila Design, actualizați stilul textului după cum urmează:

• Font text: Cabină
• Dimensiune text text: 18 px
• Alinierea textului: centru
• Titlul 2 Dimensiune text: 46 px (desktop), 38 px (tabletă), 28 px (telefon)
• Titlul 2 Înălțimea liniei: 1.3em

Adăugați rândul cu două coloane

Sub rândul cu modulul text, adăugați un nou rând cu două coloane (1/2 - 1/2).

Lățimea rândului

Actualizați rândul cu următoarea lățime maximă:

• Lățime maximă: 600 px

Adăugați butonul CTA

Această casetă de notificare va avea un buton CTA „Aflați mai multe” în partea stângă, care poate fi utilizat pentru a redirecționa un utilizator către o altă pagină cu mai multe informații.

Pentru a crea butonul, adăugați un nou modul buton în coloana 1.

Conținut buton

Actualizați textul butonului cu „Aflați mai multe” și adăugați adresa URL a linkului butonului pentru a redirecționa utilizatorii către o altă pagină pentru mai multe informații.

Design de butoane

Actualizați următoarele opțiuni de proiectare:

• Aliniere buton: centru
• Utilizați stiluri personalizate pentru buton: DA
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # f6ae55
• Lățimea chenarului butonului: 0 px
• Buton Font: Cabină
• Buton Font Greutate: Bold

Pentru ca butonul să se întindă pe toată lățimea coloanei, adăugați următorul CSS personalizat la elementul principal:

display: block !important;

Adaugă butonul de închidere

În coloana din dreapta a acestei casete de notificare, vom avea un „Înțeles!” butonul care colapsează / închide caseta de notificare din vizualizare. Pentru acest buton, vom păstra cea mai mare parte a designului butonului anterior, cu excepția culorii de fundal și a textului. De asemenea, va trebui să acordăm acestui buton un ID CSS pentru a-l viza mai târziu cu cod.

Copiați și lipiți butonul în coloana din dreapta

Pentru a porni rapid designul butonului, copiați butonul din coloana 1 și lipiți-l în coloana 2.

Conţinut

Actualizați textul butonului.

• Textul butonului: Am înțeles!

Proiecta

Apoi actualizați culoarea textului butonului și culoarea de fundal după cum urmează:

• Culoarea textului butonului: # 121212
• Culoarea fundalului butonului: rgba (255,255,255,0,4)

Buton Clasa CSS

Pentru acest buton, adăugați următoarea clasă CSS pentru a viza butonul ulterior cu codul necesar pentru a restrânge / închide caseta de notificare.

• Clasa CSS: close-notice

Crearea pictogramei de închidere a casetei de notificare („x”).

Adăugați rând

Pentru a crea pictograma de închidere din partea dreaptă sus a casetei de notificare, un nou rând cu o singură coloană.

Setări rând

Apoi actualizați lățimea rândului și căptușeala după cum urmează:

• Lățime: 100%
• Lățime maximă: 100%
• Căptușeală: 0 px sus, 0 px jos

Adăugați Blurb Module / Icon

În interiorul rândului, adăugați un nou modul blurb.

Conţinut

Apoi ștergeți conținutul simulat din selecția Titlu și Corp pentru a utiliza pictograma „x” pentru blurb.

Setări Blurb pentru pictograma Close

Sub fila Proiectare, actualizați următoarele:

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

Poziție pictogramă

Pentru a poziționa pictograma în partea dreaptă sus a casetei, deschideți fila Advanced și actualizați următoarele:

• Poziție: Absolută
• Locație: dreapta sus
• Decalaj vertical: 20 px
• Decalaj orizontal: 20 px

Blurb / Icon Clasa CSS

Acum adăugați aceeași clasă CSS la blurb pe care ați făcut-o pentru „Prins!” Butonul Închidere (ambele vor fi utilizate pentru a închide caseta de notificare).

• Clasa CSS: close-notice

Adăugați cod personalizat

Pentru această casetă de notificare, vom adăuga CSS / Javascript personalizat pentru a face următoarele:

• Închideți caseta de notificare atunci când faceți clic pe butonul de închidere sau pe pictograma de închidere.
• Închideți caseta de notificare glisând caseta (și conținutul paginii de sub ea) în sus, afară din vizualizare (o tendință obișnuită cu aceste tipuri de casete).
• Înregistrați evenimentul în browserul utilizatorului, astfel încât fereastra pop-up să nu se afișeze în timpul sesiunii după închiderea acestuia.

Pentru a adăuga funcționalitatea, vom adăuga codul la un modul de cod. Continuați și adăugați un nou modul de cod sub modulul butonului de închidere (sau oriunde pe pagină într-adevăr).

Apoi lipiți următorul cod în zona de conținut a modulului de cod:

<style>
  .close-notice {
    cursor: pointer;
  }
  #notice-section {
    display:none;
  }
  .et-fb-post-content #notice-section {
    display: block !important;
  }
</style>
<script>
function storageAvailable(type) {
  try {
      var storage = window[type],
          x = '__storage_test__';
      storage.setItem(x, x);
      storage.removeItem(x);
      return true;
  }
  catch(e) {
      return e instanceof DOMException && (
          // everything except Firefox
          e.code === 22 ||
          // Firefox
          e.code === 1014 ||
          // test name field too, because code might not be present
          // everything except Firefox
          e.name === 'QuotaExceededError' ||
          // Firefox
          e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
          // acknowledge QuotaExceededError only if there's something already stored
          storage.length !== 0;
  }
}
jQuery(document).ready(function($) {
  var storageAvailable = window.storageAvailable('sessionStorage');
  $(".close-notice").click(function() {
    $("#notice-section").slideUp();
    if (storageAvailable) {
      sessionStorage.setItem('etNoticeState','hidden'); 
    }    
  });
  if (storageAvailable) {
    if ('hidden' !== sessionStorage.getItem('etNoticeState')){
      $("#notice-section").show();
    }
  } else {
    $("#notice-section").show();
  }
});
</script>

Despre Cod

În etichetele de stil, veți observa că, de fapt, ascundem caseta / secțiunea de notificare inițial cu aceasta ...

#notice-section {display:none;} 

Astfel putem verifica pentru a ne asigura că browserul are spațiul de stocare de care avem nevoie pentru a înregistra articolul.

Același fragment va ascunde și secțiunea din Divi Builder (în partea din față). Pentru a înlocui acest lucru, am adăugat un alt fragment pentru a afișa secțiunea din Divi Builder, astfel încât să puteți face modificări vizuale.

.et-fb-post-content #notice-section {display:none;} 

Funcția JS „storageAvailable (type)” verifică stocarea în browser.

Fragmentul jQuery face tot ce este necesar ...

• Închide secțiunea (# notice-section) atunci când faceți clic pe buton și pictogramă cu clasa „close-notice”.
• Dacă browserul are stocare pentru sesiune disponibilă, făcând clic pe oricare dintre butoane pentru a închide caseta ascunde caseta în timpul restului sesiunii de browser a utilizatorului, care durează atât timp cât browserul este deschis.

După ce ați terminat, asigurați-vă că salvați aspectul secțiunii.

Adăugarea casetei de notificare (aspectul secțiunii) la o pagină

Pentru a adăuga aspectul secțiunii casetei de notificare la o pagină utilizând Divi Builder, deschideți o pagină în Divi Builder și faceți clic pe pictograma albastră pentru a adăuga o nouă secțiune la pagină.

Deschideți fila Adăugare din bibliotecă și selectați aspectul secțiunii casetei de notificare din listă. Am denumit-o „secțiunea de notificare” pentru acest exemplu.

Asigurați-vă că plasați secțiunea în partea de sus a paginii (sau oriunde altundeva doriți) și salvați pagina.

Adăugarea casetei de notificare (aspectul secțiunii) la un șablon tematic Divi

De asemenea, putem adăuga aspectul secțiunii casetei de notificare la orice șablon de pagină / postare, antet global sau subsol global. Procesul este același cu adăugarea la o pagină Divi obișnuită.

Pentru a-l adăuga la un șablon, deschideți Divi Theme Builder.

Apoi faceți clic pentru a edita zona șablonului în care doriți să adăugați aspectul secțiunii casetei de notificare.

În editorul de aspect șablon, faceți clic pentru a adăuga o nouă secțiune și selectați aspectul secțiunii salvate din biblioteca Divi.

Salvați aspectul șablonului.

Asta e!

Rezultat final

Iată rezultatul final al casetei de notificare de pe o pagină live.

Gânduri finale

Sper că această cutie de notificări Divi vă va fi de folos. Există într-adevăr atât de multe utilizări minunate pentru așa ceva. Și, deși lumea încă face față COVID-19, așteptăm cu nerăbdare multe notificări pozitive în viitorul apropiat.

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

Noroc!