Як додати ефект паралакса до будь-якої теми WordPress

Нещодавно один з наших читачів запитав нас, як додати ефект паралакса до будь-якої теми WordPress? Ефект Паралакса – це тенденція веб-дизайну, коли фонове зображення прокручується повільніше, ніж вміст переднього плану. У цій статті ми покажемо вам, як легко додати ефект паралакса до будь-якої теми WordPress.


Додавання ефекту паралакса до будь-якої теми WordPress

Що таке ефект Паралакса?

Ефект Паралакса – це сучасна техніка веб-дизайну, де фоновий елемент прокручується повільніше, ніж вміст переднього плану. Цей ефект додає глибини фоновим зображенням і змушує їх відчувати себе інтерактивними.

Ефект Паралакса може бути використаний на цільових сторінках, контенті довгих форм, сторінках продажів або домашній сторінці бізнес-веб-сайту. Це прекрасний спосіб виділити різні розділи на довгій сторінці.

Багато преміальних тем WordPress поставляються із вбудованим ефектом паралакса на своїй домашній сторінці. Ви також можете використовувати ефект паралакса в більшості плагінів WordPress для розробників сторінок.

Однак не всі теми мають вбудований ефект паралакса, і ви, можливо, не хочете використовувати конструктор сторінок для створення користувацьких макетів сторінок лише для ефекту паралакса..

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

Спосіб 1: Додайте ефект Parallax до будь-якої теми WordPress за допомогою плагіна

Цей метод не вимагає додавання будь-якого коду до теми WordPress. Це простіше і рекомендується для більшості користувачів.

Перше, що вам потрібно зробити, це встановити та активувати плагін Advanced WordPress Backgrounds. Детальніше дивіться в покроковому посібнику, як встановити плагін WordPress.

Після активації потрібно відредагувати сторінку або пост, куди потрібно додати ефект паралакса. Ви побачите нову кнопку “Розширені фони WordPress” у візуальному редакторі.

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

Натиснувши на нього, з’явиться спливаюче вікно, де ви можете змінити різні настройки для фону, який ви хочете додати.

Спочатку потрібно вибрати зображення як тип тла, а потім встановити прапорець “розтягнути”.

Параметри фону Parallax

Далі вам потрібно натиснути кнопку “Вибрати зображення”, щоб завантажити або вибрати зображення, яке ви хочете використовувати. Переконайтеся, що ви використовуєте велике зображення, інакше воно буде здаватися піксельним.

Після цього потрібно включити Parallax, вибравши тип паралакса. Існує ряд стилів, з якими можна експериментувати. Найпоширеніший ефект паралакса – це прокрутка.

Натисніть на кнопку Вставити, щоб продовжити.

Тепер плагін додасть короткий код у ваш редактор публікацій WordPress. Це буде виглядати приблизно так:

[nk_awb awb_type = “образ” awb_stretch = “справжній” awb_image = “22 ″ awb_image_size =” повний “awb_parallax =” прокрутка “awb_parallax_speed =” 0,5 ″ awb_mouse_parallax = “true” awb_mouse_parallax = “true” awb_mouse_parallax

Ваш вміст тут

[/ nk_awb]

Замініть “Ваш вміст тут” власним вмістом, а потім збережіть свою сторінку.

Тепер ви можете відвідати ваш веб-сайт, щоб побачити його в дії.

Попередній перегляд ефекту Паралакса

Спосіб 2: Додайте ефект Parallax до будь-якої теми 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");
висота: 100%;
фон-вкладення: фіксований;
фон-положення: центр;
фон-повторення: не повторення;
фоновий розмір: обкладинка;
поле-ліворуч: -410px;
поле-право: -410px;
}

.зміст паралакса {
ширина: 50%;
маржа: 0 авто;
колір: #FFF;
підкладка: 50px;
}

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

Тепер ви можете зберегти свої зміни та відвідати ваш веб-сайт, щоб побачити їх у дії.

Ефект паралакса додається за допомогою CSS

Примітка. Можливо, вам потрібно буде налаштувати CSS для роботи з компонуванням вашого сайту.

Ми сподіваємося, що ця стаття допомогла вам навчитися легко додавати паралаксальний ефект до будь-якої теми WordPress. Ви також можете побачити наш мега-список найпопулярніших порад, хитрощів та хак в WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me