Искате ли да добавите фоново изображение към вашия уеб сайт на WordPress?

Фоновите изображения могат да се използват, за да направят уебсайта Ви по-привлекателен и естетически приятен.

В тази статия ще ви покажем как лесно да добавите фоново изображение към вашия уеб сайт на WordPress.

Ако предпочитате писмените инструкции, моля, продължете да четете.

Метод 1. Добавете фоново изображение, като използвате настройките на темата на WordPress

Les Най-популярните WordPress теми идват с персонализирана поддръжка на заден план. Тази функция ви позволява лесно да зададете фоново изображение на вашия уеб сайт на WordPress.

Ако вашата WordPress тема поддържа функцията за персонализиран фон, препоръчваме да използвате този метод, за да добавите фоново изображение към вашия уебсайт.

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

Първо трябва да посетите страницата Външен вид »Персонализиране в администраторския панел на WordPress. Това ще стартира WordPress Theme Customizer, където можете да променяте различни настройки на тази тема, докато преглеждате предварителен преглед на живо.

След това трябва да кликнете върху опцията "Фоново изображение". Панелът ще се изплъзне и ще ви покаже опциите за качване или избор на фоново изображение за вашия уебсайт.

Щракнете върху бутона Избор на изображение, за да продължите.

Това ще доведе до WordPress изскачащ прозорец, където можете да качите изображение от вашия компютър. Също така ще можете да изберете изображение, изтеглено предварително от медийната библиотека.

След това трябва да щракнете върху бутона Избор на изображение след качване или избор на изображението, което искате да използвате във фонов режим.

Това ще затвори изскачащия прозорец за качване на мултимедия и ще видите визуализацията на избраното изображение в персонализирането на темата на WordPress.

Под изображението ще можете да видите и опциите за фоново изображение. Под " Предварително зададениМожете да изберете как искате да се появява фоновото изображение: запълване на екрана, прилягане към екрана, повторение или персонализиране.

Можете също да изберете позицията на фоновото изображение, като щракнете върху стрелките по-долу. Като щракнете върху центъра, изображението ще го приведе в съответствие с центъра на екрана.

Не забравяйте да кликнете върху бутона « публикувам За да съхраните вашите настройки. Това е, успешно сте добавили фоново изображение към вашия уеб сайт на WordPress.

Продължете и посетете уебсайта си, за да го видите в действие.

Метод 2. Добавете персонализирано фоново изображение в WordPress с помощта на приставка

Този метод е много по-гъвкав. Той работи с всяка тема на WordPress и ви позволява да конфигурирате множество фонови изображения.

Можете също така да настроите различен фон за всяка публикация, страница, категория или всяка друга секция на вашия уеб сайт на WordPress.

Той автоматично прави всичките ви фонови изображения на цял екран и отзивчиви. Това означава, че фоновото ви изображение автоматично ще преоразмерява на по-малки устройства.

На първо място, трябва да инсталирате и активирате приставката Прозорец за цял екран Pro. За повече подробности вижте нашето ръководство стъпка по стъпка как да инсталирате приставка за WordPress.

След активирането трябва да посетите страницата Външен вид »BG изображение на цял екран за конфигуриране на настройките на приставката.

Ще бъдете помолени да добавите вашия лицензен ключ. Можете да получите тази информация от имейла, който сте получили след закупуването на приставката, или от вашия акаунт на уебсайта на приставката.

След това трябва да кликнете върху „Запазване на настройките'за да съхранявате промените си. Вече сте готови да започнете да добавяте фонови изображения към вашия уеб сайт на WordPress.

Продължете и щракнете върху бутона Добавете ново изображение На страницата с настройки на приставката. Това ще ви отведе до екрана за изтегляне на фоново изображение.

Кликнете върху бутона "Изберете Изображение', за да изтеглите или изберете изображение. Веднага след като изберете изображението, ще можете да видите визуализация в реално време на изображението на вашия екран.

След това трябва да предоставите име за това изображение. Това име ще се използва вътрешно, така че можете да го използвате навсякъде.

И накрая, трябва да изберете къде искате това изображение да се използва като фоново изображение.

Full Screen Background Pro също ви позволява да настроите фонови изображения за целия уебсайт или можете да избирате от различни раздели на вашия уеб сайт, като категории, архиви, начална страница или блог.

Не забравяйте да запазите, за да съхраните фоновото си изображение.

Можете да добавите колкото искате изображения, като посетите страницата Apparence »На цял екран BG изображение 

Ако дефинирате множество изображения, които да се използват глобално, ще се покаже приставката automatiquement фонови изображения като слайдшоу.

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

Времето, което въвеждате тук, е в милисекунди. Ако искате фоновото изображение да избледнее след 20 секунди, ще трябва да въведете 20000 XNUMX.

Не забравяйте да кликнете върху бутона Запазване на опциите за да запазите промените си.

Фонови изображения за публикации, страници и категории

Full Screen Background Pro също ви позволява да задавате фонови изображения за публикации, страници, категории, тагове и др.

Просто редактирайте публикацията / страницата, където искате да покажете различно фоново изображение. На страницата за редактиране на статията ще забележите новата група " Фоново изображение на цял екран »В редактора на статии.

За да използвате фоново изображение за определена категория, трябва да посетите страницата Външен вид »Фоново изображение на цял екран, след това кликнете върху "Изберете Изображение ".

След като качите вашето изображение, можете да изберете „категория“ като контекст, в който искате да покажете фоновото изображение.

Въведете идентификатора на конкретната категория или Slug, където искате да покажете изображението. 

Не забравяйте да запазите изображението, за да съхраните настройките си.

Метод 3. Добавете персонализирани фонови изображения навсякъде в WordPress, използвайки CSS код

По подразбиране WordPress добавя множество CSS класове към различни HTML елементи на вашия уеб сайт на WordPress. Можете лесно да добавяте персонализирани фонови изображения към публикации, категории, автори и други страници, като използвате тези CSS класове, генерирани от WordPress.

Например, ако имате категория на уебсайта си, наречена TV, WordPress автоматично ще добави тези CSS класове към маркера на тялото, когато някой прегледа страницата с категорията на телевизора.

Можете да използвате инструмент за проверка за да видите точно кои CSS класове се добавят от WordPress към маркера на тялото.

Можете да използвате всеки CSS клас, за да оформите тази страница по категория по различен начин. 

категория-твкатегория-4

Нека добавим персонализирано фоново изображение към страница за архив на категория. Ще трябва да добавите този персонализиран CSS към вашата тема на WordPress.

body.category-tv { 

фоново изображение: url("https://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); 

фон-позиция: център център; 

размер на фона: капак; 

фон-повторение: не се повтаря; 

фон-прикачен файл: фиксиран;

}

Можете също да добавяте персонализирани фонове към отделни публикации и страници. WordPress добавя CSS клас с идентификатор на публикация или страница в тялото на маркера. Можете да използвате същия CSS код, просто заменете .category-tv с CSS клас на конкретна публикация.

Открийте и някои премиум приставки за WordPress  

Можете да използвате други WordPress плъгини, за да придадете модерен вид и да оптимизирате сцеплението на вашия блог или уебсайт.

Предлагаме ви тук няколко премиум WordPress приставки, които ще ви помогнат да направите това.

1. Easy Custom JS и CSS 

Тази първокласна приставка за WordPress е мощен CSS и Javascript кодов редактор, който ви позволява да добавяте такива към всяка секция на вашия уебсайт. Тя ви позволява да запазите вашите персонализации дори след голяма актуализация на вашата тема на WordPress.

Имате възможност да ограничите полето на използване на вашия персонализиран код. Например можете да използвате кода си само за статия с видео формат.

Вижте нашите статии на Как да изисквате приемане на условията за ползване в WordPress

Или можете да ограничите кода си до конкретна тема на WordPress; Кое е полезно, ако в момента променяте теми за вашия блог на WordPress.

Изтегляне | демонстрация | уеб хостинг

2. Жълт молив: Visual CSS Style Editor

Yellow Pencil е редактор на визуален стил, който можете да използвате с всяка тема, за да персонализирате уебсайта си за минути (шрифтове, цветове, анимации и още ...).

Тази премиум приставка за WordPress ще създаде CSS стилове в фон докато играете с цветовете, сякаш е игра. Той е предназначен за начинаещи, както и за опитни потребители.

Открийте и нашето 5 приставки WordPress за показване на известия

Не са необходими познания за кодиране. Приставката WordPress обаче има добър CSS редактор за тези, които обичат да кодират. Можете да кодирате на живо с този редактор и да персонализирате вашия CSS.

Изтегляне | демонстрация | уеб хостинг

3. Facebook Последни коментари Widget 

Тази джаджа ви позволява да покажете списък с най-новите коментари във Facebook от вашия блог на WordPress на първата страница или навсякъде, където има джаджа, използвана от уебсайта.

Като функции, които ще имате, наред с други: показване на всички най-нови коментари на вашия уебсайт или блог на WordPress,Автоматично или ръчно одобрение на коментари, които да се показват в джаджата,изпращане на известие по имейл, когато човек коментира чрез приставката за коментари във Facebook, добро SEO, съвместимост с всяка тема на WordPress, oопции за персонализиране на джаджа и много други.

Изтегляне | демонстрация | уеб хостинг

Препоръчителни ресурси

Научете за други препоръчани ресурси, които да ви помогнат да изградите и управлявате вашия уебсайт.

• Как да скриете джаджа WordPress на мобилен телефон
• 10 WordPress плъгини, за да подобрите визуалността на уебсайта си
• Как да мигрирате ръчно уебсайт на WordPress: Ръководството
• 7 приставки за WordPress за бутони за призив към действие в WordPress

Заключение

Тук ! Това е всичко за този урок. Надяваме се, че тази статия ви е помогнала да научите как да добавяте фоново изображение в WordPress. Не се колебайте споделяйте с приятелите си в любимите си социални мрежи. 

Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress.

Ако имате предложения или забележки, оставете ги в нашия раздел Връзка.

...