Прототипированные блоки
В данном видеоуроке подробно показаны функции, принципы работы и возможности блоков-прототипов в CMS Smart Engine.
Применение и настройка прототипированных блоков
Шаг #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. Прототипированный блок готов.
