Создание лендинга: Урок #6

В данном уроке мы покажем, как создать анимированный слайдер.

Cоздание анимированного слайдера

Шаг #1. В разделе «Блоки» на панели инструментов выберите «Адаптивный блок» → перетащите элемент в среду визуальной верстки.

Шаг #2. Нажмите на блок в любом свободном месте → в нижнем или в верхнем углу блока появится иконка «Настройки» → нажмите на иконку.

Шаг #3. В «Настройках» укажите высоту блока - 900 px.

Шаг #4. В разделе «Медиа» на панели инструментов выберите «Текст» → перетащите элемент в среду визуальной верстки.

Шаг #5. Над текстом (в верхнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Настройки» (знак шестеренки) → выберите стиль текста (Заголовок черный (60 px)).

Шаг #6. Над текстом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (ФОТОГАЛЕРЕЯ) → в текстовом редакторе выберите ориентацию текста по центру.

Шаг #7. Нажмите на текст → в появившейся панели ««Информация» установите ширину (ширина: 96%) → в этой же панели переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (сверху, по центру) → укажите отступы от базовой точки (по оси x: 0 px, по оси y: 90 px).

Шаг #8. В разделе «Модули» на панели инструментов выберите элемент «Слайдер». Перетащите его в среду визуальной верстки → в появившемся списке выберите созданный «Создать слайдер» (иконка «+»).

Шаг #9. Дайте название слайдеру (Интерьер) → нажмите на кнопку «Создать» → перейдите в созданный слайдер.

Шаг #10. Настройте «Слайдер» нажав на иконку «три точки».

Шаг #10. В текущих настройка добавьте дополнительную опцию «Повторять анимацию и видео».

Шаг #10. Нажмите «Сохранить».

Шаг #10. Откройте только что созданный слайдер.

Шаг #11. В настройки контента страницы задайте минимальную ширину блока - 1200 px.

Шаг #12. В настройках блока удалите максимальную ширину блока → высоту блока выберите по высоте экрана → задайте минимальную высоту блока - 600 px.

Шаг #13. В разделе «Медиа» на панели инструментов выберите «Фото» → перетащите элемент в среду визуальной верстки.

Шаг #14. Загрузите изображения для блока (все текстовые и медиа файлы вы можете скачать по ссылке).

Шаг #15. Нажмите на изображение, которое вы только что загрузили → в появившейся панели «Информация» установите ширину и высоту изображения (ширина: 49.2 %, высота: 100 %) → в этой же панели переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (слева, сверху) → укажите отступы от базовой точки (по оси x: 0 %, по оси y: 0 px).

Шаг #16. Нажмите на изображение → под изображением (в нижнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Настройки» (знак шестеренки) → в разделе «Настройки фона» выберите «Заполнить» → укажите ориентацию по центру.

Шаг #17. В разделе «Медиа» на панели инструментов выберите «Фото» → перетащите элемент в среду визуальной верстки.

Шаг #18. Выберите необходимое изображение.

Шаг #19. Нажмите на изображение, которое вы только что загрузили → в появившейся панели «Информация» установите ширину и высоту изображения (ширина: 49.2 %, высота: 290 px) → в этой же панели переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (справа, сверху) → укажите отступы от базовой точки (по оси x: 0 %, по оси y: 0 px).

Шаг #20. Нажмите на изображение → под изображением (в нижнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Настройки» (знак шестеренки) → в разделе «Настройки фона» выберите «Заполнить» → укажите ориентацию по центру, сверху.

Шаг #21. Нажмите на Изображение №2 → над элементом (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Копировать» (знак «+») → над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Заменить фото» → выберите необходимое изображение → в появившейся панели «Ориентация» установите расположение Изображение №3→ укажите ориентацию объекта (справа, снизу) → укажите отступы от базовой точки (по оси x: 0 %, по оси y: 0 px).

Шаг #22. Нажмите на Изображение №3 → под изображением (в нижнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Настройки» (знак шестеренки) → в разделе «Настройки фона» выберите «Заполнить» → укажите ориентацию по центру, по середине.

Шаг #23. Нажмите на кнопку → в появившейся панели переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (по центру, по середине) → укажите отступы от базовой точки (по оси x: 0 px, по оси y: 155 px).

Шаг #24. Нажмите на Изображение №1 → над группой (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Эффекты» → выберите анимацию при появлении кадра → тип анимации: проявление → укажите задержку анимации 0 секунд.

Шаг #25. Нажмите на Изображение №2 → над группой (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Эффекты» → выберите анимацию при появлении кадра → тип анимации: поворот по горизонтали → укажите задержку анимации 0.2 секунды.

Шаг #26. Нажмите на Изображение №3 → над группой (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Эффекты» → выберите анимацию при появлении кадра → тип анимации: поворот по горизонтали → укажите задержку анимации 0.4 секунды.

Шаг #27. Добавьте новый кадр → в панели слоев нажмите на Кадр #1 → над блоком (в верхнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Копировать» (знак «+»).

Шаг #28. В нижней панели управления Слайдером переключитесь в режим отображения всех кадров в одном экране → в панели слоев выберите все элементы (зажав кнопку Ctrl) → скопируйте элементы (Ctrl+С) → вставьте их в кадр #2 (Ctrl+V).

Шаг #29. В кадре #2 в панели слоев выберите элемент Изображение №1 → над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Заменить фото» → выберите необходимое изображение.

Шаг #30. Нажмите на Изображение №1 → под изображением (в нижнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Настройки» (знак шестеренки) → в разделе «Настройки фона» выберите «Заполнить» → укажите ориентацию по центру, сверху.

Шаг #31. Нажмите на Изображение №1 → над группой (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Эффекты» → выберите анимацию при появлении кадра → тип анимации: проявление → укажите задержку анимации 0 секунд.

Шаг #32. Удалите Изображение №3.

Шаг #33. Нажмите на Изображение №2 → в появившейся панели «Информация» установите ширину и высоту изображения (ширина: 23.8 %, высота: 100 %) → в этой же панели переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (слева, сверху) → укажите отступы от базовой точки (по оси x: 50.8 %, по оси y: 0 px).

Шаг #34. Нажмите на Изображение №2 → над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Заменить фото» → выберите необходимое изображение.

Шаг #35. Нажмите на Изображение №2 → под изображением (в нижнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Настройки» (знак шестеренки) → в разделе «Настройки фона» выберите «Заполнить» → укажите ориентацию по центру, по середине.

Шаг #36.Нажмите на Изображение №2 → над группой (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Эффекты» → выберите анимацию при появлении кадра → тип анимации: переворот по вертикали → укажите задержку анимации 0.2 секунд.

Шаг #37. Нажмите на Изображение №2 → над элементом (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Копировать» (знак «+») → в появившейся панели «Ориентация» установите расположение Изображение №3→ укажите ориентацию объекта (справа, сверху) → укажите отступы от базовой точки (по оси x: 0 %, по оси y: 0 px) → нажмите на иконку «Заменить фото» → выберите необходимое изображение.

Шаг #38. Нажмите на Изображение №3 → над группой (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Эффекты» → выберите анимацию при появлении кадра → тип анимации: переворот по вертикали → укажите задержку анимации 0.4 секунд.

Шаг #39. Нажмите на Изображение №3 → под изображением (в нижнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Настройки» (знак шестеренки) → в разделе «Настройки фона» выберите «Заполнить» → укажите ориентацию по центру, по середине.

Шаг #40. В разделе «Навигация» на панели инструментов выберите элемент «Стрелки».

Шаг #41. Нажмите на элемент → над элементом (в верхнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Настройки» (знак шестеренки) → в разделе «Основное» выберите «Тип стрелочки» → в разделе «Цвет» настройте «Базовые цвета» (Основной: #000000, прозрачность: 1; При наведении: #ffffff, прозрачность: 0) → настройте «Дополнительные цвета» (Недоступно: #000000, прозрачность: 0.5)

Шаг #42. Нажмите на «Стрелки» → в появившейся панели «Информация» установите ширину и высоту изображения (ширина: 15 px, высота: 30 px) → в этой же панели переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (справа, сверху) → укажите отступы от базовой точки (по оси x: 0 %, по оси y: -75 px).

Шаг #43. В разделе «Навигация» на панели инструментов выберите элемент «Стрелки».

Шаг #44. Нажмите на элемент → над элементом (в верхнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Настройки» (знак шестеренки) → в разделе «Основное» выберите «Тип стрелочки» → в разделе «Цвет» настройте «Базовые цвета» (Основной: #000000, прозрачность: 1; При наведении: #ffffff, прозрачность: 0) → настройте «Дополнительные цвета» (Недоступно: #000000, прозрачность: 0.5).

Шаг #45. Нажмите на «Стрелки» → в появившейся панели «Информация» установите ширину и высоту изображения (ширина: 15 px, высота: 30 px) → в этой же панели переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (слева, сверху) → укажите отступы от базовой точки (по оси x: 0 %, по оси y: -75 px).

Шаг #46. Сохраните Слайдер.

Шаг #47. Вернитесь обратно к шаблону Главной страницы.

Шаг #48. В списке выберите созданный Слайдер (Нажмите на кнопку «Обновить» в нижнем правом углу, если слайдер не вывелся в общем списке).

Шаг #49. Нажмите на Слайдер → в появившейся панели Информация» установите ширину и высоту (ширина: 96 %, высота: 600 px) → переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (сверху, по середине) → укажите отступы от базовой точки (по оси x: 0 px, по оси y: 180 px).

Шаг #50. Сохраните шаблон.

Шаг #51. Перейдите в раздел «Слайдер» и настройте его (нажав на иконку с тремя точками) → скорость прокрутки установите 3 секунды → дополнительные опции можете оставить без изменений → нажмите «Сохранить».

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

Была ли полезна для вас данная статья?