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

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

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

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

Заключение

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

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

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

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

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

      Спасибо, Вячеслав. Похвала специалиста многого стоит.
      Про генераторы и плагины, естественно, знаю.
      Но для новичков это трудно. Свою первую подписную страницу пусть создают вручную. Это надо отработать до автоматизма, понять, где какой элемент находится.
      Потом поменять подписную страничку на другую не сложно.

  2. Galina

    Простите пожалуйста. Может мой вопрос покажется тупым, но честно признаюсь, я чайник. Так вот вопрос: Каким будет адрес у этой страницы захвата?

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

      Галина, адрес будет такой http: // ваш сайт/название страницы на латинице.
      То есть Вы можете назвать ее как захотите (у себя на компьютере), затем переместить ее в корневую папку сайта, в название желательно включить ключевые слова.

  3. Galina

    Ольга, спасибо Вам и простите за мои глупые вопросы. Но у меня ещё один. Вы говорите, что название страницы может быть любым. Но я сохраняю файл под именем index.html А куда название вставить?

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

      Галина, вопрос нормальный.
      Все эти файлы: index.html, style.css и т.д. Вы упаковываете в zip архив. Его называете, как Вам надо. И уже название этого архива будет отображаться в адресе страницы.
      Наличие ключевого слова в адресе страницы поможет при продвижении — страничка будет выше в поиске.

  4. Galina

    Спасибо большое, Ольга! Вы со мной, как с малым ребенком. Кажется теперь до меня дошло.

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

      Пожалуйста, обращайтесь.
      Готовлю к публикации статью, как сделать страницу захвата без знания html, просто установив на блог плагин (платный или бесплатный).
      Следите за обновлениями.

  5. normalstarson

    Хочу стать в интернете популярным, это можно сделать без дополнительных расходов? Встречаю разных видеоблогеров, захотел тоже попробовать размещать свои видео в интернете/

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

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

      Есть много бесплатных эл. книг, а также видеокурсов, как раскрутиться через Ютуб.

  6. serezha1

    А я купил продающую графику и теперь с легкостью делаю сайт воронку любой сложности.

  7. Александр

    Ольга, спасибо!
    Пока прочел только отзывы
    Вы очень ясно и просто все объясняете.
    Такого почти нет, больше воды и слюней.

    С уважением, Александр

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

      Люблю все «раскладывать по полочкам».

  8. Рафаил

    Здравствуйте Ольга , подскажите пожалуйста ,а нельзя ли чей либо сайт воронку скопировать и перенести на свой создаваемый подкорректировать под себя , что то удалить, что то добавить по минимуму , в общем на примитиве — спасибо.

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

      Рафаил, если сайт-воронка сделан на html- можно. Правая клавиша мыши=>исходный код страницы=>копируйте.

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

  9. Анастасия

    Понятная у вас информация и для профессионалов, и для новичков. Откуда такие познания? Особенно в области сайта-воронки? Но не хватило информации о том, как от них уберегаться, а так же о движке для простого сайта.

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

      Что значит уберегаться? Хотите подпишитесь, не хотите — не подписывайтесь.

  10. Алиса

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

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

      Алиса, у меня таких курсов нет. В сервисе Джастклик это можно организовать. Глопарт работает совместно со Смартреспондер (почтовые адреса покупателей нужно переносить в Смарт).
      В любом случае бесплатность надо закачать на Яндекс.Диск, к примеру. А затем в выбранном сервисе настроить автоматическую серию писем, в первом из которых давать ссылку на подарок.

  11. Алина

    Нашла на одном сайте статью ifish2.ru/kak-sdelat-stranitsu-sajta/, в которой ребята описывают, как сделать страницу для своего сайта. Там довольно четко и по делу все основные шаги, понимаешь хоть с чего начать и куда двигаться, особенно, если не умеешь программировать)

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

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