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

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

Cоздание Формы Обратной Связи

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

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

Шаг #3. Нажмите на блок в любом свободном месте → в верхнем углу блока появится иконка «Настройки» → нажмите на иконку → в «Настройках» пропишите высоту блока (160 px).

Шаг #4. В «Настройках» в нижней панели управления выберите параметры формы → задайте ширину блока (640 px).

Шаг #5. Нажмите на блок → нажмите на иконку «Оформление» → в разделе «Фон блока» нажмите «Выбрать фон» → загрузите изображение с компьютера или из интернета.

Шаг #6. Ниже в выпадающем списке выберите параметр «Заполнить».

Шаг #7. Укажите ориентацию по центру.

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

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

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

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

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

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

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

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

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

Шаг #17. Нажмите на «Подложку» → над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Настройки» (знак шестеренки) → задайте цвет (цвет: #000000, прозрачность: 0.2)

Шаг #18. Настройте порядок объектов в панели слоев → перетащите элемент «Подложка» под элемент «Закрыть».

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

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

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

Шаг #22. Нажмите на «Поле ввода» (#1) → над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Настройки» (знак шестеренки) → пропишите название поля (Имя) → пропишите текст заглушки (Ваше имя) → выберите пункт «Тип поля» → выберите тип поля (ФИО) → выберите пункт «Оформление» → выберите необходимый стиль .

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

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

Шаг #25. Нажмите на «Поле ввода» (#2) → над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Настройки» (знак шестеренки) → пропишите название поля (Телефон) → пропишите текст заглушки (Телефон) → выберите пункт «Тип поля» → выберите тип поля (Телефон).

Шаг #26. В панели «Ориентация» укажите расположение объекта (сверху, справа) → укажите отступы от базовой точки (по оси x: 5 %, по оси y: 30 px).

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

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

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

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

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

Шаг #32. Над текстом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст (Настоящим подтверждаю, что я ознакомлен и даю свое согласие на обработку моих персональных данных, в соответствии с Федеральным законом от 27.07.2006 года №152-ФЗ «О персональных данных», на условиях и для целей, определенных Положением об обработке персональных данных.).

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

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

Шаг #36. Нажмите на «Чекбокс» → над элементом (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Настройки» (знак шестеренки) → пропишите название поля (Согласие на обработку персональных данных) → выберите пункт «Оформление» → задайте толщину у линии (толщина: 2 px) → задайте цвет границы (цвет: #d5dadc) → перейдите во вкладку «Галочка» → задайте цвет галочки (цвет: #3db2d3) → выберите тип галочки → перейдите во вкладку «Углы» → настройте радиус закругления (радиус: 100%) → выберите все углы для закругления.

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

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

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

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

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

Шаг #42. Нажмите на поле ввода «Поле ввода» (Телефон) → над элементом (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Сделать поле обязательным» (знак шестеренки).

Шаг #43. Сохраните страницу.

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

Шаг #45. Подобным образом настройте остальные кнопки.

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

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

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