Как сделать ссылку на Ватсап в Тильде (Обучение на Тильда)
В этом видео ставим ссылку на Ватсап в Тильде. Чтобы с сайты была возможность написать прямо в WhatsApp, нужно сделать настройку специальной кнопки или установить ссылку на текст или номер телефона. Как сделать ссылку на WhatsApp в Тильда смотрите в этом видео! Полный курс по созданию Landing page — https://korzhoff.ru/full-course-tilda Ссылка для регистрации на конструкторе Tilda — https://tilda.cc/?r=1472289 Ссылка для регистрации домена — https://www.reg.ru/?rlink=reflink-5197099 Как сделать интернет-магазин на Тильда — https://youtu.be/mv7qo5g4MQk Обучение на Tilda — видео урок 1. Как сделать лендинг из стандартных блоков — https://www.youtube.com/watch?v=ybgrYNlf558&feature=youtu.be Обучение на Tilda — видео урок 2. Лендинг в Zero Block на Tilda — https://www.youtube.com/watch?v=_0zKgQMJmBg&feature=youtu.be Подписывайтесь на канал — https://www.youtube.com/c/ДаниилКоржов Поддержать проект можете тут: Яндекс Деньги — 410017722787981 Карта Тинькофф — 4377 7237 4300 8850 (Получатель Коржов Даниил Сергеевич) Как изменить размер шрифта цены на Tilda: https://www.youtube.com/watch?v=oda3MNvsXUc&t=7s Как сделать мобильное меню гамбургер на Tilda: https://www.youtube.com/watch?v=rd_ellgLHCE&t=4s Как сделать баннер для мобильной версии Tilda: https://www.youtube.com/watch?v=083GYiLWlwU&t=27s Как изменить цвет значка Tilda: https://www.youtube.com/watch?v=eisiAJrjVmI Как на Tilda сделать ссылку: https://www.youtube.com/watch?v=QrET6-a6SQM&t=12s Как добавить виджет ВК на сайт на Tilda: https://www.youtube.com/watch?v=nukgXjWLFiQ Как добавить обновляемый deadline на Tilda: https://www.youtube.com/watch?v=n_en_tJFjc4&t=34s Как зафиксировать меню в Tilda: https://www.youtube.com/watch?v=qmUEv-DSikk&t=1s Как открыть библиотеку блоков на Tilda: https://www.youtube.com/watch?v=FSiSD2mFGkM Как редактировать CSS на Tilda: https://www.youtube.com/watch?v=STpBSDiTIxI&t=5s Как подключить домен к сайту на Tilda: https://www.youtube.com/watch?v=SX5PIWlV6gs&t=1s Как вставить видео на Tilda: https://www.youtube.com/watch?v=RNbtdKi00oc Как скачать сайт на Tilda: https://www.youtube.com/watch?v=94nmFWhwGEI Как сделать pop-up на Tilda: https://www.youtube.com/watch?v=jM81eKE1ADc Как скопировать блок на другую страницу на Tilda: https://www.youtube.com/watch?v=yUHqXNBRhy4 Как удалить сайт на Tilda: https://www.youtube.com/watch?v=OFueoMSatV0 Как убрать значок Tilda (made on Tilda): https://www.youtube.com/watch?v=lgOwoJbebSI Как скопировать страницу на Tilda: https://www.youtube.com/watch?v=thVmwWIWeR8 Как сделать телефон кликабельным на Tilda: https://www.youtube.com/watch?v=bVFXgYkCIlE Как сделать политику конфиденциальности на Tilda: https://www.youtube.com/watch?v=aVgo0bx2iyM Как подключить яндекс карту на Tilda: https://www.youtube.com/watch?v=dc95qAdhc_U Как подключить https на Tilda (ssl сертификат): https://www.youtube.com/watch?v=8a0KT57Zd7M Как сделать градиент кнопки на Tilda: https://www.youtube.com/watch?v=SGUSzKEpKT4 Как сделать меню в zero block на Tilda: https://www.youtube.com/watch?v=GyDzKH6lgIA Как меня найти: VK — https://vk.com/dankorzh Facebook — https://www.facebook.com/dan.korzh Instagram — https://www.instagram.com/korzhov_daniil/
Показать больше
Войдите , чтобы оставлять комментарии
Как добавить ссылки на свои соцсети и мессенджеры WhatsApp, Viber. [Пошаговая инструкция Тильда]
Инструкция\обучение — Рассказываю на пальцах как добавить в Тильда ссылки на популярные соцсети и мессенджеры по клику. Неважно что это, иконка, текст или картинка. Ссылки из видео: — Вставка WhatsApp: https://wa.me/79999999999 — Вставка Viber: viber://chat?number=+79999999999 — Вставка Telegram: https://t.me/username (username — вписываете свой ник\профиль) — Вставка ВКонтакте: https://vk.com/username — ссылка на личный профиль или группу https://vk.me/username — ссылка на чат с вами (username нужно изменить на ваш логин) — Вставка Skype: skype:username?chat (username нужно изменить на ваш логин) — Вставка Twitter: https://twitter.com/username (username нужно изменить на ваш логин) — Вставка Facebook: https://www.messenger.com/t/username (username нужно изменить на ваш логин) — Вставка Instagram: https://www.instagram.com/username (username нужно изменить на ваш логин) *Признаны экстремистскими организациями и запрещены на территории РФ ________ Меня зовут Роман, я дизайнер на Тильда\Tilda, с 2019 года участвовал во многих проектах и получил большое количество опыта которым сейчас с вами и делюсь Что важно за 4 года появился серьезный опыт в маркетинге который я использую при создании своих сайтов на Тильда и повышаю заработок моих клиентов после чего многие остаются довольны и мы продолжаем работу. ✨ Ближайшие ролики совсем скоро;) Подписывайся. Оставь комментарий — если помогло. Теги: Как добавить ссылки на соц сети и мессенджеры,как настроить переход на соцсети,Как сделать все социальные сети в тильда,добавить кликабельные ссылки,как поделится ссылками Vk instagram facebook whatsapp viber skype,как добавить вк тильда,как добавить мессенджеры в тильду,ссылки на мессенджеры на сайте,кнопки для сайта,Как сделать ссылку на,как установить,Создание ссылок,как разместить на сайте тильда,Как встроить ссылки,как сделать ссылки,активная ссылка,поделится
Показать больше
Войдите , чтобы оставлять комментарии
Как сделать кликабельный номер телефона в конструкторе Tilda?
17.12.2020
Сложность: новичок
8 мин.
6 138
Сегодня мы расскажем и покажем, как сделать кликабельными телефоны, ссылки на Instagram*, Facebook* и другие соцсети в блочном конструкторе Тильда.
Для чего же это нужно? Конечно, для нашего с вами удобства! Согласитесь, намного удобнее и приятнее переходить по ссылкам в один клик, а не вбивать их заново в строку браузера, нажимая на номер телефона сразу звонить, а не запоминать номер телефона и набирать его вручную.
Ваши контакты на сайте – это очень важный элемент, чем больше возможностей с вами связаться, тем лучше. Потенциальный клиент, зашедший на сайт, должен иметь возможность связаться с вами удобным для него способом. Кому-то удобнее использовать для связи номер телефона, кто-то хочет воспользоваться мессенджером (Viber, WhatsApp, Telegram, Zalo, Wechat и т.д.), ну а кому-то удобнее использовать e-mail и написать в социальные сети, например, в Facebook*, Instagram*, VK и другие. На этапе проектирования сайте важная задача – сделать связь с менеджером максимально удобной для наших клиентов.
Как правило, номер телефона и прочие контакты расположены в хедере сайта и в футере, то есть в самом начале страницы и в конце, после смысловых блоков.
Рис. 1. Контакты в шапке, или хедере, сайта.
Рис. 2. Контакты в подвале, или футере, сайта.
Итак, начнем с номера телефона. Чтобы сделать номер кликабельным, необходимо перейти в поле «Контент», в выпадающем меню выбрать пункт «дополнительно» и нажав на кнопку, как указано на Рис. 3 ниже, добавить ссылку: tel:+номер телефона (без пробелов), после чего нажать «применить». После этого номер телефона должен стать красного цвета, это значит, что ссылка прикрепилась, далее жмем «сохранить и закрыть».
Рис. 3. Ссылка на номер телефона.
Далее делаем кликабельными социальные сети, тут все проще. В том же меню, где мы добавляли ссылку на номер телефона, выбираем пункт «ссылки на соц. сети», где заполняем поля интересующих нас социальных сетей прямыми ссылками на ваши страницы, например в поле « FACEBOOK PAGE LINK» вставляем ссылку на вашу страницу https://www.facebook.com/ ваш аккаунт. Если вы хотите добавить свой Telegram, тогда ссылку необходимо ставить следующим образом:
- для мобильной версии: tg://resolve?domain=LOGIN,
- для ПК (ссылка откроется в браузере): https://telegram.me/LOGIN .
LOGIN=это ваше имя в Telegrame, которое можно посмотреть в настройках.
Почтовый ящик (e-mail) становится кликабельным ровно по тому же принципу, что и номер телефон, путем прикрепления ссылки, смотрите инструкцию ниже, на рисунке 4. После совершения этого действия вам можно будет написать в один клик, что очень удобно для клиентов.
Рис. 4. Ссылка на e-mail.
Делаем кликабельным номер телефона, Whatsapp, Telegram и E-mail
Скорость и простота коммуникации — то, к чему современные потребители уже привыкли. В эру высокоскоростного мобильного интернета люди хотят решать свои задачи через смартфон, делая минимум лишних движений. Клик сюда, клик туда и готово!
Поэтому важно сделать так, чтобы взаимодействие с сайтом было максимально простым. Например, чтобы позвонить в компанию достаточно было кликнуть по телефону в шапке.
Разберемся, как проработать такую маленькую, но очень важную деталь сайта, как кликабельные кнопки связи (телефон, почта, мессенджеры).
Номер телефона
Чтобы при клике на номер телефона начинался звонок нужно сделать следующие шаги.
HTML-код сайта
Некликабельный номер телефона (просто текст) может выглядеть в коде по-разному, например, так:
8-123-456-78-90
+7 (900) 101-56-78
Чтобы сделать обычный текст кликабельным нужно сделать из него гиперссылку и указать действие, которое будет совершено по клику (в нашем случае набор номера).
Для создания любых ссылок используется тег …. Между тегами располагается текст ссылки или картинка (например, иконка трубки). Атрибут href=“” указывает адрес ссылки или действие. Для набора номера используется параметр: tel:+7XXXXXXXXXX, где +7XXXXXXXXXX — нужный номер телефона.
Если доработать предыдущие примеры, то получится следующий код:
Теперь при нажатии на номер телефона будет совершаться набор указанного в ссылке номера. Именно тот, который указан в ссылке, а не в тексте, поэтому будьте внимательны! Проверяйте получившийся код в работе.
Зная, как устроен HTML-код вы легко сможете реализовать на любом движке или конструкторе.
В WordPress
Метод создания кликабельной ссылки на движке WordPress аналогичен пункту «HTML-код сайта» данной статьи. Главная задача в том, чтобы найти нужный фрагмент кода в админ-панели.
Шапка сайта
- Если телефон находится в шапке сайта, то заходим в административной панели: «Внешний вид» -> «Редактор».
- Справа, в Файлах темы находим «header.php», нажимаем на него.
- В коде находим телефон. Для быстрого поиска кликнете левой кнопкой мыши на поле с кодом и нажмите комбинацию на клавиатуре: “Ctrl” + “F”. Затем введите несколько цифр телефона и нажмите “Enter”. Нужный фрагменты станут выделены желтым цветом.
- Теперь остается обернуть простой текст в гиперссылку. Как это сделать смотрите в предыдущем пункте статьи.В данному случае получается по итогу так:
- Нажимаем “Обновить файл” и изменения сохраняются. Проверяем работоспособность на сайте. Готово!
Записи/страница
- Если телефон находится в записи, то переходим в редактор записи/страницы.
- Переходим в редактор кода, нажав на вкладку “Текст”:
- Выделяем номер и нажимаем кнопку “link”. В поле “URL” добавляем гиперссылку для номера:
- Получается так:
- Нажимаем “Обновить” и страница сохраняется. Готово!
В Tilda
Zero-блок
- Переходим к редактированию блока, нажав на кнопку “Редактировать блок” в конструкторе нужной страницы:
- Выделяем телефон и нажимаем кнопку “Setting”:
- В поле Link в настройках вводим ссылку: “tel:+ номер телефона с +7”
- Сохраняем изменения в блоке и публикуем страницу.
Стандартный блок
- Нажимаем “Контент”:
- Находим нужный блок, выделяем телефон и нажимаем иконку “Ссылка”:
- Выбираем пункт: “Вставить ссылку”:
- В поле “URL” вводим “tel:+ номер телефона с +7” и нажимаем кнопку “Вставить”:
- Сохраняем изменения в блоке и публикуем страницу.
Активная ссылка на WhatsApp
Принцип точно такой же, как и с телефоном (смотрите предыдущий пункт данной статьи), отличие только в самой ссылке. Она будет выглядеть следующим образом:
Для размещения кликабельного текста на сайте подойдут все инструкции, как для телефонного номера.
Кликабельная иконка для сайта
Но обычно кликабельным делается не номер телефона, а специальная иконка WhatsApp. Для этого:
- Находим иконку, которую будем использовать. Для этого подойдет, например, сервис Flaticon.com.
- Выбираем подходящее по стилистике изображение. Кликаем на него, выбираем формат SVG.
- Дальше будет показан алгоритм действия, если сайт на Тильде. Если сайт на другой CMS, то нужно будет загрузить файл на хостинг и добавить небольшой HTML и CSS-коды на сайт, чтобы разместить иконку, например, в шапке. Для этого понадобятся минимальные знания верстки, либо помощь верстальщика.
- На Тильде переходим в редактирование Zero блока.
- Выбираем пункт добавить изображение и загружаем иконку.
- Масштабируем ее и размещаем в нужном месте блока.
- Добавляем в поле Link ссылку https://wa.me/номертелефона
- Сохраняем изменения в блоке и публикуем страниц сайта. Готово! Кнопка Whatsapp теперь кликабельная и сразу перенаправляет пользователя на диалог в мессенджере.
Ссылка на Telegram
С Телеграм тот же алгоритм действий, что и Whatsapp (смотрите предыдущий пункт данной статьи), но основное отличие в том, что в РФ, например стандартные ссылки в формате https://t.me/seoforge не работают. Поэтому необходимо использовать редирект через такие сервисы, как tele.gg, telegram.im и другие. Сервисы полностью бесплатны и существует большой список таких сервисов без сторонней рекламы, используйте именно их.
Ссылка будет выглядеть следующим образом.
На канал @seoforge в Телеграм: telegram.im/seoforge
На пользователя @webengineer в Телеграм: