Зеро блок нео-верстка

МЕНЮ

Выключка текста по ширине.Everything should be made as simple as possible, but not simpler.Everything should be made as simple as possible, but not simpler.Everything should be made as simple as possible, but not simpler.Everything should be made as simple as possible, but not simpler.Everything should be made as simple as possible, but not simpler.Everything should be made as simple as possible, but not simpler.Everything should be made as simple as possible, but not simpler.Everything should be made as simple as possible, but not simpler.

Текстовый блок. Межстрочка в тильде = процент в фигме. Чтобы совпадало и межбуквенное расстояние, то прописываем в фигме пиксели
Можно копировать стили и вставлять в другой текст
Можно выбрать шрифт, не выходя из Тильды и посмотреть — как он смотрится
Visibility. Можно скрыть элемент в любом брейкпоинте и скрыт он будет только в нем

LET'S GO!

Картинка меняет пропорции фото равномерно. Есть возможность прописать тег ALT для изображения. Полезно для поисковика и для людей с ограниченными возможностями. Можно выключить Lazy Load, актуально для первого экрана. Pointer Events — выключаем видимость элемента курсором (стоматология)

Посмотреть настройки EDIT (настройка Flip)
Есть возможность зафиксировать фото по скролу внутри самого шейпа
Можно назначить гибкое позиционирование как в px так и в процентах
С недавних пор в шейпе появилась возможность прописать тег ALT для изображения

В шейп или картинку можно загрузить иконки или фото из библиотеки Тильды

Текстовый блок. Межстрочка в тильде = процент в фигме. Чтобы совпадало и межбуквенное расстояние, то прописываем в фигме пиксели
Можно копировать стили и вставлять в другой текст
Можно выбрать шрифт, не выходя из Тильды и посмотреть — как он смотрится
Visibility. Можно скрыть элемент в любом брейкпоинте и скрыт он будет только в нем
Картинка меняет пропорции фото равномерно. Есть возможность прописать тег ALT для изображения. Полезно для поисковика и для людей с ограниченными возможностями. Можно выключить Lazy Load, актуально для первого экрана. Pointer Events — выключаем видимость элемента курсором (стоматология)

Посмотреть настройки EDIT (настройка Flip)
Есть возможность зафиксировать фото по скролу внутри самого шейпа
Можно назначить гибкое позиционирование как в px так и в процентах
С недавних пор в шейпе появилась возможность прописать тег ALT для изображения

В шейп или картинку можно загрузить иконки или фото из библиотеки Тильды

Видео. Можно подтянуть видео из ВК (показать инструкцию)
Можно подтянуть видео из своего хостинга в MP4 с автоплеем и без звука. Звук запрещен с автоплеем. Можно зациклить видео по кругу. Спрятать элементы управления. Управлять заполненностью видео-фрейма контентом (посмотрим на примере Кузьмы)
В mp4 и WEBM мы можем загружать свои видео весом до 5 мб на хостинг Тильды
Как подгрузим картинку, появляется значок плей

HTML
Можно использовать код в любом месте вашего сайта
Карта от яндекса, гугла
3-d туры
Таймеры обратного отсчета
Виджеты сервисов бронирования
И много много всего...

Hello world!

Тултипы. Можно добавить фото + скруглить его с помощью CSS
Можно добавить разную иконку на сам тултип

Curiosity about life in all its aspects, I think, is still the secret of great creative people.

Форма.
Назначаем имя форме
Пишем текст с сообщением об успешной отправке
Можно сделать два поля в ряд

Галерея. Стрелки можно расположить в разных местах
Можно написать текст и поместить внутрь картинки. После добавления текста появляются настройки текста
Можно добавить ссылку на видео с Ютуб или Вимео. Появится кнопка Play с настройками
Можно добавить ссылку на внутренний или внешний ресурс. Появятся настройки ссылок для SEO
Точки добавляем на мобилке, стрелки на десктопе
Можно скрыть все элементы управления и растянуть слайдер на на всю ширину экрана в %
Слайдеры на первых экранах часто используют известные маркетплейсы, но будьте аккуратны

Вектор
Я использую фигму. В тильде этот инструмент находится на совсем начальной стадии своего развития. Можно использовать разве что простые решения. Например нарисовать волну, простую фигуру или загрузить иконку в SVG + перекрасить ее в подходящий цвет
Можно сконвертировать в изображение

Демонстрация настройки Position Absolute + лайфХак, как убрать значок Made on Tilda

We are a leading firm in providing quality and value to our customers. Each member of our team has at least 5 years of legal experience. We love what we do.

Демонстрация настройки Overflow: auto

Настройка Isolation предотвращает конфликты z-индекса — в проектах, где несколько элементов имеют разные значения z-индекса, свойство isolation может создавать независимые контексты, чтобы предотвратить проблемы с многоуровневостью

Направляющие можно скрывать и показывать разные на разных брейкпоинтах. Можно прописывать координаты. Можно использовать как силовые линии при расположении элементов по Window в px. Отличный помощник не только при вертикальном выравнивании, но и при горизонтальном выравнивании

Горячие клавиши, которые я использую
Alt — смотреть расстояние между элементами
[ — занести элементы в самый низ
] — занести элементы в самый верх
Ctrl + L — показать/скрыть блок со слоями
Зажатое колесико или зажатый пробел позволяют перемещать область зеро блока
Ctrl + колесико вперед — приблизить рабочую область
Ctrl + колесико назад — отдалить рабочую область
Ctrl + H — показать горизонтальную направляющую
Ctrl + Shift + H — показать вертикальную направляющую
Ctrl + 1...5 — переключаться между брейкпоинтами
Ctrl + C — копировать элементы
Ctrl + V — вставить элементы
Ctrl + D — дублировать элемент
Ctrl + Z — откатить шаг назад
Ctrl + A — выделить все элементы рабочей области
L — заблокировать/разблокировать элемент элемент
Перемещение предмета с зажатой клавишей Shift
Цифрами от 1 до 9 можно управлять непрозрачностью элементов