Chcete na svoj web WordPress pridať obrázok na pozadí?

Pomocou obrázkov na pozadí môžete urobiť svoju webovú stránku atraktívnejšou a esteticky príjemnejšou.

V tomto článku si ukážeme, ako ľahko pridať obrázok na pozadí na svoj web WordPress.

Ak dávate prednosť písomným pokynom, pokračujte v čítaní.

Metóda 1. Pridajte obrázok na pozadí pomocou nastavení témy WordPress

Les Najobľúbenejšie WordPress témy prísť s vlastnou podporou pozadia. Táto funkcia vám umožňuje ľahko nastaviť obrázok na pozadí na vašom webe WordPress.

ak váš WordPress tému podporuje vlastnú funkciu pozadia, odporúčame použiť túto metódu na pridanie obrázka na pozadí na vašu webovú stránku.

Ak však váš WordPress tému nepodporuje túto funkciu, alebo ak sa vám nepáči spôsob, akým implementuje obrázky na pozadí, môžete vyskúšať ďalšie možnosti uvedené v našom návode.

Najprv musíte navštíviť stránku Vzhľad »Prispôsobiť vo vašom správcovi WordPress. Tým sa spustí Customizer WordPress tému kde môžete zmeniť rôzne nastavenia tejto témy pri zobrazení ukážky v reálnom čase.

Ako pridať obrázok na pozadí wordpress blogpascher 1

Potom musíte kliknúť na možnosť 'Obrázok na pozadí". Panel sa vysunie a zobrazí vám možnosti nahrania alebo výberu obrázka na pozadí vášho webu.

Ako pridať obrázok na pozadí wordpress blogpascher 2

Pokračujte kliknutím na tlačidlo Vybrať obrázok.

Zobrazí sa kontextové okno WordPress, do ktorého môžete nahrať obrázok z počítača. Budete tiež môcť vybrať obrázok predtým stiahnutý z knižnice médií.

Ako pridať obrázok na pozadí wordpress blogpascher 3

Po nahraní alebo výbere obrázka, ktorý chcete použiť na pozadí, musíte kliknúť na tlačidlo Vybrať obrázok.

Týmto sa zatvorí vyskakovacie okno na nahrávanie médií a v prispôsobení témy WordPress sa zobrazí ukážka vybratého obrázka.

Ako pridať obrázok na pozadí wordpress blogpascher 4

Pod obrázkom uvidíte aj možnosti obrázka na pozadí. Pod „ presetMôžete si zvoliť, ako sa má obrázok na pozadí zobrazovať: vyplniť obrazovku, prispôsobiť obrazovke, opakovať alebo prispôsobiť.

Kliknutím na šípky dole môžete tiež zvoliť pozíciu obrázka na pozadí. Kliknutím na stred sa obrázok zarovná so stredom obrazovky.

Nezabudnite kliknúť na tlačidlo « publikovať Na uloženie vašich nastavení. To je všetko, na svoju webovú stránku WordPress ste úspešne pridali obrázok na pozadí.

Pokračujte ďalej a navštívte svoj web, aby ste ho videli v akcii.

Metóda 2. Pridajte vlastný obrázok na pozadí v aplikácii WordPress pomocou doplnku

Táto metóda je oveľa flexibilnejšia. Funguje s ľubovoľnou témou WordPress a umožňuje vám konfigurovať viac obrázkov na pozadí.

Môžete tiež nastaviť rôzne pozadie pre ľubovoľný príspevok, stránku, kategóriu alebo akúkoľvek inú časť svojho webu WordPress.

To automaticky robí všetky vaše obrázky na pozadí na celú obrazovku a reaguje. To znamená, že váš obrázok na pozadí sa automaticky zmení na menších zariadeniach.

Najprv musíte nainštalovať a aktivovať doplnok Celá obrazovka na pozadí Pro. Viac podrobností nájdete v našom podrobnom sprievodcovi ako nainštalovať doplnok WordPress.

Po aktivácii musíte stránku navštíviť Vzhľad »BG obraz na celú obrazovku na konfiguráciu nastavení doplnku.

Pozadie na celú obrazovku

Zobrazí sa výzva na pridanie licenčného kľúča. Tieto informácie môžete získať z e-mailu, ktorý ste dostali po zakúpení doplnku, alebo z vášho účtu na webovej stránke doplnku.

Potom musíte kliknúť na 'Uložiť nastavenia„na uloženie zmien. Teraz ste pripravení začať pridávať obrázky pozadia na svoj web WordPress.

Choďte do toho a kliknite na tlačidlo Pridať nový obrázok Na stránke nastavení doplnku. Dostanete sa na obrazovku sťahovania obrázkov na pozadí.

pridať nový obrázok na pozadí

Kliknite na tlačidlo 'Vyberte Obrázok'na stiahnutie alebo výber obrázka. Hneď ako vyberiete obrázok, uvidíte na obrazovke jeho náhľad v reálnom čase.

Potom musíte pre tento obrázok uviesť názov. Tento názov sa bude používať interne, takže ho môžete použiť kdekoľvek.

Nakoniec musíte vybrať, kde chcete tento obrázok použiť ako obrázok na pozadí.

Celá obrazovka Pozadie Pro vám tiež umožňuje nastaviť obrázky na pozadí celého webu alebo si môžete vybrať z rôznych sekcií webu, ako sú kategórie, archívy, domovská stránka alebo blog.

Nezabudnite uložiť, aby ste uložili svoj obrázok na pozadí.

Na stránke môžete pridať ľubovoľný počet obrázkov apparence »Celý obraz BG 

Ak definujete globálne viac obrázkov, zobrazí sa doplnok automaticky obrázky na pozadí ako prezentácia.

Môžete upraviť čas potrebný na zmiznutie obrázka a čas, po ktorom sa objaví nový obrázok na pozadí.

Nastavenia stmievania a stmievania pozadia

Čas, ktorý tu zadáte, je v milisekundách. Ak chcete, aby obrázok na pozadí zmizol po 20 sekundách, budete musieť zadať 20000 XNUMX.

Nezabudnite kliknúť na tlačidlo Možnosti uloženia uložte svoje zmeny.

Obrázky na pozadí pre príspevky, stránky a kategórie

Full Screen Background Pro tiež umožňuje nastaviť obrázky na pozadí príspevkov, stránok, kategórií, značiek a ďalších.

Stačí upraviť príspevok / stránku, na ktorej chcete zobraziť iný obrázok na pozadí. Na stránke úpravy článku si všimnete novú skupinu „ Obrázok na pozadí celej obrazovky »V editore článku.

Pridanie obrázka na pozadí pre jeden príspevok alebo stránku

Ak chcete pre konkrétnu kategóriu použiť obrázok na pozadí, musíte navštíviť túto stránku Vzhľad »Obrázok na pozadí celej obrazovky, potom kliknite na „Vyberte Obrázok ".

Po nahraní obrázka môžete ako kontext zvoliť „kategóriu“, kde chcete zobraziť obrázok na pozadí.

Nastavte obrázok na pozadí pre konkrétnu kategóriu

Zadajte ID konkrétnej kategórie alebo slimáka, kde chcete zobraziť obrázok. 

Nezabudnite uložiť svoj obrázok, aby ste uložili svoje nastavenia.

Metóda 3. Pridajte vlastné obrázky na pozadí kdekoľvek na WordPress pomocou kódu CSS

V predvolenom nastavení WordPress pridáva viac tried CSS do rôznych prvkov HTML na vašom webe WordPress. Pomocou týchto tried CSS generovaných pomocou WordPress môžete ľahko pridať vlastné obrázky na pozadí k príspevkom, kategóriám, autorom a iným stránkam.

Napríklad ak máte na svojom webe kategóriu s názvom TV, WordPress automaticky pridá tieto triedy CSS do značky tela, keď si niekto pozrie stránku s televíznou kategóriou.

 

Môžete použiť inšpekčný nástroj presne zistiť, ktoré triedy CSS sú WordPressom pridané k značke body.

Pomocou nástroja na kontrolu si môžete pozrieť triedy pridané WordPressom

Na prispôsobenie tejto stránky kategórie môžete použiť ktorúkoľvek triedu CSS. 

kategórii tvcategory-4

Pridajme na stránku archívu kategórií vlastný obrázok na pozadí. Budete musieť pridať tento vlastný CSS do svojej témy WordPress.

body.category-tv { 

background-image: url ("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); 

pozacia pozicia: stred stred; 

pozadie-veľkosť: kryt; 

opakovanie pozadia: neopakovanie; 

príloha na pozadí: opravená;

}
Nezabudnite nahradiť adresu URL obrázka na pozadí a triedu kategórií vlastnou kategóriou.

K jednotlivým príspevkom a stránkam môžete tiež pridať vlastné pozadie. WordPress pridá triedu CSS s ID príspevku alebo stránky do tela značky. Môžete použiť rovnaký kód CSS, stačí nahradiť .category-tv triedou CSS konkrétneho príspevku.

Objavte aj niektoré prémiové doplnky WordPress  

Môžete použiť iné WordPress pluginy poskytnúť moderný vzhľad a optimalizovať prácu s vaším blogom alebo webovou stránkou.

Ponúkame vám tu niekoľko prémiových doplnkov WordPress, ktoré vám to pomôžu.

1. Jednoduché vlastné JS a CSS 

Ce WordPress Plugin premium je výkonný editor kódu CSS a JavaScript, ktorý vám umožňuje pridať ich do ľubovoľnej sekcie vášho webu. Umožňuje vám ponechať si prispôsobenia aj po veľkej aktualizácii vašej témy WordPress. Jednoduché prispôsobenie doplnkov wordpress pre js a css

Máte možnosť obmedziť oblasť použitia vášho prispôsobeného kódu. Môžete napríklad použiť svoj kód iba pre článok vo formáte videa.

Pozrite si naše články o Ako požadovať prijatie podmienok používania na WordPress

Alebo môžete obmedziť svoj kód na konkrétnu tému WordPress; To je užitočné, ak práve meníte motívy pre svoj blog WordPress.

Stiahnuť | demo | web hosting

2. Žltá ceruzka: Editor štýlov Visual CSS

Žltá ceruzka je editor vizuálneho štýlu, ktorý môžete použiť s ľubovoľnou témou na prispôsobenie svojho webu za pár minút (písma, farby, animácie a ďalšie ...).Yellowpencil vizuálny editor štýlov css wordpress

Ce WordPress Plugin premium vytvorí CSS štýly podľa pozadia zatiaľ čo hráte s farbami, akoby to bola hra. Bola určená pre začiatočníkov aj skúsených používateľov.

Objavte aj naše Doplnky 5 WordPress na zobrazenie upozornení

Nevyžadujú sa žiadne znalosti kódovania. Avšak, WordPress Plugin má dobrý editor CSS pre tých, ktorí radi kódujú. Pomocou tohto editora môžete kódovať naživo a prispôsobiť si svoj CSS.

Stiahnuť | demo | web hosting

3. Widget Nedávne komentáre na Facebooku 

Tento widget umožňuje zobraziť zoznam najnovších komentárov Facebooku z vášho blogu WordPress na prvej stránke alebo kdekoľvek, kde sa nachádza widget používaný webovou stránkou.

Posledné komentáre na Facebooku wordpress widget plugin pre wordpress pre komentáre na facebooku

Medzi funkciami, ktoré okrem iného budete mať k dispozícii: zobrazovanie všetkých posledných komentárov na vašom webe alebo blogu WordPress,Automatické alebo manuálne schválenie komentárov, ktoré sa majú zobraziť na miniaplikácii,posielanie e-mailových oznámení, keď osoba komentuje prostredníctvom pluginu Facebook comments, dobrý SEO, kompatibilita s ľubovoľná téma WordPress, omožnosti prispôsobenia miniaplikácie a omnoho viac.

Stiahnuť | demo | web hosting

Odporúčané zdroje

Zistite ďalšie odporúčané zdroje, ktoré vám pomôžu pri vytváraní a správe vašich webových stránok.

záver

Tu ! To je pre tento návod všetko. Dúfame, že vám tento článok pomohol naučiť sa, ako pridať obrázok na pozadí vo WordPress. Neváhaj zdieľať so svojimi priateľmi na obľúbených sociálnych sieťach

Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, pozrite si nášho sprievodcu Tvorba blogu WordPress.

Ak máte nejaké návrhy alebo pripomienky, nechajte ich v našej sekcii Komentáre.

...