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

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

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

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

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

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

Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится - тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.

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.

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


Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.
2 комментария к статье "Как добавить Parallax-эффект к любой теме WordPress"
  1. Юрич: 11.12.2017 в 11:13

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

  2. Айк: 11.12.2017 в 03:55

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

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

Заказать сайт