Cum să creați o navigare verticală cu Divi care să conducă afacerea
Publicat: 2017-08-29În tutorialul Divi de astăzi, vă vom arăta cum să creați o navigare verticală care să conducă afacerea pentru site-ul dvs. web. Navigarea verticală pe care vă vom arăta cum să o faceți va fi de obicei utilizată pentru companiile care consideră că este important ca vizitatorii să acționeze imediat. De exemplu, dacă dețineți un restaurant care permite clienților să comande online, este posibil să doriți ca site-ul dvs. web să ajute vizitatorii să acționeze rapid.
Navigarea verticală pe care vă vom arăta cum să o faceți va conține informații importante și îndemnuri în locul paginilor. Includerea acestora în navigarea verticală va stimula vizitatorii să comande și, astfel, să crească rata de conversie a site-ului web.
Rezultat
Înainte de a vă scufunda în diferiți pași și inspirație, să aruncăm o privire asupra rezultatului de navigație verticală pe care îl veți putea obține la sfârșitul acestei postări:
În afară de a vă arăta cum să adăugați toate elementele de meniu diferite la navigarea verticală, vom folosi și navigarea fixă. În acest fel, sunteți sigur că informațiile îi urmăresc pe vizitatori în întregul one-pager.
Inspirație
Inspirația pe care am avut-o pentru acest lucru în ceea ce privește navigația verticală care conduce afaceri provine de la un site web pe care l-am prezentat într-o postare anterioară. În această postare, am enumerat 12 site-uri web care utilizează navigarea verticală în scopuri proprii ale site-ului web. Unul dintre exemplele care a atras atenția oamenilor a fost site-ul Eat Thai Restaurant. Navigarea lor verticală este unul dintre acele concepte out-of-the-box. Site-ul lor web este un singur pager, dar au găsit o modalitate frumoasă de a utiliza în continuare posibilitățile de navigare. Site-ul lor web arată astfel:
Cum să creați o navigare verticală cu Divi care să conducă afacerea
Abonați-vă la canalul nostru Youtube
Activați navigarea verticală
Pentru a începe, va trebui să activăm opțiunea de navigare verticală oferită de Divi. Pentru aceasta, accesați tabloul de bord WordPress> Aspect> Antet și navigare> Format antet> Activați navigarea verticală.
Activați navigarea fixă
Navigarea verticală pe care o recreăm va fi remediată, la fel ca site-ul Eat Thai Restaurant. Pentru a vă fixa navigarea verticală, accesați tabloul de bord WordPress> Divi> Opțiuni temă> fila General> Activați navigarea fixă.
Setări meniu principal (Personalizator temă)
Următorul lucru pe care va trebui să-l faceți este să faceți câteva modificări la meniul principal. Dacă vă aflați în tabloul de bord WordPress, accesați Aspect> Personalizare> Antet și navigare> Bara de meniu principală . După ce sunteți acolo, puteți face următoarele modificări (sau orice alte modificări pe care doriți să le faceți):
- Ascundeți imaginea logo-ului: dezactivați
- Logo Înălțime maximă: 100
- Marja superioară a meniului: 0
- Dimensiune text: 14
- Spațierea literelor: -1
- Font: Lato Light
- Culoarea textului: #FFFFFF
- Culoare link activ: #FFFFFF
- Culoare fundal: # 004159
- Culoarea fundalului meniului drop-down: # 004159
Setări fixe pentru meniul de navigare (Theme Customizer)
Ultimul lucru pe care trebuie să-l facem în Customizerul tematic este să ne asigurăm că logo-ul apare în timp ce derulați. Dacă sunteți încă în Personalizatorul de teme, accesați Antet și navigare> Setări de navigare fixe> Și asigurați-vă că opțiunea „Ascunde sigla” este dezactivată.
Adăugați elemente de meniu
Continuând, vom adăuga elementele de meniu la navigarea noastră verticală. Această parte a postării vă va ocupa probabil cea mai mare parte a timpului. Trebuie să adăugați fiecare dintre articole în mod individual prin linkuri personalizate.
Activați clase CSS
Dar înainte de a începe să adăugăm elementele de meniu, va trebui să vă asigurați că opțiunea Clase CSS este activată. Această opțiune vă permite să atribuiți o clasă fiecăruia dintre elementele de meniu individual. În acest caz, este necesar, deoarece majoritatea articolelor vor avea propriile setări de stil. Pentru a activa opțiunea Clase CSS, faceți clic pe „Opțiuni ecran” în partea dreaptă sus a paginii Meniu și activați opțiunea Clase CSS așa cum se arată în captura de ecran de mai jos.
Adăugați un meniu nou
După ce ați activat clasele CSS pentru elementele de meniu, puteți continua și creați un nou meniu. Dați-i un nume și asigurați-vă că faceți din acest nou meniu meniul principal.
După ce ați adăugat toate elementele de meniu (pe care vi le vom arăta pas cu pas), meniul dvs. va arăta astfel pe backend:
Număr de telefon
Deoarece acesta este un singur pager, nu vor exista pagini incluse în meniu. Toate elementele pe care le vom adăuga la meniu vor fi mai degrabă linkuri personalizate. Acest lucru ne oferă posibilitatea de a ne juca cu lucrurile pe care dorim să le adăugăm.
Pentru a adăuga primul dvs. element de meniu, faceți clic pe Legături personalizate și adăugați numărul de telefon în câmpul Etichetă de navigare. Puteți alege dacă doriți să adăugați sau nu o adresă URL. Cu toate acestea, atunci când adăugați elementul de meniu în meniul dvs., va trebui să completați o adresă URL. După ce elementul de meniu a fost adăugat în meniul dvs., puteți șterge adresa URL și veți fi siguri că nu se va întâmpla nimic atunci când cineva face clic pe elementul de meniu.
După ce ați adăugat elementul de meniu la meniu, veți vedea, de asemenea, clasa CSS. Acolo va trebui să decideți asupra unei clase CSS care va modifica stilul elementului de meniu. În acest caz, folosim clasa „număr de telefon”. Dacă doriți doar să copiați și să lipiți liniile de cod CSS la sfârșitul acestei postări, asigurați-vă că utilizați clasele CSS menționate în acești pași.
Abordare
La fel, vom adăuga adresa. Completați adresa din eticheta de navigare și adăugați o adresă URL, dacă doriți. Clasa pe care o folosim pentru elementul de meniu adresă este pur și simplu „adresă”.
Icoane sociale
Adăugarea pictogramelor sociale la navigarea pe verticală necesită un efort mai mare. Într-o postare anterioară, am gestionat în mod explicit adăugarea de pictograme sociale în meniul dvs. principal. Cu toate acestea, în acest caz, metoda va fi ușor diferită, deoarece va trebui să obținem pictogramele aliniate una lângă alta în navigarea verticală.
Adăugați Font Awesome
Primul lucru pe care trebuie să-l faceți, dacă nu ați făcut-o deja, este să adăugați Font Awesome la Opțiunile temei. Pentru aceasta, accesați tabloul de bord WordPress> Divi> Opțiuni tematice> Integrare> Și lipiți următorul cod scurt în capul site-ului dvs. web:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
Obțineți coduri scurte
Pentru a obține codurile scurte la pictogramele sociale; deschideți această pagină pe site-ul Font Awesome. În câmpul de căutare pe care îl veți vedea pe pagina respectivă, căutați diferite pictograme pe care doriți să le adăugați la navigarea pe verticală.
După ce faceți clic pe pictogramă, veți vedea codul scurt legat de pictogramă. Salvați fiecare dintre aceste coduri scurte undeva.
Adăugați pictograme sociale în meniu
Mai departe, vom adăuga pictogramele sociale. În mod normal, puteți adăuga fiecare dintre pictogramele sociale individual ca elemente de meniu. Dar, deoarece vrem să apară unul lângă celălalt, va trebui să le plasăm în același element de meniu. Codul HTML pe care va trebui să îl adăugați la eticheta de navigare este următorul:
<a href="#" target="_blank"><i class="fa fa-facebook-official facebook" aria-hidden="true"></i></a> <a href="#" target="_blank"><i class="fa fa-instagram instagram" aria-hidden="true"></i></a> <a href="#" target="_blank"><i class="fa fa-envelope envelope" aria-hidden="true"></i></a>
Nu uitați să adăugați o adresă URL la fiecare dintre pictograme. Clasa pe care o folosim pentru toate cele trei pictograme sociale combinate este „icon-wrapper”, dar am atribuit și o clasă suplimentară fiecărei pictograme sociale pentru a face ajustări individuale. Puteți observa aceste clase imediat după clasa Font Awesome. Se numesc „facebook”, „instagram” și „plic”.
Directii
Pentru următorul element de meniu, am folosit cuvântul „direcții” ca nume de clasă CSS.
Linia
Pentru a adăuga o linie chiar sub indicații, trebuie să adăugăm un caracter necompletat în Navigare etichetă. Asta pentru că WordPress nu vă permite să creați un element de meniu fără a avea o etichetă legată de acesta. Pentru a adăuga un caracter necompletat la elementul de meniu rând, trebuie doar să adăugați „& nbsp;” la eticheta de navigare. Mai mult, adăugați „linie” ca nume de clasă CSS la acest element de meniu.
Ore de deschidere
Mai departe, vom adăuga orele de deschidere și îi vom atribui numele clasei CSS „ore”.
CTA 1
În continuare, vom adăuga primul CTA. Vom atribui numele clasei CSS „cta-1”.
CTA 2
Pentru al doilea CTA, vom folosi numele clasei CSS „cta-2”.
Buton CTA
Adăugarea butonului CTA la navigarea pe verticală necesită câțiva pași mai mulți decât elementele obișnuite din meniu care sunt doar text. Începeți prin a deschide pagina pe care o utilizați ca un singur pager și urmați pașii următori menționați mai jos.
Creați butonul pe pagina de destinație
Dacă doriți să utilizați un buton CTA în navigarea dvs. verticală, va trebui să aveți același buton undeva pe un singur pager. După ce ați creat unul, puteți inspecta elementul și puteți copia următoarele linii de cod (legate de butonul pe care l-ați creat) care apar în codul site-ului dvs. web:
<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> <a class="et_pb_button et_pb_button_0 et_pb_module et_pb_bg_layout_light"> ORDER NOW </a> </div>
Desigur, acest cod ar putea diferi în funcție de modul în care îl stilizați. De asemenea, depinde dacă există sau nu alte butoane pe aceeași pagină. Să știți că butonul va apărea numai cu stilul pe care i-l atribuiți pe pagina în care se află butonul. De aceea, adăugarea unui buton la navigarea pe verticală este de obicei preferabilă numai atunci când privește un singur pager.
Notă: asigurați-vă că reglați dimensiunea fontului și căptușeala butonului în modulul butonului, astfel încât să se potrivească perfect în Navigația dvs. verticală.
Adăugați ca element de meniu
Acum că ați copiat codul HTML necesar legat de buton, adăugați un nou link personalizat și adăugați codul pe eticheta de navigare. Clasa CSS pe care o folosim pentru acest element de meniu este „cta-3”.
Adăugați linii de cod CSS
Următoarea parte a acestui post este dedicată partajării liniilor de cod CSS care vă ajută să obțineți rezultatul final și aspectul. Veți observa că am folosit clasele CSS pe care le-am atribuit diferitelor elemente de meniu. Cu toate acestea, dacă ați decis să utilizați diferite nume de clase, asigurați-vă că le schimbați în codul CSS pentru a-l face să funcționeze.
Pentru a adăuga codul CSS, accesați tabloul de bord WordPress> Divi> Opțiuni temă> Derulați în jos fila General și adăugați următoarele linii de cod CSS în caseta CSS personalizată:
@media only screen and (min-width:992px) {
.et_vertical_nav #page-container #main-header {
margin: 10px !important;
height: 93% !important;
z-index: 9999;
}}
.phone-number {
font-size: 1.9em !important;
font-weight: 400 !important;
}
.address {
font-weight: 300 !important;
}
@media only screen and (min-width:769px){
#main-header div#et-top-navigation {
padding-top: 110px;
height: 100%;
position: static !important;
}}
@media only screen and (min-width:769px){
.et_vertical_nav span.logo_helper {
display: none;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header #logo {
margin-bottom: 28px;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header .container {
margin-left: 25px !important;
margin-right: 25px !important;
height: 100% !important;
}}
.facebook, .instagram, .envelope {
padding: 7px 13px 7px 13px;
font-size: 1.6em;
}
.icon-wrapper a {
display: inline-block !important;
}
.directions {
font-size: 1.2em;
font-weight: 400;
padding-top: 0;
text-align: center;
}
.line {
border-top: 1px solid;
color: #fff;
margin: 8px auto auto;
width: 20%;
}
.hours {
color: #ffffff;
font-size: 10px;
font-weight: 300;
text-align: center;
}
.cta-1 {
margin-top: 5px !important;
font-size: 1.3em;
font-weight: 600;
text-align: center;
}
.cta-2{
font-size: 1.1em;
font-weight: 300;
letter-spacing: 0.02em;
text-align: center;
}
#page-container {
background: #d6d4d1;
}
@media only screen and (max-width:768px) {
.directions, .line, .cta-1, .cta-2, .cta-3 {
display: none !important;
}}
#main-header #top-menu-nav .nav li {
line-height: 10.5px;
}
Schimbați culoarea de fundal a secțiunilor
Ultimul pas pe care trebuie să-l faceți este să schimbați culorile de fundal ale secțiunilor de pe un singur pager. Asigurați-vă că această culoare este aceeași cu cea pe care o utilizați pentru containerul de pagini. În acest caz, acesta este „# d6d4d1”.
Rezultat
După ce ați adăugat toate elementele de meniu și codul CSS conectat la fiecare dintre aceste elemente de meniu, ar trebui să puteți obține următorul rezultat:
Gânduri finale
În această postare, v-am arătat cum să creați o navigație verticală pentru un singur pager. Această postare a fost inspirată de site-ul Eat Thai Restaurant, care a fost realizat și cu Divi. Dacă ați urmărit pas cu pas întreaga postare, ar trebui să fiți capabil să obțineți rezultatul prezentat mai sus. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!
Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!
Imagine prezentată de Vectomart / shutterstock.com