Если данный туториал не то, что Вы искали, у Вас все еще остались вопросы или предложения - дайте нам знать. Пожалуйста, помогите нам обслуживать Вас лучше!

Ваше имя

Ваш e-mail

Ваше сообщение (обязательно)

captcha

Новые шаблоны

JS Animated. Как добавить кнопку «pin it»

Из этого туториала Вы узнаете, как добавить кнопку Pin it в Адаптивные шаблоны сайтов.

JS Animated. Как добавить кнопку «pin it»

Если Вы хотите самостоятельно создать кнопку, Вам нужно, во первых, решить, какую кнопку «Pin It» Вы хотите добавить. Есть 3 типа кнопок, из которых Вы можете выбирать:

  • При наведении курсора на изображение: Когда пользователь наводит курсор мыши на изображение, отображается кнопка «Pin It»;

  • Любое изображение: Если пользователь нажимает на кнопку, он может «прикрепить» любое изображение на сайте. Эту кнопку просто создать;

  • Одно изображение: Это кнопка «Pin It» для одного изображения/элемента на вашей странице. Этот вариант требует более обширной работы с кодом.

Давайте узнаем, как создать кнопку третьего типа — Одно изображение (One image):

  1. Перейдите на сайт Мастера создания виджетов.

  2. Выберите Одно изображение (One image) в разделе Тип кнопки (Button type).

  3. Настройте размер, форму и изображение вашей кнопки.

  4. Добавьте ссылки на страницы, на которых есть элемент, для которого Вы хотите создать кнопку «Pin It» (это может быть ваша Домашняя страница или любая другая страница вашего сайта). Вы можете также добавить описание вашего элемента/изображения:

    how to add pin it button.1

  5. Предварительно ознакомьтесь с кнопкой, наведя курсором мышки на изображение-образец. Вы можете также нажать на кнопку «Pin It», для того чтобы проверить, как она работает.

  6. Если Вы довольны кнопкой, скопируйте код в разделе Скопируйте код (Copy the code) и вставьте его в нужный файл (в нашем случае, это файл index.html) рядом с нужным элементом страницы:

    how to add pin it button.2

    how to add pin it button.3

  7. Последним шагом является добавление pinit.js на страницу (только один раз). Добавьте код перед закрывающим тегом /body каждой страницы, где Вы хотите отобразить кнопку на вашем сайте:

    how to add pin it button.4

  8. Сохраните изменения и обновите страницу вашего сайта.

Вы можете также ознакомиться с детальным видео-туториалом ниже:

JS Animated. Как добавить кнопку «pin it»