Создание сайта-заглушки: Урок #9

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

Скачать все файлы к курсу «Сайт-заглушка»

Создание Формы обратной связи в модальном окне

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

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

Шаг #3. Перетащите блок из боковой панели в среду визуальной верстки → перетащите еще один блок. 

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

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

Шаг #6.  В разделе «Наполнение» на панели инструментов выберите «Фото» → перетащите элемент в среду визуальной верстки (в блок #1)  → загрузите фотографию, которую Вы использовали в качестве фона в шаблоне. 

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

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

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

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

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

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

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

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

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

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

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

Шаг #18. В «Конструкторе стилей» задайте название и тип стиля (название стиля: Поле ввода, тип стиля: Поле ввода (input, textarea)) → нажмите «Создать».

Выберите параметры шрифта → задайте стиль, размер и цвет текста (стиль: Ristrettopro-regular-webfont, размер текста: 18 px, цвет текста: #656565).

Выберите параметры рамки → задайте цвет рамки (цвет: #656565) → нажмите «Сохранить».

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

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

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

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

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

Шаг #25. Перейдите во вкладку «Пункты» → в поле «Список пунктов» пропишите услугу (Парикмахерские услуги) → нажмите на иконку «+» → подобным образом добавьте остальные услуги (Косметология лица и тела, Ногтевой сервис, Парикмахерские услуги, SPA программы, Массаж).

Шаг #26. В главном меню перейдите в раздел «Конструктор стилей» → задайте название и тип стиля (название стиля: Поле выбора, тип стиля: поле выбора(select)) → нажмите «Создать». 

Выберите параметры шрифта → задайте стиль, размер и цвет текста (стиль: Ristrettopro-regular-webfont, размер текста: 18 px, цвет текста: #656565).

Выберите параметры рамки → задайте цвет рамки (цвет: #656565) → нажмите «Сохранить».

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

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

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

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

Шаг #31. Перейдите во вкладку  «Оформление» → в разделе «Мои стили» выберите уже созданный вами ранее стиль стиль.

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

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

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

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

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

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

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

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

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

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

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

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

Шаг #46. Нажмите «Закрыть» → в появившейся панели «Информация» установите ширину и высоту (ширина: 25 px, высота: 25 px).

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

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

Шаг #49. Нажмите на «Подложку» → в появившейся панели «Информация» установите ширину и высоту (ширина: 40 px, высота: 40 px).

Шаг #50. Выделите элементы «Подложка» и «Закрыть» → в появившейся панели переключитесь во вкладку «Выравнивание» → выберите «По центру», «По середине». 

Шаг #51. Откройте «Панель слоев» → выделите элементы «Подложка» и «Закрыть» → выберите действие «Группировка элементов» (в списке элементов необходимо, чтобы элемент «Закрыть» был выше элемента «Подложка») → перейдите во вкладку «Ориентация» → укажите ориентацию объекта (сверху, справа) → укажите отступы от базовой точки (по оси x: 20 px, по оси y: 20 px) → нажмите «Сохранить».

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