Una vCard è un biglietto da visita digitale progettato per essere interpretato dal tuo client di posta o da altri programmi che importano dati di contatto, come Outlook, Thunderbird o Rubrica. Includendo una vCard sul tuo sito web, rendi più facile per i visitatori scaricare le tue informazioni e contattarti facilmente in futuro. Tuttavia, una vCard non ha una componente visiva, quindi la progettazione di una pagina è interamente a tua discrezione. Puoi diventare selvaggio o discreto come vuoi. Se desideri semplicemente un aspetto di base che imiti l'aspetto di un biglietto da visita tradizionale, puoi farlo con un elemento div e un semplice stile CSS.
1
Carica il tuo file vCard sul tuo sito web. Assicurati che la vCard contenga solo dati professionali che sei disposto a distribuire online.
2
Crea l'elemento div che desideri rappresentare il tuo biglietto da visita. Assegnagli un ID univoco, ad esempio "vcard", e inserisci i dettagli che desideri visualizzare sulla carta. Una carta di base potrebbe includere il tuo nome, sito web e indirizzo email. Puoi anche collegarti alla tua pagina Facebook, al tuo account Twitter o ad altri siti di social network. Non dimenticare di includere un collegamento per scaricare la tua vCard. Il div di base potrebbe essere simile a questo:
(555) 555-5555
//www.yourwebsite.com
Scarica vCard
3
Aggiungi l'ID vcard al tuo foglio di stile per modificare la modalità di visualizzazione del div. Se desideri una presentazione della carta relativamente grande, utilizzando uno sfondo bianco e un bordo nero, l'ID potrebbe essere simile a questo:
div # vcard {larghezza: 400 px; altezza: 200 px; trabocco: nascosto; sfondo: #FFFFFF; bordo: 1px solido # 000000; }
"Overflow: nascosto;" impedisce alla scheda di espandersi in larghezza o altezza se il contenuto supera le dimensioni. Puoi anche definire la dimensione e il colore del carattere. Ad esempio, se desideri che tutto utilizzi un carattere Times New Roman grigio scuro al punto 14, il tuo ID sarà simile a:
div#vcard {larghezza: 400px; altezza: 200px; trabocco: nascosto; sfondo: #FFFFFF; bordo: 1px solido # 000000; font-family: 'Times New Roman'; dimensione del carattere: 14pt; colore: # 3B3131; }
4
Rendi il tuo nome più grande e più evidente aggiungendo l'elemento div # vcard h1; questo cambia solo il tag H1 all'interno del tuo div vCard. Se volessi utilizzare un carattere a 22 punti e aggiungere una piccola ombra grigia, il tuo CSS sarebbe simile a questo:
div # vcard h1 {font-size: 22pt; text-shadow: 1px 1px #CCCCCC; }
L'elemento text-shadow è definito dall'offset dell'asse x, dall'offset dell'asse y e dal colore. Se desideri un'ombra leggermente sfocata, aggiungi un terzo valore in pixel per definire la sfocatura, ad es.
text-shadow: 1px 1px 4px #CCCCCC;
5
Aggiungi qualsiasi altro elemento visivo o decorativo che desideri per far risaltare il tuo elemento vCard. Puoi aggiungere immagini, modificare l'altezza della linea e l'allineamento dei paragrafi, modificare i colori: scatenati! Più il tuo design è visivamente accattivante, più risalterà.
6
Testa il tuo link per il download della vCard sul tuo sito web per assicurarti che il link sia accurato.
