Cum să creați o bară laterală glisantă în Divi

Barele laterale pot fi grozave, dar pot fi și o risipă de spațiu. De aceea, crearea unei bare laterale glisante poate fi o opțiune perfectă pentru cei care doresc să aibă o bară laterală care nu distrage atenția utilizatorului de conținutul principal al paginii. Mai mult, acest tip de bară laterală oferă utilizatorului opțiunea de a vedea sau ascunde bara laterală oricând dorește.

Efectul de împingere glisant este unic prin faptul că bara laterală alunecă din partea stângă a paginii în timp ce împinge simultan (sau stoarce) conținutul principal al paginii pentru a se potrivi bara laterală în fereastra de vizualizare. Pe scurt, glisează bara laterală și împinge pagina.

Odată ce bara laterală este construită, aceasta devine un instrument versatil pentru toate tipurile de aplicații, inclusiv meniuri și formulare.

Să ajungem la asta!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

Descărcați aspectul GRATUIT

Pentru a vă pune mâinile pe aspectul glisant al barei laterale push 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.

Pentru ao adăuga la o pagină sau șablon, va trebui să adăugați o nouă secțiune și să alegeți aspectul secțiunii din bibliotecă.

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

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Alegeți un aspect premade”.
   
4. Alegeți pachetul de aspect eveniment și faceți clic pentru a utiliza aspectul paginii de pornire eveniment.
   

Cum să creați o bară laterală glisantă în Divi

Pentru a crea bara laterală Sliding Push, va trebui să folosim o nouă secțiune obișnuită. Vom dimensiona și poziționa secțiunea pentru a deveni o bară laterală fixă ​​care se deschide atunci când faceți clic pe un buton, apăsând (și strângând) zona de conținut principal din dreapta pentru a face loc barei laterale.

Construirea secțiunii

Mai întâi, să adăugăm o nouă secțiune obișnuită la pagină.

Apoi mutați secțiunea din partea de sus a paginii.

Setări secțiune

Deschideți setările secțiunii și actualizați poziția care urmează să fie fixată după cum urmează:

• Poziție: Fix
• Indicele Z: 9999

Sub fila Proiectare, actualizați dimensiunea și spațiul după cum urmează:

• Lățime: 350 px (desktop și tabletă), 100% (telefon)
• Înălțime: 100%
• Căptușeală: 100 px sus, 0 px jos

Căptușeala este pentru a face loc antetului din partea de sus a paginii.

Apoi, sub fila avansată, acordați secțiunii o clasă CSS:

• Clasa CSS: et-push-sidebar

Odată ce clasa CSS este la locul său, dați secțiunii o culoare de fundal:

• Culoare fundal: # 1a1e36

Pentru a crea o separare mai vizibilă, reveniți la fila de proiectare și adăugați o margine dreaptă.

• Lățimea marginii drepte: 2 px
• Culoarea chenarului drept: #eeeeee

Aceasta are grijă de secțiunea care servește drept container principal pentru bara noastră laterală. Acum este timpul să începeți să construiți cele două butoane pe care le vom folosi pentru a comuta bara laterală deschisă și apoi închisă.

Crearea butoanelor de comutare a barei laterale

Vor fi două butoane utilizate pentru a comuta bara laterală. Primul buton va fi o pictogramă „X” care va închide versiunea mobilă a barei laterale după ce a fost deschisă. „X” va fi construit folosind un modul de blurb. Al doilea este butonul principal de comutare pe care îl vom construi folosind un modul de rotire care este rotit cu text vertical și poziționat absolut adiacent barei laterale / secțiunii.

Să ajungem la asta.

Crearea rândului pentru butoane

Creați un nou rând cu o singură coloană în secțiunea / bara laterală.

Deschideți setările rândului și actualizați următoarele:

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

Sub fila Advanced, actualizați opțiunile de poziție după cum urmează:

• Poziție: Absolută
• Indicele Z: 1

Crearea pictogramei de închidere „X”

Pentru a crea pictograma de închidere „X”, adăugați un modul blurb la rând. Poate fi mai ușor să adăugați un nou modul folosind modalul Straturi, deoarece lucrurile vor fi puțin dificil de făcut clic.

Conţinut

Apoi deschideți setările pentru blurb. Sub fila conținut, scoateți titlul și conținutul corpului și adăugați pictograma X în blurb.

• Utilizați pictograma: DA
• Pictogramă: x (vezi captura de ecran)

Proiecta

Sub fila Proiectare, actualizați următoarele:

• Culoare pictogramă: #eeeeee
• Plasare imagine-pictogramă: stânga
• Utilizați dimensiunea fontului pictogramei: DA
• Pictogramă Dimensiune font: 40 px
• Lățime: 50 px

Apoi, aduceți pictograma în jos puțin adăugând următoarea proprietate de traducere transformată:

• Transformă X X: 100 px
• Transformă Y: -10px

Avansat

Sub fila Avansat, dezactivați blurb-ul de pe tabletă și desktop, astfel încât să îl vedem doar pe ecranul telefonului.

• Dezactivați pe: tabletă și desktop

Apoi adăugați o clasă CSS în blurb și dați-i o poziție fixă, astfel încât să rămână vizibilă atunci când derulați prin conținutul barei laterale de pe afișajul telefonului.

• Clasa CSS: et-slide-push-close
• Poziție: Fix
• Locație: dreapta sus

Aceasta are grijă de butonul „X” Închidere pictogramă.

Crearea butonului principal de comutare a barei laterale

Pentru a crea butonul de comutare al barei laterale principale, adăugați un modul de blurb sub blurbul pictogramei existente „X”.

Conţinut

Actualizați titlul și faceți clic pentru a utiliza pictograma săgeată în jos.

• Titlu: Informații despre eveniment
• Utilizați pictograma: DA
• Pictogramă: săgeată în jos (vezi captura de ecran)

Apoi, adăugați o culoare de fundal la blurb.

• culoarea fundalului: #eeeeee

Proiecta

Sub fila Proiectare, actualizați următoarele:

• Culoare pictogramă: # 1a1e36
• Plasare imagine / pictogramă: stânga
• Utilizați dimensiunea fontului pictogramei: DA
• Pictogramă Dimensiune font: 25 px
• Font de titlu: Overpass
• Greutatea fontului titlului: Bold
• Titlu Stil Font: TT
• Culoarea textului titlului: # 1a1e36
• Spațierea literelor de titlu: 2 px
• Înălțimea liniei de titlu: 1.2em
• Căptușeală: 0,6em sus, 1em stânga, 1em dreapta
• Colțuri rotunjite: 5 px pe cele două colțuri de jos

Pentru a poziționa și roti comanda în afara secțiunii, utilizați opțiunile de transformare după cum urmează:

• Transformă Y: 100 px
• Transformare Rotire Z: -90 grade
• Transformă Originea: dreapta sus

Avansat

Sub fila Advanced, actualizați următoarele:

• Clasa CSS: et-slide-push-toggle
• Poziție: Absolută
• Locație: Centrul din dreapta

Adăugarea unui cod personalizat cu un modul de cod

Odată ce cele două butoane sunt complete, suntem gata să adăugăm codul personalizat care va oferi funcționalitatea de glisare push de care avem nevoie pentru bara laterală.

Pentru a adăuga codul, mai întâi, adăugați un modul de cod în aceeași coloană.

Apoi lipiți următorul cod în modulul de cod.

<style>
  #page-container, #et-main-area, .et-push-sidebar, .et-slide-push-toggle .et-pb-icon {
    transition: all 300ms !important;
  }
/*
 * use if using blank template with no header or footer
 * 
  #page-container.et-push-sidebar-active {
    margin-left: 350px;
  }
*/  
  #page-container.et-push-sidebar-active #et-main-area {
    margin-left: 350px;
  }  
  .et-push-sidebar {  
    transform: translateX(-100%);
  }
  .et-fb .et-push-sidebar {  
    transform: translateX(0%);
  }
  .et-push-sidebar-active .et-push-sidebar {
    transform: translateX(0%);
  }
  .et-slide-push-toggle, .et-slide-push-close {
    cursor:pointer;
  }
  .et-push-sidebar-active .et-slide-push-toggle .et-pb-icon {
    transform: rotate(180deg);
  }
@media all and (max-width: 767px) {
  .et-push-sidebar-active .et-push-sidebar {
    overflow: scroll !important;
    overscroll-behavior: contain;
  }
  #page-container.et-push-sidebar-active #et-main-area, #page-container.et-push-sidebar-active {
    margin-left: 0px;
  }  
}  
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.et-slide-push-toggle').click(function(){
      $('#page-container').toggleClass('et-push-sidebar-active');
    });
    $('.et-slide-push-close').click(function(){
      $('#page-container').removeClass('et-push-sidebar-active');
    });    
  });
})( jQuery );   
</script>

Crearea rândului de conținut al barei laterale

Primul rând pe care l-am creat a fost pentru butoanele și codul care fac funcția barei laterale. Următorul rând va fi pentru conținutul barei laterale.

Pentru a crea rândul de conținut al barei laterale, adăugați un nou rând cu o coloană sub primul rând din bara laterală / secțiune.

Setări rând

Deschideți setările noului rând și introduceți următoarele:

• Lățime: 100%
• Înălțime: 100%
• Căptușeală: 5% sus, 5% jos, 5% stânga, 5% dreapta

Sub fila Advanced, actualizați opțiunile de depășire după cum urmează:

• Overflow orizontal: scroll (desktop și tabletă), auto (telefon)
• Vertical Overflow: scroll (desktop și tabletă), auto (telefon)

Completarea barei laterale cu conținut / module

Acum că bara laterală este gata, tot ce trebuie să faceți este să adăugați orice modul la al doilea rând din bara laterală, după cum este necesar. Pentru acest exemplu, doar copiez module din aspectul paginii de start a evenimentului și le lipesc în coloana rândului.

Rezultat final

Verificați rezultatul final pe pagina live.

Adăugarea barei laterale glisante Push la un șablon de pagină

Dacă doriți să utilizați în mod implicit această bară laterală pe toate paginile dvs., va trebui să adăugați bara laterală / secțiunea la un șablon de pagină utilizând Divi Theme Builder.

Salvați aspectul secțiunii în biblioteca Divi

Pentru aceasta, mai întâi, salvați secțiunea care a fost utilizată pentru a crea bara laterală în Biblioteca Divi. Puteți face acest lucru făcând clic pe cele trei puncte din bara laterală în straturile modale, adăugați numele aspectului și salvați-l în bibliotecă.

Creați un șablon de pagină nou

Apoi, mergeți la generatorul de teme și creați un șablon nou și atribuiți șablonul respectiv tuturor paginilor.

Adăugarea barei laterale glisante la șablonul de pagină

Apoi, faceți clic pentru a edita șablonul de pagină.

În editorul de aspect al șabloanelor, adăugați o nouă secțiune de lățime completă.

Apoi, introduceți un modul Fullwidth Post Content în secțiune.

Apoi faceți clic pe. creați o nouă secțiune deasupra secțiunii de lățime completă. Apoi faceți clic pe fila Adăugare din bibliotecă și selectați aspectul secțiunii glisante Push Sidebar din bibliotecă.

După ce ați terminat, puteți edita bara laterală, cu toate acestea, aveți nevoie folosind editorul de aspect corporal.

Salvați setările Generatorului de teme

Asigurați-vă că salvați modificările în generatorul de teme.

Acum, toate paginile dvs. vor avea bara laterală.

Gânduri finale

O bară laterală glisantă este o opțiune perfectă pentru cei dintre voi care caută ceea ce este mai bun din ambele lumi - o bară laterală care rămâne în prim plan fără a îndepărta (sau distrage) conținutul principal al paginii. Nu ezitați să-l utilizați pentru tot felul de lucruri, cum ar fi formularele de înregistrare, opțiunile de e-mail, meniurile și multe altele.

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

Noroc!