Как сделать 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, следуйте инструкции:
- Создайте zero block
- Очистите содержимое блока и уменьшите его высоту
- Нажмите на кнопку «+» и выберите «Add Shape»
- В настройках shape в пункте «SHAPE» выберите «Circle» из выпадающего списка
- Удалите фоновую заливку shape
- Во вкладке «LINK» в поле «URL» пропишите ссылку «#stories»
- Нажмите на кнопку «Upload file» и загрузите иконку для ваших историй
- Сохраните изменения и закройте zero block
Мы создали зеро блок, в котором содержится шейп с иконкой в качестве кнопки. Эта кнопка будет вызывать окно с историями. Перейдем к созданию самих историй:

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


- Скопируйте ID блок с историями и вставьте его в код, в указанные места (Места указаны с помощью комментариев)
- Скопируйте ID popup блока BF503 и тоже вставьте в код в указанное место
- Сохраните изменения и опубликуйте страницу
Истории корректно отображаются как на десктопе, так и на мобильных. При желании, отображение на десктопе можно отключить.
Истории в Tilda как в Instagram: создание интерактивных контента
Чтобы сделать ваши истории в Tilda еще более привлекательными, вы можете использовать различные элементы интерактивности. Например, вы можете добавить опросы, вопросы, слайдеры или кнопки “Подписаться” прямо в свои истории. Это позволит вам взаимодействовать с вашей аудиторией и собирать полезную обратную связь.
Заключение
Создание Instagram историй в Tilda с использованием zero block предоставляет вам уникальную возможность привлекать аудиторию на свой веб-сайт и продвигать ваш бренд. Следуя рекомендациям по SEO оптимизации и создавая интерактивный контент, вы сможете добиться максимальной эффективности от ваших историй в Tilda, подобно тому, как это делается в Instagram.
Смотрите обучающие видео уроки по Тильде тут
Читайте также: Автоматический скролл слайдер