Руководство по настройке CSS заголовка WooCommerce Storefront

Опубликовано: 2020-10-10

CSS для заголовка витрины магазина WooCommerce Если вы хотите изменить внешний вид заголовка вашей темы Storefront WooCommerce, вы можете изучить некоторые приемы CSS из этого краткого руководства.

WooCommerce Storefront — простая и мощная бесплатная тема. Эта тема предоставляет вам значительный контроль над вашим магазином в отношении представления продуктов и доступа пользователей. Это бесплатно и предлагает вам множество вариантов настройки с помощью дочерних тем.

Тема Storefront поддерживает настройщик WordPress, и вы можете редактировать заголовок из этого раздела.

Однако вы можете настроить шапку витрины с помощью фильтров. Однако с помощью CSS проще добавить свои правила для изменения стиля определенного раздела. Для этого урока вам понадобятся некоторые навыки кодирования. Мы добавим правила CSS в разделе «Дополнительные CSS» через настройщик.

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

Также стоит отметить, что тема Storefront должна быть активной темой при ее настройке.

С учетом сказанного давайте рассмотрим несколько советов по CSS для заголовков, которые вы можете использовать, чтобы вывести свой магазин на новый уровень.

Настроить размер заголовка

Здесь мы снова воспользуемся настройщиком тем, но напишем код CSS в разделе «Дополнительные CSS».

Добавьте следующий код:

 * Заголовок */

#masthead.site-header {

    высота: 155px!важно;

    нижняя граница: 0px

}

/* Мобильный CSS для шапки */

Только экран @media и (максимальная ширина: 320 пикселей) {

    #masthead.site-header {

    высота: 80px!важно;

    нижняя граница: 0px;

}

}

/* Главное меню */

.storefront-primary-navigation a, .cart-contents a {

    поле:0 0 0 0;

}

.main-navigation ул {

    padding:0 0 10px 4px!важно;

}

.main-navigation li {

    высота: 38 пикселей! важно;}

/* Мобильный CSS для главного меню */

Только экран @media и (максимальная ширина: 320 пикселей) {

.main-navigation ул {

    background:#D6DDE4!важно;

}

}

/* Область заголовка */

.Заголовок сайта {

обивка сверху: 0,5 см;

}

.site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {

нижняя граница: -45px;

}

Вот результат: Настроить размер заголовка

Удалить панель поиска из заголовка темы

Добавьте этот код в раздел «Дополнительные CSS».

 .сайт-заголовок .widget_product_search {

дисплей: нет;

}

Вот результат: Удалить строку поиска

Изменить цвет меню заголовка

Настройщик позволяет нам настроить заголовок с цветами, которые вы хотите. Вы можете сделать это, перейдя в « Настроить», затем в заголовок и выбрав нужный цвет.

Однако этот параметр окрашивает всю область заголовка, включая панель поиска, раздел входа и логотип. Чтобы изменить фон меню заголовка, добавьте следующий фрагмент кода на панель «Дополнительные CSS».

 .storefront-основная-навигация,

.main-navigation ul.menu ul.sub-menu{

цвет фона: зеленый;

}

Вот результат: Изменить цвет меню заголовка

4. Скрыть основную панель навигации

Storefront Theme по умолчанию отображает все страницы в виде меню. Если вы хотите скрыть основную панель навигации, удаления меню недостаточно. Перейдите в «Настроить», затем в раздел «Дополнительные CSS» и добавьте следующие строки:

 .storefront-основная-навигация {

дисплей: нет;

}

Вот результат: Скрыть основную панель навигации

5. Удалите пустое пространство из заголовка

Перейдите в « Настроить», затем в раздел « Дополнительные CSS» и добавьте следующие строки:

 .сайт-брендинг {

нижняя граница: 0px;

}

Вот результат: Удалить пробел из заголовка

6. Увеличьте ширину панели поиска

Что бы вы сделали, если бы захотели увеличить ширину панели поиска? В разделе «Дополнительные CSS» добавьте следующие строки:

 .woocommerce-active .site-header .site-search {

ширина: 44,739%;

}

#masthead .site-search .widget_product_search input[type="search"] {

ширина: 700px !важно;

}

Вот результат: Увеличьте ширину панели поиска

7. Как изменить размер логотипа, вторичной навигации и панели поиска

Чтобы изменить их все сразу, добавьте следующий код в раздел «Дополнительные CSS»:

 Экран @media и (минимальная ширина: 768 пикселей) {

/* ЛОГОТИП */

.site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link { ширина: 30% !важно; /* Используйте значения пикселей, если хотите, например. 350 пикселей */ }




/* ВТОРИЧНАЯ НАВИГАЦИЯ */

.site-header .secondary-navigation { ширина: 40% !важно; /* Используйте значения пикселей, если хотите, например. 350 пикселей */ }




/* ПАНЕЛЬ ПОИСКА */

.site-header .site-search { ширина: 30% !важно; /* Используйте значения пикселей, если хотите, например. 350 пикселей */ }

Вот результат: Как изменить размер логотипа, вторичной навигации и панели поиска

8. Удалить корзину из заголовка

В этом примере я уберу значок корзины, добавив новое правило display: none; '. Добавьте следующий код CSS в раздел «Дополнительные CSS»:

 .site-header-cart .cart-contents {

дисплей: нет;

}

Вот результат: Удалить корзину из заголовка

9. Скрыть заголовок

Чтобы скрыть заголовок, добавьте следующий код CSS в раздел «Дополнительные CSS»:

 .Заголовок сайта {

дисплей: нет;

}

Вот результат: Скрыть заголовок

10. Увеличьте размер ссылки меню в заголовке витрины

Увеличьте размер ссылки меню в заголовке витрины Меню немного меньше, в соответствии с предпочтениями многих пользователей. Однако им необходимо обновить размер шрифта ссылок меню в теме витрины. Добавьте следующий код в раздел «Дополнительные CSS»:

 .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {

размер шрифта: 28px;

}

Вот результат:

11. Измените размер значка корзины в заголовке витрины

Вы можете сделать это, добавив следующий код CSS в раздел «Дополнительные CSS».

 .site-header-cart .cart-contents {

размер шрифта: 30 пикселей;

}

Вот результат: Изменить размер значка корзины в шапке витрины

12. Измените размер заголовка сайта в теме витрины

Добавьте следующий код в раздел «Дополнительные CSS»:

 .Заголовок сайта {

размер шрифта: 20px;

}

Вот результат: Изменить размер заголовка сайта в теме витрины

13. Изменить размер кнопки мобильного меню

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

Чтобы изменить размер, добавьте следующий код CSS в раздел «Дополнительные CSS»:

 .button.menu-toggle {

размер шрифта: 19px;

}

Вот результат: Кнопка меню результатов для мобильных устройств

Вывод

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

Чтобы добавить правило, скопируйте/вставьте его в раздел « Дополнительный CSS » в интерфейсе настройки темы Storefront. Сделать это:

Войдите на свой сайт WordPress и получите доступ к панели инструментов в качестве пользователя-администратора.
В меню «Панель инструментов» нажмите « Меню внешнего вида» > «Настроить» .
Перейдите вниз к « Дополнительные CSS » на левой боковой панели.
Добавьте правило CSS.
Если вас устраивают изменения, нажмите «Опубликовать».

Однако важно отметить, что приведенные здесь советы по CSS работают только для темы Storefront.