Cum să vă optimizați bara laterală pe mobil utilizând Divi Theme Builder

În unele cazuri, păstrarea unei bare laterale pe mobil poate fi un pic excesivă. Utilizatorii sunt fericiți să parcurgă informațiile relevante de pe tablete și telefoane (până la un punct). Dar când aveți o cantitate semnificativă de conținut al barei laterale după conținutul principal al paginii, este posibil ca utilizatorii să nu ajungă niciodată la subsol, care constă de obicei din câteva îndemnuri importante la acțiune. De aceea, este important să optimizați bara laterală de pe mobil.

În acest tutorial, vom analiza modalitățile prin care puteți utiliza Divi Theme Builder pentru a vă optimiza bara laterală pe ecranul mobil. Iată câteva dintre lucrurile pe care le vom acoperi în acest articol:

• Cum să creați un șablon cu o bară laterală
• Crearea conținutului barei laterale utilizând modulele Divi și widgeturile WordPress
• Utilizarea mai multor zone widget pentru a ascunde / afișa anumite widget-uri pe mobil
• Controlul spațiului dintre conținutul barei laterale pe mobil
• Ascunderea completă a conținutului barei laterale pe mobil
• Ascunderea unor conținuturi ale barei laterale pe mobil
• Ascunderea elementelor din module pentru a minimiza conținutul pe mobil
• Sensibilizarea conținutului din bara laterală prin ajustarea dimensiunii și spațiului textului
• Cum se modifică ordinea de stivuire a barei laterale pe mobil

Să începem.

Trage cu ochiul

Iată o privire rapidă asupra aspectului barei laterale de pe desktop și a modului în care a fost optimizat pentru afișarea mobilă.

Descărcați șablonul GRATUIT cu bara laterală optimizată pe mobil

Pentru a pune mâna pe șablonul 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 în listă, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare. Nu veți fi abonați ș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!

Abonați-vă la canalul nostru Youtube

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.

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

Ce trebuie să începeți

Pentru a începe, va trebui să instalați și să activați tema Divi. Asigurați-vă că aveți cea mai recentă versiune de Divi.

De asemenea, veți avea nevoie de câteva postări / pagini create în scopul testării, pentru ca conținutul paginii să afișeze efectiv rezultate.

După aceea, sunteți gata să plecați.

Cum să optimizați bara laterală a șablonului Divi pe mobil

Înainte de a începe să ne optimizăm bara laterală pe mobil, trebuie mai întâi să punem în funcțiune un model de lucru. Vom construi bara noastră laterală pe un șablon de pagină folosind Divi Theme Builder. Acest lucru ne va ajuta să înțelegem mai bine ce a implicat construirea unei bare laterale în Divi, astfel încât să putem înțelege mai bine cum să o optimizăm pe mobil.

Crearea șablonului cu bara laterală

Importul Divi Theme Builder Pack # 3

Pentru a începe lucrurile, vom folosi pachetul Divi Theme Builder # 3 pentru a lansa proiectarea site-ului nostru. Apoi, vom folosi unul dintre șabloane pentru a adăuga bara laterală pe care o vom optimiza pentru mobil.

După ce descărcați pachetul, dezarhivați folderul.

Din tabloul de bord WordPress, navigați la Divi> Theme Builder. Apoi faceți clic pe pictograma de portabilitate din meniul din dreapta sus al paginii. Din modalitatea de portabilitate, selectați fila de import și alegeți fișierul divi-theme-builder-pack-3-all.json din folderul pe care l-ați descărcat anterior. Apoi faceți clic pe butonul de import.

Important: Vă rugăm să utilizați un site de testare cu o nouă instalare a Divi, astfel încât să nu suprascrieți conținutul live de pe site-ul dvs. web sau să nu spargeți ceva.

Veți vedea că toate șabloanele au fost importate în generatorul de teme.

Construirea aspectului barei laterale în interiorul șablonului de pagină categorie

Găsiți șablonul Toate categoriile de pagini și faceți clic pentru a edita aspectul personalizat al corpului.

Aspectul curent al paginii folosește un rând cu o coloană pentru zona principală de conținut a paginii. Va trebui să schimbăm acest lucru într-o structură de aspect a barei laterale. Pentru a face acest lucru, faceți clic pe pictograma „Alegeți aspectul” din meniul rând al celui de-al doilea rând și alegeți structura de aspect a coloanei cu două treimi.

Acum veți avea o zonă în partea dreaptă pentru bara laterală.

AVIZ: Nu folosesc o secțiune specială pentru acest aspect al barei laterale. Secțiunile de specialitate nu sunt necesare atunci când creați un aspect al barei laterale pentru pagina dvs., totuși, dacă doriți să păstrați funcționalități de rând separate pentru zona principală de conținut, veți dori să utilizați o secțiune de specialitate.

Nu ne vom concentra prea mult recreând designul exact al modulelor din acest tutorial. În schimb, ne vom concentra asupra acelor elemente care vor ajuta la optimizarea barei laterale de pe mobil.

Acestea fiind spuse, trebuie să adăugăm o culoare de fundal și o umplutură în coloana barei laterale.

Setările coloanei din bara laterală

Deschideți setările pentru coloana desemnată pentru bara laterală și actualizați următoarele:

• Culoare fundal: # f2f5f9
• Căptușeală: 25 px sus, 25 px jos, 25 px stânga, 25 px dreapta

Crearea conținutului barei laterale cu module Divi și widgeturi WordPress

Conținutul barei laterale va varia în funcție de nevoile unui site web. Cu toate acestea, dacă vorbim despre un site de blog, de obicei veți găsi o combinație a următoarelor elemente de conținut din bara laterală:

• Informații despre autor (nume, imagine, biografie)
• Rețelele sociale urmăresc butoanele
• Înscriere prin e-mail
• Link-uri către produse și / sau servicii
• Reclame
• Categorii
• Postări recente / populare

Crearea acestor elemente în Divi se poate face folosind o combinație de module Divi. Pentru acest exemplu, vom adăuga următoarele module Divi pentru a construi conținutul din bara laterală.

1. Modul de căutare - Acesta va servi drept formular de căutare.
2. Modul Optin de e-mail - Acesta va servi drept formular optin de e-mail.
3. Modul text - Acesta va fi titlul butoanelor Urmăriți pe rețelele sociale
4. Modul de urmărire pe rețelele sociale - Acesta va afișa butoanele de urmărire pe rețelele sociale.
5. Modulul de text (cu imagine bg) - Acesta va servi ca exemplu de anunț pentru bara laterală.
6. Modul Blurb (cu conținut autor) - Acesta va servi drept zona de informații despre autor din bara laterală.
7. Modulul de text - Acesta va servi drept titlu pentru modulul de blog de sub acesta.
8. Modul de blog - Acesta va servi drept conținut recent / prezentat în bara laterală.

Extragerea widgeturilor WordPress folosind modulul barei laterale

Dacă nu sunteți deja familiarizați, Divi are un modul al barei laterale care vă permite să trageți conținutul zonei widgetului (sau widgeturilor) în zona Divi Sidebar. De fapt, acest șablon folosește deja widgetul barei laterale din rândul de sub cel la care lucrăm.

Trageți modulul barei laterale de pe rând și plasați-l chiar sub modulul de optin e-mail.

Apoi deschideți setările modulului barei laterale. Veți vedea că modulul trage în zona widgetului din bara laterală, care ar trebui să arate după cum urmează dacă aveți configurarea implicită în WordPress.

Utilizarea mai multor zone Widget

În acest moment, zona widgetului „Sidebar” afișează mai multe widget-uri, deoarece există mai multe widget-uri în interiorul zonei widgetului Sidebar. Însă, puteți câștiga mai mult control asupra designului barei laterale Divi, utilizând mai multe zone widget care conțin un singur widget. Utilizarea mai multor zone widget vă va oferi mai mult control asupra designului widget-urilor dvs., precum și asupra vizibilității widgeturilor pe mobil.

Pentru a crea mai multe widget-uri, deschideți o filă nouă și mergeți la Tabloul de bord WordPress. Navigați la Aspect> Widgeturi.

Creați o nouă zonă Widget introducând un nume și făcând clic pe butonul Creare. Deoarece această zonă widget va fi locul în care adăugăm widgetul Categorii, să numim zona „Categorii”. Reîmprospătați pagina pentru a vedea zona widgetului. Apoi trageți widgetul Categorii în zona Widgetului Categorii.

Repetați procesul pentru a crea o nouă zonă widget numită „Arhive”. Apoi trageți Widgetul Arhivelor în zona widgetului Arhive.

Reveniți la Șablonul Pagini Categorie cu aspectul barei laterale și actualizați conținutul modulului Barei laterale pentru a afișa zona widgetului Categorii.

Duplicați modulul barei laterale (pentru a păstra designul)

Actualizați modulul din bara laterală duplicat pentru a trage în Arhiva Widget Area.

Preluarea controlului asupra spațiului dintre modulele barei laterale

În prezent, rândul care conține bara laterală are o lățime a jgheabului de 2. Acest lucru înseamnă că va exista o marjă de jos / spațierea implicită între fiecare modul din bara laterală. Pentru a câștiga mai mult control asupra acestei distanțe, putem șterge marginea inferioară a tuturor modulelor din coloana barei laterale. Pentru aceasta, deschideți setările modulului de căutare și actualizați următoarele:

• Marja de jos: 0 px (desktop), 15 px (tabletă)

Apoi faceți clic pe pictograma More Settings (sau faceți clic dreapta pe meniu) din opțiunea de margine. Apoi selectați „Extindeți marja”.

În modulul Extinde stiluri, actualizați opțiunile pentru a extinde marja la „Toate modulele” din „Această coloană”.

Apoi, putem adăuga spațierea între module folosind module divizor.

Optimizarea barei laterale pe mobil

Ascunderea barei laterale pe mobil

Uneori, poate doriți să ascundeți complet bara laterală pe mobil. Pentru a face acest lucru, va trebui să dezactivați vizibilitatea coloanei care conține bara laterală de pe tabletă și telefon.

Deschideți setările rândului și deschideți setările coloanei desemnate pentru bara laterală. Apoi actualizați vizibilitatea după cum urmează:

• Dezactivează pe: tabletă, telefon

Aceasta va ascunde întreaga bară laterală pe ecranul de pe tabletă și mobil.

Ascunderea unei părți din conținutul barei laterale pe mobil

Pe desktop, este posibil să aveți spațiu pentru păstrarea majorității (sau a întregului) conținut al barei laterale, fără ca acesta să devină o distracție prea mare față de conținut. Dar pe dispozitivele mobile, utilizatorul va trebui să deruleze o mulțime de conținut din bara laterală pe care el sau ea ar putea avea puțin interes să îl vadă. Deci, atunci când vă construiți bara laterală în Divi Theme Builder, profitați de opțiunile de vizibilitate pentru a dezactiva unele dintre elementele barei laterale de pe afișajul mobil. Și, dacă utilizați widget-uri WordPress pentru conținutul barei laterale, creați mai multe zone widget pentru a ajuta la proiectarea și ascunderea anumitor widget-uri și pe dispozitive mobile.

Pentru a ascunde modulele pe mobil, deschideți modulul de vizualizare wireframe, apoi utilizați caracteristica multiselectare Divi pentru a selecta toate modulele pe care doriți să le ascundeți / dezactivați pe tabletă și telefon. Apoi deschideți setările pentru unul dintre modulele selectate și actualizați următoarele:

• Dezactivați pe: telefon, tabletă

În această ilustrație, am ascuns toate modulele (inclusiv separatoarele), cu excepția celor două module din bara laterală (care conțin widget-urile de categorii și arhive) și modulul de text (care conține anunțul) pe ecranul tabletei și al telefonului. Pentru a o spune într-un alt mod, numai categoriile, arhivele și anunțurile vor fi afișate pe mobil.

Previzualizarea rezultatelor pe o pagină de blog

Înainte de a vedea rezultatele pe pagina live, să-l atribuim mai întâi pe pagina blogului site-ului. Pentru aceasta, faceți clic pe pictograma roată deasupra șablonului, selectați Blogul din listă și salvați-l.

Asigurați-vă că aveți o pagină de postări selectată în Aspect> Citire.

Rezultate

Iată diferența dintre bara laterală desktop și bara laterală mobilă. Observați modul în care bara laterală mobilă are conținut de lecție.

Evitarea conținutului duplicat al barei laterale și subsolului pe mobil

Pe desktop, puteți scăpa de adăugarea de conținut duplicat în bara laterală și subsol. De fapt, acesta este un mod bun de a crește conversiile. De exemplu, pe desktop, este logic să includeți un modul de optimizare a e-mailului în partea de sus a barei laterale și în subsol, astfel încât utilizatorii să poată vedea opțiunea de e-mail în timp ce citesc conținutul postării, precum și la sfârșitul postării. Cu toate acestea, pe mobil, nu există un aspect al barei laterale. Totul este afișat într-o singură coloană (poate două). Bara laterală dreaptă se stochează sub conținutul postării / paginii și bara laterală stângă se stochează deasupra conținutului postării / paginii. Deci, dacă un modul de optimizare a e-mailului din bara laterală se stochează sub conținutul postării / paginii, utilizatorul ar putea derula mai mult de un modul de optimizare a e-mailului (unul în bara laterală și unul în subsol). În plus, dacă există opțiune de e-mail în partea de jos a barei laterale din dreapta și una în partea de sus a subsolului, utilizatorul va derula două opțiuni de e-mail consecutive de pe mobil.

Ascunderea elementelor din module pentru a minimiza conținutul pe mobil

Puteți decide că ascunderea unui întreg modul pe mobil nu este necesară. În schimb, puteți minimiza conținutul modulului ascunzând anumite elemente numai pe ecranul mobil.

De exemplu, poate doriți să afișați imaginea prezentată și extrasul de postări prezentate pe bara laterală a desktopului. Dar, pe mobil, puteți ascunde imaginea prezentată și extrasul pentru a crea o versiune minimizată a conținutului.

Conformarea conținutului din bara laterală

Puteți decide să păstrați tot conținutul barei laterale pe ecranul mobil. De ce nu? Dacă aveți informații valoroase despre care știți că utilizatorii vor aprecia, în orice caz, păstrați-le. Cu toate acestea, va trebui să luați măsuri pentru a vă asigura că conținutul barei laterale este receptiv. Adică, veți dori să reglați dimensiunea și spațiul elementelor pentru a se potrivi cu ecrane mai mici. Acest lucru va reduce distanța de derulare a paginii și va facilita citirea conținutului.

Ajustați dimensiunea textului pe mobil

O modalitate ușoară de a minimiza distanța verticală și de a îmbunătăți lizibilitatea pe mobil este de a ajusta dimensiunea textului conținutului modulului din bara laterală. De exemplu, puteți regla textul antetului de la 24 px pe desktop la 14 px pe mobil.

Reglați spațiul / divizoarele pe mobil

În acest exemplu, am adăugat separatoare între module pentru a crea spațiu. Cu toate acestea, putem folosi setările divizorului Divi pentru a regla spațiul acestor separatoare pe mobil. Acest lucru va reduce spațiul irosit atunci când derulați.

De exemplu, puteți modifica marja superioară și inferioară a divizorului de la 30 px la 15 px pe tabletă și telefon.

Modificarea ordinii de stivuire a barei laterale pe mobil

Ordinea de stivuire este o problemă obișnuită cu bare laterale. Acest lucru este valabil mai ales pentru bare laterale stângi. După cum am menționat mai devreme, barele laterale din dreapta se stivuiesc sub (sau după) conținutul postării / paginii și barele laterale din stânga se află deasupra (sau înainte) a conținutului postării / paginii. Aceasta înseamnă că atunci când vizualizați o pagină cu bara laterală stângă pe mobil, primul lucru pe care îl va vedea un utilizator este conținutul barei laterale, în loc de conținutul principal al postării / paginii. Acest lucru nu este bun pentru UX. Pentru a remedia acest lucru, puteți ascunde bara laterală complet sau puteți schimba ordinea de stivuire, astfel încât bara laterală stângă să cadă sub conținutul postării / paginii de pe mobil.

Pentru a schimba ordinea de stivuire a unei bare laterale din stânga pentru a stiva sub (sau după) conținutul paginii de pe dispozitivul mobil, deschideți setările de rând ale rândului care conține aspectul barei laterale. Apoi adăugați următorul CSS personalizat la elementul principal:

 display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

Apoi deschideți setările coloanei coloanei desemnate ca bara laterală și adăugați următorul CSS personalizat pe afișajul tabletei Element principal:

order: 2;

Dacă nu ați ghicit, acest mic fragment modifică ordinea de la valoarea implicită („1”) la valoarea „2”, ceea ce face ca întreaga coloană / bara laterală să se stiveze sub / după coloana care conține conținutul principal.

Gânduri finale

Barele laterale continuă să fie un spațiu familiar pentru utilizatorii care oferă conținut secundar util pe măsură ce se implică în conținutul principal al unei pagini. Cu toate acestea, același conținut al barei laterale de pe mobil poate deveni o distragere a atenției. Sperăm că această postare v-a inspirat să acordați barelor laterale atenția pe care o merită pe tablete și telefoane. Acest lucru poate însemna că ascundeți complet bara laterală, afișați doar o parte din conținutul barei laterale sau optimizați simplu conținutul existent special pentru afișarea mobilă.

Bara laterală care a fost construită pentru șablonul din acest tutorial a fost proiectată folosind elementele de proiectare existente găsite în pachetul de aspect # 3 al constructorului de teme. Dacă vă place designul acestui șablon cu bara laterală, nu ezitați să îl descărcați mai sus pentru a arunca o privire mai atentă.

Pentru mai multe informații, consultați acest ghid pentru utilizarea barei laterale cu Divi Theme Builder.

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

Noroc!