Cum să utilizați pachetul exclusiv de machetare Cyber ​​Monday pentru a crea o pagină de locații pentru afacerea dvs.

Anul acesta, a primi o ofertă Cyber ​​Monday înseamnă a primi și o grămadă de lucruri gratuite! Pe lângă faptul că beneficiază de o reducere de 25%, oricine cumpără un nou abonament Elegant Themes sau își actualizează contul existent (sau care are deja un abonament pe viață) va primi și 6 pachete de layout gratuite și exclusive, care sunt disponibile DOAR pentru descărcare în timpul vânzării noastre Cyber ​​Monday.

Descărcați aspectul exclusiv înainte ca acesta să dispară!

Sunteți deja membru pe viață? Puteți descărca pachetul chiar acum, nu este nevoie să participați la vânzarea noastră Cyber ​​Monday!

O privire în interiorul pachetului de machetare exclusivă Cyber ​​Monday

Unul dintre pachetele de aspect exclusiv pe care vi le oferim ca membri pe viață și noi clienți Cyber ​​Monday este acesta pentru brutării. Se compune din 5 pagini gustoase care vor face orice site de panificație irezistibil.

Proiectare pagină de destinație

Descărcați aspectul exclusiv înainte ca acesta să dispară!

Sunteți deja membru pe viață? Puteți descărca pachetul chiar acum, nu este nevoie să participați la vânzarea noastră Cyber ​​Monday!

Proiectare pagină rețetă

Descărcați aspectul exclusiv înainte ca acesta să dispară!

Sunteți deja membru pe viață? Puteți descărca pachetul chiar acum, nu este nevoie să participați la vânzarea noastră Cyber ​​Monday!

Proiectare pagină meniu

Descărcați aspectul exclusiv înainte ca acesta să dispară!

Sunteți deja membru pe viață? Puteți descărca pachetul chiar acum, nu este nevoie să participați la vânzarea noastră Cyber ​​Monday!

Despre proiectarea paginilor

Descărcați aspectul exclusiv înainte ca acesta să dispară!

Sunteți deja membru pe viață? Puteți descărca pachetul chiar acum, nu este nevoie să participați la vânzarea noastră Cyber ​​Monday!

Proiectare pagină de contact

Descărcați aspectul exclusiv înainte de a dispărea!

Sunteți deja membru pe viață? Puteți descărca pachetul chiar acum, nu este nevoie să participați la vânzarea noastră Cyber ​​Monday!

Obțineți pachetul exclusiv de amenajare a panificației Cyber ​​Monday

Înainte de a intra în acest caz de utilizare, va trebui să puneți mâna pe pachetul de machetare exclusiv Cyber ​​Monday Bakery pe care îl puteți obține devenind un nou membru Elegant Themes, actualizând contul dvs. existent sau fiind deja membru pe viață la noi. Dacă sunteți într-adevăr deja membru pe viață, vă puteți conecta la zona membrilor și puteți descărca aici toate pachetele noastre de machetare exclusive. Toți ceilalți vor trebui să utilizeze butonul de mai jos pentru a cumpăra sau actualiza înainte de a putea urma împreună cu restul tutorialului nostru.

Descărcați aspectul exclusiv înainte ca acesta să dispară!

Sunteți deja membru pe viață? Puteți descărca pachetul chiar acum, nu este nevoie să participați la vânzarea noastră Cyber ​​Monday!

Cum să utilizați pachetul exclusiv de machetare Cyber ​​Monday pentru a crea o pagină de locații pentru afacerea dvs.

Pentru restul acestei postări, vom presupune că ați profitat fie de oferta noastră Cyber ​​Monday, fie că sunteți deja membru pe viață și aveți acces la pachetul de machete de panificație.

După ce ați descărcat noul pachet de machete de panificație din zona noastră de membri, puteți viziona videoclipul de mai jos pentru a vedea cât de ușor este de configurat. De asemenea, vă încurajăm să urmați acest tutorial pentru a vă pregăti site-ul pentru o personalizare ulterioară.

Acum, să intrăm în cazul de utilizare în sine.

Atunci când construiți un site web pentru o companie cu mai multe locații, este important să vă gândiți la cel mai bun mod de a comunica aceste informații vizitatorilor. Ei trebuie să știe ce locație este cea mai apropiată de ei și orice informații importante specifice acelei locații. Și, crearea unei pagini Locații pentru site-ul web este un început minunat.

În acest caz de utilizare, vă voi arăta cât de nebunesc este să creați o pagină de locații profesionale pentru afacerea dvs. utilizând pachetul de amenajare a panificației.

Folosind cadrul Aspectului paginii de contact de panificație, vă voi arăta cum să adăugați pini suplimentari la modulul dvs. de hartă pentru a reflecta toate locațiile afacerii dvs., împreună cu secțiuni bine organizate și proiectate pentru afișarea informațiilor importante pentru fiecare locație. Deoarece putem folosi elementele de design deja furnizate de aspect, acest proces este răcoritor și distractiv (cel puțin pentru mine).

Să începem.

Începeți prin utilizarea aspectului de contact pentru a vă crea pagina de locații

Aspectul paginii Contact Bakery este perfect de utilizat ca bază pentru noua noastră pagină Locații. În partea de sus are un modul de hartă pe care îl vom folosi pentru a prezenta fiecare locație a companiei noastre. În plus, are și alte elemente, cum ar fi modulele de text, care sunt deja proiectate, pe care le putem rearanja și modifica după cum este necesar.

Creați o pagină nouă

Mai întâi, va trebui să creați o pagină nouă și să-i dați un titlu (ceva de genul „Locațiile noastre”) și să faceți clic pentru a utiliza divi Builder și apoi constructorul vizual.

Încărcați aspectul paginii de contact a brutăriei

În acest moment ar trebui să aveți deja aspectele paginii încărcate în biblioteca Divi. Faceți clic pentru a deschide meniul violet din partea de jos a paginii și selectați butonul „Adăugați din bibliotecă” cu pictograma plus. Selectați încărcarea din fila bibliotecă și apoi selectați aspectul contactului de panificație din listă. Aspectul se va încărca imediat pe pagină.

Publica.

Adăugarea de secțiuni pentru informațiile de locație specifice

Într-adevăr, nu avem prea mult conținut pe pagina de contact pe care să îl folosim pentru a crea conținut suplimentar pentru locațiile noastre specifice. Deci, să mergem la pagina Baking Landing și să selectăm rândul din a doua secțiune a paginii și să-l salvăm în Bibliotecă.

Acum reveniți la pagina de locații. Duplicați secțiunea din partea de jos a paginii care conține formularul de contact (nu ștergeți acest lucru, vom avea nevoie de el mai târziu). În secțiunea directă sub hartă, ștergeți întregul rând din secțiune și adăugați rândul salvat din biblioteca dvs.

Apoi schimbați aspectul coloanei rândului într-un aspect de două treimi o treime.

Găsiți modulul text cu conținutul adresei în coloana din dreapta a secțiunii de jos. Trageți-l sub modulul de imagine din coloana din dreapta a rândului din secțiunea de deasupra acestuia.

Apoi actualizați conținutul din modulele text din coloana din stânga pentru a reprezenta locația companiei dvs. specifice. Pentru exemplul meu, voi adăuga următoarele:

Sediul central
New York

Acum actualizați modulul de imagine din coloana din dreapta pentru a include o imagine a locației companiei dvs.

Aceasta va servi ca o secțiune frumoasă pentru fiecare dintre locațiile dvs. specifice.

Acum tot ce trebuie să faceți este să copiați această secțiune pentru a adăuga locații suplimentare.

Duplică această secțiune de două ori, astfel încât să ai un total de 3 secțiuni de locație. Apoi schimbați culoarea de fundal a secțiunii de locație din mijloc în alb pentru a împărți mai bine secțiunile.

Apoi actualizați secțiunile duplicate cu conținut specific locației. Pentru acest exemplu, pe lângă locația mea din New York, voi crea o secțiune și pentru San Francisco și Houston.

Proiectați secțiunea subsolului formularului de contact

Amintiți-vă acea secțiune pe care am salvat-o în partea de jos care conține formularul nostru de contact. Aceasta va servi ca o secțiune excelentă de subsol pentru pagina noastră de locație. Tot ce trebuie să facem este să-l modificăm puțin.

Mai întâi Să ștergem modulele rămase în coloana din dreapta. Apoi actualizați aspectul coloanei rând la un aspect cu o coloană. Acum tot ce ar trebui să vedeți este formularul de contact într-un rând de o coloană.

Apoi faceți clic pentru a edita setările rândului și actualizați următoarele:

Sub fila conținut ...

culoarea fundalului: #ffffff

Sub fila Proiectare ...

umplutură personalizată: 5% sus, 5% dreapta, 5% jos, 5% stânga

Umbra casetei: [selectați umbra casetei]

Acum să adăugăm o imagine de fundal pentru secțiunea noastră. Accesați setările secțiunii și selectați una dintre imaginile de fundal incluse în aspect.

Grozav! Acum accesăm modulul de hartă.

Adăugați cheia dvs. Google API

În acest moment, va trebui să vă asigurați că vă creați cheia API Google și apoi să o adăugați la Opțiunile temei.

Actualizați modulul de hartă cu pini noi de locație

În acest moment, cea mai mare parte a paginii noastre a fost finalizată. Rămâne doar actualizările modulului de hartă din partea de sus a paginii. Trebuie să adăugăm noile locații de pini pentru cele trei secțiuni pe care le-am creat în secțiunile de pagină (New York, San Francisco și Houston).

Faceți clic pentru a edita modulul de hartă și a actualiza setările după cum urmează:

Ștergeți pinul care apare în modul, astfel încât să începeți din nou. Apoi adăugați un nou pin și actualizați setările după cum urmează:

Titlu: New York City Bakery
Conținut: Mai multe informații
Adresa Map Pin: New York City

Faceți clic pe butonul Găsiți.

Apoi adăugați un nou pin și actualizați setările după cum urmează:

Titlu: San Francisco Bakery
Conținut: mai multe informații
Adresa hartă Pin: San Francisco

Faceți clic pe butonul Găsiți.

Apoi adăugați un nou pin și actualizați setările după cum urmează:

Titlu: Houston Bakery
Conținut: mai multe informații
Adresa PIN-ului hărții: Houston, TX

Faceți clic pe butonul Găsiți.

Puteți lăsa adresa centrului hărții ca New York City. Dar reglați afișarea hărții pentru a micșora suficient de departe pentru a putea vedea toate locațiile atunci când vizitatorul vizualizează prima dată harta.

Adăugați linkuri de ancorare la casetele de conținut Pin

Ca o caracteristică suplimentară, puteți spori experiența utilizatorului prin adăugarea unui link de ancorare în interiorul conținutului pin care apare atunci când faceți clic pe pin. Acest link de ancorare îl va duce pe utilizator în jos pe pagină la secțiunea specifică a paginii care prezintă informațiile despre locația respectivă.

Deschideți setarea modulului de hartă și apoi editați primele setări de pin. Evidențiați textul din caseta de conținut care citește „Mai multe informații” și apoi faceți clic pe pictograma linkului pentru a face din acesta un link. Pentru adresa URL, introduceți „#newyork” și faceți clic pe OK.

Faceți același lucru pentru pinul din San Francisco (utilizați adresa URL „#sanfran”) și pinul din Houston (utilizați adresa URL „#houston”).

Acum tot ce trebuie să faceți este să adăugați un ID CSS personalizat la fiecare secțiune care să corespundă adreselor URL de link pe care tocmai le-ați creat în pini.

Pentru secțiunea „New York City”, actualizați setările secțiunii din fila Advanced cu ID-ul CSS „newyork” și salvați setările.

Acum, când utilizatorul dă clic pe linkul „mai multe informații” (cu adresa URL #newyork) din pinul din New York, pagina va sări în jos la secțiunea respectivă.

Faceți același lucru pentru secțiunea San Francisco (utilizați codul CSS „sanfran”) și secțiunea Houston (utilizați codul CSS „houston”)

Asta e. Ați terminat cu toții!