Как сделать картинку ссылкой

кликабельная картинка ссылка Привет, начинающие вебмастера. В этой статье информация, как сделать картинку ссылкой, вставить линк в изображение, фото, зачем это делать.

Сделать картинку в wordpress кликабельной, зачем?

В некоторых случаях необходимо прикрепить ссылку к картинке. Люди любят нажимать на изображения, поэтому кликабельная картинка с зашитой партнерской ссылкой будет уместна в теле статьи, анонса. Она сделает информацию наглядной, улучшит юзабилити, принесет переходы на продающий сайт.

Ссылка в виде картинки в сайдбаре (баннер) – это общепринятый способ для перехода на нужный адрес: на другой веб-ресурс (счетчики), на страницу захвата или продающую. Каждый переходил по линкам, спрятанным под кнопкой КУПИТЬ.

Иногда кликабельными изображениями оформляют пункты меню, но это нежелательно, поскольку не удобно поисковым системам.

Разберем несколько вариантов, как сделать изображение ссылкой.

Как в картинку вставить ссылку html

Эти сведения будут полезны при создании продающей или подписной страницы, когда html код вставляют непосредственно в код страницы. Чтобы фото сделать ссылкой, обычно используют такую конструкцию.

<a href="адрес ссылки">
<img src="адрес картинки" alt="Как сделать картинку ссылкой" /></a>


Адрес ссылки – это url страницы, куда переходит пользователь, чаще всего страница подписки или лендинг партнерской программы.

Где взять урл фотки? Она не должна остаться на вашем компьютере. Ее размещают в интернете (в папке с медиафайлами на блоге, в корневой папке, на облачном сервисе, например, на Яндекс Диске). Она должна иметь свой url с https://.

СТАТЬИ ПО ТЕМЕ:

Новый алгоритм яндекса Баден Баден. Как не попасть под фильтр

Как удалить страницы вложения в вордпресс

Ошибки при переезде сайта на протокол https

<a href="адрес ссылки">
<img src=" https://kartinka.jpg " alt="Как сделать картинку ссылкой" /></a>


Если изображение находится в одной папке с файлом index.html, можете написать коротко

<a href="адрес ссылки">
<img src=" kartinka.jpg " alt="Как сделать картинку ссылкой" /></a>


Если хотите, чтобы нужная страничка открывалась в новом окне, html конструкцию усложним. Добавим target="_blank"

<a href="адрес ссылки" target="_blank">
<img src=" kartinka.jpg " alt="Как сделать картинку ссылкой" /></a>


Как видите прикрепить, вставить ссылку в картинку средствами html достаточно просто.

В записи WordPress

Cms имеет встроенный редактор. В картинку вставить ссылку максимально просто.

К примеру, вы написали статью, загрузили изображение в папку с медиафайлами.

как сделать картинку ссылкой

ВСТАВЬТЕ фотку в запись (визуальный режим),

ПРАВОЙ кнопкой мыши выделите ее,

НАЖМИТЕ знак линка в меню WordPress,

УКАЖИТЕ урл в появившемся окне. Это может быть рефссылка, url другой странички вашего блога, страницы захвата,

ПОСТАВЬТЕ галочку ОТКРЫВАТЬ В НОВОМ ОКНЕ.

Не забудьте нажать СОХРАНИТЬ или ОПУБЛИКОВАТЬ, либо ОБНОВИТЬ.

Посмотрите, как выглядит наше изображение в режиме просмотра html. Оно имеет:

  1. атрибут alt (альтернативный текст);
  2. высоту и ширину (height, width можете изменять непосредственно в просмотре html, но разумнее редактировать в папке с медиафайлами);
  3. стиль alignleft (расположение слева).

как в картинку вставить ссылку
Просто прикрепляется, согласны?

В сайдбаре

Чтобы сделать баннер, кликабельную картинку в сайдбаре, загрузите фото одним из двух способов.

В папку с медиафайлами блога Вордпресс. У меня images, У вас может как угодно называться, чаще всего upload.

Тогда конструкция такая.

<p align="center">
<a href=" https://адрес_ссылки" target="_blank">
<img src=" https://ваш_сайт.ru/images/kartinka.jpg"></a></p>

Причем, url картинки ищите в папке с медиафайлами.Как сделать ссылку в виде картинки

В корневую папку сайта public_html (через ftp клиент).

<p align="center">
<a href=" https://адрес_ссылки" target="_blank">
<img src="https://ваш_сайт.ru/kartinka.jpg"></a></p>

Если загружаете в папочку с названием, укажите его.

ЗАЖМИТЕ левой клавишей мыши виджет HTML (в ранних версиях Вордпресс виджет ТЕКСТ) и перетащите его в сайдбар.

ОТКРОЙТЕ виджет, нажав на треугольник справа.

ВСТАВЬТЕ в поле виджета первой или второй html код (зависит от места нахождения изображения).

С помощью средств css можно сделать рамку изображения, поменять фон, закруглить углы.

виджет Текст
как изображение сделать ссылкой
Затем нажмите СОХРАНИТЬ и перейдите на сайт, чтобы проверить результат.

Заключение

Привлекательные баннеры в сайдбаре, кликабельные изображения в теле поста — хороший способ размещения партнерских ссылок. Их также можно использовать в соцсетях. Посмотрите, как сделать фото ссылкой Вконтакте.

Для профессионального использования лучше Фотошоп. Вот самый понятный курс для начинающих.

Понравилась статья? Поделиться с друзьями:
Я новичок
Комментарии: 15
  1. Лидия

    Молодец, Оля! Поздравляю!!!

    1. Ольга (автор)

      Спасибо, Лидия.
      Некоторые могут сказать, что 126 рублей — много шума из ничего.
      Для меня это — повод написать мотивирующий пост.
      Люди, не опускайте руки и не сдавайтесь.
      Жизнь — она полосатая, за черной полосой всегда идет белая.

  2. Владимир

    Поздравляю с первой продажей. Начало положено. Могу себе представить вашу радость :)

    1. Ольга (автор)

      Спасибо, Владимир.
      Первая проданная статья, первая партнерская продажа — сначала наступает эйфория, а потом — трудовые будни.
      Чтобы успех повторить работать надоооо…

  3. Юрий

    Очень рад за Вас, Ольга! Развивайте свой блог и будет больше продаж!
    P.S.: Я тоже кировский блогер :))

    1. Ольга (автор)

      Спасибо, Юрий. Придется поработать.

    2. Ольга (автор)

      Бывшая Вятка, про вятских слышали? Удивительно, как мало людей знают Киров. Между тем, Кировская область по площади больше Франции.

  4. Марина

    у fo.ru отличная партнерка -$0.20 за привлеченного пользователя и % от твоей партнерской сети

  5. Елена Олейникова

    У Саши Борисова хорошая партнерка, он сейчас как раз новый продукт готовит, с одной продажи партнер получит 1200 рублей. Правда, конкурентов будет много :-)

    1. Ольга (автор)

      Абсолютно согласна с Вами, Елена.
      Конкуренция сейчас сильнейшая. Конечно, если есть своя рассылка, продвигать партнерские продукты значительно легче.

  6. Лота

    Одному моему сайту в январе исполнился год, заработала 680 р. за переход с него и оплату тренинга, но пришлось попереписываться т.к. я знала человек начал платное обучение именно с моей подачи, но система не зафиксировала, правда после определенных доказательств оплатили, недавно прислали, на почту, что по другой партнерке, кто то приобрел книгу, сумма небольшая 118.50 руб, но приятно, всем удачи и продвижения!

    1. Ольга (автор)

      Лота, такое бывает, если человек заказал физическую версию курса, и автор отправляет курс по почте.
      Между заказом и оплатой проходит много времени. Человек может и вовсе не оплатить, отказаться.
      При заказе наложенным платежом автор курса партнерское вознаграждение перечисляет ручным способом. А если он не очень честен, то не перечислит.
      При заказе цифровой версии, все проходит через систему, оплата автоматическая.

  7. Kristina

    Мне повезло чуть больше =) Моя первая партнерская продажа принесла мне 900 рублей, и я тоже очень этому была рада =) Вот тут я написала об этом радостном событии http: // 7-sovetov.ru/zarabotok-internete/moi-pervye-shagi-v-storonu-zarabotka-v-internete.html
    Именно после этого я поняла, что я тоже могу зарабатывать на партнерках! Главное приложить усилий! =)

  8. Анатолий

    Спасибо. Много полезной информации в статье. Труд с партнерками очень нелегкий. Но я прошел школу Борисова по блоггерству и остался доволен , так как все изложено на доступном языке.

  9. Сергей

    Ольга, молодец. Похожие мысли приходили в голову, но реализовать не получается технически. Может мозги с возрастом твердеют. Попробовал составить карту в Xmind. Всё так туго: слова и мысли идут, а в графическое перевести не получается.Кнопок совсем не знаю. Попробую в mind42.
    Не останавливайся и делись эмоциями. За тобой пойдут.

Добавить комментарий