Як зробити інтернет-магазин таким, як хочеш саме ти

Бажання зробити сайт кращим

Зрозуміло, адже кожен власник сайту по своєму бачить сайт, що продає, а інтернет-магазину особливо важливо бути унікальним. Конструктори сайтів найчастіше надають готові рішення. Зізнаюся чесно, рік тому я це розумів і відразу зупинився на 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