Прототипированные блоки 

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

 

 

Шаг #2. Выберите ширину прототипа -980/1200/1400 px.

 


Шаг #3. В «Настройках» укажите высоту блока - 640 px.



Шаг #4. Выберите из списка необходимый вам прототип → воспользуйтесь сортировкой → выберите условие (3 логические колонки) → выберите необходимый дизайн.

 

 

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

 


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

  


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

 


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



Шаг #9. Подобным образом настройте оставшиеся элементы.


 

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

 


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



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

 


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



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

 


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



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

 


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



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


 

Шаг #19. Как и в обычном блоке, вы можете применить к тексту свой стиль → не выходя из режима редактирования выделите весь текст → в текстовом редакторе выберите необходимый вам стиль. 



Шаг #20. В прототипированном блоке вы можете перемещать все элементы, как вам необходимо. Например, вы можете выделить все элементы в блоке и сместить их вниз или вверх, используя клавиши клавиатуры (стрелочки вверх/вниз). Также для перемещения объектов вы можете воспользоваться инструментом «Ориентация». Так же для перемещения объектов вы можете воспользоваться инструментом "Ориентация".



Шаг #21.  Все прототипы имеют фиксированную ширину контента в px. При необходимости вы можете изменить ширину и сделать блок Адаптивным в настройках блока.  

 


Шаг #22.  Чтобы сделать блок адаптивным, для начала поменяйте настройки ориентации у групп. 



Шаг #23. Нажмите на «Группу №1» → в появившейся панели ««Информация» переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (сверху, слева) → укажите отступы от базовой точки по оси X в %.



Шаг #24. Нажмите на «Группу №2» → в появившейся панели ««Информация» переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (сверху, по центру).



Шаг #25. Нажмите на «Группу №3» → в появившейся панели ««Информация» переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (сверху, справа) → отступы от базовой точки по оси X укажите в % .

 


Шаг #26. Нажмите на блок в любом свободном месте → в нижнем или в верхнем углу блока появится иконка «Настройки» → нажмите на иконку.

 


Шаг #27. В «Настройках» укажите максимальную ширину блока - 1400 px.



Шаг #28. Прототипированный блок готов.