Работа в Зеро-блоке

Добавление секции

Заходим в редактор и добавляем секцию "Зеро-блок". Задаём высоту секции, она меняется двумя способами:

1. Курсором мыши потяните за нижнюю границу блока

2. Нажмите на кнопку "Слои" в верхнем правом углу и введите высоту секцию.

Текст

Наведите курсор на Виджет "Текст", выберите любой вариант и перетяните мышкой на зеро-секцию. Ширина секции ограничена сеткой, чтобы элемент полностью влезал на странице - вместите его в пределах сетки.

Редактор текста такой же как и на стандартных блоках в Креатиуме. Ширина виджета задается двумя способами:

1. Курсором потяните за левую или правую границу блока

2. В панели "Слои" вручную задайте ширину виджета

Картинки

Добавляем виджет "Картинки". Редактор позволяет загрузить картинку с компьютера или выбрать изображение с встроенных фотостоков Unsplash и Pixabay.

Изменить размер изображения можно потянув за край картинки курсором мышки или задать ширину в разделе "Слои". В обоих случаях картинка будет автоматически масштабироваться, т.е. пропорции картинки останутся начальными.

Фигуры

В разделе "Фигуры" находится 70 фигур. Выберите понравившуюся фигуру и перетащите в секцию. Фигура представлена цветным вектором, которое меняется на изображение или градиент.

Прямоугольник. Эти фигуры можно изменить пропорционально, закруглить, добавить тень и эффекты.

Вектор. Их нельзя изменить в пропорциях, как прямоугольники. Изменить размер можно потянув за край мышкой или задать ширину в разделе "Слои".

Удаление блоков

Наша страница начинает перегружаться, поэтому удалим 2-3 блока. Чтобы удалить элемент нужно нажать на него курсором, открыть «Слои» и нажать на кнопку удалить (иконка мусорной корзины). Второй вариант удаления — выбрать элемент и нажать кнопку Delete на клавиатуре.

Чтобы удалить сразу несколько элементов, зажмите кнопку Shift и нажимайте на рамку элементов, после чего удалите их кнопкой Delete.

Видео

Виджет "Видео" позволяет добавлять проигрыватель на зеро-секцию. Функционал работает как и в стандартом режиме, можно загрузить видео с YouTube и Vimeo, автоматически воспроизводить и зацикливать видео.

 

 

Карты

Виджет "Карты" позволяет добавить карту Яндекс или Google на зеро-секцию. Карта растягивается на нужную ширину, а также изменяется пропорционально.

 

 

Контейнер

Виджет "Контейнер" нужен для добавления элементов из стандартного функционала редактора. Работает это следующим образом: перетягиваем контейнер на секцию и задаем ширину. При нажатие на него открывается стандартное меню редактора. Выберите элемент и перетащите в контейнер. Таким образом в зеро-блок можно добавить любой элемент.

Чтобы вернуться к редактированию зеро-секции нажмите курсором мышки на пространство вне контейнера.

 

 

Иллюстрации

В виджете "Иллюстрации" находится 12 пакетов с иллюстрациями. Перетаскивайте элементы и создавайте композиции прямо в редакторе! Изменяйте размер, комбинируйте элементы, добавляйте фигуры. Иллюстрации станут классным дополнением к сайту.

 

 

Сетка

Сетка зеро-блока нужна для визуального удобства работы с секцией. Если хотите выключить сетку, нажмите на иконку в панели «Сетка», ширина секции при этом не изменится. Чтобы обратно включить сетку, нажмите на иконку еще раз.

 

 

Выравнивание

С помощью данной функции можно выровнять элементы по краю и центру секции или относительно любого элемента. Для этого выделите нужный элемент (или несколько) и в панели задайте нужные параметры выравнивания.

 

Отражение

 

Отражайте элементы по вертикали или горизонтали. Для этого выберите нужный элемент и нажмите на кнопку отражения. Если нужно отразить сразу несколько элементов, то сгруппируйте их и выполните то же самое.

 

 

Перемещение слоев

 

Каждый новый слой накладывается на предыдущие. Чтобы переместить слой ниже или выше нажмите на кнопку "На передний план" или "На задний план" соответственно. Второй способ - открыть окно слоев и перетащить мышкой слой на нужное место.

 

 

Группировка слоев

 

Делайте карточки товаров и услуг, сложные иллюстрации или просто объединение слоев с помощь Группировки слоев. Выберите нужные элементы (левая кнопка мыши + SHIFT) и нажмите на кнопку "Сгруппировать". Теперь можно передвигать и выравнивать все элементы разом.

 

 

А также делать копии и редактировать их.

 

Слои

 

Открываем панель слоев. В самом верху расположены слои, располагающиеся в секции. Что с ними можно сделать:

"Переименовать"

Чтобы переименовать слой нажмите на кнопку "Переименовать". С разными названиями слоев работать намного проще.

 

 

"Заблокировать"

Заблокированные слои не будут передвигаться и выделяться.

 

 

"Дублировать"

Копируйте элементы и группы слоев с помощью кнопки дублирования.

 

 

"Удалить"

Ну и куда без функции удаления.

 

 

Видимость

 

С помощью настроек видимости можно скрывать элемента на разных адаптациях. Выберите нужный элемент и нажмите на иконку устройства, с которого хотите его скрыть.

 

 

Контейнер

 

Если поставить значение "секция", то координаты и ширина блока в процентах будет рассчитываться относительно сетки. А если поставить значение "окно", то относительно всего окна браузера. "Окно" лучше применять если фиксируешь всплывающее окно или фоновый рисунок.

Чтобы понять как это работает смотрите гифку ниже:

 

 

Координаты

 

Каждый элемент добавляется с привязкой "Авто". Это значит что слой привязывается к ближайшей стороне. При адаптации он будет изменять положение исходя от привязки и координат.

В режиме "ручная" самостоятельно задавайте к какому краю привязывать слой, координаты будут задаваться от выбранной стороны. Вы можете вручную прописывать координаты X-Y, это важно когда надо вымерять всё до пикселя.

 

 

Ширина

 

С помощью ширины вручную задается ширину элемента.

 

 

Поворот

 

Поворачивайте элементы на 360 градусов.

 

 

Переполнение

 

При выборе значения переполнение "показать" блок, который выходит за пределы зеро-секции, будет накладываться поверх секции.

Если установить значение "скрывать", то блок не будет показан в излишках.

Курсор

 

Допустим, у вас два контейнера, один с кнопкой, другой с картинкой. Для контейнера с кнопкой указано значение курсора "Сквозной". Тогда, если кнопка будет располагаться над картинкой и вы на нее нажмете, курсор ее проигнорирует и будет выбран контейнер с картинкой.

"Обычный" же курсор ничего не игнорирует и нажимает на самый верхний элемент.