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

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

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

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

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

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

Как в картинку вставить ссылку 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 можно сделать рамку изображения, поменять фон, закруглить углы.

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

Заключение

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

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

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

    Может это и к лучшему. A то кто его знает сколько там пустышек продвигается в этой ссылочной заводи.

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

      Согласна, хороших сайтов больше станет.

  2. Оптимизация PromoRu.net

    В принципе сильно заметно появление «минусинска», очень многие топы ушли в бан, а те проекты которые продвигались без ссылочного влияния — довольно значительно продвинулись.

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: