Опубликовано Оставить комментарий

Shortcode Storefront Parallax Hero

Shortcode Storefront Parallax Hero

Shortcode Storefront Parallax Hero позволяет вам добавить компонент-герой в шаблон домашней страницы вашего веб-сайта, работающего на Storefront. Вы можете загрузить фоновое изображение (и установить его для параллакс-прокрутки) и настроить другие параметры внешнего вида с помощью настройщика WordPress.

Загрузите плагин Storefront Parallax Hero

Установка

  1. Разархивируйте и загрузите папку с плагином в свой /wp-content/plugins/каталог.
  2. Активируйте расширение через меню «Плагины» в WordPress.
  3. Войдите в настройщик 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 на любую страницу с помощью 

WPWoo

Интернет магазин на Wordpress WooCommerce. Темы и плагины на WPWoo.Shop

WPWoo shopping

шорткода. Вы можете использовать шорткод для следующих параметров для создания пользовательских компонентов главного героя, но обратите внимание, что такие функции, как Полная высота и Макет во всю ширину, не подходят для всех страниц и обычно должны быть установлены на 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;"]

Приведенный выше код возвращает такой вид:

Убойный шопинг

Найдите потрясающую одежду в магазинах WPWoo!

WPWoo shopping

Советы по шорткоду

Обратите внимание , что 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 с помощью  шорткода на страницу, которую вы используете.

Могу ли я использовать видео с YouTube?

Storefront Parallax Hero поддерживает только видео, которые вы загрузили на свой собственный сайт, поэтому не может использовать какие-либо внешние видео, включая YouTube.

Опубликовано 1 комментарий

WooCommerce Parallax Hero

WooCommerce Storefront Parallax Hero

Инструкция к WooCommerce Parallax Hero

WooCommerce Parallax Hero — платный плагин WooCommerce для CMS WordPress. Ознакомьтесь с переводом статьи, для установки и использования на вашем сайте.

Функции

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

Содержание

Вы управляете содержимым — указываете заголовок, некоторый основной текст (и цвета, в которых они отображаются), затем создаете дополнительную кнопку призыва к действию. Укажите, выравнивать ли содержимое по центру, по левому или правому краю для точной настройки.

Фон

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

Расположение

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

Полная высота

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

Шорткод

[parallax_hero]

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

Рейтинг: 5 из 5.

WPWoo WooCommerce Parallax Hero

https://woocommerce.com/products/storefront-parallax-hero/
Опубликовано Оставить комментарий

Jetpack Boost

Представляем Jetpack Boost

Jetpack рад объявить о выпуске нового плагина Jetpack Boost, который может повысить скорость вашего сайта всего за несколько кликов.

Jetpack Boost дает вашему сайту те же преимущества в производительности, что и ведущие веб-сайты мира, без необходимости в разработчике.

Описание

Jetpack Boost обеспечивает оптимизацию одним щелчком, которая увеличивает производительность вашего сайта WordPress и улучшает показатели веб-жизненно важных
функций для лучшего SEO.

МОДУЛИ ПРОИЗВОДИТЕЛЬНОСТИ

Оптимизируйте свой сайт с помощью тех же методов, которые используются на самых успешных веб-сайтах мира. Каждая методика упакована в виде модуля, который вы можете активировать и опробовать.

В настоящее время в плагине доступны 3 модуля производительности:

  1. Оптимизация загрузки CSS создает критический CSS для вашей домашней страницы, сообщений и страниц. Это может позволить вашему контенту намного быстрее отображаться на экране, особенно для зрителей, использующих мобильные устройства.
  2. Отложить несущественные Javascript перемещает некоторые задачи после загрузки страницы, чтобы важную визуальную информацию можно было увидеть раньше.
  3. Ленивая загрузка изображений загружает только те изображения, которые видит пользователь. Когда пользователь прокручивает, изображения загружаются непосредственно перед тем, как они появятся на странице. Эта простая оптимизация делает сайты быстрее и экономит пропускную способность для вашего хоста и ваших клиентов.

AVR Enterprise WPWoo 💚 Jetpack Boost

Опубликовано в: WordPress.org

Опубликовано 1 комментарий

WPWoo

WPWoo