Как сделать интернет-магазин таким, как хочешь именно ты

Желание сделать сайт лучше

Понятно, ведь каждый владелец сайта по своему видит продающий сайт, а интернет-магазину особенно важно быть уникальным. Конструкторы сайтов чаще предоставляют готовые решения. Признаюсь честно, год назад я это понимал и сразу остановился на Recommerce, эти самые решения здесь на высоком уровне и очень уж влюбился в технические достоинства. Но так как дизайн меня не совсем устраивал и недавно Recommerce сделал окно "Произвольный CSS", я начал свои первые эксперименты с дизайном.

Re-магазины легко редактировать

Любой блок можно убрать, создать новый. Стереть шапку, добавить новую шапку. Убрать меню, поставить свое. Поменять любые цвета, даже в мобильной версии. Добавить новые блоки под меню, под каталог, шапку или в подвал сайта, или над подвалом. Изменить можно все, нужно только желание и немного времени.

Информационный блок под меню

Я хочу чтобы мои клиенты знали о моих преимуществах.

Я добавил в визуальный редактор четыре готовых картинки, скопировал исходный код и вставил в окно произвольного html кода. Далее я посмотрел примеры использования CSS и узнал, что картинке можно задать class (как бы индивидуальный код объекта). Решил назвать картинки menuicon, и вставил img class="menuicon" в код картинки. Потом в произвольном CSS добавил стили этого самого menuicon:

img.menuicon {
 width: 100px; /*ширина картинки*/
 height: 100px; /*высота картинки*/
 padding-right:10px; /*отступ справа*/
 padding-left:9px; /*отступ слева*/
}

То есть задал высоту, ширину и отступы для объекта menuicon. Создание блока заняло у меня от силы минут пять.

Также можно сделать эффекты при наведении

Эффекты увеличения картинки, или покрыть цветной тонировкой, можно добавить красивую надпись. О разных и классных эффектах и примеров их применения пишут сотни интернет-блогов, просто нагуглите к примеру "Стили при наведении на картинку CSS".

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

Изменяем вид H заголовков, на примере H1

h1 {
 font-size: 30px;
 margin: 10px 0;
 color: #000;
}

font-size это размер шрифта, margin это отступы, а color это естественно цвет h1 заголовка. Таким образом, можно изменить любой заголовок и даже шрифт сайта.

Изменяем фон блока с контактами

.contackts{
 background:#fff;
}

Где #fff это цвет. Получить его можно вручную через бесплатные генераторы цветов в интернете.

Меняем фон футера (подвала) сайта и цвет его шрифта

#footer {
 background: #0F0F0F;
 color: #CCCCCC;
}

Где background – цвет фона, где color – цвет шрифта.

Меняем цвет фона меню слева

.menu { background:#FFFAFA; }

Вот так вот, одна строчка и новый цвет меню.

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

Draft, сентябрь 2015

Draft, август 2016

Как мне стало понятно, изменить дизайн сайта Recommerce не только просто, а и приятно. Приятность в том, что интернет-магазины на Recommerce написаны грамотным программистом и при дополнениях в коде сайт не распадается.

P.S. начинающим в дизайне советую программу GIMP, у нее полностью бесплатная лицензия и интуитивно понятная навигация.

***

С Уважением, Шрамов Никита.
Основатель спортивного интернет-магазина Draft.in.ua