budu mít toto intro opravdu krátké.
zde je to, co budeme diskutovat v tomto článku:
- co jsou obrázky na pozadí
- co je to s pozadím paralaxy?
- jak přidat obrázky na pozadí na váš web WordPress
- jak přistupovat k velikosti obrázku v WordPress
připraven, stabilní? Jdeme!
co jsou obrázky na pozadí?
obrázky na pozadí jsou obrázky, které se aplikují na pozadí prvku na webové stránce, v e-mailu atd. Zatímco obrázek hrdiny je hlavním ústředním bodem webové stránky nebo e-mailu, obrázky na pozadí jsou jemnější. Podporují další prvky webových stránek jako druhou vrstvu: výzvy k akci, jiné obrázky, různé části webu atd.
podívejme se na některé příklady takových obrázků na pozadí:
IKEA
na domovské stránce webu IKEA se obrázky na pozadí používají k prezentaci svých inspirativních příběhů. Název a kategorie příběhu jsou umístěny v horní části obrázku. Používá se překrytí gradientu, takže snižuje neprůhlednost skutečného obrazu. Tento přístup pomáhá zviditelnit text, ale také vytváří konzistenci v designu, takže žádná barva nevyčnívá více než jiná.
Loving Vincent
jeden z mých oblíbených filmů, tento.
obrázky na pozadí leží za kolotočem, který představuje příběhy za Vincentem van Goghem a filmem. Zdá se, že obrázky na pozadí posilují příběh a přinášejí silné emoce.
Lush
moc se mi líbí, jak svěží webové stránky vypadá: barevné a živé jako samotné produkty.
nyní mohou obrázky na pozadí používat vzory nebo tvary, jako v tomto příkladu stránky pro registraci zpravodaje. Tyto vzory dokáží přeměnit něco potenciálně nudného, na něco veselého.
paralaxy obrázky na pozadí
pokud se podíváte na webové stránky Britského muzea, všimnete si, že na jejich stránkách jsou obrázky, které leží na pozadí, proč se obsah popředí posouvá dolů. Jedná se o obrázky na pozadí paralaxy.
paralaxní rolování je jedním z těch trendů webového designu, který dokáže přidat skvělý efekt na web, pokud je správně integrován.
můžete také získat takový efekt v WordPress, ukážu vám, jak o něco později.
jak přidat obrázky na pozadí na váš web WordPress
existují tři hlavní způsoby přidání obrázků na pozadí na váš web WordPress. Podíváme se na ně, Ano?
-
Přidání obrázků na pozadí pomocí vašeho WordPress theme Customizer
nejoblíbenější témata WordPress mají tuto možnost k dispozici. Pro účely tohoto příkladu použiji téma Colibri. Ostatní témata se chovají podobně jako téma Colibri.
pokud zvolený motiv tuto funkci nepodporuje, přeskočte na metody 2 a 3.
nyní Začněme tím, že přejdeme k vzhledu – > Přizpůsobit z řídicího panelu WordPress. Vlevo uvidíte možnosti úprav přizpůsobení motivu, zatímco vpravo je živý náhled vašeho webu.
téma umožňuje umístit obrázky na pozadí pro:
- řádky
- sloupce
- bloky (celé sekce webových stránek, jako jsou: o mně, portfolio, tým, kontakt atd.)
- komponenty (nadpisy, kolotoče, cenové tabulky, kolotoče atd.)
způsob, jakým to můžete udělat, je stejný bez ohledu na to, kde potřebujete obrázek na pozadí.
řekněme, že chcete přidat obrázek na pozadí do bloku webových stránek služeb. Začněte výběrem sekce. Vlevo uvidíte možnosti úprav v nabídce strukturované jako níže:
- Layout
- Styl
- pokročilé
přejít na styl – > Typ pozadí.
Vyberte „obrázek“. Nyní uvidíte obrázek, který můžete nahradit svým vlastním. 
po kliknutí na obrázek budete vyzváni k zobrazení, kde si můžete vybrat obrázek z galerie médií WordPress, nebo můžete nahrát jiný obrázek.
jak jste si již všimli, můžete dokonce přidat video jako pozadí.
a je zde také možnost přepínání pro efekt paralaxy!
nyní existuje další zkratka pro tuto změnu obrázku na pozadí. Když vyberete blok vpravo, zobrazí se ikona nastavení. Klikněte na něj a uvidíte některé možnosti úprav.
pokud vyberete možnost „změnit pozadí“, budete přesměrováni dovnitř „styl“, abyste postupovali tak, jak je popsáno výše.
to bylo všechno lidi. Docela snadné, že?
Nyní, pokud vaše téma nemá možnost obrázek na pozadí, existuje způsob, jak to udělat ve výchozím editoru WordPress.
-
přidání obrázku na pozadí pomocí bloků WordPress
z řídicího panelu WordPress Přejděte na „stránky“. Nyní vyberte“ Upravit “ z požadované stránky. Uvidíte rozhraní, jak je uvedeno níže.
výchozí editor WordPress je založen na blocích, což znamená, že každá sekce webových stránek je vytvořena z bloků. K těmto blokům lze přistupovat z jakéhokoli znaku“+“, který uvidíte v rozhraní. Klikneme na ten v levém horním rohu.
Nyní vyberte blok“ Cover“. Uvidíte, že se objeví hned na vaší stránce.
můžete nahrát obrázek, který je lokálně uložen ve vašem počítači, nebo si vybrat z existujících v knihovně médií.
vybral jsem obrázek z knihovny médií. Nyní k tomu mohu přidat nějaký text. Možnosti úprav jsou zde poměrně omezené.
pokud vyberete obálku, zobrazí se výše uvedená nabídka, kde můžete zarovnat obrázek nebo duplikovat celý blok. Blok můžete dokonce uložit jako opakovaně použitelný, aby byl znovu použit v jiných provedeních.
nyní na pravé straně obrazovky máte některé další možnosti úprav.
v nastavení médií, pokud přepnete na možnost pevné pozadí, aktivujete efekt paralaxy.
když je přepínač vypnutý, můžete nastavit ohnisko.
toto nastavení ohniska lze provést také na procentuálním základě, s přihlédnutím k šířce a výšce.
dále můžete přidat překryv. Můžete si vybrat jeho barvu a neprůhlednost.
a máte hotovo.
-
přidávání obrázků na pozadí pomocí pluginů WordPress
zde jsou některé pluginy WordPress označené jako pluginy obrázků na pozadí. Budu hrát trochu s jednoduchým pluginem na pozadí na celou obrazovku, protože má dosud nejvíce instalací a nejlepší recenze.
nyní je zde návod, jak nainstalovat plugin WordPress.
s tímto pluginem budou obrázky automaticky upraveny pomocí prohlížeče, takže bez ohledu na velikost prohlížeče bude obraz vždy vyplňovat obrazovku.
vše, co musíte udělat, je jít do vzhledu – > Fullscreen bg Image. Odtud vyberte svůj obrázek.
když stisknete „Uložit možnosti“, uvidíte, že všechny sekce na vašem webu bez pozadí obdrží tento obrázek jako pozadí.
nyní se to děje ve bezplatné verzi. Je to docela základní a vůbec ne flexibilní. Placený plán přichází s dalšími možnostmi, jako jsou:
- neomezené obrázky na pozadí
- Post / page-specifické obrázky na pozadí
- více obrázků s přechodem vyblednutí na stránkách
a jsme hotovi, právě jste zjistili metody 3, které můžete použít k přidání obrázků na pozadí na váš web WordPress.
je tu ještě jedna věc, kterou chci, abyste věděli, než to můžeme nazvat den.
velikosti obrázků
než nahrajete jakýkoli obrázek na svůj web, věnujte pozornost jeho velikosti. Vím, že se všichni díváme na megapixely, ale, na webu, má to háček. Obrázky s vysokým rozlišením mohou poškodit váš web tím, že ovlivní jeho dobu načítání. Z dlouhodobého hlediska může každá další sekunda načítání ztratit návštěvníky webových stránek a konverze. Také výrazně snížíte své šance na umístění ve vyhledávačích, protože věková rychlost je důležitým faktorem hodnocení.
na druhou stranu, použití obrázků, které jsou příliš malé, může také poškodit vaše uživatelské prostředí. Takže musíme vyjít s penězi.
jedním ze způsobů, jak toho dosáhnout, je použití externích aplikací, které vám pomohou změnit velikost obrázků a zároveň zajistit správnou jasnost.
ale ve WordPressu to můžete udělat snadno pomocí pluginu…, jak jste již možná uhodli.
zde, v Colibri, jsme fanoušci Smush. Smush může a bude komprimovat obrázky bez viditelného poklesu kvality.
ve verzi pro převede také obrázky na WebP, formát obrazu nové generace, který dokáže komprimovat velikosti obrazových souborů až do 35%, bez zjevné ztráty kvality.
a to je zábal, lidi!
pokud se vám tento článek líbil a chcete se dozvědět více o tom, jak navrhnout web WordPress, nezapomeňte se přihlásit k odběru kanálu YouTube Colibri a sledujte nás na Twitteru a Facebook!