Taplink - удобный инструмент, но у большинства он выглядит одинаково: набор кнопок без акцентов. Если хочется, чтобы страница цепляла внимание, выглядела аккуратнее и реально помогала продавать, стандартных настроек часто не хватает. При этом не нужен сложный код или навыки программиста - достаточно простых решений, которые вставляются в блок «HTML-код» и сразу работают.
1. Интерактивный баннер с раскрытием
Этот приём помогает спрятать лишнее и оставить главное: один баннер на экране, а всё остальное - по клику. Страница не перегружена, партнёрские предложения встроены аккуратно, а пользователь вовлекается через простое действие. В итоге страница выглядит чище и живее.
Копируем код и вставляем в блок «HTML-код»:
<details class="details-banners-link">
<summary>
<img src="="> <!-- загружаем на хостинг наш баннер и копируем прямую ссылку -->
</summary>
<a>
<img src="="> <!-- загружаем на хостинг наш баннер и копируем прямую ссылку -->
</a>
</details>
<style>
:focus { outline-width: 0px; }
details summary::-webkit-details-marker { display: none; }
details > summary { list-style: none; }
summary { cursor: pointer; }
details[open] summary ~ * {
animation: open .5s ease-in-out;
}
@keyframes open {
0% { opacity: 0; }
100% { opacity: 1; }
}
:focus { outline: 0; }
.details-banners-link {
margin: auto -14px;
}
.details-banners-link img {
margin-bottom: -8px;
}
</style>
Ты экономишь место и аккуратно управляешь вниманием пользователя, не превращая страницу в сплошную рекламу.
Если тебе откликается такой подход - когда стандартный инструмент немного дорабатывается кодом под реальные задачи, советую посмотреть мою предыдущую статью: «3 простых кода для Tilda, которые экономят время и делают сайт удобнее». Она хорошо дополняет эту тему и показывает, как такие приёмы работают уже на уровне сайтов.
2. Баннер с эффектом
Эффект сразу делает страницу визуально «дороже»: при наведении один баннер сменяется другим, и внимание цепляется само. Лучше всего подходит для акций, спецпредложений и партнёрских блоков. Реализуется просто - создаём баннер и задаём ему имя (в примере - image_banner). После этого вставляем код в блок «HTML-код».
<style>
[name*="image_banner"] {
z-index: 9;
position: absolute;
width: 100%;
opacity: 0;
transition: opacity 0.6s cubic-bezier(.77,-0.01,.36,1);
}
[name*="image_banner"]:hover {
opacity: 1;
}
</style>
В итоге страница перестаёт быть статичной и выглядит более интерактивно.
3. Бегущая строка
Бегущая строка - маленький, но цепкий акцент. Она хорошо подходит для акций, срочных предложений, напоминаний и любых сообщений, которые важно сразу заметить.
Код вставляется в HTML-блок:
<div class="marquee">
<p> Бегущая строка </p>
<style>
@-webkit-keyframes scroll {
0% {
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0)
}
}
@-moz-keyframes scroll {
0% {
-moz-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
100% {
-moz-transform: translate(0, 0);
transform: translate(0, 0)
}
}
@keyframes scroll {
0% {
transform: translate(-100%, 0);
}
100% {
transform: translate(0, 0)
}
}
.marquee {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.marquee p {
display: inline-block;
padding-left: 100%;
-webkit-animation: scroll 10s infinite linear;
-moz-animation: scroll 10s infinite linear;
animation: scroll 10s infinite linear; /*Можем изменить скорость бегущей строки: 5s*/
}
</style>
Скорость легко меняется, текст может быть любым. Небольшая деталь, которая сразу притягивает взгляд и подчёркивает важное.
Если хочешь попробовать Taplink без ограничений или только начинаешь с ним работать, используй мои промокоды:
- annsob7 - полный доступ на 7 дней;
- ann25 — скидка 10% на любой тариф.
Удобный способ спокойно протестировать инструмент и понять, подходит ли он под твои задачи.
Эти коды - не про сложное программирование. Taplink всегда можно сделать более живым: управлять вниманием пользователя и превращать страницу из набора кнопок в работающий продающий инструмент.
Если тебе близок такой подход, в моём Telegram я регулярно делюсь похожими приёмами и полезными идеями. Подписывайся, там ещё больше мелочей, которые упрощают работу и делают страницы лучше.