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

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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