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

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

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