Kako napraviti prozirnu pozadinu u wordpressu. Prozirna pozadina ili tekst pomoću CSS-a

Pozadina je slika na kojoj su prikazani svi elementi stranice. Ili to možda nije slika, već jednobojna ili gradijentna boja.

Većina predložaka ne podržava postavljanje i promjenu pozadine. Međutim, nisu sve teme u mogućnosti to učiniti, osobito kada su u pitanju besplatne kopije. Ali čak i ako na svojoj stranici imate instaliran predložak u kojemu možete promijeniti pozadinu WordPressa u postavkama, to će biti vrlo oskudna operacija, budući da će se promjene primijeniti na cijelu stranicu odjednom. U običnim predlošcima nije moguće promijeniti pozadinu samo nekih objava, kategorija ili stranica.

U ovom članku ćemo vam reći o dva jednostavna dodatka koji rješavaju ovaj problem u nekoliko klikova.

Pozadina po stranici

Ovo je najjednostavniji dodatak koji vam omogućuje izvođenje operacija s WordPress pozadinom. Nakon instalacije i aktivacije neće se pojaviti nikakve postavke ili dodatne stavke na upravljačkoj ploči stranice. Samo će na svakoj stranici objave i stranice biti nova opcija koja će vam omogućiti dodavanje prilagođene pozadinske slike.

Na sliku odabranu za WordPress pozadinu može se primijeniti nekoliko efekata:

  • Odaberite ponavljanje – vodoravno ili okomito;
  • Učinite sliku pomičnom sa stranice ili fiksnom, tzv.
  • Odaberite orijentaciju pozadine WordPressa – desno, lijevo, središte;
  • Odaberite običnu ispunu bojom umjesto slika.

Dodatak je besplatan. Štoviše, svaka preuzeta WordPress pozadina može se uređivati ​​u ugrađenom uređivaču ovog dodatka.

Pozadinske slike na cijelom zaslonu Pro

Ovaj je dodatak složeniji za korištenje i omogućuje vam izvođenje više operacija s WordPress pozadinom. Plaća se i košta 13 dolara. Nakon instaliranja aktivacije dodatka, na administrativnoj ploči pojavit će se stavka izbornika. Pohranjuje galeriju pozadina, gdje možete dodavati, brisati i uređivati ​​slike u bilo kojem trenutku.

Osim toga, možete postaviti WordPress pozadinu za bilo koju objavu ili stranicu, identificirajući ih pomoću ID-a početna stranica, bilo koja kategorija, arhivske stranice, pa čak i 404 stranice.

Široke mogućnosti ovog dodatka nadopunjene su funkcijom koja je bila u prvom - na stranici za dodavanje svake stranice i objave dodane su opcije za instaliranje ovog ili onog pozadinska slika, s editorom i svim mogućim efektima.

Sve u svemu, odličan alat za izradu WordPress pozadine. I plaćeni i besplatni dodaci prikladni su za rješavanje mnogih problema povezanih s ovim.


Danas sam u svojoj praksi naišao na činjenicu da je za pozadinu menija bilo potrebno postaviti prozirnost. Postojala je opcija, naravno, da to učinim pomoću slike.png, ali sam ipak odlučio zakopati i učiniti to prozirna pozadina S koristeći CSS . Ispalo je prilično lako :)

U html kod upisujemo “klasu” za koju je potrebno postaviti određenu transparentnost:

FON (pozadina: rgba(200, 54, 54, 0.5); )

Stoga sam odredio boju pozadine postavljanjem vrijednosti za tri primarne boje (crvena - r, zelena - g, plava - b), a prozirnost pozadine do 50% (alfa - a) s jednim svojstvom. Vrijednosti za boju navedene su u rasponu od 0 do 255, a za prozirnost raspon će biti od 0,0 do 1,0

Vlasništvo rgba vrijedi i za sve ostale elemente. Ali ako postane potrebno postaviti transparentnost za sve elemente u određenoj klasi, tada možete koristiti svojstvo neprozirnost, koji postavlja prozirnost za cijeli element ili cijelu stranicu. tada će kod izgledati ovako:

FON (neprozirnost: 0,5; )

U tom će slučaju svi elementi u ovoj klasi postati transparentni, uključujući slike i tekst će biti transparentni.

Pretplatite se i primajte korisne članke putem e-pošte!

Ostali cool članci na našem blogu

  • Znam da u praksi često postoji situacija da vlasnik stranice više puta “prepravlja” ili kreira stranicu “ispočetka” i na kraju ne dobije željeni rezultat. U ovom slučaju, trebali biste...
  • Pridruženi materijal! Zahvaljujući stalnom fokusu tražilice izravno na samog korisnika interneta i indikatore najnovijih ažuriranja Google algoritmi, vlasnicima web stranica postalo je još važnije obratiti pozornost na njihovu brzinu učitavanja...
  • Gledajte, ako imate zadatak "razvoja web stranice ključ u ruke", slijedite ovu poveznicu i delegirajte zadatak nama. Ako vam treba primjer projektni zadatak- pogledajte članak “Specifikacije za izradu...
  • Pridruženi materijal! - Želite li objaviti svoj članak? Mnogim se vlasnicima web stranica SEO optimizacija čini kao vrlo težak zadatak. Zapravo to nije istina. Privlačenje visokokvalificiranih stručnjaka za promociju može biti vrlo...


Nedavno sam govorio o rješenjima za - osim koristeći CSS i Javascript također se nose s ovim zadatkom 2 WordPress dodatak. Danas ću detaljnije razmotriti jedan od njih - ovo je Background Manager. Nema svaka tema postavke za promjenu pozadine web mjesta, a neće svaki korisnik to moći ispraviti kroz stilove u predlošku. Osim toga, modul ima nekoliko dodatnih zanimljive karakteristike, pa je odlučeno da se to detaljnije prouči.

Ažuriranje 8.11.2018.: Nažalost, modul nije ažuriran dugo vremena, a sada je potpuno nestao iz službenog repozitorija direktorija dodataka. Pročitajte članak ili pogledajte izbor dodataka.

Modul možete pronaći na ovoj stranici ili ga instalirati po imenu s WordPress administratorske ploče. U vrijeme pisanja smatran je dosta starim, jer... podržana verzija završila je na 3.7.8. Nažalost, dodatak možda trenutno nije ni podržan. Međutim, uspješno sam ga testirao na Najnovija verzija sustavi 4.2.1. Osim toga, nećete pronaći 30 tisuća preuzimanja u svakom modulu.

Glavni zadatak dodatka Background Manager je prikazati slučajnu pozadinu za svakog novog posjetitelja ili stvoriti slideshow od nekoliko slika. Iskreno, u početku sam mislio da će mi modul jednostavno pomoći da napravim klikabilnu pozadinu, ali njegove funkcije su nešto raznolikije. Dopušta:

  • stvoriti skupove slika iz kojih će slike biti umetnute kao pozadina stranice. Možete ih preuzeti sa lokalno računalo, WordPress medijska biblioteka ili drugi moduli;
  • odrediti položaj pozadine, njezinu "replikaciju" (ako je uzorak);
  • nanesite uzorke na pozadinu;
  • pogledajte cijelu sliku nakon učitavanja, umjesto da čekate da se postupno pojavi od vrha prema dolje (ako imate sporu internetsku vezu);
  • postaviti pozadinski prikaz na određene stranice: glavna stranica, odjeljci, arhive ili postovi;
  • dodajte poveznicu za pozadinu s izračunom statistike konverzije putem Google Analytics.

Kao što vidite, vrlo zanimljiv skup opcija. Ovo je globalno govoreći o mogućnostima, ali Background Manager modul je pun svakakvih detalja. Tako, na primjer, možete odabrati prozirnost uzorka preklapanja, odrediti učinak prilikom prijelaza između slika u dijaprojekciji itd.

Izvan postavki modula naći ćete u odjeljku " Izgled" - "Pozadina". Ovdje, usput, dolazi do situacije da možete imati dvije stavke izbornika s istim imenom odjednom. Ako se sjećate, onda u nekim WordPress teme Postoji slična postavka. Dakle, dodatak Background Manager potpuno je kompatibilan s njim i njime možete upravljati u ovom odjeljku.

Ali bolje je otići na "Pozadinu", koja predstavlja samo postavke modula. Na ovoj stranici vidjet ćete samo mnogo različitih postavki.

Međutim, prvi korak je stvaranje skupa slika za pozadinu - kliknite na poveznicu “ Dodaj novi skup slika". Dostupne skupove možete pogledati u kartici "Skupovi slika".

Kao što sam već rekao, ovdje ima puno postavki, tu su:

  • princip odabira slika za pozadinu - nasumično itd.;
  • prikazivanje različitih slika svaki put ili njihovo pamćenje u sesiji preglednika;
  • boja pozadine;
  • prikazivanje pozadine na cijelom ekranu ili “repliciranje”;
  • prekrivanje uzorka na vrhu slike;
  • možete dodati gumb Pin It s Pinteresta i definirati niz drugih opcija.

Na kraju, treba napomenuti da ponekad mogu nastati problemi s prikazom pozadine. Ako imate strogu dodjelu ili nadjačavanje pozadine u CSS-u predloška, ​​tada dodatak Upravitelj pozadine možda neće raditi. Na primjer, na jednoj sam stranici lako učitao sliku i zamijenio svojstvo pozadine u stilovima, ali u ovom sam blogu to morao posebno komentirati. Teško je reći o čemu to ovisi. Ovo se na kraju dogodilo.

Općenito, Background Manager je cool dodatak koji vam omogućuje prikaz različitih slika za pozadinu vaše web stranice, pa čak i izradu slajdova od njih. Za neke projekte ovo može biti izvrstan "ukrasni" element.

Što se tiče veza iz pozadine u Background Manager-u. Postoji slična opcija u postavkama i možete odrediti poveznicu za svaku sliku. testirao sam ovu funkciju i čini se da je sve radilo u vrijeme pisanja. Međutim, sada s tim postoje problemi. Jedino što sam mogao učiniti je postaviti vezu u poseban element - pogledajte ikonu [+] na gornjoj snimci zaslona. Ova značajka dodatka radi bez problema.

blog na WordPressu može se mijenjati najviše različiti putevi, te da su te promjene stvarno napravljene u kodovima PHP datoteke nalazi se u mapi aktivne teme dizajna na blogu.

Sada kritički pogledaj svoj blog. Uskoro će puno toga na njemu biti drugačije jer u principu na svome možete mijenjati što god želite. Naravno, samo trebate znati kako to učiniti.

U upravnoj ploči

Prijavite se na administrativnu ploču u Izgled – urednik . Već znate za što su odgovorni mnogi predlošci, ali sada vas neće zanimati predlošci, već ono što se nalazi ispod njih: Stilovi. Točnije, jedan njihov dio, koji je tzv Popis stilova.

Datoteka koja odgovara ovom popisu je stil.css. Ova se datoteka nalazi na blogu u mapi aktivne teme. Tamo ga uvijek možete pronaći.

U pregledniku

Samo otvorite svoj preglednik. Većina preglednika ima zgodnu značajku: možete desnom tipkom miša kliknuti bilo koje područje na blogu i odabrati s popisa operacija Pregled koda elementa . Na dnu se pojavljuje prozor u kojem možete pronaći zanimljive informacije o elementu na koji ste kliknuli.

U ovom prozoru lijevo Vidjet ćete kod stranice i redak će biti označen u tom kodu. koji odgovara ovom elementu. A desno, u stilovima će biti svojstva ovog elementa.

Veličina fonta, uvlake, boja teksta i pozadine, poravnanje: sve je u stilovima , a sve se to može promijeniti.

Promjena boje pozadine

Na WordPress blog Osobno ne volim kada se pozadina članaka i pozadina svega drugog razlikuju. U ovom slučaju, članci u feedu pojavljuju se u zasebnim blokovima i, po mom mišljenju, ne izgledaju baš dobro. Pozadina će svugdje biti ista kao trenutna pozadina članka. Desnom tipkom miša kliknite na pozadinu koju želimo promijeniti i odaberite View element code. U liniji koja će biti označena kao rezultat s desne strane, zanimat će nas ime atributa klase . Stilovi su posebno propisani prema klasi.

U u ovom slučaju klasa = art-layout-cell To znači da u stilovima, u datoteci stil.css, također će postojati takva klasa, a svojstva će već biti navedena u njoj. Samo će izgledati drugačije, naime:

.art-layout-cell, a zatim će svojstva ove klase biti zapisana u vitičastim zagradama.

Pronađite klasu s ovim imenom u datoteci stil.css. Upotrijebimo funkciju pretraživanja Ctrl+F, i unesite ime u okvir za pretraživanje: art-layout-cell. Odmah ćemo vidjeti pozadinu:

boja pozadine: prozirna. Transparentan sredstva transparentan .

Sada, koja boja nam treba? Gdje mogu nabaviti boju pozadine naših članaka? Ovaj put ćemo iskoristiti FSCapture program. U tome. između ostalog, među skupom alata koje možete pronaći pipeta, koji određuje boju bilo kojeg područja na zaslonu monitora. Vrlo koristan alat!

Otvorite program FSCapture, idite na postavke i odaberite alat Kapaljka za zaslon . Pritisnite željeno područje na ekranu. U prozoru Hex Vidjet ćete kod za boju koja vam je potrebna: D2E8EE

Umetnete ga u stil art-layout-cell umjesto riječi Transparentan .

Pogledaj što se dogodilo. Ima još puno posla, ali početak je već napravljen.

Video o tome. kako urediti pozadinu na wordpress blogu

Više pojedinosti Možete ga dobiti u odjeljcima "Svi tečajevi" i "Uslužni programi", kojima možete pristupiti putem Glavni izbornik mjesto. U tim su odjeljcima članci grupirani po temama u blokove koji sadrže najdetaljnije (što je više moguće) informacije o različitim temama.

Također se možete pretplatiti na blog i saznati više o svim novim člancima.
Ne oduzima puno vremena. Samo kliknite na donju poveznicu: