Loading...
Сладкая подписка к 8 Марта
У нас подарок
Акция
6 — 11 марта
Скачать расширение
Техподдержка
Модификации
Промпты
AI-инструменты
База знаний
Профиль
Подписка
Партнерка
Новости
Шаблоны
Сладкая подписка к 8 Марта
У нас подарок
Акция
6 — 11 марта
....
NLM169 Время настройки: 3 минуты

Как добавить поиск в зеро блок на Тильде?

Эта модификация добавляет на ваш сайт поле поиска в Зеро блок, которое позволяет пользователям удобно и быстро находить необходимую информацию.
Она работает в связке с другими нашими решениями, чтобы вы могли пройти весь путь от макета до запуска сайта, не привлекая разработчиков.
Эта модификация — часть системы инструментов для работы с Тильдой
Перенесите макет в Тильду за 10 минут

Начните работу правильно: экспортируйте дизайн из Figma сразу с адаптацией и авто-лейаутом. Вы получаете идеальный фундамент для дальнейшей настройки, не тратя часы на переверстку вручную.
Плагин для Figma
AI-ассистент
Генератор CSS-стилей
Модификации
Расширение для Тильды
Работайте с модификациями внутри привычного редактора Тильды

Макет перенесен? Библиотека модификаций и продвинутые инструменты для верстки теперь встроены в интерфейс. Открываете редактор, и всё под рукой.
Ваш персональный AI-ассистент для Тильды

Остались нестандартные задачи? Попросите нейросеть написать уникальный скрипт, поправить анимацию или сгенерировать контент. Идеальный штрих для сдачи проекта без компромиссов.
Стандартные блоки Tilda не вписываются в дизайн?

Генератор стилей перекрасит элементы и поля, добавит тени, отступы или скругления — без написания кода.
Добавьте уникальные функции в один клик

База готова — время оживить проект. Выбирайте из 200+ готовых решений (слайдеры, формы, эффекты), которые легко «надеваются» на ваши блоки через интерфейс Расширения.

Посмотрите, как будет выглядеть модификация на вашем сайте.

Дизайн настраиваете сами — наша модификация добавит нужный эффект.
Инструкция
Подготовка страницы:
  1. Настрой Зеро блок в котором будет поиск, наполни его нужным контентом.
  2. Добавь в Зеро блок элемент Shape и убери заливку цветов, добавь этому элементу класс. Важно! Расположение и длина окна поиска будет зависеть от расположения и длины Shape.
  3. Добавь на страницу блок T838. Настрой стили для поля поиска по кнопке «Контент» в блоке.
Переходим к настройкам модификации:
  1. Для того чтобы настроить модификацию заполни следующие поля в генераторе:
  • «Высота поиска (px)» — регулирует высоту поля поиска. (Ширину поля можно регулировать шириной HTML-элемента);
  • «z-index поиска» — при необходимости укажи z-index для поля с поиском;
  • «Класс элемента в зеро» — укажи класс Shape-элемента который добавил в Зеро блоке. Что бы указать class у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь class;
  • «ID блока T838» — укажи ID блока стандратного блока с поиском;
  • «Показывать кнопку поиска» — выбери «Да» или «Нет» в зависимости от потребностей сайта, настройка регулирует показ кнопки рядом с полем поиска;
  • «Ссылка на иконку поиска» — по желанию можешь заменить стандартную иконку поиска на свою. Чтобы получить ссылку на иконку для вставки в модификацию, сделай следующее: добавь на страницу галерею GL12 и загрузи в неё изображение, далее копируешь ссылку на него и вставляешь в генератор в указанное поле. Формат файла советуем использовать svg или png.
2. Копируешь сгенерированный HTML код и вставляешь его в блок Т123.

Имей ввиду:

  • Если в зероблоке есть автоскейл, он будет применяться также к элементам в строке поиска, включая шрифт в результатах выдачи и крестик для закрытия.
  • Если для настройки «Показывать кнопку поиска» выбираете «Нет», это отключит только кнопку рядом с полем поиска. Иконку поиска полностью скрыть нельзя — она всегда отображается. Но можно заменить стандартную иконку на свою в настройке «Ссылка на иконку поиска».

Смотрите, как быстро установить модификацию

Вы можете скачать бесплатный шаблон и использовать его для тренировки по настройке модификации или переработать под свой дизайн.

Сгенерируйте код для своего сайта

Копировать код
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Копировать код
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1

Популярные решения для вашего сайта

Не нашли нужное решение?

Часто задаваемые вопросы

Наши видеоинструкции позволяют внедрять модификации за 2−5 минут даже без технических знаний. Всё делается прямо в редакторе Тильды, без ручного редактирования кода
Не нашли свой вопрос?
Напишите нам — мы поможем и подскажем оптимальное решение для вашего сайта.
Не нашли свой вопрос?
Напишите нам — мы поможем и подскажем оптимальное решение для вашего сайта.
Есть идеи по улучшению этой модификации или созданию новой?
Поделись своим предложением или проголосуй за понравившуюся идею. Наиболее популярные будем реализовывать.
Не забудь подписаться, чтобы быть в курсе последних обновлений.