Eine Online-Visitenkarte kann dann interessant werden, wenn noch keine Homepage existiert oder für sehr kleine Firmen oder Freelancer als Homepage-Ersatz. Die wichtigsten Informationen sind enthalten und wie bei Visitenkarte üblich, steht hier die Person im Vordergrund. Um meine Gratis-Online-Visitenkarte an die eigenen Bedürfnisse anzupassen, muss eine txt-Datei bearbeitet werden. OK, Bilder gibt es auch noch, dazu gleich mehr.

Ein Selfie als Porträtbild verwenden:

Fotos sind das A und O jeder Website, sei sie auch noch so klein. Was man als erstes braucht, ist ein vernüftiges Foto, wozu sich das Smartphone perfekt eignet. Wie man das macht, weiß inzwischen jedes Kind, jedoch wird das Foto quadratisch benötigt, was wiederum die Smartphone-Kamera von Haus aus kann. Neben den Einstellungen Video, Photo, Pano, etc. gibt es auch jene für Quadrat, die brauchen wir. Die erste Hürde wäre damit genommen, die zweite ist dann, das Bild auf 250x250 Pixel zu verkleinern, 72dpi hat es schon. Das ist mit den richtigen Apps auf dem Handy oder Computer keine Hexerei, am besten ist natürlich man hat eine Bildbearbeitung am PC, dann ist das schnell erledigt. Für das Logo gilt dasselbe, nur ist hier die Größe 120x70px. Wenn kein Logo gebraucht wird, z.B. für private Visitenkarten, nimmt man das „empty-logo.svg“ und benennt es um auf „logo-120x70px.svg“.

Das Porträtbild kommt in den images-Ordner als „portrait.jpg“ Das Logo kommt in den logo-Ordner als „logo-120x70.svg“

Soviel zum schwierigsten Teil, um die Online-Visitenkarte zu personalisieren.


Image

Download:

Beispiel ansehen Du kannst alles selbst ändern

Download der Online-Visitenkarte


Was kann ich alles ändern?

  • Sämtliche Texte
  • Porträtbild
  • Logo (kann auch weggelassen werden)
  • Hintergrundbild (Alternative Bilder zur Auswahl)
  • Social Media Icons/Links (max. drei Icons, aber auch weniger)

Wichtig: Lokal auf dem Computer werden weder Texte noch Icons geladen. Für die Online-Visitenkarte wird ein einfacher Webserver benötigt, php oder MySQL-Datenbank sind nicht erforderlich.

Personalisierte Texte in „load.txt“ einarbeiten:

Eigentlich kann man diesen Bereich vergessen, da Texte zu bearbeiten keine große Sache ist. Es wird jedoch eine einfache Textverarbeitung wie Notepad (für Windows) oder TextEdit (für Mac) benötigt, um unformatierte txt-Dateien auszugeben. TextEdit ist am Mac standardmäßig vorhanden, wie das bei Windows ausschaut, entzieht sich meiner Kenntnis.

Ein geeignetes Programm vorausgesetzt, kann sofort begonnen werden, die eigenen Texte einzuarbeiten. Dazu wird die Datei „load.txt“ geöffnet und wie im Beispiel ersichtlich, nur die rot eingefärbten Textteile überschrieben. Was man wo reinschreibt, ist völlig egal, aber mehr Zeilen sind leider nicht möglich.

Image

Es müssen nicht die maximal drei verfügbaren Links/Icons verwendet werden, es können auch nur zwei sein, oder eines. Um die Ausrichtung der Icons und das Erscheinungsbild der Online-Visitenkarte zu erhalten, …

  • verwendet bei zwei Icons die <a id=”p8“ … </a> und die <a id=„p9“ … </a>, das oberste <a id=”p7“ … </a> wird in diesem Fall gelöscht. Beim löschen den gesamten Code markieren bis inklusive </a>.

Wer nur ein Icon benötigt, …

  • löscht die beiden oberen p7 und p8 und trägt den vollständigen Link auf die Online-Community lediglich in p9 ein.

Das liest sich etwas kompliziert, aber wer sich die Online-Visitenkarte (die zweite Seite) ansieht, weiß was gemeint ist. Es sieht einfach besser aus, wenn die Icons rechtsbündig dargestellt werden.

Die verfügbaren Social Media Icons (dribbble, facebook, instagram, linkedin, pinterest, twitter, vimeo, youtube) sind unter images/social-media-icons bereits vorhanden. Um diese zu verwenden, trägt man den Icon-Namen in die „load.txt“ an betreffender Stelle <img src=”images/social-media-icons/instagram.svg“ … ein. Es muss nicht alles getippt werden was schon vorhanden ist, nur instagram.svg z.B. durch youtube.svg ersetzen. Nicht vergessen den Link auf deine youtube-Seite korrekt eintragen. Sichern und auf den Server laden!