Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

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

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

Как добавить эффект параллакса к любой теме wordpress e1567702269161

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

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

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

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

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

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

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

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

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

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

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

Добавить продвинутый фон wordpress

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

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Расширенный фон окна Wordpress

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

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

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

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

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

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

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

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

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

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

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

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

Скопируйте URL-адрес изображения в wordpress

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

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

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

.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, чтобы придать современный вид и оптимизировать управление вашим блогом или веб-сайтом.

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

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

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


Плагин для пожертвований Woocommerce

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

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

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

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

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

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

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

3. YouTuber

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

Плагин youtube для WordPress

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

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

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

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

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

Заключение

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

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

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

... 

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

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

Вверх
6 акции
доля3
чирикать
Регистрация3