Customize website color scheme for your brand. Use new design template of OT Box called "Elastic"Настраиваем цветовое оформление сайта под ваш бренд. Используем новый дизайн Коробки ОТ «Elastic».
| Оглавление | ||||
|---|---|---|---|---|
|
Включаем тему дизайна «Elastic»
Открываем админку раздел «Конфигурация» и вкладку «Система».
В разделе «Общее» ищем строчку «Тема дизайна» и выбираем из списка «elastic». Выбор сохраняем нажав на кнопку с галочкой.
Настраиваем дизайн сайта под себя
Переходим в раздел «Конфигурация» на вкладку «Конструкция сайта» чтобы настроить выбранный дизайн.
Прокручиваем страницу вниз до блока «Тема дизайна». Здесь будет производиться вся настройка.
Меняем цвета: управление дизайном
Если не менять цвета, то дизайн останется в базовой серо-оранжевой расцветке, разработанной дизайнерами ОТ.
Рекомендуем оставить дизайн по умолчанию, если вы начинающий предприниматель и пока не занимались разработкой фирменного стиля.
Однако, если у вас уже готов фирменный стиль, лучше перекрасить сайт под цвета вашего бренда.
Есть 4 основных цвета дизайна.
Чтобы их изменить в разделе «Конфигурация → Конструкция сайта → Тема дизайна» выбираем кликом мышки поле
При клике откроется цветовая палитра, где можно выбрать нужный цвет с помощью мышки или указать RGB значения из фотошопа.
Кстати, цвет можно указать в разных форматах, не только в RGB. Для выбора формата кликайте мышкой по специальным треугольникам в меню форматов.
После того как все цвета изменены, необходимо нажать кнопку «Сохранить».
Кроме 4 цветов дизайна есть еще 4 цвета информационных сообщений. Рекомендуем оставить их без изменения или выбрать не менее яркие цвета. Цвет информационных сообщений в админке Коробки ОТ выбран в соответствии со стандартами, к которым привык человек в обычной жизни.
Меняем цвет фона
По умолчанию цвет фона белый. Фон можно увидеть в карточке товара, а также на главной странице после блока с каруселью.
Чтобы изменить фоновый цвет в разделе «Конфигурация → Конструкция сайта → Тема дизайна» выбираем кликом мышки поле.
При клике откроется цветовая палитра, где можно выбрать нужный цвет с помощью мышки или указать RGB значения из фотошопа.
Кстати, цвет можно указать в разных форматах, не только в RGB. Для выбора формата кликайте мышкой по специальным треугольникам в меню форматов.
После того как цвет фона изменен, необходимо нажать кнопку «Сохранить».
Добавляем фоновое изображение
Фоновое изображение загружается с вашего компьютера и используется на заднем плане. Важно учесть несколько рекомендаций:
- Чем больше размер фонового изображения, тем дольше будет загрузка страницы сайта. Иногда пользователи могут не дождаться полной загрузки сайта и уйти.
- Яркий фон отвлекает и раздражает глаза, поэтому сокращается время пребывания на сайте.
- Интерфейс на некоторых страницах закрывает фон почти полностью, поэтому не рекомендуется на фон ставить какую-то полезную информацию (номера телефонов, адреса, сообщения и тп). А также стоит это учитывать при выборе изображения, чтобы смысл не менялся и не искажался.
Чтобы загрузить фоновое изображение нажимаем кнопку «Изменить» (по умолчанию фоновое изображение отсутствует).
Загруженное изображение сохранится автоматически, но чтобы оно появилось на сайте, необходимо нажать кнопку «Сохранить».
Далее надо задать привязку фона. В таблицах ниже показано как выглядит каждая настройка. Для примера взят рисунок цветка и показано как будет выглядеть с учетом интерфейса (в некоторых местах рисунок будет частично скрыт строкой меню или поиска).
Повтор фона
Настройка | Внешний вид сайта |
|---|---|
| Не повторять | |
| Замостить | |
| Замостить по горизонтали | |
Замостить по вертикали |
Позиция фона
Выбирается с какой стороны будет изображение (или начало замощения)
Возьмем для наглядности настройку «Замостить по вертикали»
Настройка | Внешний вид сайта |
|---|---|
По центру | |
Слева | |
| Справа |
Привязка фона
Если зафиксировать изображение, то оно всегда будет «прижато» к той позиции, которую ему выбрали. То есть при прокрутке сайта оно будет оставаться на заданном месте. На примере покажем фон с позицией «слева» и как выглядит начало и конец страницы.
Настройка | Начало страницы | Конец страницы |
|---|---|---|
Зафиксировать (наблюдаем за позицией «Цветочка» слева вверху). Какой бы длины не была страница, при прокрутке изображение всегда будет видно в его изначальном виде. Фон привязан к экрану, а не странице. Удобно использовать, когда ваш фон имеет большой рисунок размером с экран и вы хотите всегда оставлять его видимым. Или в верхней части сайта у вас располагается красивый орнамент, который является продолжением стиля меню. | ||
Прокручивать (наблюдаем за позицией «Цветочка» слева вверху). Изображение при прокрутке исчезает с экрана и остается только в том месте страницы, где было закреплено. Фон в этом случае привязан к странице, а не к экрану, поэтому в примере при прокрутке исчезает. Удобно использовать, если оформление нужно только для «шапки» сайта, а показывать его при прокручивании страницы нет никакой надобности. Также этот вариант подходит для дизайнов, которые хотят сосредоточить внимание на товарах и не отвлекать от просмотра содержания. |
Чтобы задать позицию фонового изображения воспользуемся указанными выше настройками.
Выбираем нужную настройку кликом мышки по синей надписи с пунктиром.
В открывшемся списке выбираем кликом мышки нужную позицию и сохраняем выбор, нажав на кнопку с галочкой.
Когда все изменения внесены, нажимаем кнопку «Сохранить».
Добавляем баннеры со спецпредложениями
Для спецпредложений в шаблоне сайта есть 2 баннера сразу после карусели на главной станице.
Размер каждого баннера 285×160 пикселей. Можно загрузить картинку любого размера и она автоматически обрежется под нужный размер.
Для каждого баннера можно прописать заголовок и подзаголовок. Для этого нажимаем на специальное поле, чтобы появилось окошко редактора текста.
Когда откроется редактор текста, пишем Заголовок (или Подзаголовок), а затем меняем цвет, если необходимо.
Кроме цвета можно изменить любые параметры текста. Редактор по своим функциям напоминает MS Word.
После внесения всех изменений сохраняем результат.
Текст на баннере кликабельный. Это значит, что посетитель сайта может перейти на страницу предложения, если заинтересован. Ссылка указывается в специальном поле.
Выбираем страницу на которую будет вести баннер, копируем ссылку и вставляем в поле для ссылки. Сохраняем с помощью кнопки с галочкой.
Теперь загружаем сам баннер. Нажимаем кнопку «Загрузить», чтобы выбрать файл на вашем компьютере. Изображение сохраняется автоматически.
Размер каждого баннера 285×160 пикселей. Можно загрузить картинку любого размера и она автоматически обрежется под нужный размер.
Таким же образом добавляем второй баннер.
Заполняем условия работы интернет-магазина
Для каждого пункта условий работы необходимо создать страницы на сайте в разделе «Содержание → Страницы → Пользовательские» где будут описаны подробности.
Ключевую же идею можно вписать в спец блоки на главной странице.
Для каждой иконки есть заголовок, подзаголовок и поле для ссылки.
При клике на соответствующее поле откроется окошко ввода текста. Пишем условия и сохраняем кнопкой с галочкой.
После того как заполнены все поля, можно убедиться что и на сайте данные изменились.
Добавляем еще баннер
Размер баннера 1420x260 пикселей. Можно загрузить картинку любого размера и она автоматически обрежется под нужный размер.
Располагается баннер над блоком новостей на главной странице сайта.
Для баннера можно прописать заголовок, подзаголовок и указать ссылку. Кликаем по надписи «Не заполнено», чтобы открылось окошко редактора текста.
Когда откроется редактор текста, пишем Заголовок (или Подзаголовок), а затем меняем цвет, если необходимо.
Кроме цвета можно изменить любые параметры текста. Редактор по своим функциям напоминает MS Word.
После внесения всех изменений сохраняем результат.
Теперь загружаем сам баннер. Нажимаем кнопку «Загрузить», чтобы выбрать файл на вашем компьютере. Изображение сохраняется автоматически.
Размер баннера 1420x260 пикселей. Можно загрузить картинку любого размера и она автоматически обрежется под нужный размер.
Изображение сохранится автоматически и сразу обновится на сайте.
Enable design template "Elastic"
Open admin panel and go to "Configuration" → "System".
Find "Design theme" in section "General" and select "elastic" from drop-down list. Save choice clicking check marked button:
Customize design template
Go to "Configuration" -> "Website configuration" to customize selected design template.
Scroll down the page to "design theme" block. You will make settings in this section.
Change colors: Control design
Design will remain in the basic gray-orange color developed by OT designers if you do not change colors.
We recommend keeping default design if you are a novice entrepreneur and have not yet been developing a corporate identity.
However, it is better to repaint the site to match your brand colors if you already have a corporate identity.
There are 4 primary design colors.
Select field in "Configuration -> Website configuration -> Design theme":
A color palette will open after click where you can select necessary color using mouse or specify RGB values from Photoshop.
By the way, color can be specified in different formats, not only in RGB. Click special triangles in the format menu to select format.
Click "Save" button after all color are changed.
In addition to 4 design colors, there are 4 more colors of informational messages. We recommend leaving them unchanged or choosing no less vivid colors. Color of informational messages in OT Box admin panel is selected in accordance with the standards that a person is used to in everyday life.
Change background color
Background color is white by default. Background can be seen in the product card, as well as on the home page after the block with carousel.
Select field in "Configuration -> Website configuration -> Design theme" to change default background color:
A color palette will open after click where you can select necessary color using mouse or specify RGB values from Photoshop.
By the way, color can be specified in different formats, not only in RGB. Click special triangles in the format menu to select format.
Click "Save" button after all color are changed.
Add background image
Background image is downloaded from your computer and used in the background. It is important to consider several recommendations:
- The larger the size of background image, the longer website page will load. Sometimes users may not wait for the site to fully load and leave.
- Bright background distracts and irritates the eyes, so spent time on the site is reduced.
- Interface on some pages covers background almost completely, therefore it is not recommended to put any useful information on background (phone numbers, addresses, messages, etc.). And also it is worth considering when choosing an image so that the meaning does not change or distort.
Click "Change" button to download background image (there is no background image by default).
Downloaded image will be saved automatically. Click "Save" button to display it on website.
Set background binding after that. Tables below show how each setting looks. For example, we take a picture of a flower and show how it will look based on interface (picture will be partially hidden by menu bar or search bar in some places).
Background repeat
Setting | Site appearance |
|---|---|
| Do not repeat | |
| Repeat | |
| Horizontal repeat | |
Virtical repeat |
Background position
Choose which side the image will be (or the beginning of tiling)
Let’s take a look at the “Vertical repeat” setting.
Setting | Site appearance |
|---|---|
Center | |
Left | |
| Right |
Background attachment
If you fix the image, it will always be “pressed” to selected position. That is, it will remain at specified location when scrolling through the site. As an example, we will show background with “left” position and page header and header.
Setting | Page header | Page footer |
|---|---|---|
Fix (observe "Flower" position in the upper left). No matter how long the page is, scrolling the image will always be visible in its original form. Background is attached to the screen instead of the page. It is convenient to use when your background has a large picture the size of the screen and you want to always leave it visible. Or you have a beautiful ornament at site header which is a continuation of menu style. | ||
Scroll (observe "Flower" position in the upper left). Image disappears from the screen when scrolling and remains only in that place of the page where it was fixed. Background in this case is attached to the page instead of the screen. Therefore, in the example it disappears when scrolling. It is convenient to use if design is necessary only for site header and there is no need to show it when scrolling the page. This option is also suitable for design focusing on products instead of distract from viewing content. |
Use above settings to set background image position.
Сlick blue dotted text with necessary settings.
Select necessary position from drop-down list and save selection clicking checkmark button.
Click "Save" button after all changes are made.
Add banners with special offers
Website design template has 2 banners for special offers. They are right after carousel on the home page .
The size of each banner is 285 × 160 pixels. You can upload image of any size and it will be automatically cropped to necessary size.
You can specify title and subtitle for each banner. Click special field to open text editor.
Write Title (or Subtitle) when text editor opens and change color if necessary.
In addition to color, you can change any text settings. The editor functions like MS Word.
Save result after making all changes.
Text on the banner is clickable. This means that site visitor can go to the offer page if interested. Link is indicated in a special field.
Select the page to which the banner will lead, copy the link and paste it into the link field. Save using checkmark button.
Download banner after that. Click “Download” button to select file on your computer. Image is saved automatically.
The size of each banner is 285 × 160 pixels. You can upload image of any size and it will be automatically cropped to necessary size.
Add second banner in the same way.
Add online store conditions
Create pages on the site for each item of working conditions with full details. Go to "Contents -> Pages -> Custom pages" in admin panel.
The key idea can be entered in special blocks on the home page.
There is a title, a subheading and a link box for each icon.
A text entry window will open after clicking corresponding field. Write conditions and save button with a tick.
Add additional banner
The size of banner is 1420x260 pixels. You can upload image of any size and it will be automatically cropped to necessary size.
Banner is located above the news block on website home page.
You can specify title, subtitle and add a link for each banner. Click "empty" to open text editor.
Write Title (or Subtitle) when text editor opens and change color if necessary.
In addition to color, you can change any text settings. The editor functions like MS Word.
Save result after making all changes.
Download banner after that. Click “Download” button to select file on your computer. Image is saved automatically.
The size of banner is 1420x260 pixels. You can upload image of any size and it will be automatically cropped to necessary size.
Image will be saved automatically and immediately updated on the site.
Каталог: левое меню категорий на главной странице
Левое меню категорий на главной по умолчанию скрыто.
Чтобы отобразить левое меню категорий кликаем по надписи «Скрыть»
Кликом мышки выбираем «Отобразить»
Сохраняем выбор, нажав на кнопку с галочкойОглавление