- Web Templates
- E-commerce Templates
- CMS und Blog Templates
- Facebook Templates
- Website-Builder
JS Animated. Wie man “pin it” Button einfügt
März 24, 2016
Dieses Tutorial zeigt, wie man Pin it Button in Responsive Website Templates einfügt.
JS Animated. Wie man “pin it” Button einfügtWenn Sie den Button selbst erstellen möchten, sollen Sie sich entscheiden, welche Art des Pin It Buttons Sie hinzufügen wollen. Es gibt 3 Arten, die Sie auswählen können:
Image hover: Wenn jemand über jenes Bild auf der Startseite mit dem Mauscursor schwebt, erscheint der Pin It Button;
Any image: Wenn jemand den Button anklickt, kann er/sie ein Bild zur Seite hinzufügen (pinnen). Dies zu erledigen ist ja einfach;
One image: Das ist der Pin It Button für ein einziges Bild/Element auf Ihrer Seite und das benötigt technischen Coding.
Lernen wir mal, wie man die letzte Art – One image erstellt:
Gehen Sie hierher: widget builder.
Wählen Sie One image im Button type Bereich.
Passen Sie die Größe, die Form oder das Bild für Ihren Button an.
Fügen Sie die URL der Webseiten ein, die das Element haben, für welches Sie den Pin It Button erstellen möchten (dies kann Ihre Startseite oder jene andere Seite sein). Sie können auch eine Beschreibung für Ihr Element/Bild einfügen:
Schauen Sie bitte den Button durch das Schweben über das Bild vor. Sie können den Button auch anklicken, um zu sehen, wie dieser funktioniert.
Wenn Sie mit dem Button zufrieden sind, kopieren Sie den Code unter dem Copy the code Bereich und fügen Sie diesen in der Datei (in userem Fall ist die Datei index.html) bei dem gewünschten Element der Seite ein:
Der letzte Schritt ist es, pinit.js einmal (und nur einmal) per Seite hinzuzufügen. Fügen Sie den Code gerade über dem schließenden /body Tag der jeden Seite, wo Sie den Button anzeigen möchten:
Speichern Sie die Änderungen und sehen Sie die Webseite an.
Sie können sich das Video-Tutorial darüber hier anschauen:
JS Animated. Wie man “pin it” Button einfügt