Shortcode Storefront Parallax Hero позволяет вам добавить компонент-герой в шаблон домашней страницы вашего веб-сайта, работающего на Storefront. Вы можете загрузить фоновое изображение (и установить его для параллакс-прокрутки) и настроить другие параметры внешнего вида с помощью настройщика WordPress.
Загрузите плагин Storefront Parallax Hero
Установка
- Разархивируйте и загрузите папку с плагином в свой
/wp-content/plugins/каталог. - Активируйте расширение через меню «Плагины» в WordPress.
- Войдите в настройщик WordPress, чтобы начать использовать плагин.
Для получения дополнительной информации об установке и управлении подключаемыми модулями см .: Управление и установка подключаемых модулей .
Применение
Расширение Storefront Parallax Hero добавляет все свои настройки в настройщик WordPress, что упрощает его использование. Открыв настройщик, вы увидите новый раздел верхнего уровня под названием Parallax Hero .
Внутри этого раздела есть три подраздела: « Контент» , « Фон» и « Макет» . Вот некоторые настройки, которые мы рассмотрим подробно.
Содержание
Текст заголовка
Введите текст, который будет отображаться в заголовке компонента героя.
Цвет текста заголовка
Выберите цвет для текста заголовка.
Текст описания
Укажите текст, который будет отображаться в области содержимого компонента героя. Вывод обрабатывается с помощью wp_kses_post , что означает, что вы можете вставлять HTML.
Цвет текста описания
Выберите цвет для текста описания.
Текст кнопки
Укажите текст, отображаемый на кнопке в компоненте героя. Если это поле пусто, никакие кнопки отображаться не будут.
URL кнопки
Укажите URL-адрес, на который ссылается кнопка в компоненте Hero.
Задний план
Фоновые СМИ
Загрузите фоновое изображение или ссылку на видео для главного компонента. Формат видео есть .mp4
Фоновый цвет
Выберите цвет фона для компонента-героя. Если установлено фоновое изображение, вы не сможете увидеть цвет фона.
Размер фона
Рекомендуемый размер носителя: 1920 (ширина) на 2560 (длина) пикселей. Обратите внимание, что при разрешении 2560 x 1920 программа загрузки мультимедиа попросит вас обрезать изображение.
Выберите один из двух вариантов: По умолчанию или Обложка. По умолчанию будет работать лучше всего, если вы используете повторяющийся мозаичный фон. Обложка подойдет лучше всего, если вы используете большое изображение. Чтобы узнать больше, см. CSS свойство background-size .
Параллакс
Переключите эффект параллакса, применяемый к фоновому изображению. Если фоновое изображение не установлено, этот параметр ничего не делает.
Скорость прокрутки параллакса
Этот параметр влияет на коэффициент прокрутки фона параллакса относительно скорости прокрутки по умолчанию. Например: настройка 25% означает, что фон будет прокручиваться с четвертью скорости, а 50% означает, что он будет прокручиваться с половинной скоростью.
Цвет наложения
Выберите цвет для наложения поверх основного цвета / изображения фона.
Непрозрачность наложения
Укажите непрозрачность наложения. Установите значение 0, чтобы полностью скрыть наложение. Этот параметр полезен, если вы используете визуально шумное фоновое изображение и обнаруживаете, что текст в вашем компоненте-герое трудно читать.
Макет
Выравнивание текста
Выровняйте содержимое компонента главного героя по левому, правому краю или по центру.
Макет героя
Укажите фиксированный или полноразмерный макет для компонента-героя. Фиксированная ширина означает, что она будет соответствовать остальной части содержимого на странице по ширине; полная ширина означает, что он будет охватывать всю ширину браузера.Опция полной высоты заставит героя заполнять окно браузера от исходной точки вниз. Это, безусловно, работает лучше, чем дальше на странице отображается элемент героя. Рекомендуется использовать опцию полной высоты только тогда, когда Герой является первым элементом в области основного содержимого.
Shortcode Storefront Parallax Hero: [Шорткод]
Начиная с версии 1.1.0, вы можете добавить компонент parallax hero на любую страницу с помощью шорткода. Вы можете использовать шорткод для следующих параметров для создания пользовательских компонентов главного героя, но обратите внимание, что такие функции, как Полная высота и Макет во всю ширину, не подходят для всех страниц и обычно должны быть установлены на false ( 0).
'heading_text'
'heading_text_color'
'description_text'
'description_text_color'
'background_media'
'background_image'
'background_video'
'background_video_image_fallback'
'background_color'
'background_size'
'button_text'
'button_url'
'alignment'
'layout'
'parallax'
'parallax_scroll'
'parallax_offset'
'overlay_color'
'overlay_opacity'
'full_height'
'style'
'overlay_style'
'background_img'
'shortcode_uid'Полный шорткод может выглядеть так:
[parallax_hero heading_text="Убойный шопинг" description_text="Найдите потрясающую одежду в магазинах WPWoo!" description_text_color="white" background_img="https://wpwoo.shop/wp-content/uploads/2021/04/pexels-photo-325185.jpeg" alignment="left" parallax="0" overlay_color="#96588a" overlay_opacity=".25" layout="fixed" full_height="0" style="border: 1em solid #e6e6e6;"]Приведенный выше код возвращает такой вид:
Советы по шорткоду
Обратите внимание , что styleи overlay_styleатрибуты позволяют добавлять пользовательские CSS для компонента. Любые атрибуты, добавленные в шорткод, переопределят настройки, указанные в настройщике. Если вы не включаете никаких атрибутов, например :
[parallax_hero]компонент выходного героя просто будет использовать настройки, указанные в настройщике.
При вставке цветовых кодов в шестнадцатеричном формате:#ff0000. Используйте полное шестизначное шестнадцатеричное число. Хотя в большинстве CSS #f00и #ff0000возвращается тот же чистый красный цвет, оверлей не будет правильно загружаться без полного шестизначного цветового кода. Кроме того, вы можете использовать цвета, распознаваемые HTML, такие как «белый», «красный», «оранжевый» и так далее.
При использовании overlay_opacityкоманды проценты делаются по шкале от 0(полностью прозрачный, невидимый) до 1(полностью сплошной). Итак, вам нужно будет ввести следующие значения:
- 0% =
0(это не добавит наложения) - 5% =
.05 - 50% =
.5 - 75% =
.75 - 100% =
1(это добавит сплошной цвет)
Часто задаваемые вопросы
Я не могу найти настройку Parallax Hero в настройщике!
Есть несколько причин, по которым вы не можете увидеть параметр Parallax Hero в настройщике:
- Вам нужно смотреть на страницу, заданную шаблоном домашней страницы, при попытке настроить Parallax Hero через настройщик — если вы просматриваете другую страницу (например, продукт), опция не появится.
- Возможно, у вас еще не установлен шаблон домашней страницы витрины по умолчанию для главной страницы вашего сайта WordPress .
- Первая страница не может быть такой же, как страница магазина WooCommerce, настроенная в WooCommerce -> Настройки -> Продукты -> Дисплей.
Если вы не используете шаблон домашней страницы витрины по умолчанию в качестве главной страницы вашего сайта, вам нужно будет добавить и настроить элемент Parallax Hero с помощью шорткода на страницу, которую вы используете.
Могу ли я использовать видео с YouTube?
Storefront Parallax Hero поддерживает только видео, которые вы загрузили на свой собственный сайт, поэтому не может использовать какие-либо внешние видео, включая YouTube.
