Penso che tutti coloro che utilizzano attivamente il social network Vkontakte abbiano già incontrato gruppi e pubblici ben progettati. Molti di loro, oltre al menu, hanno anche molte pagine nidificate stilizzate, directory e così via, che essenzialmente creano un piccolo sito proprio all'interno del social network.
Ecco alcuni esempi in modo che tutti capiscano di cosa sto parlando.
Tali gruppi ti consentono di distinguerti dalla concorrenza e attirare più utenti. Soprattutto se anche il contenuto è interessante :)
In questo articolo parleremo di come tutto questo è fatto. Per analizzare tutto più in dettaglio e approfondire tutte le sottigliezze, facciamo un esempio specifico. Ci sarà una piccola master class sulla progettazione di gruppi.
La prima fase del nostro lavoro è un'idea. Dobbiamo capire cosa vogliamo dire ea chi. In contatto ci sono diversi formati di comunità e vale la pena scegliere tenendo conto dei compiti impostati. Anche se in futuro il gruppo potrà essere trasferito al formato pubblico e viceversa.
Spiego con le dita. PubblicoÈ qualcosa come un blog. Linea di notizie. In altre parole, raccontiamo alcune cose ai nostri iscritti e loro non potranno scrivere sulla bacheca della nostra community. Massimo commento.
Gruppo ti consente di creare una community più aperta alla conversazione e alla discussione, in cui le persone possono pubblicare post nel feed per proprio conto. Puoi anche aggiungere amici dalla tua lista ad esso. Non esiste una tale opzione in pubblico. Inoltre, il gruppo ha un po' più di opzioni per l'integrazione del markup wiki (c'è una sezione "Notizie" in cui puoi integrare il menu).
A livello globale, puoi argomentare in questo modo: se dobbiamo creare una community per il negozio, allora prenderei il formato "pubblico". Se parliamo, ad esempio, di appassionati di pesca, allora è meglio prendere un "gruppo". Tuttavia, ognuno è libero di fare ciò che ritiene opportuno. Dopotutto, in qualsiasi momento è possibile modificare il formato. Tuttavia, tieni presente che Vkontakte introduce una restrizione sulla modifica del formato della community nuovamente e dopo la prima volta dovrai attendere alcuni giorni prima di poter restituire tutto se necessario. Pertanto, è meglio testare la funzionalità prima che il gruppo inizi a riempirsi di contenuti.
Come parte di questa master class, prenderò il gioco Mad Max basato sull'omonimo film, uscito solo un paio di settimane fa, come punto di partenza e creerò una community per i giocatori con vari materiali su questo gioco. L'obiettivo principale è drenare il traffico verso il tuo sito di gioco.
Il formato sarà “Gruppo”, in quanto è necessario creare un afflusso naturale del pubblico e massimizzare la comunicazione all'interno della comunità. Chiarisco subito che utilizzerò una tecnica universale che può essere utilizzata sia in un formato di gruppo che in pubblico. Funziona ovunque.
Mare di contenuti, iniziamo a dare vita all'idea!
Crea un gruppo
Per creare un gruppo, vai su "I miei gruppi" nel menu a destra del tuo account Vkontakte e fai clic sul pulsante blu in alto "Crea comunità".
Dovrebbe apparire una finestra come questa in cui inseriamo un nome per il nostro gruppo e selezioniamo un formato.
Dopo aver inserito le informazioni necessarie, si apre davanti a noi il pannello di controllo della nostra community. Nel mio caso, sembra così.
Come puoi vedere, ho aggiunto alcune opzioni: ho incluso video, registrazioni audio, discussioni e una serie di altre funzionalità che mi saranno utili nel mio lavoro futuro durante la raccolta di contenuti. Tutto questo può essere modificato in futuro senza alcuna restrizione. Ho anche annotato l'indirizzo del mio sito web. Se non disponi di un sito Web o se il suo oggetto non corrisponde al formato della community (riguardano argomenti diversi e non sono in alcun modo correlati tra loro), questa riga può essere lasciata vuota.
Ho impostato il limite di età questo caso dal 18, per analogia con quelli che gli sviluppatori hanno messo a punto per il gioco. Anche se ho pochi dubbi sul fatto che anche i bambini giochino.
Qualunque cosa. Il gruppo è stato creato!
Ora puoi iniziare a modellarlo.
Creare un gruppo Vkontakte
Questa fase può essere suddivisa in 2 componenti: grafica e tecnica. Per funzionare, abbiamo bisogno di un modello per creare un avatar di gruppo e un menu, oltre a un po' di immaginazione e conoscenza di base di Photoshop (aka Adobe Photoshop).
Modello di markup
Che cos'è un modello e di cosa si tratta? Un modello è una specie di spazio vuoto. In questo caso, nel formato *.psd, abbiamo segnato le aree per l'immagine sotto il menu e gli avatar del gruppo.
Come puoi vedere nel secondo esempio all'inizio di questo articolo, possiamo realizzare il design nello stesso stile per l'avatar e l'immagine del menu. Allo stesso tempo, viene tagliato visivamente in 2 parti. Quindi il modello ti consente di formare un'immagine in modo tale da eliminare lo spostamento grafico e adattare le immagini il più possibile a un livello.
Per essere più chiaro, ecco un esempio.
Si può notare che in entrambe le parti della foto è presente una fascia con vista sulla zona residenziale. Senza utilizzare un modello, è quasi impossibile farlo esattamente la prima volta. Sarà necessario aggiustare le immagini, misurando discrepanze fino a 1px. Mentre quando si utilizza un modello, aggiungiamo semplicemente elementi grafici all'interno del markup e otteniamo immediatamente il risultato desiderato.
Voglio notare che questo modello è progettato per 1 riga nella spiegazione. Nello screenshot dell'esempio, ci sono i telefoni. Se viene visualizzata una seconda riga, dovrai utilizzare un modello diverso o correggere il design manualmente.
Nel frattempo, si procede direttamente alla progettazione grafica del nostro nuovo gruppo. Qui prendo la strada di minor resistenza e vado su Google Immagini per trovare le parti del disegno. Puoi anche usare Yandex. A chi piace cosa.
Non ho una formazione in design, quindi non ci soffermeremo sulla selezione di caratteri e altre sciocchezze. Dopo un po' di modifiche in Photoshop, ho ottenuto questo risultato.
Sul frammento di sinistra (dove si trova la scritta "Menu") puoi anche aggiungere diversi trigger. In questo caso ho deciso di farne a meno. Qualunque cosa. Il design dell'avatar è pronto. Premiamo la combinazione di tasti di scelta rapida Maiusc + Ctrl + Alt + S in Photoshop e salviamo i nostri frammenti in una cartella sul nostro disco rigido.
La prima fase del lavoro con la grafica è completata. Torniamo in contatto.
Impostazione dell'avatar e del menu per il gruppo
Facciamo clic sui due tipi al posto dell'ava del nostro gruppo e carichiamo la nostra immagine lì. Ecco questi ragazzi, sotto di loro c'è scritto "Carica una foto".
Aggiungiamo un'immagine. Specifica i campi e seleziona la miniatura. Tutto è semplice qui e non dovrebbero esserci problemi.
Come possiamo vedere, è necessario conoscere l'ID comunità. È molto facile riconoscerlo. Troviamo il menu nel nostro gruppo (subito sotto l'avatar) e apriamo le "Statistiche della community". In questo caso, qualcosa di simile apparirà nella barra degli indirizzi del browser (i numeri saranno diversi).
Questi numeri dopo "?gid=" sono l'ID del gruppo desiderato. Inseriamo il valore ricevuto nel form dello script e scriviamo il nome della pagina che vogliamo creare. In questo caso, guido in "Menu".
Va notato che la pagina verrà creata solo se la finestra con il gruppo è aperta nella scheda successiva. In poche parole, devi aver effettuato l'accesso a VK nello stesso browser. Dopotutto, solo l'amministratore del gruppo e le persone a loro assegnate hanno accesso a tali manipolazioni. Un passante casuale non potrà prendere e modificare facilmente le impostazioni di un gruppo al pannello di amministrazione di cui non ha accesso.
Se tutto è stato eseguito correttamente, si aprirà la pagina seguente.
Questa è la stessa finestra in cui faremo un markup wiki un po' più tardi e creeremo un menu interno per il nostro gruppo. Per ora ci basta scrivere qualcosa qui. Quindi fare clic sul pulsante blu "Salva pagina" e in alto fare clic sul collegamento Torna alla pagina.
Ho scritto un "Menu" per me stesso e dopo aver salvato la mia pagina ha iniziato ad assomigliare a questo.
Non c'è ancora il design, ma per ora ci serve solo un link a questa pagina. Lo raccogliamo nella barra degli indirizzi del browser e torniamo alla pagina principale del nostro gruppo. Registrare.
Qui creiamo un post con il seguente contenuto: inseriamo lì un'immagine e un collegamento alla pagina del menu per il gruppo.
Premiamo invia. Quindi clicchiamo sull'ora in cui è stato inviato il messaggio e selezioniamo la voce "Pin" tra tutte le opzioni. Aggiorniamo la pagina (il tasto F5 della tastiera) e, se tutto è fatto correttamente, otteniamo il primo risultato: il gruppo ha trovato un avatar e un link per andare alla sezione menu.
Markup wiki per il menu del gruppo Vkontakte
Ora affrontiamo il design del menu stesso. Di nuovo andiamo su Photoshop e creiamo un design per il nostro menu. Quando si progetta l'interfaccia, è necessario ricordare quelle persone che entreranno in VK tramite l'applicazione dai telefoni cellulari. In altre parole, non dovremmo avere piccoli elementi e, inoltre, dovremmo cercare di rendere tutto il più chiaro possibile. In modo che tu non debba indovinare come funziona tutto qui e dove possiamo fare clic ... ma cerca semplicemente l'elemento giusto e studia le informazioni che stai cercando.
Non mi soffermerò ora su come esattamente ho assemblato il menu. Questo è quello che ho fatto.
Campi minimi. Disposizione verticale. Il formato perfetto per un menu reattivo. Cioè, niente andrà da nessuna parte sui telefoni cellulari. Tutto sarà esattamente come sugli schermi di computer e tablet. Prendo la larghezza di 500 px, in modo che in seguito nulla si restringa e non perda due volte la qualità dell'immagine. L'altezza non è importante.
Tagliamo l'immagine in frammenti e li salviamo.
Qualunque cosa. È il momento dell'accordo finale: raccogliamo il menu già nel gruppo stesso.
Per fare ciò, torniamo alla pagina principale del gruppo (dove si trova il feed e la nostra immagine di collegamento che porta al menu). Facciamo clic sull'immagine del menu e arriviamo alla pagina stessa che è stata precedentemente creata per il menu.
Se sei un amministratore o il creatore di un gruppo (nel nostro caso, questo è il caso), nella parte superiore della pagina ci sarà un link "Modifica". Facciamo clic su di esso.
Quindi passiamo alla modalità di markup wiki (sotto il pulsante di chiusura nell'angolo in alto a destra della pagina, una tale cornice è disegnata con<>dentro). Quando la modalità desiderata è attivata, questo pulsante è cerchiato in grigio.
Quindi entriamo nell'icona della fotocamera e aggiungiamo tutti i frammenti del nostro menu in una volta. Nella modalità wiki, non vedremo le immagini stesse, solo il codice di queste immagini con dimensioni e parametri.
Voglio centrare il menu e non avere spazi vuoti tra i frammenti. Pertanto, ciascuno degli elementi è racchiuso in un tag
La prima e l'ultima voce di menu non dovrebbero essere pulsanti: nella mia immagine è solo un elemento grafico senza un collegamento alla pagina interna, quindi aggiungiamo il parametro "nolink". Ciò rimuoverà la possibilità di fare clic su questo elemento per aprire una parte dell'immagine in una finestra separata. Fare clic con il mouse non farà nulla. Questo è il normale sfondo della pagina. Inattivo.
Nel mio caso, il codice del menu è simile a questo.
Separatamente, voglio notare il fatto che dopo aver importato le immagini in VK, il sistema integrato a volte indica in modo errato la dimensione delle immagini. Pertanto, dobbiamo monitorarlo attentamente ed esporre esattamente quelli che abbiamo pianificato in fase di progettazione. Altrimenti, tutto potrebbe andare in pezzi e il puzzle non funzionerà alla fine.
Dopo aver scritto il codice e allineato tutti gli elementi, salviamo la pagina e vediamo la stessa cosa che era in Photoshop.
Il tocco finale rimane: devi creare le stesse pagine in cui il nostro menu invierà le persone. Per fare ciò, ci rivolgiamo nuovamente allo script per la generazione di pagine wiki e questa volta ordiniamo tre pagine contemporaneamente. Allo stesso tempo, è anche necessario scrivere qualcosa su ciascuno e non dimenticare di salvare i loro indirizzi da qualche parte dalla barra degli indirizzi del browser.
Quindi inseriamo i collegamenti a nuove pagine nel codice wiki del menu nella forma page-102302049_51013384, dove il primo numero è l'id del gruppo e il secondo è il numero di pagina. Anche se, in generale, non importa. Dopotutto, dobbiamo solo copiare questo frammento di URL e incollarlo nel markup.
Di conseguenza, il codice del menu assume la forma seguente.
Esternamente, nulla è cambiato. Ma quando facciamo clic sulle voci di menu, possiamo vedere che ora funziona!
Per quanto riguarda il markup stesso e le regole con cui è scritto il codice, ti consiglio di leggere il gruppo Vkontakte appositamente dedicato a questo argomento. I ragazzi hanno descritto tutti i punti chiave e puoi facilmente trovare l'elemento necessario nel loro catalogo e capire come aggiungerlo alla tua pagina wiki.
Il bellissimo design della community VKontakte non è un capriccio, ma un elemento importante che forma la fiducia degli utenti in te e nella tua azienda. Se una pagina o un gruppo pubblico è progettato in modo non professionale, i tuoi potenziali clienti possono logicamente concludere che anche tu sei negligente nel tuo lavoro. Per evitare che ciò accada, assicurati che la tua pagina VKontakte sia bella, ordinata e facile da usare. Come farlo? Leggere sotto.
Dimensioni effettive delle immagini "VKontakte"
Qualche tempo fa, gli sviluppatori del social network VKontakte hanno lanciato un nuovo design. Ciò ha portato al fatto che le dimensioni ei principi di visualizzazione delle immagini sono cambiati. La nota, che verrà data di seguito, corrisponde a tutte le novità e contiene le dimensioni che sono rilevanti in questo momento.
Ora diamo un'occhiata più da vicino a ciascun elemento.
Dimensione avatar VK
La dimensione minima di un avatar è 200 per 200 pixel. Se provi a caricare un'immagine larga o lunga meno di 200 pixel, vedrai questo errore:
La dimensione massima di un avatar è 200 per 500 pixel. Ma, in linea di principio, puoi caricare immagini più grandi, fino a 7000 pixel su ciascun lato. La cosa principale è che il rapporto tra i loro lati non supera 2 a 5.
Ve lo mostro con un esempio.
Ho un'immagine. La sua dimensione: 200 per 800 pixel (rapporto da 2 a 8). Non ci sono errori durante il caricamento. Tuttavia, non riesco ancora a utilizzare questa immagine, perché "Contatto" non mi consente di selezionarla completamente.
Copertina
La dimensione della copertina per la versione completa del sito è 1590 per 400 pixel.
Nota: nella versione mobile e nelle applicazioni, non viene visualizzata la versione completa della copertina, ma solo una parte di essa, di dimensioni 1196 per 400 pixel. Guarda come viene ritagliato nell'app mobile:
Per evitare che ciò accada, posiziona gli elementi principali della tua copertina entro 1196 x 400 pixel.
Immagini allegate
Nel design aggiornato di "Contatto", la larghezza del feed di notizie è stata fissata. Ciò significa che le immagini allegate al post non vengono più allungate, ma rimangono come sono. Pertanto, se desideri che la tua immagine occupi tutto lo spazio nel feed delle notizie, deve essere larga almeno 510 pixel. È meglio che sia un quadrato o un rettangolo con orientamento orizzontale.
Sembra un po' confuso :) Pertanto, ti mostrerò un esempio.
Diciamo che abbiamo un'immagine di forma quadrata con lati di 510 pixel. Se lo applichiamo al nostro post, sembra fantastico nel feed delle notizie su tutti i dispositivi:
Ed ecco come appare un'immagine orizzontale con orientamento orizzontale (larghezza 510 pixel):
Come puoi vedere, più stretta è l'immagine (in altezza), più piccola appare nel feed dello smartphone. Per verificarlo, guarda l'immagine qui sotto:
È chiaro che la differenza qui non è particolarmente critica, e gli utenti di smartphone considereranno comunque la tua immagine, solo nel secondo caso saranno un po' più a loro agio.
Immagini per post con link
Tutti questi dati sono presi dal codice di markup Open Graph:
Se Open Graph non è specificato, il titolo viene preso dal meta tag Title e l'immagine viene presa dall'articolo. Allo stesso tempo, puoi facilmente cambiarlo o selezionare un'altra immagine dall'articolo usando le frecce speciali:
Oppure carica il tuo:
La dimensione minima dell'immagine che puoi utilizzare come annuncio per il tuo articolo è 537 per 240 pixel. Tuttavia, puoi caricare immagini più grandi purché vengano rispettate le proporzioni.
Immagine per un articolo creato nell'editor
La dimensione dell'immagine per la copertina di un articolo creato nell'editor è 510 per 286 pixel. È meglio se è di colore scuro e più o meno monocromatico, perché il nome dell'articolo e della community si perde su uno sfondo chiaro.
Buon esempio:
Non un ottimo esempio:
Dimensioni foto e video per storie
La dimensione per le foto è 1080 per 1920 pixel. La dimensione del video è 720 per 1280 pixel.
Specifiche per le registrazioni video:
- fino a 15 secondi;
- non più di 5 MB;
- codec h.264;
- Suono CAA.
Nelle storie, devi utilizzare foto e video in formato verticale.
Nota: al momento, le storie per conto delle comunità possono essere aggiunte solo da grandi comunità per le quali gli sviluppatori di VKontakte hanno aperto questa funzionalità. E questo viene fatto utilizzando l'applicazione ufficiale. Non può essere fatto da un computer.
Dimensioni della copertina dell'album fotografico
Dimensioni dell'immagine video
1280 per 720 pixel.
Pagina wiki
L'area del contenuto del wiki è larga 607 pixel. Se carichi un'immagine più grande, verrà caricata automaticamente con una larghezza di 400 pixel. Esempio: ho un'immagine che è 1366 per 768. Se la aggiungo a una pagina wiki, appare così:
Per modificare le dimensioni dell'immagine, è necessario fare clic su di essa e impostare i valori desiderati:
Come lavorare con le pagine wiki, descriverò in dettaglio di seguito. Pertanto, non ci soffermeremo su questo punto qui.
Come assicurarsi che le immagini VKontakte non si riducano? Effetto dello sfondo e delle dimensioni sulla qualità dell'immagine.
Se hai mai provato a caricare immagini su VKontakte (che fosse un'immagine avatar o solo una foto del tuo viaggio), probabilmente sai già che tendono a ridursi. Ciò è particolarmente evidente su uno sfondo scuro (e soprattutto rosso) e quando l'immagine non è troppo grande. Esempio:
Come assicurarsi che la qualità delle immagini non si deteriori?
Affinché l'immagine non si rimpicciolisca (più precisamente, si restringe, ma in misura molto minore), è necessario renderla 2-3 volte più grande della dimensione desiderata. Ad esempio, se dobbiamo creare un avatar di dimensioni 200 per 500 pixel, scattiamo una foto con una dimensione di 400 per 1000 pixel. Se devi creare un menu di dimensioni 510 per 400 pixel, prendiamo - 1020 per 800.
L'immagine blu scuro che ho pubblicato sopra è 510 x 350. L'ho resa due volte più grande (1020 x 700) e l'ho salvata. Ecco cosa ne è venuto fuori:
Come sistemarlo? La risposta è molto semplice: devi scegliere uno sfondo diverso. Il fatto è che i pixel sono più visibili su uno sfondo scuro che su uno chiaro. Pertanto, se si desidera ottenere una qualità perfetta (sebbene l'immagine sopra appaia già abbastanza normale), è necessario modificare leggermente la combinazione di colori. Ad esempio, rendi lo sfondo bianco e il testo blu:
Come progettare un'intestazione di pagina
L'intestazione della tua pagina pubblica o del tuo gruppo è la prima cosa che gli utenti vedono quando ti visitano. Nella maggior parte dei casi, in questo luogo viene posizionato un menu di navigazione basato su materiali pubblici, alcuni post interessanti o annunci importanti. Diamo un'occhiata ad esempi di come diverse aziende utilizzano questo spazio.
Copertina
Non molto tempo fa, VKontakte ha introdotto un aggiornamento: ora puoi caricare copertine grandi e belle (1590 per 400 pixel) sulle pagine. Per fare ciò, vai alle impostazioni e fai clic sul pulsante "Download".
Puoi inserire qualsiasi cosa sulla copertina: dal nome e dal motto della tua azienda a tutti i tipi di promozioni, offerte e persino concorsi.
Consiglio di prestare particolare attenzione alle possibilità di copertura dinamica. Leggi il nostro articolo su come funziona, per quali scopi può essere utilizzato e con quali servizi installarlo.
Esempi di coperture dinamiche:
Copertina + descrizione della community + link al sito
Alcune aziende in particolare non correggono alcun post nell'intestazione in modo che gli utenti abbiano l'opportunità di leggere le informazioni di base sulla pagina e andare immediatamente al sito.
Descrizione con hashtag
Alcune aziende aggiungono hashtag alla descrizione standard della pagina che la caratterizzano. Questo viene fatto in modo che la pagina abbia una rilevanza più chiara e, per questo motivo, sia più alta nella ricerca di query pertinenti. Ad essere onesti, non so se questo metodo funzioni o meno. Non ho visto casi su questo argomento, quindi se qualcuno lo sa, vi sarei grato se condividete il link.
Post bloccato che racconta di cosa tratta la pagina
Se vuoi raccontare la tua pagina in modo più dettagliato (con foto, link e un bel layout), puoi allegare un post wiki o un articolo realizzato nell'editor all'intestazione con un'immagine luminosa sull'annuncio che incoraggerà gli utenti a cliccaci sopra. Un esempio di un tale post:
Ed ecco cosa vede l'utente dopo aver cliccato sul link:
Menu di gruppo aperto
Chiamo un menu aperto tale menu, che mostra immediatamente in quali elementi è composto. Cioè, l'annuncio dell'immagine del post wiki duplica completamente il suo contenuto. Pertanto, gli utenti vedono immediatamente cosa li aspetta all'interno. Ve lo mostro con un esempio.
Ecco come appare un post bloccato nell'intestazione di una pagina Flatro:
Menu di gruppo chiuso
Un menu chiuso è lo stesso post wiki del paragrafo precedente, solo l'annuncio ha un'immagine su cui non ci sono voci di menu. Di solito ci scrivono sopra: “Menù”, “Menù di navigazione” o “Navigazione attraverso materiali pubblici”.
Ecco cosa vediamo quando ci clicchiamo sopra:
A proposito, vale la pena notare che queste sono tutt'altro che le uniche opzioni. In effetti, puoi scrivere quello che vuoi su questa immagine. La cosa principale è che l'utente vuole fare clic su di esso e capisce cosa lo aspetta dopo. Esempio:
Menù di gruppo
Un menu unito è quando l'immagine sull'annuncio del tuo menu è un'immagine con l'avatar. Un po 'più in basso ti dirò in dettaglio come creare un menu del genere, ma per ora guarda quanto è bello.
GIF e avatar in un'unica immagine
Ma questo design del cappello mi ha davvero impressionato molto. Una gif a riproduzione automatica si fonde con l'avatar in un'unica composizione e attira l'attenzione degli utenti, anche se non ci sono informazioni su di essa.
A proposito, ho visto questo esempio nel gruppo del marketer SMM Sergey Shmakov. Quindi, lo ringrazio per la scoperta :)
Menù nascosto
Il menu nascosto è disponibile solo per i gruppi (le pagine non hanno tale funzionalità). Per vederlo, è necessario fare clic sul collegamento corrispondente. Il vantaggio di questo metodo di progettazione è che gli utenti possono vedere le informazioni di base della community e, se vogliono utilizzare il menu, devono solo fare un clic. Tuttavia, c'è un piccolo aspetto negativo qui: non tutti gli utenti sono a conoscenza dell'esistenza di questa funzione, quindi il tuo menu potrebbe ricevere meno attenzione che se fosse bloccato nella parte superiore della pagina.
Riproduzione automatica del video
Alla fine di novembre 2015, sul social network VKontakte è apparsa un'interessante innovazione: non appena un utente entra nella tua pagina, il video allegato all'intestazione inizia a essere riprodotto automaticamente. Con questa tecnica puoi attirare ancora di più l'attenzione degli utenti (soprattutto quelli che hanno visitato per primi la tua pagina) e, allo stesso tempo, non infastidire coloro a cui non piace quando viene loro imposto il loro contenuto, perché il video viene riprodotto senza audio e praticamente non interferisce.
Come aggiungere questo video all'intestazione della tua pagina?
Per fare ciò, devono essere soddisfatte tre condizioni:
- Allega un video a un post e appunta questo post nella parte superiore della community.
- Oltre al video, nient'altro deve essere allegato alla voce. Solo video e testo opzionali.
- Il video deve essere caricato da VKontakte: i lettori di terze parti non sono supportati.
Un post che riceve molti repost
Un altro modo per utilizzare in modo produttivo lo spazio nell'intestazione della tua pagina è aggiungere uno dei tuoi post di maggior successo, uno che ha già guadagnato e continua a ottenere un gran numero di Mi piace e condivisioni. Perché farlo, penso che tutti lo capiscano: più repost, maggiore è la copertura, più abbonamenti riceve la pagina.
Annunci di nuovi clip, album, eventi
Presentazione di nuovi prodotti/servizi
Sconti e promozioni
Casi, recensioni dei clienti
Pubblicità dell'applicazione
Scherzi pratici
Regole comunitarie
Collegamenti ad altri social network
Ho elencato lontano da tutte le opzioni di design per il cappuccio. Infatti, in copertina e nel post appuntato, puoi postare qualsiasi informazione: offerte di lavoro, annunci, link ai prodotti più venduti, ecc. Quindi non limitarti agli esempi sopra. Accendi la tua immaginazione e usa il design della tua comunità per raggiungere i tuoi obiettivi.
Quale dovrebbe essere l'avatar
Un avatar non è solo una bella immagine con il logo della tua azienda, ma uno strumento di lavoro per un marketer, con l'aiuto del quale raggiunge i suoi obiettivi. Diamo un'occhiata più da vicino a come dovrebbe essere per attirare l'attenzione degli utenti e incoraggiarli a completare l'azione target. Iniziamo con la miniatura.
Miniatura dell'avatar
- Il testo sulla miniatura dell'avatar deve essere abbastanza grande da essere leggibile.
- Il testo non deve estendersi oltre la miniatura.
- Gli utenti dovrebbero essere chiari su ciò che viene mostrato nell'immagine del profilo.
- Se possibile, è meglio non utilizzare immagini di stock, poiché spesso riducono la credibilità dell'azienda.
- Non è desiderabile che la miniatura dell'avatar sia troppo sbiadita e noiosa, altrimenti andrà persa contro gli avatar dei concorrenti più luminosi.
- Se vuoi che il tuo avatar abbia un aspetto moderno, fallo in uno stile minimalista: meno testo, ombre, sfumature ed elementi che non hanno alcun significato semantico. Il tuo avatar dovrebbe essere il più semplice e ordinato possibile. Questo stile è di tendenza in questo momento.
- Se il tuo obiettivo è attirare l'attenzione degli utenti e distinguerti dagli altri avatar nel feed, dovrai accendere la tua immaginazione. Pensa a cosa presti attenzione quando cerchi comunità interessanti? Qui, ad esempio, sono stato più volte attratto da avatar con una luce accesa, che di solito indica che è arrivato un nuovo messaggio. Questa è una tecnica molto antica, ma per qualche motivo mi colpisce ancora: quando vedo una luce del genere, la terrò sicuramente d'occhio.
Non sto dicendo che questo trucco funzionerà anche sulla tua pagina. Il punto che voglio sottolineare è che ci sono così tanti modi per distinguersi, devi solo farti la domanda e diventare un po' creativo. Ecco, ad esempio, un'altra idea interessante che difficilmente avrei pensato a me stesso:
L'avatar è un cerchio nero: grande e piccolo. Sembrerebbe, perché farlo? Ma quando scorri l'elenco delle comunità, tali avatar attirano l'attenzione, perché sono molto diversi da tutti gli altri.
Quali informazioni possono essere inserite nella miniatura dell'avatar
Sebbene la miniatura dell'avatar sia molto piccola, può (e dovrebbe) essere utilizzata per attirare follower nella tua comunità. Come farlo? Diamo un'occhiata ad alcune opzioni:
Annuncio di un nuovo prodotto/servizio/evento
Vantaggi dell'azienda/servizio/pagina
Numero di telefono dell'azienda
Prezzi vantaggiosi
Spedizione gratuita
A proposito, molto spesso le informazioni che l'azienda fornisce la spedizione gratuita vengono aggiunte al nome del gruppo stesso, in modo che gli utenti presteranno sicuramente attenzione ad esso.
Azione
Concorsi
Lavori
Quale dovrebbe essere l'avatar stesso?
Ho considerato quale dovrebbe essere la miniatura dell'avatar e quale testo può essere posizionato su di essa. Passiamo ora all'avatar stesso. La versione completa dell'avatar verrà visualizzata solo in una comunità che non ha un set di copertine. È per questi casi che ho scritto questa sezione. Quindi, come dovrebbe essere l'avatar della tua community in modo che gli utenti capiscano immediatamente che la tua azienda si è avvicinata alla creazione della pagina in modo responsabile e professionale.
- L'avatar deve essere di alta qualità. Su come raggiungere questo obiettivo, ho scritto un po 'più in alto. Per coloro che si sono persi questa parte, in breve, la dimensione dell'avatar dovrebbe essere 2-3 volte più grande di quella che avevi pianificato.
- È auspicabile che l'avatar sia combinato con il menu: avere la stessa combinazione di colori, avere gli stessi caratteri, elementi, ecc. Grazie a ciò, l'intestazione della tua pagina apparirà più ordinata e professionale. Esempio:
- L'avatar stesso e la miniatura dell'avatar potrebbero essere diversi. Ad esempio, puoi disegnare un cerchio sull'avatar, modellarlo come preferisci, selezionare quell'area come miniatura e modellare il resto dell'avatar con uno stile diverso.
- Per incoraggiare gli utenti a iscriversi alla tua pagina o scrivere un messaggio a un rappresentante dell'azienda, puoi inserire un apposito invito all'azione nella parte inferiore dell'immagine del profilo e accompagnarlo con una freccia che punta al pulsante.
- Cerca di non inserire troppe informazioni sull'avatar, altrimenti sembrerà sovraccarico e disordinato. Aggiungi solo i punti più importanti e assicurati che ci sia "aria" tra di loro.
Un'altra opzione è dividere l'avatar in due parti. Uno per la miniatura e uno per il resto dell'avatar.
Quali informazioni possono essere inserite nell'avatar?
In effetti, qualsiasi cosa può essere posizionata sull'avatar. A differenza di una miniatura, c'è davvero dove vagare. Soprattutto, non abusarne :)
Dominio del sito
Telefono / indirizzo / orari di apertura
Concorsi/promozioni
Prodotti/Notizie più acquistati
informazioni sulla consegna
Pubblicità per app mobili
I principali vantaggi dell'azienda/pagina/prodotto, ecc.
Rinnovo gamma/nuove creazioni, ecc.
Informazioni che la tua comunità è ufficiale
Informazioni sui prossimi eventi
Indirizzi di account in altri social network
Descrizione estesa della pagina
Vanta
In generale, è possibile inserire qualsiasi informazione sull'avatar. Ho incluso solo alcune idee in modo che tu possa vedere cosa stanno facendo gli altri ed essere ispirato dai loro esempi. Bene, tieni a mente i principali consigli: l'avatar dovrebbe essere di alta qualità, il carattere dovrebbe essere grande e dovrebbe esserci più "aria" tra gli elementi.
Come creare un avatar e un menu uniti
Per creare un avatar e un menu uniti, avrai bisogno di Adobe Photoshop o un suo equivalente. Spiegherò l'intero processo usando Photoshop come esempio. Quindi andiamo.
- Scarica il modello per Photoshop, che ho preparato appositamente per questo articolo. Dimensioni normali (menu 510 px di larghezza, avatar 200) o ingrandite (menu 1020 px di larghezza, avatar 400).
- Apri l'immagine che vuoi prendere come base.
- Copialo, incollalo nel modello e posizionalo nel modo in cui vorresti fosse tagliato.
- Aggiungi effetti, testo, grafica e altro.
- Se non vuoi che parte dell'immagine vada persa (in quello spazio, che è di 50 pixel), spostala a destra come mostrato nella seguente GIF:
- Seleziona lo strumento "Nidificazione" e fai clic sul pulsante "Frammenti lungo le guide".
- Elimina i frammenti non necessari (fai clic con il pulsante destro del mouse - "Elimina frammento") e modifica quelli esistenti (fai clic con il pulsante destro del mouse - fai clic in un punto vuoto - prendi l'area desiderata e allungala alla dimensione desiderata).
- Vai alla sezione "File" e seleziona il comando "Salva per Web".
- Vai nel luogo in cui hai salvato le immagini (desktop o una directory specifica) e trova lì una cartella chiamata "Immagini". Ecco dove saranno le tue immagini. Ora non resta che riempirli sulla pagina.
PS L'altezza dell'avatar può essere modificata a tua discrezione. Ho preso la dimensione massima - 500 pixel, ma puoi avere questo valore in meno. Ad esempio, come nella pagina "Marcatura Wiki":
Come utilizzare i widget
Anche i widget fanno parte del design della comunità VK. Con il loro aiuto, l'utente può: effettuare un ordine, iscriversi alla newsletter, partecipare a un concorso, leggere e lasciare recensioni, aprire una ricerca nella community, ricevere un regalo, un buono sconto, ecc.
Ecco alcuni esempi di come appaiono i widget nella pagina VKontakte:
Come pubblicare immagini
Se sei un web designer o hai un gusto artistico e un senso del bello, non sarà difficile per te inventare un'identità aziendale per le tue immagini. Tuttavia, mi sembra che ci sarà una minoranza di queste persone in questo articolo (a proposito, nemmeno io sono uno di loro). Pertanto, diamo un'occhiata più da vicino a come ciò avviene, sulla base di esempi di aziende di successo.
A proposito, tieni presente che quasi tutte le note aziende VKontakte marchiano le loro immagini, ovvero aggiungono un piccolo logo, l'indirizzo della loro pagina o una filigrana. Ciò aumenta la consapevolezza del marchio e protegge le tue immagini dalla copia. Ne vale la pena, ognuno decide da solo. L'unica cosa che vorrei consigliare è che se decidi di farlo, assicurati che il tuo logo non sia troppo luminoso e non occupi troppo spazio, altrimenti tutta l'enfasi andrà ad esso e l'immagine perdere il suo fascino.
Dove posso ottenere buone immagini?
Abbiamo un buon articolo su questo argomento sul nostro blog - "". Sono tutti gratuiti, ma alcuni richiedono la registrazione. Se non trovi nulla di adatto a te, prova a cercare per parola chiave + sfondo (o, se in inglese, sfondo). In genere, tale richiesta produce immagini di alta qualità. Ma qui devi stare attento e controllare il tipo di licenza, altrimenti, se hai un'attività seria, puoi incorrere in guai.
E che dire di chi non sa lavorare in Photoshop?
Se non hai mai lavorato in Photoshop (o qualsiasi altro editor grafico) e non sei ancora pronto per prenderti il tempo per padroneggiarlo, puoi utilizzare i servizi che hanno già modelli di immagine già pronti per vari social network:
1. Fotor.com
Successivamente, sul lato sinistro dello schermo, seleziona il modello che ci interessa. Tieni presente che solo i modelli che non hanno l'icona di un diamante sono forniti gratuitamente.
Inseriscilo nel template, selezionalo con il tasto sinistro del mouse, seleziona il comando Layer (icona sandwich) e clicca su Sposta in basso. Pertanto, la nostra immagine andrà sullo sfondo e tutte le iscrizioni saranno sovrapposte su di essa.
Successivamente, cambiamo il testo, il carattere, la dimensione del carattere, la posizione dell'iscrizione, ecc.
Clicca quindi sull'icona a forma di floppy disk, seleziona il nome, il formato immagine, la qualità e clicca sul pulsante Accedi per scaricare.
2.Canva.com
Un altro servizio che ti aiuterà a organizzare magnificamente la tua immagine. Funziona secondo lo stesso principio del precedente. Ci registriamo al servizio (puoi utilizzare il tuo account Google+ o l'e-mail).
Scegli il tuo campo di attività. Saltiamo il passaggio in cui ti viene chiesto di invitare amici. Arriviamo al menu principale, dove selezioniamo un post di Facebook se ci serve una foto rettangolare, o un post di Instagram se ci serve una foto quadrata.
Seleziona un modello (se il modello è contrassegnato come "GRATUITO", allora è gratuito), cambia il testo.
Se necessario, carica la tua immagine, regola le dimensioni, cambia il testo, il carattere e la posizione della scritta. Successivamente, fai clic sul pulsante "Download", seleziona il formato dell'immagine e salvalo sul tuo computer o su qualsiasi altro dispositivo.
Come formattare gli articoli nell'editor
Da poco, VKontakte è stato in grado di comporre articoli in un editor speciale. Per creare un articolo, devi cliccare sulla lettera "T":
Come usare il markup wiki
Bene, qui arriviamo alla sezione più interessante e allo stesso tempo difficile. Forse ci sono persone tra i lettori che non sanno cosa sia il markup wiki e in generale sentono questo termine per la prima volta. Pertanto, soprattutto per te, darò una definizione che lo stesso "Contatto" dà.
Il markup wiki è un linguaggio di markup utilizzato per formattare il testo sui siti Web (solitamente classificati come progetti wiki) e semplifica l'accesso alle funzionalità del linguaggio HTML. Sul nostro sito, le pagine wiki sono una buona alternativa ai normali post e alla navigazione testuale. Se devi creare un articolo di grandi dimensioni con una diversa formattazione del testo (grassetto, sottolineato, intestazioni, ecc.) o aggiungere elementi grafici, o semplicemente creare un menu di navigazione colorato per la tua comunità, un wiki è indispensabile.
Proprio come Wordpress (o qualsiasi altro CMS) ha un editor HTML con il quale crei articoli, Contact ha un proprio editor per creare e modificare pagine wiki. Si presenta così:
Con questo editor vengono creati menu di navigazione, nonché articoli con immagini, video e registrazioni audio. Un po 'più in basso analizzerò in dettaglio come lavorare in questo editor, ma prima ti chiedo di aggiungere due link ai segnalibri per te stesso. Ti aiuteranno molto nell'apprendimento del markup wiki.
Modificare un articolo di Wikipedia è facile. Segui il link "modifica". Si aprirà la pagina di modifica; ha una forma di testo con il testo originale dell'articolo, che contiene caratteri speciali: il markup "wiki", descritto di seguito.
La modifica
Quindi: apportare le modifiche desiderate al testo originale; descrivi brevemente il significato della tua modifica nella riga "Descrizione delle modifiche"; per verificare la corretta visualizzazione della pagina, cliccare sul pulsante "Anteprima"; se tutto va bene con la pagina, pubblica la tua nuova versione facendo clic sul pulsante "Salva pagina".
Si prega di scrivere da un punto di vista neutrale: evitare pregiudizi e iperemotività; indica le fonti delle tue informazioni - questo aiuterà gli altri a controllare e integrare il tuo lavoro. Vvilam: Non è difficile e molto utile.
Caratteristiche aggiuntive
Sopra il modulo di modifica del testo ci sono pulsanti per la formattazione del testo, sotto c'è un pannello per inserire rapidamente caratteri speciali, elementi di markup wiki e modelli. Il pulsante "Modifiche apportate" ti consente di confrontare il codice sorgente con quello che hai nella finestra di modifica. I membri registrati hanno inoltre accesso a: la casella di controllo Modifica minore, che consente di contrassegnare le modifiche come minori; seleziona la casella di controllo "Guarda questa pagina" per monitorare le modifiche future a questo articolo. Spesso è conveniente copiare prima il testo in un editor di testo (tramite gli appunti), modificarlo e quindi trasferirlo nuovamente nel modulo di modifica nel browser. Per questi scopi, dovresti usare un editor di testo che supporti Unicode. Inoltre, puoi discutere gli articoli con altri membri. Quasi ogni articolo su Wikipedia ha una pagina parallela con la sua discussione. I membri modificano semplicemente questa pagina, proprio come gli articoli: vai alla pagina "discussione" e fai clic su "modifica" lì. Nelle discussioni, ancora, le regole dovrebbero essere seguite; la cosa principale è evitare la durezza e iscriversi (four tildes niska 14:39, 14 giugno 2007 (MSD) nel codice della pagina).
Marcatura wiki
Di seguito è riportata una tabella di riferimento per la modifica su Wikipedia.
Sezioni, paragrafi, elenchi e righe
Inizia una sezione con una barra del titolo:
Nuova sezione == === Sottosezione === ==== Sottosottosezione ====
Una singola nuova riga non influisce sul markup. Può essere usato per separare le frasi nello stesso paragrafo. Alcuni editori ritengono che ciò semplifichi la modifica e migliori la funzione di confronto delle versioni.
Ma una riga vuota inizia un nuovo paragrafo.
Usando il tag "br", puoi interrompere le righe senza iniziare un nuovo paragrafo
Fare una lista è facile
- ogni riga inizia con un asterisco;
- più stelle - più profondo è il livello; Puoi anche rientrare all'interno con i due punti
Vanno bene anche le liste numerate:
- Vanno bene anche le liste numerate:
- molto organizzato;
- facile da leggere
Puoi anche fare liste miste:
- Puoi anche fare liste miste:
- e investili
- come,
- qui.
- e investili
Un punto e virgola all'inizio di una riga seguito da due punti crea un elenco a due livelli.
I due punti all'inizio di una riga fanno rientrare un paragrafo.
Una semplice interruzione di riga avvia un nuovo paragrafo.
Nota: questo vale principalmente per le pagine di discussione.
Se la stringa inizia con uno spazio, verrà formattata come è stata digitata; carattere a larghezza fissa; senza interruzioni di riga. Questo può essere applicato a:
* inserire testo preformattato; * descrizioni di algoritmi; * codice sorgente del programma * ascii art (creazione di immagini utilizzando caratteri di testo).
Testo centrato.
Linea di demarcazione orizzontale: quattro linee tratteggiate consecutive (----)
Puoi controllare l'allineamento del testo di un paragrafo usando il tag
Con il parametro align, con il centro del valore per l'allineamento al centro, giustifica per l'allineamento in larghezza, a sinistra per l'allineamento a sinistra, a destra per l'allineamento a destra.
L'impostazione predefinita è l'allineamento a sinistra.
Ad esempio, per giustificare in larghezza, utilizzare la seguente costruzione:
Testo del paragrafo
Collegamenti, URL
Londra ha un buon trasporto pubblico. La prima lettera della destinazione viene automaticamente in maiuscolo. Gli spazi interni vengono rappresentati automaticamente come caratteri di sottolineatura (l'impostazione di un carattere di sottolineatura ha lo stesso effetto della digitazione di uno spazio, ma non è consigliata).
Quindi il link sopra porta a http://ru.wikipedia.org/wiki/Public_Transport, che è un articolo chiamato "Trasporto pubblico".
Attenzione: se il caso della parola o frase di riferimento non coincide con il nominativo, dovresti mettere una barra verticale tra parentesi quadre doppie e scrivere il nominativo a sinistra di esso e a destra - corrispondente alla grammatica di la frase in cui è inserito il collegamento.
Esempio: Londra ha un buon trasporto pubblico.
Londra ha buoni [[trasporti pubblici]]. Londra ha buoni [[trasporti pubblici| con i mezzi pubblici]].
I finali si fondono con il riferimento: test, geni
Il racchiuso tra parentesi viene automaticamente nascosto: il regno.
Spazio dei nomi automaticamente nascosto: Portale della community .
Il racchiuso tra parentesi: [[kingdom (biology)|]]] viene automaticamente nascosto. Lo spazio dei nomi viene automaticamente nascosto: [[Wikipedia:Community Portal|]].
Puoi collegarti a una sottosezione all'interno dell'articolo stesso digitandola dopo l'hash mark: Cite .
Puoi collegarti a una sottosezione all'interno dell'articolo stesso digitandola dopo il cancelletto: [[Wikipedia:Regole e linee guida#Riferimento|Riferimento]].
Quando aggiungi commenti a una pagina di discussione, devi firmarli. Questo può essere fatto aggiungendo tre tilde per ottenere il nome utente:
niskao quattro per ottenere il nome utente più data/ora:
niska 14:39 14 giugno 2007 (MSD)È l'opzione data e ora preferita.
Quando aggiungi commenti a una pagina di discussione, devi firmarli. Questo può essere fatto aggiungendo tre tilde per ottenere il nome utente: : ~~~ o quattro per ottenere il nome utente più data/ora: : ~~~~ L'opzione data e ora è quella preferita. Link esterno: , per link non in russo è opportuno indicare la lingua: ((ref-en))
Oppure inserisci semplicemente l'URL: http://www.nupedia.com.
Questo indirizzo è fornito a titolo di esempio, non utilizzarlo.
Puoi specificare un'e-mail come questa:
[[Media:Sg_mrob.ogg|Suono]] [[Media:Tornado.jpg|immagine del tornado]]
ISBN 0123456789X
Formattazione del testo
Gli stili grassetto e corsivo sono usati nei seguenti casi: stress logico, enfasi strutturale, stress logico in enfasi strutturale (o viceversa) stress logico
separazione strutturale
stress logico nella selezione strutturale (o viceversa)
.
- Questi sono doppi e tripli apostrofi, non virgolette.
"""selezione strutturale"""
"""""stress logico nella selezione strutturale (o viceversa)""""".
Puoi anche scrivere corsivo e grassetto se sei interessato a uno stile di carattere specifico piuttosto che a un'enfasi logica, come nelle formule matematiche: F = ma
:F = munCarattere monospazio per termini tecnici termini tecnici
termini tecnici
Formattazione speciale per frammenti di codice sorgente
codice sorgente
È possibile utilizzare testo piccolo per i titoli testo piccolo per i titoli
piccolo testo>
Puoi barrare il materiale eliminato e sottolineare il nuovo materiale barrare il materiale eliminato e enfatizzare il nuovo materiale
cancella il materiale cancellato e enfatizzare il nuovo materiale
È semplicemente fondamentale per un amministratore o un moderatore di gruppo sapere come creare una pagina wiki di VKontakte, perché questo è uno dei modi più semplici per progettare magnificamente un post e attirare la massima attenzione sulle informazioni pubblicate. In effetti, per un wiki pubblico, le pagine sono un enorme passo avanti nella lotta per un pubblico.
Il markup wiki, che è diventato la base per la creazione di una pagina wiki, è un linguaggio di layout speciale. Originariamente era usato per strutturare gli articoli di Wikipedia. Ma è diventato il più popolare quando si è scoperto che puoi usarlo anche su VKontakte.
Le basi del markup wiki sono così chiare che un utente senza conoscenze di programmazione può impararle.
Quali opportunità offre la conoscenza del markup wiki?
Avere padroneggiato il modo di formattare il testo è facile:
- Crea intestazioni, elenchi, paragrafi;
- Effettua selezioni in corsivo e grassetto;
- Incorpora immagini nel testo;
- Usa link di ancoraggio;
- Disegna pagine di destinazione;
- Creare cataloghi e multi-pagine;
- Sviluppare un menu di navigazione per il pubblico;
- Disegna tabelle.
La creazione di una pagina wiki VKontakte può essere una fonte di reddito aggiuntivo. Il markup wiki ha appena aperto spazi infiniti per la progettazione di post, consentendoti di incarnare le fantasie più audaci. E più originale è il design per il gruppo, maggiori sono le possibilità che venga notato tra centinaia di concorrenti. Ma prima di imparare a creare pagine davvero utili, devi dedicare del tempo all'apprendimento. Non è necessario assumere insegnanti o frequentare corsi di specializzazione.
Su Internet, è facile trovare un tutorial per i manichini sul markup wiki e studiarlo da soli.
Come creare una pagina wiki VKontakte per un gruppo o pubblico?
Per una persona che non ha mai incontrato un tale modo di progettare contenuti nella sua vita, il compito sembra impossibile. Ma in realtà, non c'è niente di super complicato. Una volta studiata la teoria, dopo aver confermato le conoscenze con una breve pratica, non vorrai più utilizzare i record ordinari. Sembrano privi di caratteristiche rispetto alle caratteristiche luminose del markup wiki.
Come creare una pagina wiki pubblica?
Sostituisci il testo "titolo della pagina" con il titolo che desideri appaia nella pagina wiki. E scoprirai l'ID del pubblico aprendo qualsiasi ingresso dal muro. Nella barra degli indirizzi, vedrai un link in cui, dopo le lettere id, ci saranno i numeri che ti servono. Copiali e inizia a riempire la pagina.
Per rendere la pagina diversa dalle altre, considera attentamente il design. I tag speciali ti aiuteranno in questo:
Per rendere disponibili le pagine wiki ad altri utenti, posiziona i collegamenti ad esse sulla bacheca o nel menu.
Come creare un menu wiki VKontakte per un gruppo: markup
Aggiungere un menu wiki a un gruppo è facile. È necessario modificare la sezione "Ultime notizie". Si trova nell'intestazione della community ed è più adatto ai nostri scopi. Come fare un bel menù? Non puoi fare a meno del markup wiki. Sai già che può essere utilizzato per inserire immagini in testo e link di ancoraggio. Se riesci a gestire facilmente queste manipolazioni, non dovrebbero esserci domande sull'attuazione dell'idea.
Il menu wiki di Vkontakte è un elenco ben progettato di collegamenti a pagine con informazioni importanti.
Pertanto, prima di creare il menu stesso, dovresti pensare a cosa esattamente vuoi attirare l'attenzione degli utenti. Deciso? Quindi non esitare, perché hai già tutte le conoscenze necessarie per creare pagine wiki e il menu Vkontakte.
Penso che tutti coloro che utilizzano attivamente il social network Vkontakte abbiano già incontrato gruppi e pubblici ben progettati. Molti di loro, oltre al menu, hanno anche molte pagine nidificate stilizzate, directory e così via, che essenzialmente creano un piccolo sito proprio all'interno del social network.
Ecco alcuni esempi in modo che tutti capiscano di cosa sto parlando.
Tali gruppi ti consentono di distinguerti dalla concorrenza e attirare più utenti. Soprattutto se anche il contenuto è interessante :)
In questo articolo parleremo di come tutto questo è fatto. Per analizzare tutto più in dettaglio e approfondire tutte le sottigliezze, facciamo un esempio specifico. Ci sarà una piccola master class sulla progettazione di gruppi.
La prima fase del nostro lavoro è un'idea. Dobbiamo capire cosa vogliamo dire ea chi. In contatto ci sono diversi formati di comunità e vale la pena scegliere tenendo conto dei compiti impostati. Anche se in futuro il gruppo potrà essere trasferito al formato pubblico e viceversa.
Spiego con le dita. PubblicoÈ qualcosa come un blog. Linea di notizie. In altre parole, raccontiamo alcune cose ai nostri iscritti e loro non potranno scrivere sulla bacheca della nostra community. Massimo commento.
Gruppo ti consente di creare una community più aperta alla conversazione e alla discussione, in cui le persone possono pubblicare post nel feed per proprio conto. Puoi anche aggiungere amici dalla tua lista ad esso. Non esiste una tale opzione in pubblico. Inoltre, il gruppo ha un po' più di opzioni per l'integrazione del markup wiki (c'è una sezione "Notizie" in cui puoi integrare il menu).
A livello globale, puoi argomentare in questo modo: se dobbiamo creare una community per il negozio, allora prenderei il formato "pubblico". Se parliamo, ad esempio, di appassionati di pesca, allora è meglio prendere un "gruppo". Tuttavia, ognuno è libero di fare ciò che ritiene opportuno. Dopotutto, in qualsiasi momento è possibile modificare il formato. Tuttavia, tieni presente che Vkontakte introduce una restrizione sulla modifica del formato della community nuovamente e dopo la prima volta dovrai attendere alcuni giorni prima di poter restituire tutto se necessario. Pertanto, è meglio testare la funzionalità prima che il gruppo inizi a riempirsi di contenuti.
Come parte di questa master class, prenderò il gioco Mad Max basato sull'omonimo film, uscito solo un paio di settimane fa, come punto di partenza e creerò una community per i giocatori con vari materiali su questo gioco. L'obiettivo principale è drenare il traffico verso il tuo sito di gioco.
Il formato sarà “Gruppo”, in quanto è necessario creare un afflusso naturale del pubblico e massimizzare la comunicazione all'interno della comunità. Chiarisco subito che utilizzerò una tecnica universale che può essere utilizzata sia in un formato di gruppo che in pubblico. Funziona ovunque.
Mare di contenuti, iniziamo a dare vita all'idea!
Crea un gruppo
Per creare un gruppo, vai su "I miei gruppi" nel menu a destra del tuo account Vkontakte e fai clic sul pulsante blu in alto "Crea comunità".
Dovrebbe apparire una finestra come questa in cui inseriamo un nome per il nostro gruppo e selezioniamo un formato.
Dopo aver inserito le informazioni necessarie, si apre davanti a noi il pannello di controllo della nostra community. Nel mio caso, sembra così.
Come puoi vedere, ho aggiunto alcune opzioni: ho incluso video, registrazioni audio, discussioni e una serie di altre funzionalità che mi saranno utili nel mio lavoro futuro durante la raccolta di contenuti. Tutto questo può essere modificato in futuro senza alcuna restrizione. Ho anche annotato l'indirizzo del mio sito web. Se non disponi di un sito Web o se il suo oggetto non corrisponde al formato della community (riguardano argomenti diversi e non sono in alcun modo correlati tra loro), questa riga può essere lasciata vuota.
In questo caso ho fissato i limiti di età a partire dai 18 anni, per analogia con quelli che gli sviluppatori hanno fissato per il gioco. Anche se ho pochi dubbi sul fatto che anche i bambini giochino.
Qualunque cosa. Il gruppo è stato creato!
Ora puoi iniziare a modellarlo.
Creare un gruppo Vkontakte
Questa fase può essere suddivisa in 2 componenti: grafica e tecnica. Per funzionare, abbiamo bisogno di un modello per creare un avatar di gruppo e un menu, oltre a un po' di immaginazione e conoscenza di base di Photoshop (aka Adobe Photoshop).
Modello di markup
Che cos'è un modello e di cosa si tratta? Un modello è una specie di spazio vuoto. In questo caso, nel formato *.psd, abbiamo segnato le aree per l'immagine sotto il menu e gli avatar del gruppo.
Come puoi vedere nel secondo esempio all'inizio di questo articolo, possiamo realizzare il design nello stesso stile per l'avatar e l'immagine del menu. Allo stesso tempo, viene tagliato visivamente in 2 parti. Quindi il modello ti consente di formare un'immagine in modo tale da eliminare lo spostamento grafico e adattare le immagini il più possibile a un livello.
Per essere più chiaro, ecco un esempio.
Si può notare che in entrambe le parti della foto è presente una fascia con vista sulla zona residenziale. Senza utilizzare un modello, è quasi impossibile farlo esattamente la prima volta. Sarà necessario aggiustare le immagini, misurando discrepanze fino a 1px. Mentre quando si utilizza un modello, aggiungiamo semplicemente elementi grafici all'interno del markup e otteniamo immediatamente il risultato desiderato.
Voglio notare che questo modello è progettato per 1 riga nella spiegazione. Nello screenshot dell'esempio, ci sono i telefoni. Se viene visualizzata una seconda riga, dovrai utilizzare un modello diverso o correggere il design manualmente.
Nel frattempo, si procede direttamente alla progettazione grafica del nostro nuovo gruppo. Qui prendo la strada di minor resistenza e vado su Google Immagini per trovare le parti del disegno. Puoi anche usare Yandex. A chi piace cosa.
Non ho una formazione in design, quindi non ci soffermeremo sulla selezione di caratteri e altre sciocchezze. Dopo un po' di modifiche in Photoshop, ho ottenuto questo risultato.
Sul frammento di sinistra (dove si trova la scritta "Menu") puoi anche aggiungere diversi trigger. In questo caso ho deciso di farne a meno. Qualunque cosa. Il design dell'avatar è pronto. Premiamo la combinazione di tasti di scelta rapida Maiusc + Ctrl + Alt + S in Photoshop e salviamo i nostri frammenti in una cartella sul nostro disco rigido.
La prima fase del lavoro con la grafica è completata. Torniamo in contatto.
Impostazione dell'avatar e del menu per il gruppo
Facciamo clic sui due tipi al posto dell'ava del nostro gruppo e carichiamo la nostra immagine lì. Ecco questi ragazzi, sotto di loro c'è scritto "Carica una foto".
Aggiungiamo un'immagine. Specifica i campi e seleziona la miniatura. Tutto è semplice qui e non dovrebbero esserci problemi.
Come possiamo vedere, è necessario conoscere l'ID comunità. È molto facile riconoscerlo. Troviamo il menu nel nostro gruppo (subito sotto l'avatar) e apriamo le "Statistiche della community". In questo caso, qualcosa di simile apparirà nella barra degli indirizzi del browser (i numeri saranno diversi).
Questi numeri dopo "?gid=" sono l'ID del gruppo desiderato. Inseriamo il valore ricevuto nel form dello script e scriviamo il nome della pagina che vogliamo creare. In questo caso, guido in "Menu".
Va notato che la pagina verrà creata solo se la finestra con il gruppo è aperta nella scheda successiva. In poche parole, devi aver effettuato l'accesso a VK nello stesso browser. Dopotutto, solo l'amministratore del gruppo e le persone a loro assegnate hanno accesso a tali manipolazioni. Un passante casuale non potrà prendere e modificare facilmente le impostazioni di un gruppo al pannello di amministrazione di cui non ha accesso.
Se tutto è stato eseguito correttamente, si aprirà la pagina seguente.
Questa è la stessa finestra in cui faremo un markup wiki un po' più tardi e creeremo un menu interno per il nostro gruppo. Per ora ci basta scrivere qualcosa qui. Quindi fare clic sul pulsante blu "Salva pagina" e in alto fare clic sul collegamento Torna alla pagina.
Ho scritto un "Menu" per me stesso e dopo aver salvato la mia pagina ha iniziato ad assomigliare a questo.
Non c'è ancora il design, ma per ora ci serve solo un link a questa pagina. Lo raccogliamo nella barra degli indirizzi del browser e torniamo alla pagina principale del nostro gruppo. Registrare.
Qui creiamo un post con il seguente contenuto: inseriamo lì un'immagine e un collegamento alla pagina del menu per il gruppo.
Premiamo invia. Quindi clicchiamo sull'ora in cui è stato inviato il messaggio e selezioniamo la voce "Pin" tra tutte le opzioni. Aggiorniamo la pagina (il tasto F5 della tastiera) e, se tutto è fatto correttamente, otteniamo il primo risultato: il gruppo ha trovato un avatar e un link per andare alla sezione menu.
Markup wiki per il menu del gruppo Vkontakte
Ora affrontiamo il design del menu stesso. Di nuovo andiamo su Photoshop e creiamo un design per il nostro menu. Quando si progetta l'interfaccia, è necessario ricordare quelle persone che entreranno in VK tramite l'applicazione dai telefoni cellulari. In altre parole, non dovremmo avere piccoli elementi e, inoltre, dovremmo cercare di rendere tutto il più chiaro possibile. In modo che tu non debba indovinare come funziona tutto qui e dove possiamo fare clic ... ma cerca semplicemente l'elemento giusto e studia le informazioni che stai cercando.
Non mi soffermerò ora su come esattamente ho assemblato il menu. Questo è quello che ho fatto.
Campi minimi. Disposizione verticale. Il formato perfetto per un menu reattivo. Cioè, niente andrà da nessuna parte sui telefoni cellulari. Tutto sarà esattamente come sugli schermi di computer e tablet. Prendo la larghezza di 500 px, in modo che in seguito nulla si restringa e non perda due volte la qualità dell'immagine. L'altezza non è importante.
Tagliamo l'immagine in frammenti e li salviamo.
Qualunque cosa. È il momento dell'accordo finale: raccogliamo il menu già nel gruppo stesso.
Per fare ciò, torniamo alla pagina principale del gruppo (dove si trova il feed e la nostra immagine di collegamento che porta al menu). Facciamo clic sull'immagine del menu e arriviamo alla pagina stessa che è stata precedentemente creata per il menu.
Se sei un amministratore o il creatore di un gruppo (nel nostro caso, questo è il caso), nella parte superiore della pagina ci sarà un link "Modifica". Facciamo clic su di esso.
Quindi passiamo alla modalità di markup wiki (sotto il pulsante di chiusura nell'angolo in alto a destra della pagina, una tale cornice è disegnata con<>dentro). Quando la modalità desiderata è attivata, questo pulsante è cerchiato in grigio.
Quindi entriamo nell'icona della fotocamera e aggiungiamo tutti i frammenti del nostro menu in una volta. Nella modalità wiki, non vedremo le immagini stesse, solo il codice di queste immagini con dimensioni e parametri.
Voglio centrare il menu e non avere spazi vuoti tra i frammenti. Pertanto, ciascuno degli elementi è racchiuso in un tag
La prima e l'ultima voce di menu non dovrebbero essere pulsanti: nella mia immagine è solo un elemento grafico senza un collegamento alla pagina interna, quindi aggiungiamo il parametro "nolink". Ciò rimuoverà la possibilità di fare clic su questo elemento per aprire una parte dell'immagine in una finestra separata. Fare clic con il mouse non farà nulla. Questo è il normale sfondo della pagina. Inattivo.
Nel mio caso, il codice del menu è simile a questo.
Separatamente, voglio notare il fatto che dopo aver importato le immagini in VK, il sistema integrato a volte indica in modo errato la dimensione delle immagini. Pertanto, dobbiamo monitorarlo attentamente ed esporre esattamente quelli che abbiamo pianificato in fase di progettazione. Altrimenti, tutto potrebbe andare in pezzi e il puzzle non funzionerà alla fine.
Dopo aver scritto il codice e allineato tutti gli elementi, salviamo la pagina e vediamo la stessa cosa che era in Photoshop.
Il tocco finale rimane: devi creare le stesse pagine in cui il nostro menu invierà le persone. Per fare ciò, ci rivolgiamo nuovamente allo script per la generazione di pagine wiki e questa volta ordiniamo tre pagine contemporaneamente. Allo stesso tempo, è anche necessario scrivere qualcosa su ciascuno e non dimenticare di salvare i loro indirizzi da qualche parte dalla barra degli indirizzi del browser.
Quindi inseriamo i collegamenti a nuove pagine nel codice wiki del menu nella forma page-102302049_51013384, dove il primo numero è l'id del gruppo e il secondo è il numero di pagina. Anche se, in generale, non importa. Dopotutto, dobbiamo solo copiare questo frammento di URL e incollarlo nel markup.
Di conseguenza, il codice del menu assume la forma seguente.
Esternamente, nulla è cambiato. Ma quando facciamo clic sulle voci di menu, possiamo vedere che ora funziona!
Per quanto riguarda il markup stesso e le regole con cui è scritto il codice, ti consiglio di leggere il gruppo Vkontakte appositamente dedicato a questo argomento. I ragazzi hanno descritto tutti i punti chiave e puoi facilmente trovare l'elemento necessario nel loro catalogo e capire come aggiungerlo alla tua pagina wiki.
