Как скрыть элементы в 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. Итак, перейдем от слов к делу и узнаем, как же правильно использовать медиа запросы в зеро блоке для скрытия тех или иных элементов в нужный момент:
- Создайте зеро блок или откройте уже существующий
- Выберите элемент, который необходимо скрыть, например при достижении размера экрана 768px
- Нажмите на выбранный элемент правой кнопкой мыши и выберите «Add CSS Class Name»
- В появившемся поле введите любой класс для этого элемента
- Нажмите на кнопку «+» и выберите «Add HTML»
- Откройте HTML элемент
- Скопируйте и вставьте в него следующий кусок кода:
<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>
- Вместо класса в коде пропишите класс вашего элемента в zero block
- Сохраните изменения и опубликуйте страницу
Теперь, когда размер экрана будет равен 768px или меньше, элемент с классом elementnone примет свойства display со значением none (display: none;) и исчезнет.
Заключение
Теперь, когда вы освоили искусство скрытия элементов в Zero Block при уменьшении экрана с использованием медиа-запросов в Tilda Publishing, ваш сайт готов к показам. Адаптивность — это ключ к успешному взаимодействию с вашим контентом. Медиа-запросы делают этот процесс удивительно простым и эффективным. Убедитесь в том, как легко создать веб-страницы, которые идеально смотрятся на любом устройстве!
Смотрите обучающие видео уроки по Тильде тут
Читайте также: Пагинация в Tilda