ТОП-СЛАЙДЕР НАМБА ВАН НА РУСИ

Рад представить вашему вниманию лучший слайдер из известных мне на данный момент.
Видеоинструкция — чек ✅
Код — чек ✅
Laser beams? check.
Acid? check.
Body bag? check.
Для пользования слайдером понадобится свой хостинг, купить его можно по ссылке

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

#полезноtaplink #кодtaplink #слайдер

КАК СКРЫТЬ НАДПИСЬ "СДЕЛАНО В TAPLINK"

Просто вставьте html-блок с содержимым
<style>
aside {
display: none;
}
</style>

#полезноtaplink #кодtaplink

ДЕЛАЕМ ЭЛЕМЕНТАМ ОТРАЖЕНИЕ С ПОМОЩЬЮ CSS

В коде существует свойство, которое дает возможность сделать отражение любого элемента всего за пару строчек!
Видеоинструция: тык
Готовый код для отзеркаливания всех видов заголовков Taplink, кнопок, баннеров и парочки моих простеньких html-блоков: тык

#полезноtaplink #кодtaplink #эффектытекста

ЛЕГКАЯ СМЕНА ШРИФТОВ ДЛЯ ВАШЕГО TAPLINK

Одним из первых моих постов в канале был урок по смене шрифтов с помощью своего хостинга. Это самый популярный в моей работе способ, однако есть и более легкий, который просто не всегда применим на практике (но тем не менее).
Если вам нужен какой-то шрифт, которого нет в стандартном таплинке, загуглите его "название шрифта google fonts". Если в поисковой выдаче есть результат с сайта https://fonts.google.com/ — ликуйте, вам повезло и вам не придется подключать свой хостинг для использования этого шрифта. В этом случае смотрите новую инструкцию
Если же на гугл фонтсе нужного шрифта нет — увы, вам поможет только способ, который был описан в канале выше. Полезно знать оба способа, т.к. они применимы для любого конструктора (да и не только конструктора).

#полезноtaplink #кодtaplink #шрифты

ПАРТНЕРСКАЯ ПРОГРАММА В TAPLINK

В taplink есть возможность отслеживать источник пользователя, зашедшего к вам на сайт и оставившего заявку. Для отслеживания достаточно сформировать ссылку с UTM-метками с помощью любого генератора (например https://tilda.cc/ru/utm/) и дать получившуюся ссылку вашему "дилеру трафика", после чего любой перешедший к вам на страницу и оставивший заявку человек будет иметь пометку, что пришел оттуда-то.

Есть лишь одна проблемка — в многостраничных таплинках (да и любых других сайтах) метка не сохраняется при переходе между страничками. Однако есть "заплатка", которую можно поставить в "вставку HTML" в настройках, что будет сохранять UTM-метки.

Видеоурок по этому делу: https://www.youtube.com/watch?v=cxSxiaXr8TE
Код:

 var links = document.getElementsByTagName('a');
Array.prototype.forEach.call(links, function (link) {
  if ( link.href.indexOf(".") > 0 && link.href.indexOf("#") < 0 ) {
    link.href += location.search;
  }
});
</script>

#полезноtaplink #кодtaplink #воронки

КНОПКИ С ПОДСВЕЧИВАЕМОЙ МАСКОЙ

Не знаю, как это еще назвать, идея пришла при анимировании кнопки в Adobe After Effects, где можно сделать кнопке слой цвета, потом сверху слой-маску, а между ними ездит слой-подсветка.

В общем, выглядит это так: https://tap.one-way.dev/p/7fe734/

Т.к. дизайнер из-меня не очень, записал процесс создания такой кнопки, чтобы вы могли сделать свою: https://youtu.be/pc874l5uvUc

Небольшое уточнение: картинка маски должна быть черно-белой

Код: https://teletype.in/@onthewaytothesun/LZI63Q1CjGu

#полезноtaplink #кодtaplink #эффекты кнопок

РЕДИЗАЙН ИНТЕРФЕЙСА КОРЗИНЫ

Одна из моих главных работ в данный момент — редизайн внешнего вида онлайн-школ. Посему мне пришла идея заредизайнить корзину, тем паче что с моим таплинком в темных тонах белые плашки добавления в корзину смотрелись нелепо.

К сожалению, я не могу предоставить унифицированного и легкого к применению кода, так что остается надеяться, что моя перекраска вам понравится. В качестве референса была взята корзина сайта re-store.ru, а в видеоуроке описаны как тонкости установки кода, так и как его редактировать, если захотите редактировать.

Код и видеоинструкция: https://teletype.in/@onthewaytothesun/o-lAKdpVDIE

#кодtaplink #полезноtaplink

Хочу презентовать новый хештег, к которому я буду крепить полезные сервисы. Т.к. я специалист по ведению онлайн-школ, я не понаслышке знаю, что такой информацией обычно сопровождают платные курсы, а значит, что это полезная тема 🌚
#сервисы
https://getwaves.io/ — сервис, который отрисует случайные волночки для переходов между блоками.
https://www.blobmaker.app/ — сервис, который отрисует фон для спикера, который очень часто встречается в инфобизовских лендах
https://coolors.co/ — генератор сочетающихся между собой цветов. Можно вставить свои цвета, закрыть их замочком и подбирать сочетающийся с ними цвет

p.s. Волночки можно вставлять в таплинк, копируя код с сервиса и вставляя в html-блок в таплинке. Однако из-за формирования колонки таплинка код нужно немного подшаманить.
Допустим, у вас код

 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#0099ff" fill-opacity="1" d="M0,128L48,117.3C96,107,192,85,288,90.7C384,96,480,128,576,165.3C672,203,768,245,864,256C960,267,1056,245,1152,208C1248,171,1344,117,1392,90.7L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>

Допишите после svg style="margin: 0px -15px;" и волночка станет на всю ширину экрана в мобилке

Пример готового кода:

 style="margin: 0px -15px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#0099ff" fill-opacity="1" d="M0,128L48,117.3C96,107,192,85,288,90.7C384,96,480,128,576,165.3C672,203,768,245,864,256C960,267,1056,245,1152,208C1248,171,1344,117,1392,90.7L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>

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

#полезноtaplink

ГРАФИКА: КАК НЕ УБИТЬ КАРТИНКАМИ СКОРОСТЬ ЗАГРУЗКИ СВОЕГО ЛЕНДИНГА

По опыту своей работы с сайтами все чаще прихожу к выводу, что чаще всего скорость загрузки страдает от картинок и родных скриптов платформ, на которых размещаются сайты. Если со скриптами ничего поделать не получится, то с помощью оптимизации картинок в среднем вы сможете выиграть от 2 до 6 секунд во времени загрузки лендинга, если ранее не пользовались способами, которые я описал в статейке: https://teletype.in/@onthewaytothesun/07Q1LxnxPSc

По важности следование этим правилам гораздо выше, нежели знание html-css-js

#полезноtaplink #примерыоптимизации

БЛОК СРАВНЕНИЯ КАРТИНОК

Собсна, код: https://teletype.in/@onthewaytothesun/oVZnWNm6vrk
Видео: https://youtu.be/oQJk2MSnQzo

#полезноtaplink #кодtaplink #блоксравнения

КОД СМЕНЫ ВНЕШНЕГО ВИДА ЧЕКБОКСОВ НА АЙФОНОВСКИЙ
https://cc26299.tmweb.ru/files/ezgif-2-87f3a3198c53.gif

Инструкция с кодом: https://teletype.in/@onthewaytothesun/QF7s2ph0V21

#кодtaplink #полезноtaplink

БЛОК "ВЕРНУТЬСЯ НА ГЛАВНУЮ"

Давеча заприметил интерес к такому коду в профильном сообществе. Код представляет собой иконку с надписью "вернуться на главную" и работает на всех страницах кроме главной.
Видео: https://youtu.be/CJE5gLJxCCs
Код: https://teletype.in/@onthewaytothesun/DjfjqsBskRq

#кодtaplink #полезноtaplink

СНЕЖОК НА СТРАНИЦУ

<div class="snow"></div>

<style>
body {

background-image: url('https://i.imgur.com/BiSmXaq.png'), url('https://i.imgur.com/XHuy0NJ.png'), url('https://i.imgur.com/okpRxJU.png');
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}

@-webkit-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
}
}
@-moz-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
}
}
@-ms-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
}
}
@keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% {}
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;

}
}

</style>

Вставлять в "добавить HTML-блок" для работы на одной странице, во "вставку HTML-кода" в настройках, если нужно на всех страницах многостраничного таплинка.

#полезноtaplink #кодtaplink #снежок

КАК КАЧАТЬ ИКОНКИ СО СТОКОВ icons8.ru БЕСПЛАТНО

Сэкономил себе полчаса жизни и делюсь лайфхаком с вами

РАССЫЛКИ ПО УСЛОВИЯМ ПОКУПКИ ДЛЯ TAPLINK

Недавно ко мне обратились с просьбой настроить школу на геткурсе. Составил приблизительную смету, вышло что-то в районе 20-30 тысяч.
Эксперту такое не подходило, тем более что выяснилось, что его курс не требует большинства функционала геткурса, за который она бы переплачивала.

Однако у нее стояла задача автоматизировать покупку учебных материалов, притом учебных материалов у нее несколько. То есть нужно было сделать так, чтобы при покупке курса 1 высылалось письмо с материалами курса 1, при покупке курса 2 письмо с материалами курса 2 и так далее. Создавать отдельные страницы для каждого курса и делать разные адресные книги не очень подходило, т.к. это школа йоги и куда проще закинуть курсы в раздел "магазина" таплинка и уже по покупке разных курсов слать разные письма.

В общем, я давно хотел снять видео по тому, как создавать рассылки с доменными почтами, чтобы ваши письма не попадали в спам, а тут еще такой повод объявился. Представляю вашему вниманию обучалку по тому, как:
1. Сделать доменную почту
2. Настроить подписи DKIM и SPF, чтобы письма не попадали в спам
3. Настроить политику DMARC для получения отчетов о доходимости писем себе на почту
4. Настроить фильтр в Sendpulse и высылать письма исходя из того, на какую сумму купили товаров в таплинке. Таким образом делать вариации разных рассылок по условиям покупки тех или иных товаров\услуг

Инструкция: https://teletype.in/@onthewaytothesun/cfMVQ56YMKT

P.S. Буду благодарен за фидбэк по уроку. Планирую когда-нибудь в отдаленном будущем сделать недорогой курс по таплинку, прикладной верстке кодом и всяким подобным фишкам, поэтому хотелось бы узнать ваше мнение по информативности, подаче, и вообще насколько актуально так обозревать какую-то конкретную тему по созданию функциональных сайтецов
P.P.S. Через два дня лечу в Таиланд, где буду работать чуть реже, чем 24\7, так что, возможно, скоро будут новые крутые идейки по кастомизации таплинков

#полезноtaplink #рассылки

ССЫЛКА НА WHATSAPP В МАГАЗИНЕ

https://cc26299.tmweb.ru/files/screenshots/wa-widjet.jpg

Вот так выглядит код, добавляющий кнопку вацапа в магазин.

<script>
var shop = document.querySelector('.product-container-outer').parentElement.parentElement;
shop.insertAdjacentHTML('beforeend', '<a class="wazap" href="https://wa.me/79514983724"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path fill="#fff" d="M4.868,43.303l2.694-9.835C5.9,30.59,5.026,27.324,5.027,23.979C5.032,13.514,13.548,5,24.014,5c5.079,0.002,9.845,1.979,13.43,5.566c3.584,3.588,5.558,8.356,5.556,13.428c-0.004,10.465-8.522,18.98-18.986,18.98c-0.001,0,0,0,0,0h-0.008c-3.177-0.001-6.3-0.798-9.073-2.311L4.868,43.303z"/><path fill="#fff" d="M4.868,43.803c-0.132,0-0.26-0.052-0.355-0.148c-0.125-0.127-0.174-0.312-0.127-0.483l2.639-9.636c-1.636-2.906-2.499-6.206-2.497-9.556C4.532,13.238,13.273,4.5,24.014,4.5c5.21,0.002,10.105,2.031,13.784,5.713c3.679,3.683,5.704,8.577,5.702,13.781c-0.004,10.741-8.746,19.48-19.486,19.48c-3.189-0.001-6.344-0.788-9.144-2.277l-9.875,2.589C4.953,43.798,4.911,43.803,4.868,43.803z"/><path fill="#cfd8dc" d="M24.014,5c5.079,0.002,9.845,1.979,13.43,5.566c3.584,3.588,5.558,8.356,5.556,13.428c-0.004,10.465-8.522,18.98-18.986,18.98h-0.008c-3.177-0.001-6.3-0.798-9.073-2.311L4.868,43.303l2.694-9.835C5.9,30.59,5.026,27.324,5.027,23.979C5.032,13.514,13.548,5,24.014,5 M24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974 M24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974 M24.014,4C24.014,4,24.014,4,24.014,4C12.998,4,4.032,12.962,4.027,23.979c-0.001,3.367,0.849,6.685,2.461,9.622l-2.585,9.439c-0.094,0.345,0.002,0.713,0.254,0.967c0.19,0.192,0.447,0.297,0.711,0.297c0.085,0,0.17-0.011,0.254-0.033l9.687-2.54c2.828,1.468,5.998,2.243,9.197,2.244c11.024,0,19.99-8.963,19.995-19.98c0.002-5.339-2.075-10.359-5.848-14.135C34.378,6.083,29.357,4.002,24.014,4L24.014,4z"/><path fill="#40c351" d="M35.176,12.832c-2.98-2.982-6.941-4.625-11.157-4.626c-8.704,0-15.783,7.076-15.787,15.774c-0.001,2.981,0.833,5.883,2.413,8.396l0.376,0.597l-1.595,5.821l5.973-1.566l0.577,0.342c2.422,1.438,5.2,2.198,8.032,2.199h0.006c8.698,0,15.777-7.077,15.78-15.776C39.795,19.778,38.156,15.814,35.176,12.832z"/><path fill="#fff" fill-rule="evenodd" d="M19.268,16.045c-0.355-0.79-0.729-0.806-1.068-0.82c-0.277-0.012-0.593-0.011-0.909-0.011c-0.316,0-0.83,0.119-1.265,0.594c-0.435,0.475-1.661,1.622-1.661,3.956c0,2.334,1.7,4.59,1.937,4.906c0.237,0.316,3.282,5.259,8.104,7.161c4.007,1.58,4.823,1.266,5.693,1.187c0.87-0.079,2.807-1.147,3.202-2.255c0.395-1.108,0.395-2.057,0.277-2.255c-0.119-0.198-0.435-0.316-0.909-0.554s-2.807-1.385-3.242-1.543c-0.435-0.158-0.751-0.237-1.068,0.238c-0.316,0.474-1.225,1.543-1.502,1.859c-0.277,0.317-0.554,0.357-1.028,0.119c-0.474-0.238-2.002-0.738-3.815-2.354c-1.41-1.257-2.362-2.81-2.639-3.285c-0.277-0.474-0.03-0.731,0.208-0.968c0.213-0.213,0.474-0.554,0.712-0.831c0.237-0.277,0.316-0.475,0.474-0.791c0.158-0.317,0.079-0.594-0.04-0.831C20.612,19.329,19.69,16.983,19.268,16.045z" clip-rule="evenodd"/></svg></a>');
</script>
<style>
.wazap {
justify-self: center;
flex-basis: 100%;
text-align: center;
}
</style>

Вместо моего номера в коде надо написать свой (номер в третьей строке). Также вы можете дописать к номеру текст обращения по инструкции самого вацапа https://faq.whatsapp.com/general/chats/how-to-use-click-to-chat/?lang=ru

Код вставляется внутрь "вставки HTML-кода" в настройках

#кодыtaplink #полезноtaplink

МЕНЮ ДЛЯ ОДНОСТРАНИЧНИКА

Сделал меню для одностраничника с эффектом переключения.

https://teletype.in/@onthewaytothesun/X3lvvi8_Gfn

Позже дополню вариантом с другим количеством пунктов, т.к их добавление меняет анимацию

P.s. Если у вас свои шрифты, то могут не влезать надписи или наоборот быть слишком маленькими. Такое может редко у кого возникнуть, но исправляется изменением font-size в коде

#кодtaplink #полезноtaplink

БЕГУЩАЯ СТРОКА

Я не фанат такого дизайна, однако почему бы и нет?
Код с инструкцией: https://teletype.in/@onthewaytothesun/jyCrCYDpQ9a

#кодtaplink #полезноtaplink #бегущаястрока

БАННЕР С КНОПКОЙ "БЕЗ ВСЕГО"

Время аскетичных блоков. Блок с фоновой картинкой и кнопкой, в коде сделано много комментариев и использованы CSS-переменные для гибкого использования под ваш дизайн

Код тут: https://teletype.in/@onthewaytothesun/oBm8nBta68S



#кодtaplink #полезноtaplink #баннерскнопкой

Друзья! Вчера в канале прибавилось почти 100 человек, так что хочу сделать небольшой положняк анонс:

Во-первых, спасибо тому, кто прорекламировал канал. Не знаю, кто вы, но спасибо
Во-вторых, у канала есть чат https://t.me/taplinkbestchat, в котором вы можете писать новые идеи для публикаций, а также оценивать текущие. Т.к. помимо канала у меня много работы, иногда я могу сделать опечатку или не учесть сразу какой-нибудь аспект применения кода, и ошибка вылезет именно у вас — напишите об этом и я ее оперативно поправлю
В-третьих, под каждым постом с кодом есть реакции, левая является позитивной, правая негативной. Ставьте их под публикациями и я буду видеть, какие идеи вам оказались полезными и их стоит развивать. Например, если "баннер с кнопкой" окажется "залайканным", я сделаю шаблон для баннера с 2 кнопками, если "слайдер без всего" будет в паритете по оценкам, то я сделаю вывод, что делать частные случаи слайдеров большинству не нужно.
https://t.me/taplinkbestchat
https://t.me/taplinkbestchat
https://t.me/taplinkbestchat


Если вы хотите отблагодарить меня за мой канал, можете зарегистрировать таплинк своему клиенту на мою реферальную ссылку https://taplink.ru/invite/14648.0347/
По промокоду oneway вы получите скидку 10%, а по промокоду oneway7 можете получить временный доступ к бизнес-тарифу на 7 дней

#некод

ИНТЕГРАЦИЯ ТАПЛИНКА С СЕРВИСАМИ БРОНИРОВАНИЯ

Статейка про общий принцип интеграции веб-страничек с сервисами бронирования: https://teletype.in/@onthewaytothesun/z7ToXStQoBZ

Выглядит так: https://cc26299.tmweb.ru/files/screenshots/hesus.jpg