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


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


Скачать все файлы к курсу «Лендинг»





Создание слайдера

Перед тем как приступить к первому уроку, вам необходимо загрузить шрифты и создать стили, которые вы будете использовать на сайте (чтобы посмотреть как загружать шрифты и создавать стили, перейдите к уроку №1 и №2 из кейса создание сайта заглушки). Стили и шрифты к данному уроку можно скачать по ссылке.



Шаг #1. На главной странице перейдите в раздел «Шаблоны» → перейдите на шаблон «Главная страница».

   

 

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

 


Шаг #3. В появившемся окне в нижнем левом углу нажмите на кнопку «Создать слайдер» (иконка «+»).



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

 

 

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

 


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

  


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

   


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



Шаг #9. Выберите изображение, которые мы загружали для «Курса №1» (узнайте, как создавать стили, перейдя по ссылке).


 

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


 

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



Шаг #12. Первый кадр Слайдера будет совпадать с центральным имиджем Заглушки → Для этого вернитесь к шаблону главной страницы. Скопируйте необходимые элементы и вставьте их на слайдер.

 

 

Шаг #13. Нажмите на текстовый элемент → над текстом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (SMART BEAUTY).



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


 

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



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



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


 

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



Шаг #19. Над элементом (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Настройки» (знак шестеренки) →  в оформлении выберите необходимый стиль для кнопки (узнайте, как создавать стили, перейдя по ссылке) → в основных параметрах наберите текст кнопки (УЗНАТЬ БОЛЬШЕ). 



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



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



Шаг #22. Выберите «Границы» → настройте «Базовые цвета» (Основной: #ffffff, прозрачность: 1; При наведении: #ffffff, прозрачность: 1) → настройте «Цвета активного пункта» (Основной: #ffffff, прозрачность: 1; При наведении: #ffffff, прозрачность: 1).



Шаг #23. Размеры «Пунктов», «Границ» и «Расстояний» остаются без изменений. 

 


Шаг #24. В разделе «Оформление» радиус закругления пунктов остается 100%.



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



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



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



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



Шаг #29. Загрузите изображение с компьютера или из интернета. 



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



Шаг #31. Нажмите на текстовый элемент (SMART BEAUTY) → над текстом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (НАРАЩИВАНИЕ РЕСНИЦ).



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



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



Шаг #34. Нажмите на текстовый элемент (Массаж 30 минут при первичном посещении) → над текстом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (Инновационная технология наращивания 3D).



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



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



Шаг #37. Нажмите на текстовый элемент (НАРАЩИВАНИЕ РЕСНИЦ) → над текстом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст («ПРОГРАММА СПА-РЕЛАКС»).



Шаг #38. Нажмите на текстовый элемент (Инновационная технология наращивания 3D) → над текстом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (Комплексный уход специально для вас).



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



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



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


 

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



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



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



Шаг #45. Нажмите на блок который мы создавали в «Курсе №1» и удалите его.



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



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



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

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

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

Cookies в CMS Smart Engine