Cum să construiți o bară laterală fixă ​​receptivă cu legături de ancorare cu derulare netedă cu Divi

Barele laterale nu sunt chiar atât de populare ca pe vremuri. În multe cazuri, ajung să fie mai distrăgători decât sunt de ajutor. Dar, uneori, o bară laterală are un sens perfect, mai ales atunci când se ocupă de conținut lung. De aceea mi-am propus să creez o bară laterală care are mult sens.

Astăzi vă arăt cum puteți utiliza Divi Builder pentru a crea o bară laterală receptivă fixă ​​(sau lipicioasă) cu legături ancore cu derulare netedă (sau linkuri salt). Deoarece bara laterală rămâne vizibilă și linkurile de ancorare derulează ușor către diferite secțiuni ale paginii, bara laterală rămâne căsătorită cu conținutul, făcându-l o caracteristică UX utilă. La fel ca o schiță de document, această combinație face ca conținutul paginii dvs. web să fie mai accesibil și mai ușor de citit. Este o soluție răcoritoare pentru acele pagini lungi de derulare.

Verifică!

Trage cu ochiul

Iată un vârf al ceea ce vom construi împreună.

Conceptul

Pentru aceia dintre voi care locuiesc în Google Docs la fel de mult ca mine, sunteți conștient de acel instrument util de schiță a documentelor, care vă permite să implementați cu ușurință o bară laterală fixă, cu un contur care poate fi făcut clic, care sare la diferitele titluri din documentul dvs. Îmi place pentru că mă ajută să găsesc informații mult mai repede. M-am gândit că ar fi grozav să aduc aceeași caracteristică pe site-ul dvs. web.

Ce trebuie să începeți

Pentru acest tutorial, tot ce ai nevoie este Divi! Vom folosi, de asemenea, pagina Rețete din pachetul de machete pentru rețete alimentare, care este accesibil gratuit de la Divi Builder.

Adăugarea aspectului la pagina dvs.

Abonați-vă la canalul nostru Youtube

Pentru a începe, continuați și creați o pagină nouă și implementați Divi Builder. Selectați opțiunea „Alegeți un aspect premade”. Din fereastra pop-up Încărcare din bibliotecă, selectați pachetul de aspect pentru rețete alimentare, apoi faceți clic pentru a utiliza pagina Rețete.

După ce aspectul s-a încărcat, faceți clic pentru a construi pe partea frontală.

Crearea unei noi secțiuni

Din partea frontală Divi Builder, creați o nouă secțiune și trageți-o până în partea de sus a aspectului.

Copiați butonul din secțiunea de antet a aspectului și lipiți-l în rândul cu o coloană a noii secțiuni pe care ați creat-o.

Deschideți setările butonului și adăugați următorul CSS personalizat la Elementul principal sub fila avansată:

display: block !important;

Acest lucru permite pur și simplu butonului să se extindă pe întreaga lățime a coloanei.

Schimbați textul butonului pentru a citi „Introducere”. Și apoi adăugați următoarele pentru adresa URL a butonului:

#introducere

Acesta este modul în care creați un link de ancorare. Hashtag-ul (#) spune browserului că veți conecta la un ID CSS. Următorul text „introducere” va corespunde cu numele ID-ului CSS pe care îl vom adăuga la una dintre secțiunile noastre din aspect. Numele ID-ului CSS poate fi orice doriți. Asigurați-vă că se potrivește cu ID-ul CSS pe care îl dați secțiunii mai târziu.

Duplicați butonul și apoi repetați procesul de a da butonului un nou text de buton și o nouă adresă URL de buton. Întrucât acesta va fi un link ancoră care sare într-o altă secțiune a paginii, asigurați-vă că ID-ul CSS (textul după „#”) este unic și corespunde cu numele pe care îl veți da secțiunii dvs. mai târziu.

Pentru acest buton, schimbați textul butonului la „Ingrediente” și adresa URL a butonului la „#ingredienți”.

Duplicați din nou butonul și apoi dați noului buton textul butonului „Nutriție” și schimbați adresa URL a linkului butonului în „#nutriție”.

Duplică încă o dată butonul, apoi dă noului buton textul butonului „Instrucțiuni” și schimbă adresa URL a linkului butonului în „#instrucțiuni”.

Asta este tot ce trebuie să facem pentru moment. Vom cercula înapoi la această secțiune, transformându-l într-o bară laterală fixă ​​într-un pic.

Adăugarea ID-urilor CSS la secțiuni și rânduri

Acum, că avem toate butoanele create cu legăturile de ancorare, suntem gata să adăugăm numele ID-urilor CSS corespunzătoare în secțiunile și rândurile noastre.

Linkurile de ancorare vor sări automat la orice element de pe pagină cu ID-ul CSS corespunzător. Un ID CSS poate fi aplicat textului în linie, modulelor, rândurilor sau secțiunilor. Dacă doriți să adăugați un ID CSS la titlu folosind HTML, ar arăta cam așa:

<h2 id="introduction">Introduction</h2>

Cu toate acestea, deoarece vrem să trecem la o secțiune a paginii, putem adăuga ID-ul CSS la secțiunea specifică a paginii. Acest lucru va oferi utilizatorului suficient spațiu de vizionare confortabil, astfel încât vizitatorul să poată recunoaște cu ușurință unde se află pe pagină. Saltul la textul în linie sau la un modul poate provoca confuzie pentru vizitator.

După cum am acoperit mai devreme, fiecare dintre butoanele URL pe care le-am creat sunt menite să corespundă ID-urilor CSS ale secțiunilor la care trebuie să treacă.

Pentru butonul „Introducere”, trebuie să adăugăm ID-ul CSS la secțiunea paginii care conține conținutul introducerii. Pentru aceasta, deschideți setările secțiunii celei de-a treia secțiuni a paginii (secțiunea direct sub antet) și adăugați următorul ID CSS în fila avansată:

CSS ID: introducere

Aceasta va corespunde butonului de introducere a linkului ancoră pe care l-am creat mai devreme.

Acum, în aceeași secțiune, găsiți rândul care conține titlul „Ingrediente”. Apoi deschideți setările de rând și adăugați următorul ID CSS:

CSS ID: ingrediente

Aceasta va corespunde butonului de legătură de ancorare pentru ingrediente pe care l-am creat mai devreme.

Derulați în jos la următoarea secțiune cu titlul „Nutriție” și deschideți setările secțiunii. Apoi adăugați următorul ID CSS:

CSS ID: nutriție

Aceasta va corespunde butonului de legătură ancoră Nutrition pe care l-am creat mai devreme.

În cele din urmă, derulați în jos la următoarea secțiune a aspectului cu titlul „Instrucțiuni pas cu pas”. Apoi deschideți setările secțiunii și adăugați următorul ID CSS în fila avansată:

CSS ID: instrucțiuni

Acesta va corespunde butonului de legare ancoră Instrucțiuni pe care l-am creat mai devreme.

Salvează-ți modificările.

Acum este un moment bun pentru a vedea dacă legăturile dvs. de ancorare funcționează. Deschideți pagina într-o filă nouă și faceți clic pe butoanele din secțiunea de sus pentru a vă asigura că sar / derulează la locațiile corespunzătoare din pagină.

Dacă nu funcționează, asigurați-vă că reveniți înapoi și verificați dacă ID-urile CSS sunt corecte și că se potrivesc.

Crearea aspectului fix al barei laterale

Adăugarea marginilor din stânga la secțiuni pentru a crea spațiu pentru bara laterală

A avea linkuri de ancorare în partea de sus a paginii este bine pentru lucruri precum un cuprins. Dar pentru acest caz de utilizare, dorim să păstrăm acele legături de ancorare vizibile pentru utilizator în orice moment, astfel încât utilizatorul să nu fie nevoit să deruleze înapoi în partea de sus a paginii după ce a făcut clic pe unul dintre linkuri. O bară laterală fixă ​​va rezolva această problemă, deoarece va rămâne fixă ​​pe partea laterală a paginii în timp ce utilizatorul face clic pe linkurile de ancorare.

Dar înainte de a poziționa bara laterală, trebuie să creăm un spațiu pentru aceasta în partea stângă a paginii noastre. Pentru a face acest lucru, vom adăuga o marjă stângă la fiecare secțiune a aspectului.

Cantitatea de margine stângă pe care o adăugăm la fiecare secțiune va fi egală cu lățimea barei laterale, așa că acum este momentul să decidem cât de largă doriți să fie bara laterală. Pentru acest exemplu, va avea o lățime de 20%.

Deschideți setările celei de-a doua secțiuni (cea directă sub butoanele noastre de legătură ancoră) și adăugați următoarea marjă personalizată:

Marja personalizată: 20% rămas

Acum, înainte de a salva setările, faceți clic dreapta pe opțiunea Custom Margin și faceți clic pe „Copy Custom Margin” și salvați setările.

În fiecare dintre secțiunile rămase de-a lungul aspectului paginii, lipiți marginea personalizată în secțiune făcând clic dreapta pe secțiune și făcând clic pe „Inserați marja personalizată”.

Acest lucru va oferi o marjă stângă de 20% tuturor secțiunilor dvs., cu excepția secțiunii de sus care conține butoanele de legătură ancoră.

Crearea barei laterale fixe

Pentru a crea bara laterală, va trebui să îi oferim o poziție fixă ​​în stânga paginii. Deci, practic, vom transforma secțiunea superioară într-o bară laterală fixă. Pentru aceasta, deschideți setările din secțiunea de sus și actualizați următoarele:

Sub fila Proiectare, actualizați înălțimea și lățimea ...

Lățime: 20%
Înălțime: 100%

Sub fila Advanced, actualizați poziția ...

Poziție: fixă
Decalaj vertical: 80 px

Aceasta oferă secțiunii o poziție fixă ​​cu o lățime de 20% a paginii. De asemenea, poziționează secțiunea din stânga paginii și 80 px din partea de sus a paginii pentru a se potrivi cu înălțimea navigării antetului. Înălțimea de 100% asigură că secțiunea se întinde pe întreaga înălțime a paginii.

Acum vizualizați pagina într-o altă filă a browserului pentru a vedea funcționalitatea. Pe măsură ce derulați pagina, bara laterală rămâne fixă ​​și puteți face clic pe butoanele de legătură ancoră pentru a naviga cu ușurință la diferitele secțiuni.

Remedierea suprapunerii subsolului

Este posibil să fi observat că secțiunea se suprapune pe bara de subsol din partea de jos a paginii.

Există câteva modalități de a aborda această problemă. De exemplu, aș putea scoate „înălțime: 100%” din secțiune sau ați putea adăuga CSS la setările paginii pentru a regla lățimea barei de subsol. Dar dacă doriți să păstrați înălțimea secțiunii la 100%, o soluție ușoară este să scoateți culoarea de fundal a secțiunii. Deschideți setările secțiunii pe care o folosim pentru bara laterală și adăugați următoarea culoare de fundal:

Culoare fundal: rgba (255,255,255,0)

Dacă doriți să modificați culoarea barei laterale, puteți deschide setările paginii și puteți modifica culoarea de fundal a zonei de conținut.

Deoarece culoarea de fundal a secțiunii este transparentă, culoarea de fundal a zonei de conținut pentru pagina dvs. strălucește. Și deoarece toate celelalte secțiuni ale noastre au culoare de fundal, se va afișa numai prin secțiunea barei laterale fără a se suprapune pe bara de subsol de jos.

Efectuarea de ajustări pentru mobil

Acest design nu are sens pentru smartphone-uri, deoarece nu există spațiu pentru o bară laterală, iar legăturile din partea de sus a paginii vor impune utilizatorului să deruleze înapoi de fiecare dată când dorește să facă clic pe un link de ancorare. Dar designul va funcționa în continuare pentru tabletă, dar este posibil să fie nevoie să mai creați spațiu pentru acele legături de ancorare. Pentru aceasta, deschideți setările rândului pentru rândul barei laterale a secțiunii și actualizați următoarele:

Lățime personalizată: 100
Împletire personalizată (desktop): 10% stânga, 10% dreapta
Completare personalizată (tabletă): 0% stânga, 0% dreapta

Acum tot ce trebuie să facem este să ascundem (sau să dezactivăm) secțiunea de pe smartphone. Pentru aceasta, deschideți setările secțiunii și accesați fila avansată și faceți clic pe caseta de selectare pentru a dezactiva pe smartphone.

Asta e. Aveți acum un meniu cu bara laterală fixă ​​receptivă, cu legături de ancorare cu derulare netedă!

Rezultatul final

Acum să verificăm rezultatul final.

Iată cum arată aspectul pe tabletă.

Aflați mai multe despre elementele fixe și linkurile de ancorare

Dacă vi s-a părut util acest tutorial, consultați mai jos câteva dintre tutorialele aferente:

• 5 lucruri interesante pe care le poți face în Divi cu Anchor Links
• Cum să faci orice element de pagină Divi lipicios
• Cum să adăugați widgeturi fixe la bara laterală în WordPress
• Cum să vă faceți navigarea Divi să înceapă de jos, apoi să rămâneți fix în partea de sus când derulați
• Cum să vă rezolvați subsolul Divi
• Cum să creați un meniu pop-out flotant în Divi

Gânduri finale

Frumusețea acestei configurări este că puteți adăuga cu ușurință bare laterale fixe la orice pagină cu diferite legături de ancorare (sau orice doriți). Deoarece bara laterală este în esență o secțiune Divi, o puteți personaliza folosind setările încorporate, puteți adăuga mai multe rânduri și puteți utiliza orice combinație de module doriți.

Această configurație ar fi excelentă pentru cursuri de membru, tutoriale, întrebări frecvente, portofolii sau postări lungi pe blog. Puteți să-l utilizați chiar și pentru site-uri web cu o singură pagină. Aveți alte utilizări de împărtășit? Mă interesează să aud ce sunt în comentarii.

Noroc!