Онлайн заработок, создание и монетизация сайтов, веб-разработка, SEO и SMO продвижение, фриланс, партнерки, полезные сервисы вебмастерам, блоггинг.

Главная » Новости » Новости интернета » Как сделать дизайн для интернет-магазина без приобретения темы

Как сделать дизайн для интернет-магазина, когда у вас нет денег для приобретения темы

WooCommerceЕсли вы собираетесь создать интернет-магазин на 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;
}

Выводы. Поздравляем, вы создали новый дизайн для интернет-магазина. Этот шаблон подойдет для продажи товаров на стадии продвижения. После первых продаж, замените эту тему на профессиональную.

25.03.20

Категории: Новости интернета.

Теги: ,

Добавить комментарий

Ваш e-mail не публикуется. Обязательные поля помечены *
Если вы комментируете впервые, то текст будет отправлен на модерацию.