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

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

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

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

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

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

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

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

Откройте для себя 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 класс = "параллакс"> <DIV класс = "параллакс-содержание"> Ваше содержание здесь ... </ DIV> </ DIV>

Затем вам нужно добавить следующий пользовательский код 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 объясняется в документации со скриншотами. Просто активируйте плагин, и вы найдете поле «Добавить подарок» в корзине.

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

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.

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

...