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

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

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

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

Видео: Как добавить Зероблок на landing page Creatium

Текст

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

Видео: Как добавить текст в зероблоке на landing page Creatium

Картинки 

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

Видео: Как добавить картинку в зероблок на landing page Creatium

Фигуры

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

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

Видео: Использование фигуры в зероблоке на landing page Creatium

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

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

Видео: Как удалить слой в зероблоке на landing page Creatium

Видео

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

Видео: Ютуб видео в зероблоке на landing page Creatium

Карты

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

Видео: Яндекс и google карты в зероблок на lending page Creatium

Контейнер

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

Видео: Добавление любых компонентов меню в зероблок lending page Creatium

Иллюстрации

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

Видео: Иллюстрации в зероблок landing page Creatium

Сетка 

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

Видео: Выравнивание по сетке в зероблок landing page Creatium

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

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

Видео: Одновременное выравнивание слоев в зероблоке landing page Creatium

Отражение

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

Видео: Разворот слоя в зероблок landing page Creatium

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

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

Видео: Наложение слоев в зероблок landing page Creatium

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

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

Видео: Совмещение слоев в зероблок landing page Creatium

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

Видео: Дублирование слоев в зероблок и изменение их фона landing page Creatium

Слои

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

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

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

Видео: Заголовки слоев зероблок landing page Creatium

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

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

Видео: Блокировка слоя в зероблоке landing page Creatium

Дублировать 

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

Видео: Дублирование кнопки в зероблок landing page Creatium

Удалить

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

Видео: Удаление кнопки в зеро блок на креатиум

Видимость

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

Видео: Адаптивная верстка зероблока landing page Creatium

Контейнер

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

Видео: Публикация и редактирование зероблока landing page Creatium

Координаты

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

Видео: Привязка элементов для адаптивной верстки в зероблоке landing page creatium

Ширина

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

Видео: Поворот элементов в зероблок landing page Creatium

Поворот

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

Видео: Слои за границей зероблока landing page creatium

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

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

Видео: Слои за границей зероблока landing page creatium

Курсор

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

Видео: Изменение функции слоя в зероблоке landing page Creatium