Как добавить эффект параллакса в любую тему WordPress

Недавно один из наших читателей спросил нас, как добавить эффект параллакса в любую тему WordPress? Эффект параллакса - это тенденция веб-дизайна, при...

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

Что такое эффект параллакса?

Эффект параллакса — это современная техника веб-дизайна, при которой фоновый элемент прокручивается медленнее, чем содержимое переднего плана. Этот эффект добавляет глубину фоновым изображениям и делает их интерактивными.

Эффект параллакса можно использовать на целевых страницах, длинном контенте, страницах продаж или главной странице бизнес-сайта. Это отличный способ выделить различные разделы на длинной странице.

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

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

Давайте рассмотрим, как легко добавить эффект параллаксного фона в любую тему WordPress.

Метод 1: Добавьте эффект параллакса в любую тему WordPress с помощью плагина

Этот метод не требует добавления какого-либо кода в вашу тему WordPress. Это проще и рекомендуется для большинства пользователей.

Первое, что вам нужно сделать, это установить и активировать плагин Advanced WordPress Backgrounds. Для получения более подробной информации смотрите наше пошаговое руководство по установке плагина WordPress.

После активации, вам нужно отредактировать страницу или пост, где вы хотите добавить эффект параллакса. Вы заметите новую кнопку ‘Advanced WordPress Backgrounds’ в визуальном редакторе.

Кнопка расширенного фона WordPress

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

Во-первых, вам нужно выбрать изображение в качестве типа фона, а затем отметить опцию «растянуть».

Настройки параллаксного фона

Далее вам нужно нажать на кнопку «Выбрать изображение», чтобы загрузить или выбрать изображение, которое вы хотите использовать. Убедитесь, что вы используете большое изображение, иначе оно будет выглядеть пикселированным.

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

Нажмите на кнопку «Вставить», чтобы продолжить.

Теперь плагин добавит шорткод в редактор постов WordPress. Он будет выглядеть примерно так:

[nk_awb awb_type=»image» awb_stretch=»true» awb_image=»22″ awb_image_size=»full» awb_parallax=»scroll» awb_parallax_speed=»0.5″ awb_mouse_parallax=»true» awb_mouse_parallax_size=»30″ awb_mouse_parallax_speed=»10000″]

Ваш контент здесь

[/nk_awb]

Заменить ‘Ваше содержимое здесь’ с собственным содержимым, а затем сохраните страницу.

Теперь вы можете посетить свой сайт, чтобы увидеть это в действии.

Предварительный просмотр эффекта параллакса

Метод 2: Добавьте эффект параллакса в любую тему WordPress с помощью CSS

Этот метод требует от вас хорошего понимания HTML / CSS, а также того, как работают темы WordPress.

Сначала вам нужно загрузить изображение, которое вы хотите использовать для параллакс-эффекта, в медиатеку WordPress, перейдя по ссылке Медиа » Добавить новый страница.

После загрузки изображения вам нужно скопировать URL-адрес изображения, отредактировав его в медиатеке WordPress.

Скопируйте URL-адрес изображения

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

Далее вам нужно добавить следующий пользовательский CSS в вашу тему WordPress.

.параллакс < background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg"); height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; margin-left:-410px; margin-right:-410px; >.parallax-content

Не забудьте заменить URL фонового изображения на свое собственное фоновое изображение.

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

Эффект параллакса, добавленный с помощью CSS

Примечание: Вам может потребоваться настройка CSS для работы с макетом вашего сайта.

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

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий