Уникальные модификации для Тильда сайтов, которые расширяют функционал вашего сайта и выделяют вас среди конкурентов!

Tilda Publishing

Свои иконки социальных сетей в Tilda zero block

Введение

Свои иконки социальных сетей в Tilda — это как индивидуальное украшение на вашем веб-сайте, придающее ему неповторимый стиль и личный штрих. Все знают, что социальные сети — это ключевой инструмент для взаимодействия с вашей аудиторией, и почему бы не сделать этот процесс более ярким и уникальным на вашем тильда сайте?

Создание своих иконок социальных сетей в Tilda — это не просто дополнительная возможность для дизайна, это путь к узнаваемости вашего бренда. Ведь как только посетители видят уникальные иконки, они моментально ассоциируют их с вашим сайтом.

Как создать свои иконки социальных сетей в Tilda

Свои иконки социальных сетей в Tilda — это не просто стильный трюк, это инструмент для привлечения внимания посетителей. Когда вы предлагаете что-то свое и уникальное, вы показываете заботу о деталях и демонстрируете, что ваш бренд особенный.

В следующей пошаговой инструкции вы узнаете, как создать свои иконки в zero block, присвоить им ссылки и анимировать их:

  1. Создайте zero block
  2. Удалите все элементы из него
  3. Установите высоту блока равной 1px
  4. Очистите цвет фона всего блока
  5. В поле «POSITION AND OVERFLOW» в пункте «OVERFLOW» выберите «Visible»
  6. Добавьте иконку любым удобным вам способом
  7. Установите для иконки ширину и высоту в 60px
  8. Нажмите на иконку правой кнопкой мыши и выберите «Add css class name»
  9. В появившемся поле введите класс «message_icon»
  10. В настройках иконки найдите пункт «Lazy Load» и выберите значение «off»
  11. Нажмите на «+container»
  12. В пункте «CONTAINER» выберите «Window Container» в выпадающем списке
  13. В пункте «AXIS X» выберите «right», если хотите зафиксировать иконку справа, или «left» если хотите зафиксировать слева
  14. В пункте «AXIS Y» выберите «bottom»

Мы добавили общую иконку, которая всегда будет отображаться на вашем сайте. По задумке, пли клике на эту иконку должны плавно появиться остальные иконки социальных сетей и мессенджеров. Давайте создадим эти иконки:

  1. Скопируйте уже созданную иконку и расположите копию выше предыдущей на 20px
  2. Замените изображение второй иконки
  3. Нажмите на правую кнопку мыши по иконке и выберите «Add css class name»
  4. В появившемся поле введите класс «social_icon»
  5. Дублируйте эту иконку и меняйте изображения для других иконок
  6. В пункте «LINK» в поле «URL» каждой иконки пропишите ссылки на нужные социальные сети или мессенджеры
  7. Сохраните изменения и закройте zero block
  8. После всех блоков добавьте блок «Т123»
  9. Зайдите в «Контент» и скопируйте в него следующий код:
<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>
  1. Скопируйте ID зеро блока с иконками и вставьте в код в указанное место
  2. Сохраните изменения и опубликуйте страницу

Ниже представлены шаблоны ссылок на некоторые мессенджеры и соцсети:

Ссылки мессенджеров и социальных сетей для обратной связи в Tilda

Свои иконки социальных сетей в 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

Добавить комментарий