Как добавить поиск в шапку на Tilda

Чтобы добавить поиск в шапку сайта на Tilda, можно использовать кастомный поиск для Zero block. Для этого нужно взять блок T838, настроить и стилизовать его, а затем с помощью скрипта перенести его в нужное место в Zero блоке.

  1. Создали ZeroBlock и наполнили контентом, включили опцию
    overflow — visible
  2. Добавили в него элемент HTML с классом searchinput
    (не удаляйте содержимое из блока, не оставляйте его пустым)
  3. Добавили блок T838 на страницу и задали ему класс uc-zero-search
  4. Добавили на страницу код в блок Другое — Т123

<style>
.uc-zero-search input , .uc-zero-search button {
    height: 50px;
}
.uc-zero-search button  {
    padding: 0 20px;
}
div.uc-zero-search {
    padding: 0 !important;
}
.t838 .t-container {
    max-width: none;
}
.t838 .t-col {
    max-width: none;
    padding: 0;
    margin: 0;
}   
.searchinput{z-index:99 !important}
</style>


<script>
document.addEventListener("DOMContentLoaded", function(){
(function () {
    let searchWrap = document.querySelector('.searchinput .tn-atom');
    let searchBlock = document.querySelector('.uc-zero-search');
    searchWrap.append(searchBlock);
})();
});
</script>

Если требуется заменить иконку в поле поиска:

<style>
svg.t838__search-icon { display: none}
.t838__blockinput {
    background-image: url(https://static.tildacdn.com/tild3365-3735-4561-a162-373563636631/2932802.svg);
    background-size: 40px 40px;
    background-position: 0px center;
    background-repeat: no-repeat;
}
</style>

Latest Comments