Эта статья позволит разместить баннер с текстом и изображением, который появится на экране с установленной вами задержкой
1. Вставьте в HTML-блок на странице код:
<div class="auto-popup-inner">
<div class="auto-popup">
<div class="text-container relative">
<div class="close-popup">
<span></span> <span></span>
</div>
<div class="text-container"><div class="block-text has-rtl is-heading">
Telegram-канал<br/>
Besttaplink
</div></div>
<div class="text-container"><div class="block-text has-rtl simple-text">
Подпишитесь на наш Telegram-канал и получайте иформацию о новых продуктах первыми
</div></div>
<div class="image-container">
<img src="https://taplink.st/p/5/d/1/f/63112380.jpg?0"/></div>
<div class="buttons-container">
<a class="dismiss-modal btn-ghost">
Отменить
</a>
<a class="btn-go" href="https://t.me/taplinkbest" target="_blank">
Перейти
</a>
</div>
</div>
</div>
</div>
<script>
setTimeout(()=>{
document.querySelector('.auto-popup-inner').style.display='block';
},1000)
document.querySelector('.close-popup').onclick = ()=>{
document.querySelector('.auto-popup-inner').style.display='none';
}
document.querySelector('.dismiss-modal').onclick = ()=>{
document.querySelector('.auto-popup-inner').style.display='none';
}
</script>
<style>.auto-popup-inner {
--primary-color: #FF6E0A;
--cta-color: white;
--grid-min: 0.25rem;
--grid-small: 0.5rem;
--grid-medium: 0.75rem;
--grid-standart: 1rem;
--grid-large: 1.5rem;
--grid-extra: 2rem;
--min-height:3rem;
position: fixed;
display: none;
left: 50%;
top: 50%;
translate: -50% -50%;
width: clamp(320px, calc(100% - 2rem), 820px);
border-radius: var(--grid-medium);
background: var(--primary-color);
z-index: 10000;
padding: var(--grid-min);
}
.auto-popup-inner .auto-popup {
border-radius: var(--grid-medium);
background: #FFF;
padding: var(--grid-large);
}
.auto-popup-inner .auto-popup .close-popup {
float: right;
width: var(--grid-extra);
height: var(--grid-extra);
border: 1px solid var(--primary-color);
border-radius: var(--grid-min);
position: relative;
cursor: pointer;
}
.auto-popup-inner .auto-popup .close-popup:hover span {
width: 80%;
}
.auto-popup-inner .auto-popup .close-popup span {
position: absolute;
left: 50%;
top: 50%;
width: 70%;
height: 2px;
border-radius: var(--grid-min);
background: var(--primary-color);
translate: -50% -50%;
transition: 0.2s;
}
.auto-popup-inner .auto-popup .close-popup span:first-child {
rotate: 45deg;
}
.auto-popup-inner .auto-popup .close-popup span:last-child {
rotate: -45deg;
}
.auto-popup-inner .auto-popup .image-container {
text-align:center;
}
.auto-popup-inner .auto-popup .text-container, .auto-popup-inner .auto-popup .image-container, .auto-popup-inner .auto-popup .buttons-container {
padding-top: var(--grid-large);
}
.auto-popup-inner .auto-popup .is-heading {
line-height: var(--theme-text-lineheight-h2);
font-size: var(--theme-text-size-h2);
letter-spacing: var(--theme-text-letterspacing-h2);
text-align: center;
}
.auto-popup-inner .auto-popup .simple-text {
text-align: center;
line-height: var(--theme-text-lineheight-md);
font-size: var(--theme-text-size-md);
letter-spacing: var(--theme-text-letterspacing-md);
}
.auto-popup-inner .auto-popup .buttons-container {
display: flex;
gap: var(--grid-large);
align-items: center;
}
.auto-popup-inner .auto-popup .buttons-container a {
flex: 1 1 auto;
display: flex;
min-height: var(--min-height);
align-items: center;
justify-content: center;
transition: 0.3s;
font-family: var(--theme-link-title-font-family);
font-weight: var(--theme-link-title-font-weight);
font-size: var(--theme-link-title-fontsize);
line-height: var(--theme-link-title-lineheight);
letter-spacing: var(--theme-link-title-letterspacing);
text-transform: var(--theme-link-title-transform);
border-radius: var(--grid-medium);
}
.auto-popup-inner .auto-popup .buttons-container a.btn-ghost {
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.auto-popup-inner .auto-popup .buttons-container a.btn-ghost:hover {
background: var(--primary-color);
backdrop-filter: blur(1.5px);
color: var(--cta-color);
}
.auto-popup-inner .auto-popup .buttons-container a.btn-go {
background: var(--primary-color);
backdrop-filter: blur(1.5px);
color: var(--cta-color);
}
.auto-popup-inner .auto-popup .buttons-container a.btn-go:hover {
opacity: 0.9;
}
.relative {
position: relative;
}
</style>
В этом коде заголовок соответствует стандартным настройкам заголовка в Taplink. Если вы хотите сменить в нем шрифт, цвет и другие параметры, оберните код в секцию и настройте эти параметры там
2. Вы можете заменить основной цвет и размер сетки в самом коде. Для этого найдите в коде место с таким кодом:
--primary-color: #FF6E0A;
--cta-color: white;
--grid-min: 0.25rem;
--grid-small: 0.5rem;
--grid-medium: 0.75rem;
--grid-standart: 1rem;
--grid-large: 1.5rem;
--grid-extra: 2rem;
--min-height:3rem;
И замените #FF6E0A на свой код цвета. white отвечает за цвет текста в кнопке, а остальные параметры отвечают за расстояние между элементами. Они составлены в соответствии с 4-х пиксельной сеткой
3. Чтобы заменить задержку в появлении блока (стандартно он появляется спустя 1 секунду после загрузки страницы, найдите в коде такую строку:
setTimeout(()=>{
document.querySelector('.auto-popup-inner').style.display='block';
},1000)
И замените 1000 на свою задержку в миллисекундах
4. Для того, чтобы заменить ссылку в кнопке на свою, найдите в коде такое место:
<a class="btn-go" href="https://t.me/t" target="_blank">
Перейти
</a>
И замените https://t.me/t на свою ссылку
5. Для замены картинки найдите в коде такую строку:
<img src="https://taplink.st/p/5/d/1/f/63112380.jpg?0"/>
И замените ссылку на картинку