Конкурс close

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

Tilda Publishing

Как скрыть элементы в Zero Block при уменьшении экрана. Медиа-запросы в Tilda Publishing

Введение

Адаптация отдельных элементов в Zero Block с использованием медиа-запросов. Разработчиками в Tilda предусмотрены несколько инструментов, обеспечивающих адаптивность создаваемых сайтов на этой платформе. В стандартных блоках адаптивность настраивается автоматически, без вмешательства разработчика сайтов, а в нулевом блоке настройка адаптивности сводится к ручному перетаскиванию элементов в рамках видимой области для разных устройств. Можно настроить отображение или скрытие блока целиком на для различных устройств, но, когда дело доходит до конкретных элементов, стандартные функции тильды оказываются бессильны. В этом случае на помощь приходят медиа запросы в CSS. В этой статье мы рассмотрим способ как скрыть элементы в Zero Block при уменьшении экрана, используя медиа запросы.

Медиа-запросы в Tilda Publishing: почему они важны?

Перед тем, как углубиться в детали, давайте разберемся, почему скрытие элементов в Zero Block при уменьшении экрана стало столь актуальным. Современные сайты посещают не только на больших мониторах, но и на ноутбуках, планшетах и смартфонах. Соответственно, создание адаптивного дизайна становится обязательным, и медиа-запросы — это мощный инструмент, который делает это возможным.

Zero Block в Tilda Publishing: Адаптация без границ

Zero Block в Tilda Publishing предоставляет удивительные возможности для дизайна сайта. Однако, чтобы сделать ваш сайт по-настоящему универсальным, нужно обратить внимание на адаптацию. Именно здесь медиа-запросы в Tilda Publishing выходят на передний план, позволяя скрывать или отображать элементы в зависимости от размеров экрана.

Медиа-запросы в Tilda Publishing: как скрыть элементы в Zero Block при уменьшении экрана

Как настроить медиа-запросы в Tilda для скрытия элементов в Zero Block. Итак, перейдем от слов к делу и узнаем, как же правильно использовать медиа запросы в зеро блоке для скрытия тех или иных элементов в нужный момент:

  1. Создайте зеро блок или откройте уже существующий
  2. Выберите элемент, который необходимо скрыть, например при достижении размера экрана 768px
  3. Нажмите на выбранный элемент правой кнопкой мыши и выберите «Add CSS Class Name»
  4. В появившемся поле введите любой класс для этого элемента
  5. Нажмите на кнопку «+» и выберите «Add HTML»
  6. Откройте HTML элемент
  7. Скопируйте и вставьте в него следующий кусок кода:
<style>

@media only screen and (max-width: 768px) { /* Размер экрана, при котором элемент исчезнет*/
  .elementnone { /* Класс вашего элемента в zero block*/
    display: none;
  }
}

/* Новый меди запрос для другого размера экрана */
@media only screen and (max-width: 950px) { /* Размер экрана, при котором элемент исчезнет*/

  .elementnone2 { /* Класс вашего элемента в zero block*/

    display: none;
  }
}
</style>
  1. Вместо класса в коде пропишите класс вашего элемента в zero block
  2. Сохраните изменения и опубликуйте страницу

Теперь, когда размер экрана будет равен 768px или меньше, элемент с классом elementnone примет свойства display со значением none (display: none;) и исчезнет.

Заключение

Теперь, когда вы освоили искусство скрытия элементов в Zero Block при уменьшении экрана с использованием медиа-запросов в Tilda Publishing, ваш сайт готов к показам. Адаптивность — это ключ к успешному взаимодействию с вашим контентом. Медиа-запросы делают этот процесс удивительно простым и эффективным. Убедитесь в том, как легко создать веб-страницы, которые идеально смотрятся на любом устройстве!

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

Читайте также: Пагинация в Tilda