Делаем красивый таплинк
По сути на базе таплинка можно сделать полноценный веб-сайт с эффектами наведения, анимациями и т.д. Однако я частенько вижу таплинки, где вместо кнопочек или даже заголовков вставляют просто кликабельную картинку с нарисованным заголовком и кнопкой. Сие больно видеть, а также загрузка веб-страницы, сделанной картинками, будет проходить всегда дольше чем веб-страницы, которую сделали со знанием дела; поэтому я выкладываю код для создания своих крутых таплинков, который вы сможете практически просто копировать-вставить.
Инициируем нужные библиотеки
В настройках в графу «вставка кода» вставляем. Этот код нужен не для всех примеров из статьи, только для тех, где вы в коде видите значок доллара » quot;.
Гамбургер
Код гамбургера можете просто копировать и вставить себе с комментариями (они не мешают работе кода). Код я взял отсюда https://taplink.cc/max_taplink, добавив туда свой скрипт для закрытия меню при нажатии на любой пункт (изначальный вариант кода не работает адекватно с ссылками на текущую страницу. Впрочем, что-то мне подсказывает, что и он сам не автор этого меню).
В таплинке жмите «добавить блок», выбирайте «html-код», и вставляйте всю эту бурду, имеющую серый фон (это сам код, собственно):
Прочитайте код, там будут комментарии, что вы можете и должны в нем менять.
Делаем всплывающее окошко
Просто жмем «добавить блок» и «вставить html». Вместо «подробнее» пишем свой текст, по нажатию которого будет открываться всплывающее окно. Вместо «Онлайн-школы» пишем свой заголовок всплывающего окна. Вместо » https://taplink.cc/onthewaytothesun# » пишем свой адрес таплинка с решеткой в конце. Вместо «техническая реализация» пишите свое описание. Во всплывающее окно можно вставить не только текст, но и видео, формы с геткурса и т.д. Если это интересно, напишите мне в тг t.me/onthewaytothesun
Для последующих всплывающих окон вставляйте другой код, заменяя текст как в первом случае. Для третьего, четвертого и других окон меняйте циферку «2» отсюда на порядковый номер окошка
Делаем крутой кастомный блок «связаться» вместо стандартной кнопки
Жмем «добавить HTML-блок», добавляем контент кнопки
По умолчанию видно 4 иконки в ряд. Вы можете использовать свои ссылки и иконки с сайта https://icons8.ru/ (тут они бесплатные). Предыдущий вариант этого кода я убрал, т.к. он устарел согласно веб-стандартам.
Теперь вставим стили. Жмем «добавить HTML-блок» и вставляем
*,*:before,*:after < box-sizing: border-box; >.svyazatsya < border-radius: 20px; height: 100px; text-align: center; font-family: 'Open Sans', sans-serif; position: relative; >.share-button < border: 1px solid #0092DB; position: absolute; height: 36px; top: 50%; margin-top: -17px; width: 135px; left: 50%; margin-left: -65px; background: #0092DB; border-radius: 20px; overflow: hidden; line-height: 36px; user-select: none; >/*----- FIX overflow + transform + border-radius ---*/ .share-button:before < position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; box-sizing: content-box; transform: translate(0,0); border-radius: 50px; z-index: 3; pointer-events: none; >.lid < font-size: 20px; position: absolute; top: 0; left: 0; width: 100%; height:100%; background: #fff; border-radius: 20px; color: #0092DB; transition: 300ms ease all; transform-origin: 0 0; cursor: default; z-index: 4; >.open .lid < transform: rotateX(90deg); >.thank-you < position:absolute; top: -100px; left: 0; width: 100%; color: #fff; transition: 300ms ease all; >.thankyou .thank-you < position:absolute; top:0px; >.share-item < display: block; color: #000; background: #fff; text-decoration: none; height: 30px; width: 30px !important; text-align: center; line-height: 30px; border-radius: 50%; float: left; margin-left: 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); transition: 500ms ease all; padding: 0px; min-height: auto; >.share-item img < width: 100%; height: 100%; padding: 2px; margin: 0px; >.share-item:hover < background: #eb4c89; transition: 50ms ease all; >.share-item:active < background: #eb4c89; transition: 50ms ease all; >.share-item:nth-child(1) < transform: translateX(200px) rotate(180deg); >.share-item:nth-child(2) < transform: translateX(400px) rotate(200deg); >.share-item:nth-child(3) < transform: translateX(580px) rotate(220deg); >.share-item:nth-child(4) < transform: translateX(740px) rotate(240deg); >.open .share-item < transform: translateX(0) rotate(0); margin-left:3px; >.share-items < position: absolute; top: 0; right: 0; height: 100%; padding: 3px 0; width: 201px; >.share-items-wrapper < position: absolute; top: 0; left: 0; height: 100%; width : 267px; left: 50%; margin-left:-133.5px; >.shared .share-item < transform :translateY(200px); >.shared .share-item:nth-child(1) < transition: 200ms cubic-bezier(.32,-0.22,.9,.93) all; >.shared .share-item:nth-child(2) < transition: 600ms cubic-bezier(.32,-0.22,.9,.93) all; >.shared .share-item:nth-child(3) < transition: 1000ms cubic-bezier(.32,-0.22,.9,.93) all; >.shared .share-item:nth-child(4) < transition: 1400ms cubic-bezier(.32,-0.22,.9,.93) all; >.shared .share-item:nth-child(5) < transition: 1800ms cubic-bezier(.32,-0.22,.9,.93) all; >.shared .share-item:nth-child(6) < transition: 2200ms cubic-bezier(.32,-0.22,.9,.93) all; >.fa
Осталось вставить скрипт. Добавляем HTML, вставляем
Вставка html кода taplink
Максимальный объем файла — 4,9 Мб, система автоматически масштабирует файлы под разрешение карусели. Но мы рекомендуем заранее обрезать файлы под выбранный формат карусели картинок по соотношению сторон. Например, для квадратных фото — 1:1. В части разрешения рекомендуем размер 2048*2048, 1080*1080 или близкий с нужным соотношением сторон.
Для создания дополнительной страницы в рамках одного аккаунта Taplink нажмите «Добавить новый блок» — «Страница» (доступно на тарифе BUSINESS).
На текущий странице будет создан блок «Ссылка» с переходом на дополнительную страницу.
Для создания новой страницы в поле «Открыть» должно быть написано «Создать новую страницу» (если страница уже создана — можно выбрать ее название из этого списка). Имя создаваемой страницы вводится в поле «Название страницы». Для страниц рекомендуется использовать уникальные названия, чтобы исключить путаницу. Далее сможете добавить на эту страницу нужные вам блоки.
В личном кабинете при работе с внутренними страницами переход делается через кнопку со стрелкой:
Для возврата на главную используется клик по ссылке «На главную» (1).
Для перехода на любую другую страницу — выберите ее из списка, открываемого по нажатию серой кнопки с белой стрелкой вниз (2).
Для создания формы регистрации используется блок «Форма и платежи». Мы рекомендуем разместить ее на отдельной внутренней странице, чтобы не загромождать основную страницу вашего Taplink.
Обратите внимание, у нас нет привязки к дате, времени или загрузке специалистов. Для решения подобных задач (салоны красоты, рестораны и т.д.) рекомендуем использовать сторонние решения. К примеру, yclients.
1.»Добавить новый блок» — «Страница»
3. Переходите на эту страницу.
4. На этой странице нажимаете «Добавить новый блок» — «Форма и платежи»
5. Задайте набор необходимых данных. Поля добавляются через «Добавить поле» (1). Расстановка полей в нужном порядке производится ползунками слева (2). В любой форме должно быть хотя бы одно обязательное поле для контактных данных (поле типа Email или Телефон).
6. Перейдите на вкладку «Настройки», укажите текст на кнопке под формой (1) и действие после заполнения формы (2). Для использования «Страницы благодарности» в действии выберите «Открыть страницу» и ее название.
7. Если требуется принимать платежи: перейдите на вкладку «Оплаты», включите переключать «Принимать оплату» (1), укажите сумму (2) и назначение платежа (3, эти данные нужны для платежной системы). В одной форме может быть только одна сумма. Также можно настроить статус (4), который должен быть установлен для заявки после оплаты.
8. При необходимости подключите модули юридической информации (там должен быть размещен договор-оферта или иное соглашение на сбор данных, Модули — Юридическая информация) и уведомления (чтобы узнавать о новых заявках, Модули — Уведомления).
9. Нажмите кнопку «Сохранить», для создания формы.
Чтобы клиенту после заполнения формы приходила информация на электронную почту (к примеру его копия цифрового товара) необходимо настроить систему почтовых рассылок (mailchimp, getresponse, unisender, sendpulse), через «Модули». Услуги системы рассылок оплачиваются отдельно. С стороны Taplink настройка сводится к вводу ключа API почтовой системы и указания списков, в которые должны заноситься адреса электронной почты.
«Добавление подписчиков методом double-opt-in» означает использование подтверждения адреса, для чего до внесения адреса в список на него высылается письмо с запросом подтверждения. Это письмо вам необходимо настроить на стороне сервиса рассылок.
Настройка самих рассылок делается уже внутри почтового сервиса. Письмо в почтовой системе надо настраивать как событийное, на добавление адреса почты в список. Более подробно об этом можно узнать из справочной системы сервиса рассылок.
Выбор списков, куда будет добавляться адрес почты, делается в свойствах формы, на вкладке «Модули» (1) . Для каждой формы можно задать свои списки рассылки.
Первая строка (новая заявка, 2 ) — данные в почтовую систему будут переданы после заполнения контактных данных (заполнение формы).
Вторая (успешная оплата, 3) — после успешной оплаты.