Une vCard est une carte de visite numérique conçue pour être interprétée par votre client de messagerie ou d'autres programmes qui importent des données de contact, comme Outlook, Thunderbird ou le carnet d'adresses. En incluant une vCard sur votre site Web, vous permettez aux visiteurs de télécharger facilement vos informations et de vous contacter facilement à l'avenir. Cependant, une vCard n'a pas de composant visuel, donc la conception d'une page pour elle est entièrement à votre discrétion. Vous pouvez devenir aussi sauvage ou sobre que vous le souhaitez. Si vous voulez simplement un look de base qui imite le look d'une carte de visite traditionnelle, vous pouvez le faire avec un élément div et un style CSS simple.
1
Téléchargez votre fichier vCard sur votre site Web. Assurez-vous que la vCard ne contient que des données professionnelles que vous êtes à l'aise de distribuer en ligne.
2
Créez l'élément div que vous souhaitez représenter votre carte de visite. Donnez-lui un identifiant unique, tel que «vcard», et remplissez les détails que vous souhaitez afficher sur la carte. Une carte de base pourrait inclure votre nom, votre site Web et votre adresse e-mail. Vous pouvez également créer un lien vers votre page Facebook, votre compte Twitter ou d'autres sites de réseautage social. N'oubliez pas d'inclure un lien pour télécharger votre vCard. La div de base pourrait ressembler à ceci:
(555) 555-5555
//www.yourwebsite.com
Télécharger la vCard
3
Ajoutez l'ID vcard à votre feuille de style pour modifier l'apparence du div. Si vous voulez une présentation de carte relativement grande, utilisant un fond blanc et une bordure noire, l'ID pourrait ressembler à ceci:
div # vcard {largeur: 400px; hauteur : 200px ; débordement caché; arrière-plan : #FFFFFF ; bordure : 1px solide #000000 ; }
"Débordement caché;" empêche la carte de s'étendre en largeur ou en hauteur si le contenu dépasse la taille. Vous pouvez également définir la taille et la couleur de la police. Par exemple, si vous vouliez que tout utilise une police Times New Roman gris foncé à 14 points, votre identifiant ressemblerait alors à:
div # vcard {largeur: 400px; hauteur : 200px ; débordement caché; arrière-plan: #FFFFFF; bordure: 1px solide # 000000; font-family : 'Times New Roman' ; taille de la police: 14pt; couleur: # 3B3131; }
4
Rendez votre nom plus grand et plus visible en ajoutant l'élément div # vcard h1; cela ne modifie que la balise H1 dans votre div vCard. Si vous vouliez utiliser une police de 22 points et ajouter une petite ombre grise, votre CSS ressemblerait à ceci:
div#vcard h1 { taille de police : 22 pt ; ombre de texte: 1px 1px #CCCCCC; }
L'élément text-shadow est défini par le décalage de l'axe x, le décalage de l'axe y et la couleur. Si vous voulez une ombre légèrement floue, vous ajouteriez une troisième valeur en pixels pour définir le flou, par ex.
ombre de texte: 1px 1px 4px #CCCCCC;
5
Ajoutez tout autre élément visuel ou décoratif que vous souhaitez faire ressortir votre élément vCard. Vous pouvez ajouter des images, changer la hauteur de ligne et l'alignement de vos paragraphes, modifier les couleurs - devenez sauvage! Plus votre design est visuellement attrayant, plus il se démarquera.
6
Testez votre lien de téléchargement vCard sur votre site Web pour vous assurer que le lien est exact.
