Недавно один из наших читателей спросил нас, как добавить эффект параллакса в любую тему WordPress? Эффект параллакса — это тенденция веб-дизайна, при которой фоновое изображение прокручивается медленнее, чем содержимое переднего плана. В этой статье мы покажем вам, как легко добавить эффект параллакса в любую тему WordPress.
Что такое эффект параллакса?
Эффект параллакса — это современная техника веб-дизайна, при которой фоновый элемент прокручивается медленнее, чем содержимое переднего плана. Этот эффект добавляет глубину фоновым изображениям и делает их интерактивными.
Эффект параллакса можно использовать на целевых страницах, длинном контенте, страницах продаж или главной странице бизнес-сайта. Это отличный способ выделить различные разделы на длинной странице.
Многие премиум-темы WordPress поставляются со встроенным эффектом параллакса на главной странице. Вы также можете использовать эффект параллакса в большинстве плагинов для построения страниц WordPress.
Однако не все темы имеют встроенный эффект параллакса, и вы можете не захотеть использовать конструктор страниц для создания пользовательских макетов страниц только ради эффекта параллакса.
Давайте рассмотрим, как легко добавить эффект параллаксного фона в любую тему WordPress.
Метод 1: Добавьте эффект параллакса в любую тему WordPress с помощью плагина
Этот метод не требует добавления какого-либо кода в вашу тему WordPress. Это проще и рекомендуется для большинства пользователей.
Первое, что вам нужно сделать, это установить и активировать плагин Advanced WordPress Backgrounds. Для получения более подробной информации смотрите наше пошаговое руководство по установке плагина WordPress.
После активации, вам нужно отредактировать страницу или пост, где вы хотите добавить эффект параллакса. Вы заметите новую кнопку ‘Advanced WordPress Backgrounds’ в визуальном редакторе.
При нажатии на него появится всплывающее окно, в котором вы можете изменить различные настройки для фона, который вы хотите добавить.
Во-первых, вам нужно выбрать изображение в качестве типа фона, а затем отметить опцию «растянуть».
Далее вам нужно нажать на кнопку «Выбрать изображение», чтобы загрузить или выбрать изображение, которое вы хотите использовать. Убедитесь, что вы используете большое изображение, иначе оно будет выглядеть пикселированным.
После этого вам нужно включить параллакс, выбрав тип параллакса. Существует несколько стилей, с которыми вы можете поэкспериментировать. Наиболее часто используемым параллакс-эффектом является прокрутка.
Нажмите на кнопку «Вставить», чтобы продолжить.
Теперь плагин добавит шорткод в редактор постов 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.
Далее вам нужно добавить следующий 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 для работы с макетом вашего сайта.
Надеемся, эта статья помогла вам узнать, как легко добавить эффект параллакса в любую тему WordPress. Вы также можете посмотреть наш мега список самых нужных советов, трюков и хаков WordPress.
Источник: www.wpbeginner.com