Наскоро един от нашите читатели ни попита как да добавим ефект на паралакс към всяка тема на WordPress?
Ефектът Parallax е популярна тенденция в наши дни в мрежата, където фоновото изображение се превърта по-бавно от съдържанието на преден план.
В този урок ще ви покажем как лесно да добавите ефект на паралакс към всяка тема на WordPress.
Но ако никога не сте инсталирали WordPress, открийте Как да инсталирате WordPress Блог в 7 Стъпки et Как да се намери, инсталиране и активиране на WordPress тема на вашия блог
Но да се върнем защо сме тук.
Какво е паралакс ефект?
Parallax Effect е съвременна техника за уеб дизайн, при която фоновият елемент се превърта по-бавно от съдържанието на преден план. Този ефект добавя дълбочина към фоновите изображения и ги прави интерактивни.
Открийте нашите 25 WordPress теми с паралакс за създаване на уебсайт
Ефектът Parallax може да се използва върху целевите страници, страници за продажби или началната страница на бизнес уебсайт. Това е чудесен начин да откроите различни раздели на дълга страница.
много премиум теми WordPress имат вграден паралакс ефект върху началната си страница. Можете също да използвате ефекта на паралакс с повечето приставки WordPress визуално създаване на страници.
Не всички теми на WordPress обаче предлагат вграден паралакс ефект и може да не искате да използвате визуален конструктор на страници само за паралакс ефекта.
Нека да разгледаме как лесно да добавите ефекта на паралакс към всяка тема на WordPress.
Метод 1: Добавете ефекта на паралакс към всяка тема на WordPress с помощта на приставка
Този метод не изисква добавяне на никакъв код към вашата WordPress тема. Това е по-лесно и препоръчително за повечето потребители.
Първото нещо, което трябва да направите, е да инсталирате и активирате приставката Разширени WordPress фонове, За повече подробности, вижте нашето стъпка по стъпка ръководство за това как да инсталирате приставка за WordPress.
След като активирате приставката, трябва да редактирате страницата, където искате да добавите ефекта на паралакс. Ще забележите новия бутон "Разширени WordPress фонове»В лентата с инструменти на визуалния редактор.
Кликването върху него ще отвори изскачащ прозорец, където можете да промените различни настройки на фона, които искате да добавите.
На първо място, трябва да изберете изображение като фон и след това да проверите опцията " Опъвам".
След това трябва да кликнете върху бутона Изберете Изображение За да изтеглите или изберете изображение, което искате да използвате. Уверете се, че използвате голямо изображение, в противен случай то ще изглежда пикселно.
След това трябва да активирате ефекта Parallax Чрез избор на тип паралакс ефект. Има няколко налични стила, с които можете да експериментирате. Най-често използваният ефект на паралакс е превъртането.
Щракнете върху бутона Поставете да продължи.
Плъгинът ще добави a Кратък на вашия Издателство на редактора, Ще изглежда така:
[Nk_awb awb_type = "образ" awb_stretch = "истинска" awb_image = "22" awb_image_size = "пълен" awb_parallax = "превъртете" awb_parallax_speed = "0.5" awb_mouse_parallax = "истинска" awb_mouse_parallax_size = "30" awb_mouse_parallax_speed = "10000"] Съдържанието Ви тук [/ nk_awb]
Замяна " това съдържание Със собствено съдържание, след това запазете страницата си.
Можете да посетите уебсайта си, за да го видите в действие.
Метод 2: Добавете ефекта "Паралакс" към всяка тема на WordPress с CSS
Този метод изисква да имате известни познания за "HTML / CSS", както и за начина на работа на WordPress теми и приставки.
Първо трябва да качите във вашата медийна библиотека на WordPress, изображението, което искате да използвате за ефекта на паралакса, като посетите " медия> Добавяне на нов ".
Отидете по-далеч, като откриете Как да организирате медиите във Вашия WordPress Блог
След като качите изображението, трябва да копирате URL адреса на изображението, като редактирате изображението в медийната библиотека на WordPress.
След това трябва да добавите следния HTML код на страницата, където искате да покажете ефекта на паралакс. Можете също да добавите този HTML код към вашия Тема на WordPress или темата за вашето дете.
div class = "паралакс"> Вашето съдържание тук ...
След това трябва да добавите следния персонализиран CSS код към вашата WordPress тема.
.parallax { фоново изображение: url("https://example.com/wp-content/uploads/2017/08/my-background-image.jpg"); височина: 100%; фоново прикачване: фиксирано; позиция на фона: център; фоново повторение: без повторение; размер на фона: корица; margin-left:-410px; margin-right:-410px; } .parallax-content { ширина:50%; margin:0 себе си; цвят:#FFF; padding-top:50px; }
Не забравяйте да замените URL адреса на фоновото изображение със свое собствено изображение.
Сега можете да запазите промените си и да посетите уебсайта си.
Ето го ! Сега можете да добавите ефекта на паралакс към вашия уеб сайт на WordPress.
Открийте също някои теми и премиум WordPress приставки
Можете да използвате други WordPress плъгини, за да придадете модерен вид и да оптимизирате сцеплението на вашия блог или уебсайт.
Предлагаме ви тук няколко премиум WordPress приставки, които ще ви помогнат да направите това.
1. Доброволно дарение
Приемете чрез това разширение дарения на вашия уебсайт на WooCommerce със суми, посочени от клиентите. Те ще могат да дават колкото искат. Всяко дарение може да бъде представено като всеки обикновен продукт на WooCommerce.
Ако клиентът прескочи страницата с количката или отиде директно на касата, без да направи дарение, над страницата за плащане ще се появи връзка, за да може да направи дарение.
Всяка стъпка от използването на WooCommerce Donation е обяснена в документация със скрийншотове. Просто активирайте приставката и ще намерите полето "Добавяне на дарение" в количката.
Изтегляне | демонстрация | уеб хостинг
2. Още
LinkedIn Plus е плъгин за WordPress, който ви позволява да покажете профила си в LinkedIn в блога си. Той работи и за блогове с множество автори. Добавя бутони „Следвай“ и „Споделяй“ към вашите публикации, страници или джаджи в WordPress.
Това е чудесен начин да добавите всички функции на LinkedIn към вашия блог и да потвърдите марката си с потребителите. Той ви дава възможност да персонализирате външния му вид, да конфигурирате настройките и да активирате други разширени опции за популяризиране на вашия профил до потенциални служители на подбор или работодатели.
Изтегляне | демонстрация | уеб хостинг
3. Участник в YouTube
YouTubeR е уникален плъгин за WordPress, който ви позволява да качвате видеоклипове в YouTube от вашия уебсайт и лесно да вграждате видеоклипове, плейлисти и канали от YouTube в уебсайта си.
С този плъгин имате възможност да създадете изключителни видео галерии на вашия уебсайт.
Другите му характеристики са: възможността за лесно качвайте видеоклипове в YouTube от вашия WordPress уебсайт, интеграция лесни видеоклипове, плейлисти и YouTube канали към вашия уебсайт, поддръжка за Visual Composer, безкрайно превъртане в плейлисти, отлично кеширане, отзивчиво оформление, подробна документация и др.
Изтегляне | демонстрация | уеб хостинг
Препоръчителни ресурси
Научете за други препоръчани ресурси, които да ви помогнат да изградите и управлявате вашия уебсайт.
- Как да коригирам грешка „Не може да се запише на диск“ в WordPress
- Как да станете успешен блогър и да печелите пари с WordPress
- Как да публикуват статиите си по електронна поща на WordPress
- Как да станете успешен блогър и да печелите пари с WordPress
Заключение
Това е всичко! Надяваме се, че е било от голяма помощ. Не се колебайте споделяйте с приятелите си в любимите си социални мрежи.
Ще можете обаче да се консултирате с нас грабене на ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress.
И ако имате някакви предложения или забележки, оставете ги в нашия раздел Връзка.
...