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

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

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

Cookies в CMS Smart Engine