Как изменить дизайн сайта на платформе AndiPartners

svoi-dizain-3

Один из самых популярных вопросов, задаваемых нашими партнерами: “Можно ли изменить дизайн сайта?”

Внутри самого кабинета, к сожалению, нет. Пока что эта функция недоступна. Но, если уж вы решили серьезно заняться магазином, то есть и другой путь. О нем и поговорим.

Для его корректной реализации желательно владеть базовыми знаниями по HTML и CSS.

Суть метода заключается в подключении внешнего css-файла (файла со стилями сайта).

Это можно сделать следующим образом:

Первое, что вам необходимо — это найти хранилище для вашего файла.

Например, можете создать аккаунт на ucoz.ru и залить через “Файловый менеджер” файлы.

Заходите в “Инструменты/Настройки”

screenshot_166

Далее в “Доп. Настройки”

screenshot_167

Вносим файл в код сайта ссылку на css-файл. Для этого в head вставляем следующую конструкцию <link rel=»stylesheet» href=»http://site.ru/mystyle.css«>, где вместо site.ru/mystyle.css подставляем ваш путь к загруженному файлу.

Обновляем магазин. Заготовка у нас готова. Теперь переходим к изменению дизайна.

Если вы у вас имеется опыт в CSS, то вы сможете сами найти интересующие вас элементы.

Для тех, кто не знаком с CSS приводим небольшой список примеров классов. Классы вставляем в файл с новой строки как показано в примере.

 

Цвет шапки сайта:

.ab-header {

   background: #d0cece;

}

Вместо #docece подставляем желаемый цвет. Получаем:

screenshot_170

 

Номенклатуру цветов можно посмотреть здесь — http://colorscheme.ru/html-colors.html

Цвета цены:

Класс для цены выглядит так:

.goods .__preview-goods ul:not(.rating) li:last-child {

   font: 18px Arial,sans-serif;

   color: #2a2ca9;

}

screenshot_171

А вот измененные цвет и шрифт каталога

screenshot_172

 

Меняется таким образом:

.cd-accordion-menu a {

   margin: 0 30px 0 5px;

   padding-left: 10px;

   font-weight: bold;

   color: #00807b;

}

Описанные изменения можете посмотреть здесь — http://demo.shop.vmayke.org/

По аналогу вы можете изменять все css-элементы на сайте.

Но помните следующие нюансы:

1) Если меняете отступы и величину шрифтов, то обязательно проверяйте как сайт выглядит как на текущем разрешении, так и на других.

Это особенно важно в свете выхода адаптивной версии сайта, которая не за горами.

2) Регулярно проверяйте работу вашего css. Платформа меняется, а значит и старые классы могут затираться.

3) Не пытайтесь совершить глобальных изменений. Доступа к HTML нет, а без него вы не сможете безболезненно их провести.

А в остальном, все в ваших руках. Косметические изменения смогут придать вашему сайту уникальность и увеличить ваши доходы!

UPD: Бонус!

Видео от нашего партнера с  упрощенной схемой внедрения дизайна:

Спасибо за вашу активность!

Отправить ответ

Оставьте первый комментарий!

Уведомлять
avatar
wpDiscuz