So präsentieren Sie eine Vcard auf einer Website

Eine vCard ist eine digitale Visitenkarte, die von Ihrem Mail-Client oder anderen Programmen, die Kontaktdaten importieren, wie Outlook, Thunderbird oder Adressbuch, interpretiert werden kann. Indem Sie eine vCard in Ihre Website aufnehmen, erleichtern Sie es Besuchern, Ihre Informationen herunterzuladen und Sie in Zukunft problemlos zu kontaktieren. Eine vCard hat jedoch keine visuelle Komponente, daher liegt es ganz in Ihrem Ermessen, eine Seite dafür zu gestalten. Sie können so wild oder so dezent gehen, wie Sie möchten. Wenn Sie einfach nur einen grundlegenden Look wünschen, der das Aussehen einer traditionellen Visitenkarte imitiert, können Sie dies mit einem div-Element und einem einfachen CSS-Styling tun.

1

Laden Sie Ihre vCard-Datei auf Ihre Website hoch. Stellen Sie sicher, dass die vCard nur professionelle Daten enthält, die Sie bequem online verteilen können.

2

Erstellen Sie das div-Element, das Sie für Ihre Visitenkarte darstellen möchten. Geben Sie ihm eine eindeutige ID, z. B. "vcard", und geben Sie die Details ein, die auf der Karte angezeigt werden sollen. Eine Basiskarte sollte Ihren Namen, Ihre Website und Ihre E-Mail-Adresse enthalten. Sie können auch auf Ihre Facebook-Seite, Ihr Twitter-Konto oder andere Websites sozialer Netzwerke verlinken. Vergessen Sie nicht, einen Link zum Herunterladen Ihrer vCard anzugeben. Das grundlegende div könnte ungefähr so ​​aussehen:

[email protected]

(555) 555-5555

//www.yourwebsite.com

Laden Sie die vCard herunter

3

Fügen Sie die vcard-ID zu Ihrem Stylesheet hinzu, um die Darstellung des div zu ändern. Wenn Sie eine relativ große Kartenpräsentation mit weißem Hintergrund und schwarzem Rand wünschen, könnte die ID folgendermaßen aussehen:

div # vcard {width: 400px; Höhe: 200px; Überlauf versteckt; Hintergrund: #FFFFFF; Rand: 1px durchgehend # 000000; }

"Überlauf versteckt;" Verhindert, dass sich die Breite oder Höhe der Karte vergrößert, wenn der Inhalt die Größe überschreitet. Sie können auch die Schriftgröße und -farbe festlegen. Wenn Sie beispielsweise möchten, dass an 14 Stellen alles eine dunkelgraue Times New Roman-Schriftart verwendet, sieht Ihre ID folgendermaßen aus:

div # vcard {width: 400px; Höhe: 200px; Überlauf versteckt; Hintergrund: #FFFFFF; Rand: 1px durchgehend # 000000; Schriftfamilie: 'Times New Roman'; Schriftgröße: 14pt; Farbe: #3B3131; }

4

Machen Sie Ihren Namen größer und markanter, indem Sie das Element div # vcard h1 hinzufügen. Dadurch wird nur das H1-Tag in Ihrer vCard div geändert. Wenn Sie eine 22-Punkt-Schriftart verwenden und einen kleinen grauen Schatten hinzufügen möchten, sieht Ihr CSS folgendermaßen aus:

div#vcard h1 { Schriftgröße: 22pt; Textschatten: 1px 1px #CCCCCC; }

Das Textschattenelement wird durch den x-Achsen-Offset, den y-Achsen-Offset und die Farbe definiert. Wenn Sie einen leicht unscharfen Schatten wünschen, fügen Sie einen dritten Wert in Pixel hinzu, um die Unschärfe zu definieren, z.

Textschatten: 1px 1px 4px #CCCCCC;

5

Fügen Sie weitere visuelle oder dekorative Elemente hinzu, um Ihr vCard-Element hervorzuheben. Sie können Bilder hinzufügen, die Zeilenhöhe und Ausrichtung Ihrer Absätze ändern, Farben ändern - wild werden! Je ansprechender Ihr Design ist, desto mehr fällt es auf.

6

Testen Sie Ihren vCard-Downloadlink auf Ihrer Website, um sicherzustellen, dass der Link korrekt ist.

kürzliche Posts