Как сделать Instagram истории в Tilda. Instagram stories в Тильде

Введение

Instagram истории стали незаменимой частью маркетинговой стратегии в социальных медиа. Однако, чтобы привлекать внимание аудитории и добиваться максимального вовлечения, важно создавать качественные и привлекательные истории не только в социальных сетях, но и на своих сайтах. И здесь на помощь приходит Tilda – платформа для создания веб-сайтов с невероятной гибкостью и возможностями. В этой статье мы подробно рассмотрим, как сделать Instagram истории в Tilda, используя zero block, popup блок BF503, галерею GL27 и превратив их в мощный инструмент для продвижения вашего бренда.

Использование zero block для создания историй в Tilda

Один из ключевых инструментов Tilda, который делает процесс создания Instagram историй максимально простым и эффективным, это zero block в связке с двумя другими блоками. Zero block – это особый тип блока, который можно использовать для размещения историй на вашем веб-сайте, как это делается в Instagram.

Как создать Instagram истории в Tilda

Чтобы начать создавать свои Instagram истории в Tilda, следуйте инструкции:

1. Создайте zero block
2. Очистите содержимое блока и уменьшите его высоту
3. Нажмите на кнопку «+» и выберите «Add Shape»
4. В настройках shape в пункте «SHAPE» выберите «Circle» из выпадающего списка
5. Удалите фоновую заливку shape
6. Во вкладке «LINK» в поле «URL» пропишите ссылку «#stories»
7. Нажмите на кнопку «Upload file» и загрузите иконку для ваших историй
8. Сохраните изменения и закройте zero block

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

1. Добавьте блок «GL27» из категории «Галерея»
2. Добавляйте и изменяйте истории в этом блоке по своему усмотрению
3. После этого добавьте popup блок «BF503»
4. Зайдите в настройки блока и задайте для него ширину в 100%
5. Зайдите в контент блока «BF503»
6. В поле «ССЫЛКА НА POP-UP» введите ссылку «#stories», как у кнопки
7. После всех блоков на странице добавьте блок «Т123»
8. Нажмите на кнопку «Контент» и скопируйте в него следующий код:

<style>
  .shirina{
   background:none !important; right: 0 !important;left: 0 !important; top: 0 !important; bottom: 0 !important; padding: 0 !important;  margin: 0 !important;}  
  .parpadding{padding:0 !important;}
  .tn-atom .t-form__errorbox-wrapper, .tn-form__errorbox-popup , .t-form-success-popup { z-index: 9999999 !important;padding:0 !important; }
  
  
  #rec647961758 .t994__width-wrapper { /* ID stories */
      width: 100% !important;
      height: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
  }

  @media screen and (max-width: 960px) {
.t-width .t-slds__wrapper {
    padding: 0px;
}

}
.t-popup {
    height: 100% !important;
    position: absolute !important;
    padding: 0 !important;
    overflow-y: hidden !important;
}

  </style>
 <script>
$( document ).ready(function() {
var ZeroPopID = '#rec647961758';//ID stories
var PopWindID = '#rec647965059';//ID PopUp окна BF503

   $(PopWindID + " .t-popup__container").addClass("shirina").html($(ZeroPopID)).parent(".t-popup").addClass("parpadding");
   $('a[href^="#stories"]').click(function(e) {e.preventDefault();
   setTimeout(function(){window.dispatchEvent(new Event('resize')); }, 10);
   });
   $(document).on('click','a[href="#close"], '+ZeroPopID+' .t396__filter',function(e){e.preventDefault();t390_closePopup(PopWindID.replace(/[^0-9]/gim, ""));});
   $(ZeroPopID).delegate(".t-submit", "click", function(){
   setTimeout(function(){if($(ZeroPopID+" .t-form").hasClass("js-send-form-success")){t390_closePopup(PopWindID.replace(/[^0-9]/gim, ""))}}, 1000);});
});  
</script>

9. Скопируйте ID блок с историями и вставьте его в код, в указанные места (Места указаны с помощью комментариев)
10. Скопируйте ID popup блока BF503 и тоже вставьте в код в указанное место
11. Сохраните изменения и опубликуйте страницу

Истории корректно отображаются как на десктопе, так и на мобильных. При желании, отображение на десктопе можно отключить.

Истории в Tilda как в Instagram: создание интерактивных контента

Чтобы сделать ваши истории в Tilda еще более привлекательными, вы можете использовать различные элементы интерактивности. Например, вы можете добавить опросы, вопросы, слайдеры или кнопки “Подписаться” прямо в свои истории. Это позволит вам взаимодействовать с вашей аудиторией и собирать полезную обратную связь.

Заключение

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

Смотрите обучающие видео уроки по Тильде тут

Читайте также: Автоматический скролл слайдер