С чем вам помочь?

Задавайте вопрос или опишите проблему, с которой Вы столкнулись

Как создать и загрузить свою тему в трансформер дизайна (Для версии 4.x и 3.x)

Актуально для версии магазина: 4.1, 4.0, 3.0
Создание собственной темы для Трансформера дизайна делится на 2 этапа:
 
1. Создание изображений темы
2. Работа с css файлом и загрузка
 
Пример файла с темой: скачать (630кб).  
 
Создание изображения темы
 
1. Изображение темы состоит из трех отдельных элементов: шапка (main) , сплит или разделитель (split) и подвал (footer).
 
2. Шапка - основная картинка темы, большая фоновая картинка. Область от верхней части сайта и до нижнего края слайдера.
 
 
Для создания картинки шапки нужно:
- Выбрать изображение (высота не менее 700 px),  вы можете использовать картинку любой высоты, система автоматически «обрежет» лишнюю длину, параметры высоты заданы в файле. Если вы хотите задать высоту самостоятельно, то примерная высота шапки должна быть от 550 до 700 px,
- Ширина изображения подбирается индивидуально для вашего сайта, как правило 1920px для широкоформатных мониторов, однако может быть и меньше, например 1280px.
- сохраните изображение в формате jpg. Название картинки должно быть main.jpg.
 
3. Сплит - элемент-разделитель блоков. Отделяет блок с товарами на главной от блока новостей, опросов и т.д.
 
 
Для создания картинки сплита нужно:
- Взять требуемую картинку и вырезать по высоте 60-90px, ширина подбирается индивидуально, исходя из дизайна вашего сайта (обычно это 990px)
- Сохраните изображение без белого фона в формате png. Название картинки должно быть split.png.
 
* Вы можете вообще не создавать сплит-картинку, тогда она будет задана по умолчанию, в виде разделительной полоски с тенью.
 
4. Подвал - самая нижняя часть сайта. Располагается от нижнего края сайта до первых картинок элементов сайта.
 
 
Для создания картинки подвала нужно:
- Взять требуемое изображение и вырезать по размерам от нижней части сайта до элементов кнопок-баннеров платежных карт.
- Высота блока варьируется, обычно в пределах 200px, ширина, так же, может быть разной, обычно это 1920px для широкоформатных мониторов.
- Сохраните изображение в формате jpg. Название картинки должно быть footer.jpg.
 
5. Создайте папку с названием вашей темы, например «interior». В ней создайте еще 2 папки – css и images. Сохраните в папке images созданные вами изображения: main.jpg, split.png,  footer.jpg.
 
Работа с css файлом и загрузка темы.
 
1. Создайте файл с указанным кодом. Для его создания можно использовать редактор Блокнот. Вставьте указанный код и замените цифровые значения высоты изображения (px) (выделенные красным цветом) на свои.
 
Сохраните файл в папке css с названием styles.css.

скопируйте указанный код и замените на свои значения

body {

          background:transparent url('../images/footer.jpg') no-repeat scroll center bottom;

}

#theme-container{

          background:transparent url('../images/main.jpg') no-repeat scroll center top;

          height:635px;

}

.shadow-split{

                background:transparent url('../images/split.png') no-repeat scroll center top;

                border-color:transparent;

                height:87px;

}

.container > .footer {

                padding-bottom:195px;

}

2. Создайте файл с указанным кодом. Для его создания можно использовать программу Блокнот. Вставьте указанный код и замените в коде название темы (выделенные красным цветом) на свое название – в нашем примере interior (Интерьер).

скопируйте указанный код и замените на свои значения

<?xml version="1.0" encoding="utf-8" ?>

<Theme name="interior" previewImage="preview.jpg">

                   <Names>
                                  <Name lang="ru-RU" value="Интерьер" />
                                  <Name lang="en-US" value="Interior" />
                  </Names>
</Theme>

Сохраните файл в папке темы (не вкладывайте его в другие папки, файл должен находиться в корне папки) с названием theme.config.

3. Создайте zip архив вашей папки с темой.
 
Архив должен содержать в себе папку с названием темы, а внутри папки уже файлы что мы создавали с вами ранее (файл theme.config, директории css и image). 
 
Структура архива с темой. 
 
Файл interior.zip
| - Папка interior
   | - Файл preview.jpg
   | - Файл theme.config
   | - Папка css
       | - Файл styles.css
   | - Папка images
       | - Файл main.jpg
       | - Файл footer.jpg
       | - Файл split.png
 
По аналогии с примером - interior.zip.
 
4. Перейдите в панель администрирования интернет-магазина. В меню выберите "Настройки – Трансформер дизайна".
 
5. В верхней части окна в поле Загрузить новую тему выберите свой заархивированный файл interior.zip. Нажмите "Загрузить". Ваша тема появится в списке. (рис 1)
 

Риснуок 1. Загрузка темы.

6. Найдите в списке свою тему и поставьте слева галочку "Применить" (рис 2). Либо можете выбрать вашу тему в "Трансформере дизайна" в клиентской части магазина и нажать "Сохранить".

Рисунок 2. Выбор темы.

7. Ваша тема будет установлена.

Открыть онлайн чат? Открыть
Статья оказалась полезной? Да Нет
Как мы можем улучшить статью?
Благодарим за отзыв.
Благодарим за отзыв. Мы улучшим эту статью.
Произошла ошибка.
Не нашли нужную статью? Предложить тему
Не нашли нужную статью?
Благодарим за отзыв.
Произошла ошибка.

Дизайн интернет-магазина

Работа с CSS Как изменить надписи кнопок на сайте Как изменить дизайн сайта Как изменить размер и стиль шрифта на сайте Примеры изменения CSS Как создать и загрузить свою цветовую схему в трансформер дизайна Настройка внешнего вида интернет-магазина Как загрузить свою тему в трансформер дизайна Редактирование блоков и текстов на главной странице Как создать и загрузить свой фон в трансформер дизайна Работа со статическими блоками (видео) Работа со статическими блоками (описание блоков) Вопросы авторского права на дизайн Товары на главной: добавление новинок и хитов Настройка карусели на главной странице интернет-магазина (видео) Настройка карусели на главной странице интернет-магазина Вывод изображения большего размера при нажатии изображение Вывод вплывающего окна с текстом при нажатии на ссылку Как добавить таблицу в текст страницы, описания или новости Установка якоря на странице Формирование рамки таблицы Как изменить размер фотографии (картинок) для всех сущностей в каталоге Как создать и загрузить свою тему в трансформер дизайна (Для версии 4.x и 3.x)
© AdvantShop. Платформа для открытия интернет-магазина.