Меню Island

Установите два готовых блока. Меняйте тексты прямо в Zero Block.

1. В библиотеке → Мои блоки добавьте Island v2 — меню Zero Block.

2. Следом добавьте Island v2 — код T123. Всё подключается автоматически.

3. Замените названия и ссылки. Сохраните и опубликуйте страницу.

Блоки уже сохранены в вашем аккаунте. Если обновляете старую установленную версию, замените оба блока.

Дважды нажмите на текст и напишите свой. Сохраните Zero Block и опубликуйте страницу. Для третьего пункта выберите Описание 03.

Никаких Attributes и правок кода. Пять текстов находятся справа от карточки в редакторе. На сайте они скрыты и появляются вместо фотографии при наведении.

Описание 01 — Проекты
Описание 02 — Решения
Описание 03 — Истории
Описание 04 — Журнал
Описание 05 — Контакт

Для цвета, шрифта и положения всех описаний выберите Описание — оформление. Тексты отдельных пунктов меняйте в Описание 01–05.

Название и ссылка — слой «Пункт 01 — Проекты» и остальные пункты.
MOTION — «Логотип — MOTION».
Кнопка и её ссылка — «Кнопка — Начать».
Картинка — «Фото — превью».
Цвет, радиус и ширина — «Фон открытого меню» или «Фон закрытой плашки».

При изменении ширины карточки разместите внутри ссылки и фотографию. Анимация подстроится под новый размер автоматически. Проверьте адаптивные экраны.

1. Дублируйте «Пункт 05 — Контакт». Измените название и ссылку.
2. В поле CSS Class Name замените класс на island-link-6.
3. Дублируйте «Описание 05». Измените текст, укажите класс island-desc-6 и назовите слой «Описание 06».
4. Разместите новый пункт в карточке на всех экранах. Сохраните и опубликуйте.

Число связывает пункт с описанием. У каждого элемента один класс. В готовом меню классы уже стоят — для обычного редактирования их открывать не нужно.

Проверьте наличие обоих блоков, их видимость и публикацию страницы. Анимация работает на опубликованной странице. В редакторе Zero Block видна раскрытая композиция.