Создание лендинга: Урок #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 секунды  → дополнительные опции можете оставить без изменений → нажмите «Сохранить».



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

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

Мы используем файлы Cookie, чтобы сделать работу с сайтом проще и удобнее. Нажимая кнопку «Принять Cookie» или продолжая просмотр сайта, вы разрешаете их использование.
Подробная информация
 тут

Cookies в CMS Smart Engine