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

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

Эффект параллакса - популярная тенденция в наши дни в Интернете, когда фоновое изображение прокручивается медленнее, чем контент переднего плана.

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

Но, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге 

Но вернемся к тому, почему мы здесь.

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

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

Откройте для себя 25 WordPress темы с параллаксом для создания сайта

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

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

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

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

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

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

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

После активации плагина вам необходимо отредактировать страницу, на которой вы хотите добавить эффект параллакса. Вы заметите новую кнопку "Продвинутые фоны WordPress»На панели инструментов визуального редактора.

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

Прежде всего, вам нужно выбрать изображение в качестве фона, а затем установить флажок " Протяжение.

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

После этого вы должны активировать эффект Параллакс Выбрав тип эффекта параллакса. Есть несколько стилей, с которыми вы можете экспериментировать. Самый распространенный эффект параллакса - это прокрутка.

Нажмите кнопку Вставить для продолжения.

Плагин добавит короткий код вам, так Издательский редактор, Это будет выглядеть так:

[nk_awb awb_type = "image" awb_stretch = "true" awb_image = "22" awb_image_size = "full" awb_parallax = "прокрутка" здесь [/ nk_awb]

Заменить " этот контент По вашему собственному контенту, затем сохраните свою страницу.

Вы можете посетить свой веб-сайт, чтобы увидеть его в действии.

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

Этот метод требует от вас некоторых знаний о «HTML / CSS», а также о том, как работают темы и плагины WordPress.

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

Идите дальше, открывая для себя Как организовать СМИ в свой блог WordPress

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

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

div class = "parallax"> Ваш контент здесь ...

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

.parallax {фоновое изображение: URL ( "http://example.com/wp-content/uploads/2017/08/my-background-image.jpg"); высота: 100%; фон-вложение: фиксированный; фон положение: центр; фон-повторить: не повторять; фон-размер: крышка; Левое поле: -410px; Маржа направо: -410px; } .parallax-контента {ширина: 50%; Маржа: 0 авто; цвет: #FFF; обивка-топ: 50px; }

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

Теперь вы можете сохранить свои изменения и посетить свой веб-сайт.

Вот! Теперь вы можете добавить эффект параллакса на свой сайт WordPress.

Откройте для себя также некоторые темы и премиальные плагины WordPress  

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

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. Пожертвование WooCommerce

Принимайте через это расширение пожертвования на своем веб-сайте WooCommerce с суммами, указанными клиентами. Это позволит им отдавать столько, сколько они хотят. Каждое пожертвование может быть представлено как любой обычный продукт WooCommerce. 

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

Каждый шаг использования WooCommerce Donation описан в документации со скриншотами. Просто активируйте плагин, и в корзине вы увидите поле «Добавить пожертвование».

скачать | Демонстрация | веб-хостинг

2. LinkedIn Подробнее

LinkedIn Plus - это плагин WordPress, который позволяет вам представить свой профиль LinkedIn в своем блоге. Это также работает для блогов с несколькими авторами. Он добавляет кнопки «Подписаться» и «Поделиться» в ваши публикации, страницы или виджеты WordPress.

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

скачать | Демонстрация | веб-хостинг

3. YouTuber

YouTubeR - это уникальный плагин WordPress, который позволяет загружать видео YouTube с вашего веб-сайта и легко встраивать видео, плейлисты и каналы YouTube на ваш сайт.

С этим плагином у вас есть возможность создавать исключительные видео галереи на вашем сайте.

Другие его особенности: возможность легко загружать видео на YouTube с вашего сайта WordPress, интеграция удобные видео, плейлисты и каналы YouTube на ваш сайт, поддержка Visual Composer, бесконечная прокрутка в плейлистах, отличное кеширование, отзывчивый макет, подробная документация и многое другое.

скачать | Демонстрация | веб-хостинг

Рекомендуемые ресурсы

Узнайте о других рекомендуемых ресурсах, которые помогут вам создать и управлять своим сайтом.

• Как исправить ошибку «Невозможно записать на диск» в WordPress
• Как стать успешным блогером и зарабатывать деньги с помощью WordPress
• Как опубликовать ваши статьи по электронной почте на WordPress
• Как стать успешным блогером и зарабатывать деньги с помощью WordPress

Заключение

Это все! Мы надеемся, что это очень помогло. Не стесняйся поделиться с друзьями в ваших любимых социальных сетях. 

Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.

И если у вас есть какие-либо предложения или замечания, оставьте их в нашем разделе Комментарии.

...