Как сделать дизайн для интернет-магазина, когда у вас нет денег для приобретения темы
Если вы собираетесь создать интернет-магазин на WooCommerce, хороший качественный дизайн поможет привлекать клиентов, продать больше товаров, улучшить скорость продвижения.
Но проблема в том, что дизайнерские темы стоят $39 и выше, и не каждый готов потратить деньги на дело, которое может не принести доходов. Кроме того, лучше вложить их в более полезную функциональность, как например https://fondy.ua/ru/cms/wordpress/woocommerce/ плагин платежей для магазина.
Бесплатные темы бывают не всегда надежные и могут подвести в момент, когда на сайте надо будет что-то поменять. Прочитав эту статью, вы узнаете как для темы Storefront, которая стоит по умолчанию, сделать свой дизайн.
Переопределение цветов
Для переопределения цвета шапки, подвала, фона страницы: войдите в админ-панель, перейдите на сайт и нажмите пункт «Настроить» на верхней панели. В открывшейся вкладке выберете: «Заголовок» – для изменения цвета фона шапки, «Подвал» – подвала, «Фон» – блока вывода и фильтра товаров. После того, как выбрали цвет, кликните на кнопку «Опубликовать». Главная задача сделана: определиться с цветовой палитрой.
Примечание. Если текст сливается с цветом фона шапки или подвала, его изменяют в тех же самых местах. Чтобы изменить цвет названия магазина, выберете параметр «Цвет ссылок» во вкладке «Заголовок»
Навигация по сайту
Поменять цвета – недостаточно. Чтобы сделать фон меню темнее основного оттенка шапки, используйте вкладку «Дополнительные стили». Скопируйте этот код туда:
.storefront-primary-navigation {
background: цвет;
}
Вместо «цвет» впишите шестнадцатеричное значения цвета. Получите его с помощью любого подходящего онлайн-сервиса.
Подвал
Для того, чтобы скрыть элементы подвала, зайдите в «Дополнительные стили» и пропишите:
.site-info {
display: none;
}
Можете не делать этого, но тогда останется надпись «Работает на Storefront и WooCommerce». Вернитесь на главный список вкладок. Найдите «Виджеты» > «Подвал Столбец 1» > «Добавить виджет» > «HTML-код». Вставьте этот код:
Важно! Это не единственный вариант структуры подвала. Есть возможность поменять его, если обладаете знаниями HTML и CSS.
Подставьте ссылки на страницы. Хотите добавить новый пункт меню – скопируйте <li><a href=“ссылка”>Страница</a></li>.
После проделанных действий появится элементы подвал. Поставим их на свои места: заходим в «Дополнительные стили» и вставляем:
.widget {
margin-bottom: 0;
}
.footer-list {
display: flex;
}
.footer-contact-block {
color: white;
}
.footer-contact-inform p {
margin-bottom: 0;
}
.footer-list li {
margin-right: 10px;
}
.footer-widgets {
padding-top: 0;
}
.right-footer-column {
flex-direction: column;
}
.footer-logo {
display: block;
width: 250px;
}
.textwidget {
display: flex;
justify-content: space-between
}
.custom-logo-link {
width: 200px;
}
.police-link {
display: flex;
margin-top: 20px;
justify-content: flex-end;
}
Выводы. Поздравляем, вы создали новый дизайн для интернет-магазина. Этот шаблон подойдет для продажи товаров на стадии продвижения. После первых продаж, замените эту тему на профессиональную.