Узнайте как создать эффективный сайт с высокой конверсией

Новости, анонсы, видеоуроки, релизы русификации и многое другое

Блок Hero в теме SmartTheme отображается после главного меню под шапкой сайта. Это прекрасная возможность красиво оформить свой сайт и уникализировать его.

Блок Hero можно настроить для:

  • главной страницы сайта
  • отдельных записей
  • отдельных страниц

Блок Hero может содержать:

  • произвольный текст с кнопкой, которая ведет на определенную страницу
  • последняя запись на сайте
  • последняя запись из определенной категории
  • последняя запись по тегу
  • последняя добавленная прикрепленная запись

Но, блок Hero нельзя настроить через настройки сайта для страниц магазина, категорий, страницы с результатами поиска, страницы Ошибка 404.

Разработчики обещают это исправить в следующих версиях темы SmartTheme.

Если вы хотите добавить фоновое изображение для блока Hero для вышеуказанных страниц, то для этого вы можете использовать стили CSS.

Добавление одинакового фонового изображения для Hero всех категорий блога

rgba(0,0,0,0.5) — наложение на фоновое изображение цвета с определенным уровнем прозрачности (темный цвет).

https://yoursite.com/wp-content/uploads/2017/07/image-name.jpg — полный путь к изображению. Замените на свое изображение.

fixed — фоновое изображение не будет прокручиваться
no-repeat — не будет повторяться
cover — vасштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока

.category .op-blog-header-content {
    background-color: rgba(0,0,0,0.5);
}
.category .op-blog-post-header {
background: url('https://yoursite.com/wp-content/uploads/2017/07/image-name.jpg');
background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Добавление фонового изображения для Hero определенной категории блога

.category-another-testing-category .op-blog-header-content {
    background-color: rgba(0,0,0,0.5);
}
.category-another-testing-category .op-blog-post-header {
background: url('https://yoursite.com/wp-content/uploads/2017/07/image-name.jpg');
background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Название класса .category-another-testing-category включает в себя ярлык категории (slug). Его нужно заменить на свой.

Например, если у вас ярлык категории funny-cat-tricks, то класс будет таким: .category-funny-cat-tricks

Добавление фонового изображения для Hero страницы с результатами поиска

/* search results page hero section */
.search-no-results .op-blog-header-content, .search-results .op-blog-header-content {
    background-color: rgba(0,0,0,0.5);
}
.search-no-results .op-blog-post-header, .search-results .op-blog-post-header {
background: url('https://yoursite.com/wp-content/uploads/2017/07/image-name.jpg');
background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Высота блока Hero страницы с результатами поиска

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

.search-no-results .op-blog-header-content, .search-results .op-blog-header-content {
    min-height: 300px;
}

Добавление фонового изображения для Hero страницы 404

/* 404 page hero section */
.error404 .op-blog-header-content {
    background-color: rgba(0,0,0,0.5);
}
.error404 .op-blog-post-header {
background: url('https://yoursite.com/wp-content/uploads/2017/07/image-name.jpg');
background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Добавление фонового изображения для Hero всех страниц, категорий и товаров магазина WooCommerce

/* WooCommerce hero section */
.op-woocommerce-hero .op-blog-header-content {
    background-color: rgba(0,0,0,0.5);
}
.op-woocommerce-hero .op-blog-header-content {
background: url('https://yoursite.com/wp-content/uploads/2017/07/image-name.jpg');
background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Высота блока Hero всех страниц, категорий и товаров магазина WooCommerce

.op-woocommerce-hero .op-blog-header-content {
min-height: 300px;
}

Оставить комментарий

Ваш электронный адрес не будет опубликован.

семнадцать + 9 =