Proiectarea unui meniu pentru un grup în contact. Cum să creați un grup în contact cu un meniu de sus fixat pentru noul design VK

Salutari dragi prieteni. În postarea de astăzi vreau să vorbesc despre cum să creez un meniu pentru un grup VKontakte. A face acest lucru nu este atât de dificil pe cât ar părea la prima vedere, iar dacă ai măcar cunoștințe de bază despre Photoshop sau Paint, atunci cu siguranță vei reuși. Asadar, haideti sa începem.

Cu o structură corectă, meniul poate crește numărul de vânzări sau fluxul de clienți pentru afacerea ta, depinde de ce focus are grupul. De exemplu, luați în considerare designul unui magazin de îmbrăcăminte online:

Structura este formata foarte clar, in aproape cateva click-uri utilizatorul poate gasi tot ce are nevoie: numere de telefon, adrese, informatii despre comanda, catalog de produse etc. În opinia mea, acest design ajută la creșterea vânzărilor de cel puțin 2 ori.

În această versiune, meniul este un catalog de produse împărțit în secțiuni, ceea ce face ca căutarea acestora să fie foarte convenabilă. Avatarul comunității conține numerele de contact ale mai multor operatori, ceea ce va permite clienților să intre rapid în contact cu vânzătorul.

Iată un exemplu de soluție proastă:

Catalogul este conceput sub forma unor link-uri obișnuite care duc la o destinație necunoscută. Sunteți de acord că nu există o dorință specială de a le trece, dimpotrivă, doriți să părăsiți grupul.

În aceste exemple, ne-am uitat la opțiunile de design pentru magazinele online, dar puteți folosi ceva similar în alte subiecte. Formula este simplă: structură clară + design grafic = aflux de clienți și creșterea vânzărilor.

Acum să privim toate acestea din punct de vedere tehnic.

Crearea unui meniu pentru un grup VKontakte

În primul rând, să creăm un aspect grafic al viitorului meniu. În acest scop, vom folosi Photoshop (pentru o imagine simplă, Paint standard se va descurca bine). Deschideți programul și creați un nou document:

Voi crea o imagine cu o dimensiune de 500x500 pixeli, cu toate acestea, în funcție de numărul și locația secțiunilor, dimensiunea imaginii poate fi diferită.

Acum descărcați imaginea pe care doriți să o utilizați ca fundal și trageți-o pe pânză. Dacă sunteți expert în program, puteți desena singur fundalul.

Apoi scrieți secțiuni, butoane și numere de telefon prestabilite pe imaginea de fundal. Mai târziu le vom transforma în link-uri:

Pentru a face tăieturi cât mai precis posibil, trebuie să utilizați linii auxiliare apăsând CTRL+R. Treceți mouse-ul peste linia de sus și trageți-l pe imagine cam așa:

Ultimul pas este tăierea obiectelor. Pentru a face acest lucru, faceți clic pe butonul „Feții din ghiduri” din bara de instrumente de sus:

Salvăm cadrul pentru dispozitivele web. Setați formatul imaginii la JPG, selectați calitatea maximă și salvați, de exemplu, pe desktop:

Pe desktop a apărut un folder cu un cadru pentru meniul viitor, pe care trebuie să-l transferăm în grup.

Afișarea unui meniu utilizând marcajul Wiki

În grupul dvs., accesați „gestionarea comunității” și verificați dacă secțiunea „materiale” este conectată. Dacă partiția este dezactivată, conectați-o:

După aceasta, fila „Ultime știri” va apărea în grup. Faceți clic pe butonul „editați”, veți fi transferat într-un editor de text:

În loc de titlul standard, scrieți-l pe al dvs. și activați, de asemenea, modul de marcare wiki făcând clic pe pictograma diamant:

Acum deschideți grupul într-o filă nouă și încărcați cadrul pregătit în albumul foto și inserați următorul cod într-un editor de text, de câte ori este numărul de părți în care este împărțit cadrul:

[ [ photo133337_133701019|370px;nopadding;|pagina- 13333337 _13333337] ]

În loc de valoarea „photo133337_133701019”, trebuie să inserați un link către fotografie

În loc de valoarea „page-13333337_13333337” trebuie să inserați un link către pagina sau secțiunea de grup dorită

În loc de 370px, puteți alege propriile dimensiuni, iar parametrul nopadding vă permite să afișați o imagine cu drepturi depline fără ea, meniul nostru ar fi afișat în bucăți tăiate;

Făcând clic pe butonul „Vizualizare”, puteți vedea cum va arăta meniul în grup. Dacă totul vi se potrivește, faceți clic pe „Salvați rezultatele” și bucurați-vă de munca făcută.

Scopul creatorului unui grup pe rețelele sociale. rețele pentru a atrage mai mulți vizitatori. Este important ca oaspetele să dorească să se alăture, să semneze, să citească informații, să lase un comentariu sau să comande un produs. Nevoia de rezultat final diferă de direcția de activitate.

Primele secunde ale șederii modelează acțiunile ulterioare ale oaspetelui. Acesta este motivul pentru care interfața joacă un rol important.

Factori care părăsesc un oaspete:

• avatar;
• Descriere;
• Nume;
• meniu frumos și practic;
• colorat;
• conţinut.

Este ușor să creezi un meniu practic care motivează mai mult decât acțiune. Dar mai întâi trebuie să vă dați seama ce ar trebui să fie.

Cum ar trebui să fie meniul?

Folosind un meniu bine conceput, vizitatorul poate naviga cu ușurință prin el și poate obține rapid răspunsuri la întrebările sale. Navigarea vă permite, de asemenea, să creați impresia corectă a proiectului.

Trei obiective principale ale grupurilor:

1. vânzări;
2. creșterea traficului;
3. creșterea numărului de vizitatori activi.

Pentru vânzări, navigarea de grup înlocuiește afișarea în magazin.

Cele mai importante butoane ar trebui să fie aici:

1. catalog;
2. Preț;
3. livrare;
4. oferte promotionale;
5. recenzii.

Pentru a crește traficul, se pune accent pe conținutul și aroma site-ului sau blogului.

Un set aproximativ de butoane:

video: meniu pentru public

Lucrul cu Photoshop

Înainte de a începe, trebuie să vizualizați designul sau aspectul general, precum și componentele acestuia. Nu sunt necesare cunoștințe speciale, trebuie doar să urmați pașii din instrucțiuni.

Algoritmul acțiunilor:

Acest lucru se face folosind instrumentul Marquee dreptunghiulară:

Lucrul cu grafica:

Ar trebui să arate cam așa:

Salvați dreptunghiul situat în dreapta ca imagine separată, setând dimensiunea la 200x500 pixeli. Acesta este un avatar gata făcut, încărcat prin butonul „Încărcați fotografia” din grupul VK.

A doua imagine mai trebuie împărțită la numărul de puncte. Acest lucru se face pentru a atribui un link fiecărui buton.

Mai întâi trebuie să faci marcajul:

Creați fragmente:

Salvarea imaginilor:

Partea tehnica

Imaginile terminate trebuie transferate în grup. Urmând pașii de mai jos, această sarcină poate fi finalizată cu ușurință.

Important! Încărcarea unui meniu diferă de încărcarea de obicei a fotografiilor sau imaginilor.

Totul in ordine:

Acum, cel mai important lucru este de ce s-au făcut toate acestea. Adăugați funcționalitatea meniului. O imagine separată trebuie să aibă propriul link.

1. găsiți intrarea necesară;
2. faceți clic stânga pe el;
3. copiați adresa URL în bara de adrese.

• mergeți la sursa unde trebuie să transferați vizitatorul;
• copiați adresa cerută.

Salvați modificările folosind butonul corespunzător din partea de jos a ferestrei.

Atenţie! Este posibil ca modificările să nu se reflecte imediat. Este recomandat să vă deconectați de la profilul dvs. principal și apoi să vă conectați din nou în grup.

Cum se creează un meniu într-un marcaj wiki de grup VKontakte

Markup Wiki este un limbaj special folosit pentru a proiecta pagini web în grupuri de rețele sociale.

Acest instrument vă permite să creați:

• efecte;
• meniuri neobișnuite;
• semne;
• elemente de navigație;
• format text.

Într-un cuvânt, acest marcaj vă permite să creați un mini site web VKontakte. Acest lucru este foarte convenabil, mai ales pentru vânzări și recrutare de abonați.

Acest design obligă în mod intuitiv vizitatorul să rămână și să facă clic pe buton. Adică întârzie și stimulează acțiunea – și tocmai de asta este nevoie.

Din punct de vedere vizual, un astfel de sistem este foarte asemănător cu aspectul HTML. Dar nu necesită pregătire lungă și o mentalitate specială.

Video: meniu cu căutare pe categorii

Nuanțe ale creației

De fapt, ceea ce s-a făcut mai sus (împărțirea și încărcarea imaginii) sunt deja elemente de marcare. Acesta este avantajul acestui instrument. Transformare automată în etichete atunci când pur și simplu încărcați imagini.

Cu toate acestea, este important să cunoașteți etichetele individuale pentru a vă ajuta să adăugați și mai multă funcționalitate și frumusețe. De exemplu, când umplem părți individuale ale imaginii, între ele se pot forma dungi albe. Le puteți elimina prin simpla adăugare a etichetei noborder.

Ca aceasta: []

Etichetele principale sunt prezentate în tabelul de mai jos:

Foto: etichete folosite pentru marcare

Lucrul cu imagini

Unde opțiunile sunt înlocuite cu:

• fara limita- îndepărtarea cadrului din jurul imaginii;
• nupadding- eliminarea spațiilor dintre imagini;
• simplu- introduceți un link către imagine. Proiectat ca text, fără grafică;
• nicio legătură- eliminarea link-ului către poză;
• cutie- deschiderea unei imagini într-o fereastră;
• NNNxYYYpx sau NNNpx- setează dimensiunea fotografiei în pixeli.

Crearea unui tabel

Indiferent de tipul de meniu (text sau grafic) pe care îl creați, este puțin probabil să faceți fără a introduce un tabel. În caz contrar, puteți doar să lipiți textul în câmpul de știri și să nu îl formatați, pierzând atât de mult timp.

Un tabel este creat folosind un set special de caractere, unde fiecare dintre ele este responsabil pentru o anumită parte a tabelului:

• {| simbol al începutului mesei, fără el nu poate exista o masă. Întotdeauna folosit;
• |+ este responsabil de poziționarea titlului tabelului în centru. Plasat după caracterele de la începutul tabelului. Utilizați după cum doriți;
• | denotă începutul unei noi linii și celule;
• | un caracter care face celula transparentă;
• ! face celula o culoare închisă. Dacă este absent, trebuie folosit semnul anterior;
• |} înseamnă sfârșitul mesei. Caracterul opțional, totuși, este folosit pentru a preveni apariția unei erori.

Când completați un tabel, conținutul fiecărei celule trebuie plasat după semnul |, iar atunci când separați celule, trebuie să duplicați tipurile de rând astfel: || sau!!.

Caracteristici de marcare

Există multe reguli nescrise, iar acest lucru provoacă multe probleme programatorilor începători. De regulă, totul se învață prin practică. Fiecare își găsește propriile lacune, fiecare se confruntă cu propriile dificultăți.

Pentru a evita greșelile de bază, ar trebui să vă familiarizați cu principalele:

1. trebuie să aveți grijă când redimensionați imaginea - dacă este mai mică de 131 de pixeli, calitatea acesteia se va deteriora semnificativ;
2. Lățimea imaginii nu trebuie să depășească 610px;
3. Este interzisă plasarea a mai mult de 17 etichete neînchise pe o pagină wiki;
4. la modificarea lățimii imaginii, înălțimea acesteia se schimbă automat și proporțional;
5. o listă în interiorul unui tabel ar trebui creată folosind o etichetă
   ;
6. Nu ar trebui să existe mai mult de 8 elemente de listă într-o linie de marcare.

Pentru a crea o navigare frumoasă și funcțională, trebuie să cunoașteți elementele de bază ale Photoshop și markup wiki. Cu toate acestea, acesta din urmă conține propriile sale nuanțe, care, atunci când se confruntă cu un începător, pot rămâne blocate și confuze pentru o lungă perioadă de timp.

Important! Verificați dacă toate etichetele sunt închise. Păstrați-o consecventă.

Asistentul principal în această problemă este atenția și respectarea strictă a instrucțiunilor. Pagina oficială VK, care se numește wiki markup, vă poate ajuta întotdeauna.

Astăzi revenim din nou la subiectul proiectării grupurilor VKontakte. Am mai învățat deja. Astăzi vom învăța cum să facem grafică meniu cu banner superior fixși un link către o pagină internă cu elemente de meniu extinse. În general, orice informație poate fi pe pagina internă. Este deosebit de convenabil să plasați acolo, de exemplu, cataloage cu o gamă largă de produse. Atât meniurile drop-down, cât și meniurile sticky au avantajele și dezavantajele lor. Principalul dezavantaj al unui meniu derulant este că este în starea închisă implicit. Dar puteți plasa mai multe link-uri pe el deodată.

Meniu fixat arata mai impresionant datorita impresiei generale, dar poate avea un singur link, care duce fie catre pagina interna VKontakte, fie catre un site extern (iar linkul catre site-ul extern nu va veni din poza, ci din linkul text). sub imagine). De asemenea, unul dintre dezavantajele evidente este că pe dispozitivele mobile meniul grafic este prezentat ca o intrare obișnuită în feed, stând deasupra, și nu ca fixat lângă avatar. În general, atunci când alegeți un design ar trebui să țineți cont de aceste nuanțe. Deci, haideți să vedem cum să creați un meniu superior lipicios cu un link către o pagină internă.

Eu creez grupuri VKontakte
Design de înaltă calitate a grupurilor VK și a paginilor publice, meniu fixat, meniu derulant, meniu grafic intern, cataloage, navigare internă - preturiȘi portofoliu.

Pasul 1
Creați un document nou în Photoshop cu dimensiunea de aproximativ 900x700 pixeli și umpleți-l cu alb. Acum trebuie să tăiem două ferestre în strat, prin care designul grafic propriu-zis va fi vizibil. Mai întâi, selectați un dreptunghi care măsoară 200x500 pixeli (avatar) și apăsați Del. Apoi selectați un dreptunghi care măsoară 510x352 (aliniați-l la linia de jos a avatarului și faceți distanța dintre forme la 50 de pixeli) și apăsați, de asemenea, Del.
După următoarea actualizare a designului de către VKontakte (31 octombrie 2016), dimensiunile bannerului au devenit 510x307 (nu 510x352).

Pasul 2
Acum, sub stratul alb, plasăm o singură imagine, care va sta la baza designului.

Pasul 3
După aceea, completăm imaginea cu diverse elemente - un logo, inscripții text și un buton care vă invită să faceți clic pe meniu. Apoi salvăm două imagini separate pe computer - una este un avatar (în dreapta), a doua este un meniu cu un buton de clic (în stânga).

Pasul 4
De asemenea, creăm un meniu grafic în Photoshop format din mai multe elemente. Lățimea acestui meniu ar trebui să fie de 600 pixeli, înălțimea este opțională, în funcție de numărul de articole. Pentru a ajuta, folosiți lecția „“.

Pasul 5
Ne tăiem meniul în mai multe benzi orizontale, în funcție de numărul de elemente din meniu. Salvați ca fișiere separate.

Pasul 6
Mergem la grupul nostru VKontakte, facem clic pe „Gestionarea comunității” (făcând clic pe cele trei puncte de sub autor se deschide un meniu derulant) și verificăm dacă setările sunt corecte. Grupul trebuie să fie deschis, iar materialele să fie, de asemenea, deschise.

Pasul 7
Acum încărcăm un nou avatar. Mutați mouse-ul în locația avatarului și selectați „Actualizați fotografia” din meniul pop-up. Încărcați fotografia potrivită de la Pasul 3, întindeți zona de selecție în sus și în jos până la marginile imaginii, faceți clic pe „Salvați” și apoi selectați zona pentru miniatura rotundă.

Pasul 8
Acum trebuie să creați o pagină internă. Cum se face acest lucru este descris în detaliu în lecție. O altă modalitate alternativă de a crea o pagină internă este descrisă în lecția „” din pașii 5 și 6.

Pasul 9
Odată ce am creat pagina internă, putem merge la ea. Pentru a face acest lucru, trebuie să faceți clic pe meniul derulant al grupului (în mod implicit, acest element se numește „Ultimele știri” - l-am redenumit în „Meniu”) și acolo faceți clic pe linkul „Meniu”. După aceasta, vom merge la pagina goală nou creată.

Pasul 10
Acum trebuie să creăm un meniu grafic de cinci elemente. Pentru a face acest lucru, încărcăm cele cinci imagini din Pasul 5 în albumul de grup Facem clic pe pictograma camerei și încărcăm imaginile tăiate de pe computer. Imaginile vor fi stocate undeva pe serverele VKontakte și legate de grup, deci nu este necesar să creați un album separat pentru imaginile decupate. Trebuie să încărcați imagini în modul de marcare Wiki.

Pasul 11
Acum, în modul de marcare wiki, vom crea un meniu grafic. Este foarte important să creați în modul de marcare wiki (pictograma din colțul din dreapta sus al două paranteze triunghiulare), și nu în modul de editare vizuală. Mai multe informații despre crearea codului în markup wiki sunt descrise în Pasul 4 și Pasul 5 din lecția „“. Există, de asemenea, un șablon de cod pentru inserare. Dacă totul este făcut corect, ar trebui să obțineți un meniu grafic gata făcut, ca în figura de mai jos.

Pasul 12
Acum revenim la pagina principală a grupului, luăm adresa URL a paginii noastre interne (ar trebui să fie așa https://vk.com/page-78320145_49821289) și o lipim în fereastra în care sunt create știrile. O fereastră cu un link către această pagină foarte internă ar trebui atașată automat. După aceea, mutăm cursorul la inscripția „Atașați” și atașăm o fotografie postării, și anume poza noastră din stânga de la Pasul 3. După aceea, ștergem linia din URL-ul paginii interne, lăsând spațiu gol. Important! La acest pas, trebuie să bifați caseta (dacă aveți astfel de drepturi, acest lucru se aplică în principal grupurilor cu un perete deschis) din caseta de selectare „În numele grupului”. Dacă nu bifați această casetă, intrarea nu va fi fixată. În cele din urmă, faceți clic pe „Trimite”.

Pasul 13
Mutați cursorul la cele trei puncte de lângă titlul postării și selectați „Pin” în fereastra drop-down. În consecință, știrea este și detașată, dacă este cazul.

Pasul 14
Există o avertizare. Uneori, după ce anulați fixarea unei știri, aceasta merge mult în flux, în funcție de data creării, și poate fi destul de dificil să o găsiți din nou. Prin urmare, este mai bine să scrieți imediat adresa URL a știrilor fixate undeva. Pentru a face acest lucru, mutați cursorul la momentul în care a fost creată știrea și faceți clic pe link.

Pasul 15
Acum actualizăm pagina principală a grupului. Meniul nostru grafic va fi situat în partea de sus, lângă avatar. Și când facem clic pe poză, suntem duși la o pagină internă cu un meniu de cinci articole.

Bună prieteni. Totul se mișcă, totul se schimbă. Nici rețeaua de socializare Vkontakte nu stă pe loc. Deci publicația mea despre crearea unui singur bloc pe VKontakte Avatar+Menu a devenit irelevantă astăzi. Acum, la crearea unui grup, pur și simplu lipsește blocul Știri, care era necesar pentru un astfel de meniu.

Din fericire, Vkontakte are capacitatea de a crea pagini wiki. Folosind o astfel de pagină wiki, putem crea un meniu comunitar și apoi fixam acest meniu în partea de sus a grupului.

Deci, hai să o luăm în ordine.

Cum se creează o pagină wiki?

1. Creați un link ca acesta în bara de adrese a browserului dvs.:

• xxx– ID-ul grupului sau al paginii publice;
• Nume_pagină– orice cuvânt pe care îl folosiți pentru a denumi pagina.

Cum să afli ID-ul comunității tale? Dacă id-ul nu este conținut în link, de exemplu, https://vk.com/make_community, se poate afla astfel. Faceți clic pe titlul peretelui grupului, unde este scris numărul de publicații.

Peretele comunității se va deschide separat. Vor fi numere în bara de adrese. Acesta este id-ul comunității dvs.

2. Urmați linkul pe care l-ați creat și faceți clic pe „Umpleți cu conținut”.

3. Umple-ți pagina cu conținut. De exemplu, avem nevoie de un meniu grafic sub formă de butoane separate. În primul rând, creăm întreaga imagine.

Apoi îl tăiem în nasturi individuale. În acest caz particular, ar trebui să avem imagini cu patru butoane.

Ne întoarcem la pagina noastră și, folosind editorul încorporat, încărcăm imaginile butoanelor noastre.

După încărcarea tuturor imaginilor, ar trebui să arate astfel:

Făcând clic pe oricare dintre imagini, puteți specifica un link către pagina la care va duce acest element de meniu. Aceasta poate fi fie pagina dvs. comunității, fie o pagină de pe un site web extern sau magazin online.

Cream un meniu.

Ar trebui să primiți o postare ca aceasta pe peretele grupului dvs. VKontakte:

Cum să fixați un meniu?

Tot ce trebuie să facem este să fixăm meniul în partea de sus a grupului. Pentru a face acest lucru, dați clic pe textul din fața imaginii din postare. În fereastra care se deschide, faceți clic pe „Pin” în dreapta jos.

Toate. Acum ar trebui să obținem ceva de genul acesta:

Dacă doriți să faceți meniul și avatarul să pară un întreg, alegeți doar o imagine, astfel încât să fie o continuare logică a avatarului grupului dvs.

În toate comunitățile VKontakte în care informațiile pot fi structurate, recomand crearea unui meniu. Acest lucru va îmbunătăți cu siguranță experiența utilizatorului pentru comunitatea dvs. V-am arătat cum să securizați meniul VKontakte folosind un exemplu specific. Rămâne să vă urez succes în dezvoltarea și promovarea comunităților voastre!

În acest articol vom vorbi despre cum să instalați meniul VKontakte. În articolele anterioare, v-am spus despre cum să faceți corect un meniu în Photoshop, iar acum este timpul să îl integrăm în grupul nostru.

Dar pentru ca noi să începem procesul de introducere a meniului în contact, trebuie mai întâi să-l tăiem în părțile sale componente. Pentru a face acest lucru, utilizați instrumentul „Tăiere”.

Selectăm acest instrument și începem să „tăiem”. Am 7 piese.

Apoi, accesați „Fișier” – „Salvare pentru Web” – selectați extensia jpeg și calitate 100%, faceți clic pe „Salvare”. Ar trebui să avem 7 fișiere. Toate! Gata cu Photoshop! Toate lucrările necesare pentru a crea meniul au fost finalizate. Să începem instalarea meniului VKontakte. Pentru aceasta:

1) Accesați grupul creat. Acolo găsim „Albums” – „Add” (evidențiat cu un dreptunghi roșu în Figura 1). Căutăm butonul „Selectați fișierul”. Faceți clic și descărcați cele 7 fișiere create.

Adăugarea unei fotografii într-un album de grup VKontakte

Poza 1

Adăugarea unei fotografii într-un album de grup VKontakte

2) Atentie! Pentru cei care nu au „Ultimele știri” activat și, în mod implicit, nu sunt activate, trebuie să selectați „Gestionarea comunității”, să găsiți „Materiale” și să le activați (Figura 2).

Figura 2

3. Treceți cu mouse-ul peste „Ultimele știri” și linkul „Editați” apare în dreapta, faceți clic pe el (Figura 3).

Figura 3

4. Apare o fereastră ca în Figura 4. Ne interesează butonul „Wiki markup mode” (evidențiat cu un dreptunghi roșu.” Faceți clic pe el.

Figura 4

După aceea, introduceți codul wiki în zona goală de mai jos, care va afișa meniul nostru viitor. L-am primit după cum urmează (Figura 5):

Figura 5

Wiki - codul trebuie introdus exact în același mod și în aceeași ordine ca cea indicată în Figura 5. Apoi puteți experimenta singur.

Un exemplu de sintaxă pentru adăugarea unei imagini este următorul:

[], Unde

photo-41875814_286789280 – ID-ul imaginii descărcate, care poate fi vizualizat în bara de adrese din browser (Figura 6).

Figura 6

Eticheta „nopadding” elimină spațiile dintre imagini, adică ajută la „unirea” lor strâns unele cu altele.

370px – lățimea imaginii, uitați-vă la această valoare în proprietățile fișierului.

https://www.. Adică făcând clic pe acest buton, utilizatorul se va muta din grupul din contact pe acest site.

Pentru a face imaginea de neclimat, am folosit eticheta nolink:

Asta e tot! Primul meu meniu a fost creat! Așa arată într-un grup (Figura 7).