Свои иконки социальных сетей в Tilda zero block
Введение
Свои иконки социальных сетей в Tilda — это как индивидуальное украшение на вашем веб-сайте, придающее ему неповторимый стиль и личный штрих. Все знают, что социальные сети — это ключевой инструмент для взаимодействия с вашей аудиторией, и почему бы не сделать этот процесс более ярким и уникальным на вашем тильда сайте?
Создание своих иконок социальных сетей в Tilda — это не просто дополнительная возможность для дизайна, это путь к узнаваемости вашего бренда. Ведь как только посетители видят уникальные иконки, они моментально ассоциируют их с вашим сайтом.
Как создать свои иконки социальных сетей в Tilda
Свои иконки социальных сетей в Tilda — это не просто стильный трюк, это инструмент для привлечения внимания посетителей. Когда вы предлагаете что-то свое и уникальное, вы показываете заботу о деталях и демонстрируете, что ваш бренд особенный.
В следующей пошаговой инструкции вы узнаете, как создать свои иконки в zero block, присвоить им ссылки и анимировать их:
- Создайте zero block
- Удалите все элементы из него
- Установите высоту блока равной 1px
- Очистите цвет фона всего блока
- В поле «POSITION AND OVERFLOW» в пункте «OVERFLOW» выберите «Visible»
- Добавьте иконку любым удобным вам способом
- Установите для иконки ширину и высоту в 60px
- Нажмите на иконку правой кнопкой мыши и выберите «Add css class name»
- В появившемся поле введите класс «message_icon»
- В настройках иконки найдите пункт «Lazy Load» и выберите значение «off»
- Нажмите на «+container»
- В пункте «CONTAINER» выберите «Window Container» в выпадающем списке
- В пункте «AXIS X» выберите «right», если хотите зафиксировать иконку справа, или «left» если хотите зафиксировать слева
- В пункте «AXIS Y» выберите «bottom»
Мы добавили общую иконку, которая всегда будет отображаться на вашем сайте. По задумке, пли клике на эту иконку должны плавно появиться остальные иконки социальных сетей и мессенджеров. Давайте создадим эти иконки:
- Скопируйте уже созданную иконку и расположите копию выше предыдущей на 20px
- Замените изображение второй иконки
- Нажмите на правую кнопку мыши по иконке и выберите «Add css class name»
- В появившемся поле введите класс «social_icon»
- Дублируйте эту иконку и меняйте изображения для других иконок
- В пункте «LINK» в поле «URL» каждой иконки пропишите ссылки на нужные социальные сети или мессенджеры
- Сохраните изменения и закройте zero block
- После всех блоков добавьте блок «Т123»
- Зайдите в «Контент» и скопируйте в него следующий код:
<style>
/* ID zero block с иконками*/
#rec650612371 {
width: 100%;
position: fixed;
bottom: 0;
z-index: 10000000000;
}
.message_icon {
cursor: pointer;
z-index: 10000000000;
}
.social_icon {
cursor: pointer;
z-index: 10000000000;
}
.social_icon:hover {
transform: scale(1.2) !important;
}
.message_icon:hover {
transform: scale(1.2) !important;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
let socialIconsVisible = false;
const socialIcons = document.querySelectorAll('.social_icon');
// Скрыть social_icon изначально
socialIcons.forEach(function(icon) {
icon.style.display = 'none';
});
// Добавить атрибут target="_blank" ко всем ссылкам в элементах .social_icon
socialIcons.forEach(function(icon) {
const links = icon.querySelectorAll('a');
links.forEach(function(link) {
link.setAttribute('target', '_blank');
});
});
document.querySelector('.message_icon').addEventListener('click', function() {
socialIcons.forEach(function(icon, index) {
if (!socialIconsVisible) {
setTimeout(function() {
icon.style.display = 'block';
icon.style.transition = `opacity 0.5s ease ${index * 0.1}s, transform 0.5s ease ${index * 0.1}s`;
icon.style.opacity = 1;
icon.style.transform = 'translateY(0)';
}, index * 100);
} else {
icon.style.transition = `opacity 0.5s ease ${500 - (index * 0.1)}s, transform 0.5s ease ${500 - (index * 0.1)}s`;
icon.style.opacity = 0;
icon.style.transform = 'translateY(100%)';
setTimeout(function() {
icon.style.display = 'none';
}, 500 - (index * 100));
}
});
socialIconsVisible = !socialIconsVisible;
});
});
</script>
- Скопируйте ID зеро блока с иконками и вставьте в код в указанное место
- Сохраните изменения и опубликуйте страницу
Ниже представлены шаблоны ссылок на некоторые мессенджеры и соцсети:
Ссылки мессенджеров и социальных сетей для обратной связи в Tilda
WhatsApp: https://wa.me/XXXXXXXXXX (Вместо иксов пропишите номер вашего телефона, начиная с первой цифры)
Telegram: https://t.me/XXXXXXXX (Вместо иксов пропишите ваш ник в телеграм)
Instagram: https://www.instagram.com/XXXXXX (Вместо иксов пропишите ваш ник в инстаграм)
VK: https://vk.com/XXXXXXXX (Вместо иксов пропишите ваш vk ID)
Заключение
Свои иконки социальных сетей в Tilda — это шаг к большей индивидуальности, узнаваемости и креативности. Не упускай возможности выделиться из толпы и придать своему сайту неповторимый стиль. Свои иконки — это не просто деталь, это ключ к вашему узнаваемому бренду и интересному контенту.
Смотрите обучающие видео уроки по Тильде тут
Читайте также: Пагинация в Tilda
