Cum să afișați vizual categoriile de postări pe blog în antetul dvs. Divi

Când vă creați antetul global, sunt mari șanse să includeți un element din meniul blogului. Dacă nu aveți multe categorii de postări pe blog pe site-ul dvs., ar putea fi suficient să alegeți un element de meniu pentru blog. Cu toate acestea, dacă aveți un set de categorii diferite și doriți să evidențiați fiecare dintre ele, poate doriți să încercați o abordare diferită, cum ar fi prezentarea vizuală a fiecărei categorii de bloguri într-un meniu derulant.

În acest tutorial, vă vom arăta exact cum să faceți acest lucru folosind Divi's Theme Builder. Vom construi meniul derulant folosind elementele și opțiunile încorporate ale Divi și îl vom combina cu un cod care ne va permite să plasăm meniul derulant în elementul de meniu al blogului. 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

Descarcă The Global Header GRATUIT

Pentru a pune mâinile pe antetul 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!

Cum se încarcă fișierul JSON

Dezarhivați fișierul zip pe care l-ați putut descărca mai sus. Apoi, navigați la site-ul dvs. WordPress> Divi> Biblioteca Divi și încărcați JSON.

Odată ce aspectul dvs. este salvat în Biblioteca Divi, puteți naviga la Divi Theme Builder și puteți importa aspectul salvat făcând clic pe „Adăugați antet global” sau „Adăugați antet personalizat” și selectând „Construiți antet global / personalizat”. Accesați fila „Aspectele dvs. salvate” din Biblioteca Divi, selectați aspectul pe care l-ați încărcat în pasul anterior și salvați toate modificările Divi Theme Builder.

Pentru a avea un meniu funcțional chiar lângă bat, vi se va cere să parcurgeți prima parte a acestui tutorial de mai jos; adăugarea claselor CSS la elementele de meniu la nivel individual. De asemenea, va trebui să activați una dintre clasele CSS din modulul de cod, așa cum se arată în partea 5 a acestui tutorial.

1. Adăugați Clasa CSS la elementul din meniul Blog

Accesați Meniuri în aparență

În prima parte a acestui tutorial, vom adăuga două clase CSS personalizate la articolul din meniul paginii blogului din meniul WordPress. Pentru a face acest lucru, navigați la meniurile din tabloul de bord WordPress.

Activați opțiunea CSS Class

În partea de sus a paginii, asigurați-vă că activați opțiunea clase CSS în interiorul opțiunii ecran.

Adăugați clase CSS la elementul din meniul Blog

Apoi, găsiți elementul de meniu al blogului și adăugați două clase CSS la acesta. Asigurați-vă că lăsați un spațiu între clasele CSS.

• Clase CSS: primul nivel primul-nivel-1

2. Creați un antet personalizat cu Divi's Theme Builder

Accesați Divi Theme Builder

Odată ce elementul de meniu Clasele CSS sunt la locul său, este timpul să treceți la Divi. Accesați Divi Theme Builder și selectați „Adăugați antet global / personalizat”.

Începeți să creați antet global

Apoi, selectați „Construiți antet global” pentru a fi redirecționat către editorul de șabloane.

Setări secțiune

Culoare de fundal

În editorul de șabloane, veți observa o secțiune. Deschideți acea secțiune și aplicați o culoare de fundal alb.

• Culoare fundal: #FFFFFF

Spațiere

Treceți la fila de proiectare ș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:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare în consecință:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 95%
• Lățime maximă: 100%

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

Adăugați modulul de meniu la rând

Selectați Meniu

Apoi, adăugați un modul de meniu și selectați meniul pe care l-ați modificat în prima parte a acestui tutorial.

Încărcați sigla

Încărcați o siglă în continuare.

Setări text meniu

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

• Font de meniu: Roboto Mono
• Stilul fontului meniului: majuscule
• Culoare text meniu: # 000000
• Dimensiune text meniu: 18 px
• Spațiere scrisori meniu: -1 px

Setări meniu derulant

Schimbați și culoarea liniei meniului derulant.

• Culoare linie meniu drop-down: #FFFFFF

Setări pictograme

Apoi, schimbați culoarea pictogramei meniului hamburger din setările pictogramei.

• Culoare pictogramă meniu hamburger: # 000000

Clasa CSS

Și completați setările modulului adăugând o clasă CSS.

• Clasa CSS: categorie-meniu

3. Creați un design drop-down pentru blog

Adăugați rândul # 2

Structura coloanei

Odată ce rândul dvs., care conține modulul de meniu, este la locul său, este timpul să creați meniul derulant care să conțină categorii vizuale de blog. Pentru a face acest lucru, adăugați un rând nou cu două coloane de dimensiuni egale. Întregul rând va fi meniul nostru derulant pentru articolul din meniul blogului.

Culoare de fundal

Deschideți setările rândului și utilizați o culoare de fundal alb.

• Culoare fundal: #FFFFFF

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: 80vw (desktop), 100% (tabletă și telefon)
• Lățime maximă: 50vw (desktop), 100% (tabletă și telefon)

Spațiere

Modificați valorile de umplere în continuare.

• Căptușeală superioară: 10 px
• Căptușeală inferioară: 10 px
• Căptușeală stângă: 10 px
• Căptușeală inferioară: 10 px

Box Shadow

Folosim și o umbră de cutie subtilă.

• Puterea neclarității umbrei cutiei: 30 px
• Culoare umbră: rgba (0,0,0,0.13) (Desktop), rgba (0,0,0,0) (Tabletă și telefon)

Clasa CSS

Apoi, vom adăuga două clase CSS la rândul nostru. Aceste clase CSS (în combinație cu un anumit cod mai târziu) ne vor ajuta să plasăm întregul container de rând în elementul de meniu al blogului ca o listă derulantă.

• Clasa CSS: meniu derulant meniu derulant-1

Poziţie

Treceți la fila avansată și repoziționați și rândul.

• Poziție: Absolută (desktop), relativă (tabletă și telefon)
• Locație: dreapta sus
• Offset vertical: 100 px (desktop), 0 px (tabletă și telefon)
• Indicele Z: 11

Ambele coloane Element principal

Nu în ultimul rând, completați setările rândului adăugând o linie de cod CSS la elementul principal al fiecărei coloane. Acest lucru ne va ajuta să păstrăm structura coloanei pe dimensiuni mai mici ale ecranului.

width: 50% !important;

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

Adăugați numele categoriei

E timpul să afișăm vizual categoriile noastre de bloguri! Adăugați un prim modul de text în coloana 1 și adăugați titlul categoriei în caseta de conținut.

Adăugați un link de categorie

Adăugați un link către categoria dvs. în continuare.

Fundal de gradient

Apoi, aplicați următorul fundal de gradient:

• Culoare 1: rgba (0,0,0,0,08)
• Culoarea 2: # 0a0a0a
• Poziția inițială: 60%
• Poziție finală: 60%
• Plasați gradientul deasupra imaginii de fundal: Da

Imagine de fundal

Încărcați o imagine de fundal la alegere. Dacă doriți exact același rezultat ca în acest tutorial, încărcați una dintre ilustrațiile pe care le puteți găsi în folderul pe care l-ați putut descărca la începutul acestei postări.

• Dimensiunea imaginii de fundal: dimensiunea reală
• Repetarea imaginii de fundal: Repetați X (orizontală)

Setări text

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

• Font text: Roboto Mono
• Greutatea fontului textului: Bold
• Culoarea textului: #ffffff
• Dimensiune text: 1.9vw (desktop), 3vw (tabletă), 3.5vw (telefon)
• Spațiere scrisoare text: -0,1vw
• Înălțimea liniei de text: 1em

Dimensionare

Modificați setările de dimensionare în continuare.

• Lățime: 99%
• Alinierea modulului: stânga

Spațiere

Modificați și setările de spațiere.

• Marja inferioară: 10 px
• Marja dreaptă: 1% (tabletă și telefon)
• Căptușeală superioară: 60% (desktop), 40% (tabletă și telefon)
• Căptușeală inferioară: 4%
• Căptușeală stângă: 2%

Element principal CSS

Și completați setările modulului adăugând o linie de cod CSS la elementul principal al modulului.

cursor: pointer;

Clonați modulul text și plasați duplicatul în coloana 2

După ce ați finalizat primul modul de text, clonați modulul și plasați duplicatul în coloana 2.

Modificați modulul text în coloana 2

Schimbați numele și linkul categoriei

Modificați titlul categoriei și linkul în modulul duplicat.

Schimbați imaginea de fundal

Schimbați și imaginea de fundal. Puteți găsi ilustrația în folderul de descărcare.

• Repetarea imaginii de fundal: fără repetare

Schimbați dimensiunea

Schimbați alinierea modulului în setările de dimensionare următoare.

• Alinierea modulului: dreapta

Clonați ambele module o singură dată

După ce ați finalizat ambele module (câte unul în fiecare coloană), le puteți clona pe amândouă o dată.

Schimbați numele și linkurile categoriilor

Schimbați numele categoriilor și linkurile din modulele duplicate.

Schimbați imaginile de fundal

Împreună cu imaginile de fundal. Puteți găsi noile ilustrații în dosarul pe care l-ați putut descărca la începutul acestei postări.

• Dimensiunea imaginii de fundal: potrivită
• Repetarea imaginii de fundal: fără repetare

• Dimensiunea imaginii de fundal: potrivită
• Poziția imaginii de fundal: jos dreapta

4. Adăugați cod CSS și JQuery

Adăugați un modul de cod sub modulul de meniu din rândul # 1

După ce ați completat rândul care conține numele categoriilor din meniul derulant, adăugați un modul de cod la primul rând din secțiunea dvs., chiar sub modulul de meniu.

Adăugați cod CSS

Adăugați următoarele linii de cod CSS în modulul de cod:

<style>
/* Enable class below once you're done editing the menu */  
  
/*  
.dropdown-menu {
visibility: hidden;
}*/
  
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;

-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);  
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}
  
.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
}  

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}

.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #00C995; 
}  
  
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\37';
color: black;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\36';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
visibility: visible;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
</style>

Adăugați cod JQuery

Împreună cu un coe JQuery care vă va ajuta să plasați rândul, care conține categorii, în interiorul elementului de meniu al blogului. Asigurați-vă că plasați codul JQuery între etichetele de script așa cum puteți observa în ecranul de imprimare de mai jos.

jQuery(function($){
$(document).ready(function(){
  

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$firstLevel.off('click').click(function() {

$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 

$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');

var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();

var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  

});      
  
});
});

5. Activați clasa CSS după ce ați terminat Personalizarea articolelor drop-down ale blogului

De îndată ce ați terminat de personalizat toate elementele drop-down, veți mai avea un lucru de făcut: ascunderea întregului rând care conține elementele din meniul drop-down. Acest lucru, în combinație cu o funcție de încărcare din codul nostru, va împiedica afișarea meniului derulant la încărcarea paginii. După ce activați această clasă CSS, nu veți mai vedea al doilea rând în Visual Builder, dar îl veți putea accesa în modul wireframe și / sau dezactiva temporar clasa CSS atunci când faceți modificări în meniul derulant. Pentru a activa clasa, eliminați parantezele „/ * * /” de la începutul și sfârșitul clasei CSS.

6. Adăugarea mai multor meniuri drop-down de categorie

Clonați blogul Categorie rând

Dacă doriți să adăugați mai multe drop-down-uri de categorii, puteți clona întregul rând drop-down pe care l-ați creat.

Accesați rândul duplicat în panoul Straturi

Deoarece folosim poziționarea absolută pe desktop, rândurile vor fi plasate una peste alta. Pentru a accesa rândurile individual, deschideți panoul de straturi din Divi Builder și deschideți setările rândului duplicat.

Schimbați clasa CSS a rândului duplicat

Schimbați a doua clasă CSS din rândul duplicat. Asigurați-vă că numărul pe care îl utilizați este consecutiv.

• Clasa CSS: meniu derulant meniu derulant-2

Adăugați clase CSS la elementele de meniu în aparență

Apoi, navigați înapoi la meniul WordPress din tabloul de bord și adăugați următoarele clase CSS la un alt element de meniu și ați terminat:

• Clase CSS: primul nivel primul-nivel-2

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 această postare, v-am arătat cum puteți deveni creativi cu antetul Divi și cu elementul din meniul blogului. Mai precis, v-am arătat cum să includeți vizual categoriile de bloguri ca elemente din meniul drop-down care arată excelent pe toate dimensiunile ecranului. Această abordare vă va ajuta să evidențiați fiecare categorie diferită de blog, păstrând în același timp un aspect și o senzație minimă la prima vedere. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări, 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.