Cum să adăugați widgeturi de meniu pentru categoria de postări în subsolul dvs. global Divi

Atunci când creați un subsol personalizat în cadrul Divi's Theme Builder, există mai multe moduri de abordare a adăugării elementelor subsolului. Puteți alege un subsol bazat pe module, în care adăugați elemente de subsol de pagină în modulele de text cu link-uri adecvate, dar puteți decide, de asemenea, să adăugați diferite widgeturi de subsol la designul dvs., utilizând modulul Sidebar al lui Divi și să le stilizați folosind modulul încorporat al lui Divi. Opțiuni. În tutorialul de astăzi, vă vom arăta cum să parcurgeți a doua opțiune. Mai precis, vă vom arăta cum să adăugați widgeturi din meniul categoriei de postări în subsolul dvs. Stilul de design pe care îl folosim se potrivește perfect cu pachetul de aspect pentru rețete alimentare. Vom începe prin adăugarea diferitelor categorii de postări pe site-ul nostru. Vom construi apoi meniurile de subsol în WordPress. Apoi, vom crea widgeturile noastre și nu în ultimul rând, vom adăuga un widget-uri la subsolul nostru Divi personalizat din Divi Theme Builder. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați Șablonul de subsol global GRATUIT

Pentru a pune mâna pe șablonul de subsol global gratuit, 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!

1. Configurați Categorii de postări pentru site-ul dvs. web

Accesați categoriile dvs. de postări

În prima parte a acestui tutorial, ne vom asigura că toate categoriile de postări sunt configurate înainte de a începe să le adăugăm în meniurile de subsol personalizate. Pentru a face acest lucru, navigați la categoriile de postări din interiorul backend-ului WordPress.

Configurați structura categoriei postate la alegere

Configurați toate categoriile diferite de postări pe care doriți să le includeți în subsolul dvs., dacă nu ați făcut deja acest lucru. Pentru acest tutorial, vom avea nevoie de trei grupuri diferite de categorii de postări, deoarece vom include trei widget-uri diferite din meniul categoriei de postări în subsolul nostru personalizat.

2. Creați mai multe meniuri WordPress de categorie

Accesați Meniuri

În continuare, vom crea un meniu separat pentru fiecare grup de categorii de postări. Navigați la meniuri din setările de aspect ale site-ului dvs. WordPress.

Creați meniul Primului subsol

Adăugați un meniu pentru primul subsol și acordându-i un nume recunoscut.

• Nume meniu: Meniu subsol nr. 1

Adăugați categorii de postări

Adăugați primul grup de categorii de postări la acest nou meniu.

Creați al doilea și al treilea meniu de subsol pentru alte categorii de postări

Faceți același lucru pentru alte două grupuri de categorii de postări.

• Nume meniu: Meniu subsol nr. 2

• Nume meniu: Meniu subsol nr. 3

3. Creați widgeturi de subsol

Accesați Widgeturi

Acum că avem la dispoziție categoriile de postări și meniurile de categorii de postări, le putem plasa în widgeturile din zona de subsol. Pentru aceasta, navigați la widget-uri din backend-ul WordPress.

Adăugați Meniul de subsol nr. 1 la Zona de subsol nr. 1

Acolo, adăugați un prim widget de meniu de navigare în zona de subsol nr. 1. În meniul de navigare, selectați primul meniu de subsol pe care l-ați creat în partea anterioară a acestui tutorial.

Adăugați Meniul de subsol nr. 2 la Zona de subsol nr. 2

Plasați cel de-al doilea meniu al categoriei de postări în a doua zonă de subsol.

Adăugați Meniul de subsol nr. 3 la Zona de subsol nr. 3

Și al treilea meniu de subsol din zona celui de-al treilea subsol.

Adăugați postări recente în subsolul # 4

Ultimul widget de care avem nevoie, pe care îl vom adăuga în a patra zonă de subsol, este widgetul pentru postări recente. Acest widget vă va arăta dinamic ultimele 5 postări recente ca linkuri.

3. Construiți subsol global în cadrul Divi Theme Builder

Accesați Divi Theme Builder și începeți să construiți șablonul de subsol

Acum că categoriile noastre de postări, meniurile de categorii de postări și widget-urile sunt la locul lor, este timpul să treceți la Divi! Accesați Divi Theme Builder și începeți să creați un subsol global sau personalizat.

Setări secțiune

Culoare de fundal

Odată ajuns în șablonul de subsol, veți observa o secțiune. Deschideți acea secțiune și adăugați o culoare de fundal. Stilul pe care îl folosim de-a lungul acestui design se potrivește perfect cu pachetul de aspect pentru rețete alimentare, dar abordarea va funcționa cu orice tip de design pe care îl alegeți.

• Culoare fundal: # ff7864

Imagine de fundal

Adăugați o imagine de fundal în continuare. Dacă doriți să utilizați exact același lucru ca în acest tutorial, îl puteți găsi în folderul pe care îl puteți descărca la începutul acestui tutorial.

• Dimensiunea imaginii de fundal: potrivită

Spațiere

Treceți la fila de proiectare a secțiunii și eliminați toate umpluturile implicite de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Fundal de gradient

Fără a adăuga încă module, deschideți setările rândului și aplicați un fundal de gradient.

• Culoare 1: rgba (10,10,10,0,05)
• Culoare 2: rgba (10,10,10,0,18)

Dimensionare

Treceți la fila de proiectare a rândului și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime maximă: 1680 px

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Setări coloana 1

Spațiere

Apoi, deschideți setările coloanei 1 și adăugați câteva valori de umplere personalizate în fila de proiectare.

• Căptușeală superioară: 5%
• Căptușeală inferioară: 5%
• Căptușeală stângă: 5%
• Căptușeală dreaptă: 5%

Frontieră

Folosim și o margine dreaptă pe desktop.

• Lățimea marginii drepte:
  • Desktop: 2 px
  • Tabletă și telefon: 0 px
• Culoare margine dreaptă: # ff7864

Setări coloana 2

Spațiere

Apoi, deschideți setările coloanei 2 și aplicați următoarele valori de umplere:

• Căptușeală superioară: 5%
• Căptușeală inferioară: 5%
• Căptușeală stângă: 5%
• Căptușeală dreaptă: 5%

Adăugați modulul de imagine în coloana 1

Încărcați sigla

Este timpul să adăugați module, începând cu un modul de imagine în coloana 1. Încărcați o siglă la alegere și stilizați-o după cum doriți.

Adăugați un modul de text în coloana 2

Adăugați conținut H2

În a doua coloană, adăugăm un modul text cu un conținut H2 descriptiv.

Setări text H2

Treceți la fila de proiectare și modificați setările de text H2 în consecință:

• Rubrica 2 Font: Cormoran Garamond
• Rubrica 2 Greutate font: Mediu
• Rubrica 2 Culoarea textului: #ffffff
• Rubrica 2 Dimensiune text:
  • Desktop și tabletă: 40 px
  • Telefon: 35 px
• Titlul 2 Înălțimea liniei: 1.3em

Adăugați rândul # 2

Structura coloanei

Trecem la rândul următor. În acest rând, vom plasa toate widgeturile noastre. Alegeți următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândului și aplicați o culoare de fundal.

• Culoare fundal: rgba (10,10,10,0,05)

Dimensionare

Treceți la fila de proiectare și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime maximă: 1680 px

Spațiere

Eliminați și toate căptușelile implicite, de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Toate spațiile coloanelor

Apoi, deschideți coloanele individual și aplicați următoarele valori de umplere pentru fiecare dintre ele:

• Căptușeală superioară: 5%
• Căptușeală inferioară: 5%
• Căptușeală stângă: 5%
• Căptușeală dreaptă: 5%

Coloana 1 Border

În continuare, vom adăuga un chenar la coloana 1.

• Lățimea marginii drepte:
  • Desktop și tabletă: 2 px
  • Telefon: 0px
• Culoare margine dreaptă: # ff7864

Coloana 2 Border

Folosim aceeași margine, cu câteva valori de răspuns diferite, pentru a doua coloană.

• Lățimea marginii drepte:
  • Desktop: 2 px
  • Telefon și tabletă: 0 px
• Culoare margine dreaptă: # ff7864

Coloana 3 Border

Și nu în ultimul rând, vom adăuga o margine dreaptă și la a treia coloană.

• Lățimea marginii drepte:
  • Desktop și tabletă: 2 px
  • Telefon: 0px
• Culoare margine dreaptă: # ff7864

Adăugați modulul barei laterale la coloana 1

E timpul să adăugați widget-urile noastre din meniul categoriei de postări! Pentru a face acest lucru, vom folosi modulul integrat al barei laterale Divi. Adăugați una la prima coloană a rândului.

Selectați Zona de subsol # 1

Selectați prima zonă de subsol. Aceasta este legată de meniul nostru pentru prima categorie de postări pe care l-am creat.

• Zona Widget: Zona de subsol nr. 1

Aspect

Treceți la fila de proiectare a modulului și dezactivați separatorul de margini.

• Afișați separatorul de frontieră: nu

Setări text corp

Modificați și setările pentru textul corpului.

• Font corp: Montserrat
• Greutate font corp: mediu
• Culoarea textului corpului: #ffffff
• Dimensiunea textului corpului: 13 px

Spațiere

Și finalizați setările modulului adăugând niște umpluturi de sus și de jos la setările de spațiere.

• Căptușeală superioară: 5%
• Căptușeală inferioară: 5%

Clonați modulul barei laterale de două ori și plasați duplicatele în coloanele 2 și 3

După ce ați finalizat primul modul al barei laterale, îl puteți clona de două ori și puteți plasa duplicatele în coloana 2 și 3.

Schimbați zonele subsolului

Modificați zona widgetului pentru fiecare duplicat pentru a afișa diferitele meniuri de categorii de postări pe care le-ați creat.

• Zona Widget: Zona de subsol # 2

• Zona Widget: Zona de subsol # 3

Adăugați modulul barei laterale la coloana 4

Acum, în ultima coloană, adăugăm un nou modul al barei laterale.

Selectați Zona de subsol # 4

În acest modul, selectăm a patra zonă de subsol pe care am creat-o, care conține postările noastre recente.

• Zona Widget: Zona de subsol # 4

Setări text titlu

Treceți la fila de proiectare a modulului și modificați setările textului titlului după cum urmează:

• Titlu Font: Cormoran Garamond
• Culoarea textului titlului: #ffffff
• Dimensiune text titlu: 30 px

Setări text corp

Efectuați și câteva modificări la setările pentru textul corpului.

• Font corp: Montserrat
• Greutate font corp: mediu
• Culoarea textului corpului: #dddddd
• Dimensiunea textului corpului: 13 px

Spațiere

Și finalizați setările modulului și acest tutorial, adăugând câteva umpluturi personalizate în partea de sus și de jos la setările de spațiere ale modulului. Asta e! Asigurați-vă că salvați toate modificările Divi Theme Builder înainte de a vizualiza rezultatul pe site-ul dvs. web.

• Căptușeală superioară: 5%
• Căptușeală inferioară: 5%

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În acest tutorial, v-am arătat cum să combinați Divi Theme Builder cu widgeturile de subsol WordPress și modulul Divi Sidebar. Mai precis, v-am arătat cum să adăugați widget-uri din meniul categoriei de postări în subsolul dvs. global pentru a vă face călătoria de navigare a vizitatorilor mai ușoară. Această abordare vă va ajuta să stilizați elementele de subsol folosind opțiunile încorporate ale Divi, păstrând în același timp meniurile și widgeturile de subsol în backend-ul WordPress. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.