01
Как правильно подбирать изображения для сайта
Как добавить «Нулевой блок»
Чтобы добавить «Нулевой блок» на страницу, нажмите кнопку Zero внизу страницы. Либо выбeрите его в библиотеке блоков — он находится в самом низу, после категории «Другое».
Zero Block сохраняет основные функции обычного блока — его можно копировать, перемещать, удалять, прятать. У него есть настройки. Только вместо кнопки «Контент» кнопка «Редактировать блок». Ее нужно нажать, чтобы начать редактирование блока, откроется редактор.
Общее представление об интерфейсе
В «Нулевом блоке» две рабочих области или два «контейнера»: область сетки — Grid Container и Window Container — условное обозначение границ экранов браузера.
В Grid Container используется та же сетка, что и в Тильде, 12 колонок (1200 px). Если включить привязку объектов к Grid Contaner и располагать элементы внутри Grid Container, то они всегда будут в границах 12 колонок, независимо от размера экрана.
В Grid Container используется та же сетка, что и в Тильде, 12 колонок (1200 px). Если включить привязку объектов к Grid Contaner и располагать элементы внутри Grid Container, то они всегда будут в границах 12 колонок, независимо от размера экрана.
02
Как правильно подбирать изображения для сайта
Добавление и редактирование элементов
Чтобы добавить элемент на страницу, нажмите «плюс» в левом верхнем углу. Вы можете добавить текст, изображение, объект, кнопку, видео, тултип, блок кода, форму или галерею.
Мы можем добавить в Zero blok элементы:
1Текст
2Изображение
При загрузке картинка принимает размер фрейма, в который она загружается. Кнопка Original size в настройках возвращает изображению исходный размер.
Если вы хотите сделать фото в круге, задайте изображению радиус скругления.
Для изображения можно добавить тень. Для этого в настройках выберите цвет тени, прозрачность, смещение по оси x и y, степень размытия и рассеивания.
Любое изображение можно сделать ссылкой — чтобы при клике на него пользователь переходил на другую страницу. Укажите в настройках ссылку и назначение: открывать в том же окне или в новом.
3 Фигура
При добавлении фигуры на странице появляется квадрат, который можно трансформировать в прямоугольник, окружность или линию.
Прямоугольник: измените длины сторон, потянув мышкой за контрольные точки. Либо задайте значения в настройках элемента.
Окружность. Чтобы получился круг, задайте в настройках радиус скругления, равный половине длины стороны квадрата.
Линия. Задайте в настройках высоту прямоугольника 1-5 px, получится линия.
Фигурам можно задавать тень, обводку и ставить на них ссылки .Можно поменять цвет и накладивать градиент.
4 Кнопка
У кнопки меняется размер, цвет, радиус скругления. Можно сделать обводку и добавить тень.
Надпись на кнопке и ссылка задаются в настройках. Там же настраивается типографика: размер, тип, насыщенность и цвет шрифта.
Кнопке можно задать реакцию: при наведении мышкой на кнопку она будет менять цвет фона, текста или обводки.
5 Тултип
Tooltip — это интерактивный элемент, при наведении на который появляется подсказка с текстом и/или изображением.
Тултипу можно настроить цвет, тень, размер, задать иконку, которая будет отображаться внутри кружка, загрузить изображение, которое будет всплывать при наведении и настроить анимацию.
1Текст
2Изображение
При загрузке картинка принимает размер фрейма, в который она загружается. Кнопка Original size в настройках возвращает изображению исходный размер.
Если вы хотите сделать фото в круге, задайте изображению радиус скругления.
Для изображения можно добавить тень. Для этого в настройках выберите цвет тени, прозрачность, смещение по оси x и y, степень размытия и рассеивания.
Любое изображение можно сделать ссылкой — чтобы при клике на него пользователь переходил на другую страницу. Укажите в настройках ссылку и назначение: открывать в том же окне или в новом.
3 Фигура
При добавлении фигуры на странице появляется квадрат, который можно трансформировать в прямоугольник, окружность или линию.
Прямоугольник: измените длины сторон, потянув мышкой за контрольные точки. Либо задайте значения в настройках элемента.
Окружность. Чтобы получился круг, задайте в настройках радиус скругления, равный половине длины стороны квадрата.
Линия. Задайте в настройках высоту прямоугольника 1-5 px, получится линия.
Фигурам можно задавать тень, обводку и ставить на них ссылки .Можно поменять цвет и накладивать градиент.
4 Кнопка
У кнопки меняется размер, цвет, радиус скругления. Можно сделать обводку и добавить тень.
Надпись на кнопке и ссылка задаются в настройках. Там же настраивается типографика: размер, тип, насыщенность и цвет шрифта.
Кнопке можно задать реакцию: при наведении мышкой на кнопку она будет менять цвет фона, текста или обводки.
5 Тултип
Tooltip — это интерактивный элемент, при наведении на который появляется подсказка с текстом и/или изображением.
Тултипу можно настроить цвет, тень, размер, задать иконку, которая будет отображаться внутри кружка, загрузить изображение, которое будет всплывать при наведении и настроить анимацию.
Рассмотрим настройки галереи:
Stretch
Имеет два параметра: Cover и Contain.
Cover изображения будут полностью заполнять область
Contain изображения внутри галереи будут всегда в исходном формате
Position - Определяет положение изображения относительно области галереи. Например, при параметре Left Top изображение будет расположено относительно левого верхнего угла галереи.
Loop- Эта настройка зацикливает слайды
Slide Speed.
Определяет вид анимации смены слайдов. Имеет три параметра: None, Slow (медленно) и Fast (быстро).
Autoplay.
Определяет скорость автоматической смены слайдов в секундах.
Zoomable.
Добавляет возможность увеличивать изображения галереи по клику.
Arrows.
Набор настроек, который определяет внешний вид стрелок (кнопок).
Dots.
Набор настроек, который определяет внешний вид точек под галереей.
У каждого слайда (изображения) есть индивидуальные настройки:
В них можно задать подпись к слайду (Image Caption), alt-тег для SEO, добавить видео из YouTube или Vimeo, а также добавить ссылку, по которой будет осуществлен переход при клике на этот слайд.
6 Форма
Вы можете добавить горизонтальную или вертикальную форму в «Нулевой блок» и применить все необходимые настройки: добавить поля для ввода, подключить сервисы приема данных, задать сообщения об успехе и ошибках, стиль формы и применить к ней анимацию.
Чтобы отредактировать поля формы, перейдите в Настройки элемента формы и далее в Input fields. Здесь вы можете отредактировать и настроить поля как в блоке обычной формы.
Для подключения сервисов приема данных перейдите в Настройки элемента формы и далее в Services. Здесь вы можете подключить интегрированные с сайтом сервисы приема данных.
Настройка почты телеграм с формы
настройка внешнего вида формы
Перевод формы на русский язык
7 Галерея
В Zero Block можно добавить галерею изображений. У галереи можно изменять ширину и высоту, как у элемента Shape.
03
Как правильно подбирать изображения для сайта
Панель настроек элемента
Верхний ряд кнопок служит для быстрого выравнивания элемента относительно контейнера по вертикали и горизонтали.
Ниже — координаты положения элемента. Могут быть заданы в пикселях или в процентах. Ниже мы рассмотрим этот момент подробнее.
Начало координат обозначено синим крестиком.
Здесь же параметры элемента: ширина и высота. Единицы измерения — пиксели.
Чтобы скопировать элемент, зажмите Alt и потяните его.
Ниже регулировка прозрачности
Ниже — координаты положения элемента. Могут быть заданы в пикселях или в процентах. Ниже мы рассмотрим этот момент подробнее.
Начало координат обозначено синим крестиком.
Здесь же параметры элемента: ширина и высота. Единицы измерения — пиксели.
Чтобы скопировать элемент, зажмите Alt и потяните его.
Ниже регулировка прозрачности
Панель настроек фрейма
Панель слоев и блоков
Если кликнуть в пустое место, то в настройках будут отображаться настройки фрейма.
Высота Grid Container. Задается в пикселях с клавиатуры. Также ее можно поменять потянув мышкой за край контейнера. Ширина Grid Container фиксированная и равна 1200 px.
Цвет фона. В настройках артборда можно задать цвет фона всего блока.
Фоновое изображение. В настройках артборда можно загрузить картинку в качестве фона для блока.
Здесь же можно настроить тонирование фонового изображения (Filter Start / Filter End) и поведение контента относительно фонового изображения: Если поставить значение Fixed, то контент (текст, фигуры) во время скрола будет смещаться, а изображение — оставаться на месте. абсолют - наложения блока поверх слоев
висибл - открытый блок элементы будет видно на соседних блоков
Высота Grid Container. Задается в пикселях с клавиатуры. Также ее можно поменять потянув мышкой за край контейнера. Ширина Grid Container фиксированная и равна 1200 px.
Цвет фона. В настройках артборда можно задать цвет фона всего блока.
Фоновое изображение. В настройках артборда можно загрузить картинку в качестве фона для блока.
Здесь же можно настроить тонирование фонового изображения (Filter Start / Filter End) и поведение контента относительно фонового изображения: Если поставить значение Fixed, то контент (текст, фигуры) во время скрола будет смещаться, а изображение — оставаться на месте. абсолют - наложения блока поверх слоев
висибл - открытый блок элементы будет видно на соседних блоков
лаерс - слои можно скрыть глазом можно закрепить на месте
зеро блоки теперь можно переключать внутри зеро блока
зеро блоки теперь можно переключать внутри зеро блока
04
Как правильно подбирать изображения для сайта
Редактирование элемента мышкой
В Zero Block поддерживаются все основные манипуляции, выполняемые с помощью мышки: элементы можно перемещать, менять размер, копировать (зажав клавишу Alt), выделять несколько объектов.
В элементах с изображением можно поменять размер, но пропорции исходной картинки всегда сохранятся.
В элементах с текстом высота меняется автоматически, в зависимости от объема текста. Размер кнопки и фигуры меняется во всех направлениях.
Для операций с несколькими объектами нажмите: Cmd+A (выделить все объекты), либо, удерживая Shift, выделите мышкой те объекты, с которыми нужно работать.
Выравнивание
Когда выделено несколько объектов, их можно выровнять по горизонтали и по вертикали относительно друг друга или относительно контейнера
В элементах с изображением можно поменять размер, но пропорции исходной картинки всегда сохранятся.
В элементах с текстом высота меняется автоматически, в зависимости от объема текста. Размер кнопки и фигуры меняется во всех направлениях.
Для операций с несколькими объектами нажмите: Cmd+A (выделить все объекты), либо, удерживая Shift, выделите мышкой те объекты, с которыми нужно работать.
Выравнивание
Когда выделено несколько объектов, их можно выровнять по горизонтали и по вертикали относительно друг друга или относительно контейнера
Редактирование через панель настроек
Полные настройки элемента открываются при клике на кнопку Settings в правом нижнем углу экрана.
Доп материалы для ознакомления
Домашнее задание
Перенесите дизайн из Фигма в Тильда
