Categories

Ausgewählte Vorlagen

JS Animated. Wie man “pin it” Button einfügt

Celine Jade März 24, 2016
Rating: 5.0/5. From 2 votes.
Please wait...

Dieses Tutorial zeigt, wie man Pin it Button in Responsive Website Templates einfügt.

JS Animated. Wie man “pin it” Button einfügt

Wenn 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:

  1. Gehen Sie hierher: widget builder.

  2. Wählen Sie One image im Button type Bereich.

  3. Passen Sie die Größe, die Form oder das Bild für Ihren Button an.

  4. 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:

    how to add pin it button.1
  5. 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.

  6. 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:

    how to add pin it button.2 how to add pin it button.3
  7. 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:

    how to add pin it button.4
  8. 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
Dieser Eintrag wurde um JS Animated Tutorials geschrieben und button, HTML, pin it markiert. Bookmarken Sie den permalink.

Submit a ticket

Sollte Ihre Frage durch die Tutorials nicht ausreichend beantwortet worden sein, benutzen Sie bitte den folgenden Link, um sich an unser Beratungsteam (Support) zu wenden. Wir bieten Ihnen unsere Hilfe und Unterstutzung an. 24 Stunden am Tag, 7 Tage die Woche!
Ticket Einrichten