Как добавить Parallax-эффект к любой теме WordPress

Приветствую, друзья!

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

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

Что такое Parallax-эффект?

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

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

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

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

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

Способ номер 1: Добавить эффект Parallax для любой темы WordPress с помощью плагина

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

Первое, что вам нужно сделать, это установить и активировать плагин Advanced WordPress Backgrounds. После активации вам нужно отредактировать страницу или сообщение, где вы хотите добавить эффект параллакса. Вы заметите новую кнопку «Advanced WordPress Backgrounds» (дополнительный фон WordPress) в визуальном редакторе.

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

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

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

Убедитесь, что вы используете большое изображение, иначе оно будет отображаться очень коряво на сайте.

После этого вам нужно включить Parallax, выбрав тип параллакса. Есть несколько доступных стилей, с которыми вы можете поэкспериментировать. Наиболее часто используемый эффект параллакса — это прокрутка.

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

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

[zx_zacompom zacompom_type="image" zacompom_stretch="true" zacompom_image="22" zacompom_image_size="full" zacompom_parallax="scroll" zacompom_parallax_speed="0.5" zacompom_mouse_parallax="true" zacompom_mouse_parallax_size="30" zacompom_mouse_parallax_speed="10000"]
Тут будет ваш контент
[/zx_zacompom]

Замените «Тут будет ваш контент» своим собственным контентом, а затем сохраните свою страницу.

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

Способ номер 2. Добавить эффект Parallax для любой темы WordPress с помощью CSS

Этот способ требует, чтобы вы хорошо разбирались в HTML/CSS, а также в том, как работают темы WordPress.

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

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

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

<div class="prlx">
<div class="prlx-inner">
 
Сюда вставляете Ваш контент...
 
</div>
</div>

Затем вам нужно добавить следующие стили CSS в тему WordPress.

.prlx {  
	background-image: url("https://zacompom.ru/wp-content/themes/zacompom/background.jpg");
	height: 100%; 
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-left: -480px;
	margin-right: -480px;
}
 
.prlx-inner { 
	width: 50%;
	margin: 0 auto;
	color: #eee;
	padding-top: 50px; 
}

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

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

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

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

На этом разрешите откланятся. До скорых встреч. С вами был — ваш Юрич!

Вам понравилась статья?
плохохорошо (+1 баллов, 1 оценок)
Загрузка...
Обо мне
Юрич:
Занимаюсь созданием сайтов на ВордПресс более 5 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на вордресс, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!
2 комментария к статье "Как добавить Parallax-эффект к любой теме WordPress"
  1. Айк: 11.12.2017 в 03:55 - Ответить

    Отличная статья !

    Жаль у вас нет подписной формы, а то бы я подписался на ваш блог 🙁

  2. Юрич: 11.12.2017 в 11:13 - Ответить

    Здравствуйте, Айк!
    Если вы дочитали статью до конца, то там есть форма подписки на обновления блога). Так что подписывайтесь.