Верстка макета
На данной странице рассматривается пример работы с редатором дизайна сайта. Если вам нужно описание самого редактора, то вы можете ознакомится с ним на странице руководства пользователя.
В качестве примера, рассмотрим верстку стандартного макета:
Сначала нужно разделить макет, на необходимые блоки. Для выбранного макета, это выглядит следующий образом:
После того как схема макета готова, можно приступать к верстке. Начнем верстать с верхней части макета, для этого перенесем из панели компонентом в рабочую область следующие компоненты:
- Логотип
- Поисковая строка
- Произвольный HTML
Переносить нужно именно в данном порядке! После проведенных действий, в рабочей области будет примерно такая картина:
Все компоненты во всю ширину страницы, хотя по макету они должны быть в одну строку. Чтобы разместить компоненты в одну строку, необходимо задать им размеры. Для этого нужно выбрать компонет (щелкнуть 1 раз левой кнопкой мыши по нему) и в свойствах задать нужные размеры. Рассмотрим на примере логотипа, и установим параметры как на картинке:
Можно заметить, что для разных размеров экрана, мы установили разные значения, сделано это для того чтобы макет "подстраивался" под размеры экрана и изменял размеры компонентов. Установим также размеры для остальных компонентов.
Для строки поиска:
Для произвольного HTML:
Теперь проверим как реагирует наш шаблон, на различные размеры экрана. Изменить текущий размер экрана можно с помощью панели параметров отображения страниц, в левом верхнем углу. Использовать нужно именно данный инструмент, уменьшение размера окна браузера не даст корректного поведения.
Просмотр макета на телефоне:
Просмотр макета на планшете:
Просмотр макета на ноутбуке (средний размер экрана):
Просмотр макета на ПК (большой экран):
Теперь преступим к заполнению самих компонентов. Компоненты "Логотип" и "Поисковая строка" не имеют никаких параметров для заполнения, однако "Поисковая строка" не стилизованный компонент, поэтому его нужно стилизовать с помощью CSS.
Чтобы стилизовать компонент нужно указать ему CSS класс, для этого выбираем компонент "Поисковая строка" в рабочей области и в свойствах компонента задаем название:
Чтобы добавить в макет CSS нужно соответствующий компонент добавить на страницу:
Добавлять стили нужно на самый верх, чтобы ваш макет сразу же отображался так, как вы задумали. В свойствах данного компонента задаем нужные нам стили:
CSS код стилей:
.elementSearch {
display: table;
width: 100%;
}
.elementSearch__inputWrap {
display: table-cell;
}
.elementSearch__input {
width: 100%;
height: 3rem;
border: 1px solid silver;
border-right: 0;
border-radius: 5px 0px 0px 5px;
padding: 0.5rem 1rem;
}
.elementSearch__submitWrap {
width: 1%;
display: table-cell;
vertical-align: middle;
}
.elementSearch__submit {
font-size: 1em;
background: red;
color: white;
border: none;
height: 3rem;
border-radius: 0px 5px 5px 0px;
position: relative;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.elementSearch__submit::before {
content: "\e003";
position: absolute;
font-size:1.8rem;
padding-top:0.5rem;
top: 0;
left: 0;
bottom: 0;
right: 5px;
background: red;
}
Если вы не знакомы с CSS или версткой, то можете воспользоваться готовыми шаблонами в панели управления магазином и настроить их, под ваши нужды.
Перейдем к указанию телефона. Для этого выбираем нужный компонент и в визуальном редакторе, вводим нужные данные:
Подробнее познакомиться с функционалом редактора можно на странице руководства пользователя.
После проведенных действий, макет должен выглядеть так (за исключением логотипа, он подставляется в зависимости от магазина):
Переходим к добавлению меню, для этого из панели инструментов добавляем в рабочую область компонент "Меню".
Чтобы добавить элементы в меню, нужно нажать кнопку "Добавить" в панели свойств компонента:
Добавим пункты меню "Главная", "Каталог", "Новости" и "Контакты":
Указанные ссылки стандартные и работают для всех магазинов. Если вы хотите удалить пункт меню, то нужно нажать кнопку "Удалить" под этим пунктом.
После проведенных действий, макет должен выглядеть так:
Стилизуем меню, аналогичным для строки поиска способом и получаем:
Для того чтобы добавить баннер, понадобиться компонент "Изображение". Переносим его из панели компонентов в рабочую область:
В свойствах компонента, указываем ширину 100% и загружаем с компьютера нужную картинку. После загрузки картинки на сервер, поле "URL картинки" заполнится автоматически.
Теперь макет должен выглядеть так:
Теперь необходимо разметить область на 2 столбца, для этого компонент «Контейнер» нужно перенести в рабочую область 2 раза (левый и правый столбец):
Теперь, как размечали шапку, также нужно разметить наши контейнеры. Для левого указываем:
Для правого:
После чего, должна получиться такая картина:
Теперь заполняем полученные столбцы. Левый – список категорий и новостями, правый – содержимым страницы. Необходимо настроить внешний вид отображения категорий и новостей.
Для категорий указываем:
Для новостей:
После произведенных действий, макет должен иметь примерно следующий вид:
Стилизуем категории и новости:
Нижняя часть макета, или иначе подвал, состоит из одного компонента "Произвольный HTML":
Также на макете присутствует заголовок новостей, в левом блоке. Для того чтобы добавить его, нужно между категориями и новостями, вставить компонент "Произвольный HTML":
И привести его с помощью визуального редактора к макетному виду (меняет текст и размер, указываем цвет, добавляем отступы):
В итоге должен получиться приблизительно следующий макет:
Доводим с помощью CSS стилей до макетного вида, и в итоге получаем:
Компонент "Содержимое страницы", будет меняться в зависимости от того, на какой странице мы сейчас находимся.
Для создания сложных эффектов и нестандартных макетов, необходимы хотя бы начальные знания верстки и CSS, поэтому рекомендуем вам пользоваться готовыми шаблонами и подстраивать их под ваши нужды. Выбрать готовый шаблон можно в панели управления магазином.