jeg vil holde denne intro virkelig kort.
her er hvad vi skal diskutere i denne artikel:
- hvad er baggrundsbilleder
- hvad er der med parallakse baggrunde?
- Sådan tilføjes baggrundsbilleder til din hjemmeside
- Sådan nærmer du billedstørrelse i Teksttryk
klar, stabil? Kom så!
hvad er baggrundsbilleder?
baggrundsbilleder er billeder, der anvendes på baggrund af et element på en hjemmeside, i en e-mail osv. Mens helten billedet er det vigtigste omdrejningspunkt for en hjemmeside eller en e-mail, baggrundsbillederne er mere subtile. De understøtter andre hjemmeside elementer, som et andet lag: opfordringer til handling, andre billeder, forskellige dele af hjemmesiden, etc.
lad os se på nogle eksempler på sådanne baggrundsbilleder:
IKEA
på IKEAs hjemmeside bruges baggrundsbilleder til at præsentere deres inspirerende historier. Titlen og kategorien af historien er placeret oven på billedet. Der bruges en gradientoverlejring, så det mindsker opaciteten af det faktiske billede. Denne tilgang hjælper med at gøre teksten mere synlig, men skaber også konsistens i design, så ingen farve skiller sig ud mere end en anden.
Loving Vincent
en af mine yndlingsfilm, denne.
baggrundsbilleder lå bag en karrusel, der præsenterer historier bag Vincent van Gogh og filmen. Baggrundsbillederne ser ud til at styrke historien og levere stærke følelser.
Lush
jeg elsker så hvordan Lush hjemmeside ser: farverige og levende som selve produkterne.
nu kan baggrundsbilleder bruge mønstre eller figurer, som i dette eksempel på tilmeldingsside til nyhedsbrev. Disse mønstre formår at omdanne noget potentielt kedeligt til noget muntert.
parallakse baggrundsbilleder
hvis du ser på British Museum hjemmeside, vil du bemærke, at der er billeder på tværs af deres sider, der lå i baggrunden, hvorfor forgrunden indhold ruller ned. Disse er parallakse baggrundsbilleder.
parallakse rulning er en af disse internet design tendenser, der formår at tilføje en strålende effekt til en hjemmeside, hvis integreret korrekt.
du kan også få en sådan effekt i ordtryk, jeg vil vise dig hvordan lidt senere.
Sådan tilføjes baggrundsbilleder til din hjemmeside
der er tre hovedmåder til at tilføje baggrundsbilleder til din hjemmeside. Lad os tjekke dem ud, skal vi?
-
tilføjelse af baggrundsbilleder via din brugertilpasning
de mest populære temaer har denne mulighed tilgængelig. Jeg vil bruge Colibri-temaet til formålet med dette eksempel. Andre temaer opfører sig på samme måde som Colibri-temaet.
hvis dit valgte tema ikke understøtter funktionen, skal du springe til Metode 2 og 3.
lad os starte med at gå over til udseende- > Tilpas fra dashboardet. Til venstre kan du se temaets tilpasningsredigeringsmuligheder, mens til højre er der en live forhåndsvisning af din hjemmeside.
temaet giver dig mulighed for at placere baggrundsbilleder til:
- rækker
- kolonner
- blokke (hele hjemmeside sektioner som: om mig, portefølje, team, Kontakt osv.)
- komponenter (overskrifter, karruseller, pristabeller, karruseller osv.)
den måde, du kan gøre dette på, er den samme, uanset hvor du har brug for dit baggrundsbillede.
lad os sige, at du ønsker at tilføje et baggrundsbillede til din Tjenester hjemmeside blok. Start med at vælge sektionen. Til venstre ser du redigeringsmulighederne på tværs af en menu struktureret som nedenfor:
- Layout
- stil
- avanceret
gå til Style -> baggrundstype.
Vælg “billede”. Du vil nu se et billede, som du kan erstatte med dit eget. 
når du klikker på billedet, bliver du bedt om at gå til en skærm, hvor du kan vælge et billede fra mediegalleriet, eller du kan uploade et andet billede.
som du måske allerede har bemærket, kan du endda tilføje en video som baggrund.
og der er også en skiftemulighed for parallakseffekten!
nu er der en anden genvej til at gøre denne ændring af baggrundsbillede. Når du vælger en blok fra højre, ser du indstillingsikonet. Klik på det, og du vil se nogle redigeringsmuligheder.
hvis du vælger “Skift baggrund”, vil du blive dirigeret inde i “Style” for at fortsætte som beskrevet ovenfor.
dette var alle folk. Temmelig let, ikke?
hvis dit tema ikke har indstillingen baggrundsbillede, er der en måde at gøre dette på i Standardeditoren.
-
tilføjelse af et baggrundsbillede ved hjælp af
gå over til “sider”. Vælg nu” Rediger ” under den ønskede side. Du vil se en grænseflade som vist nedenfor.
standard-editoren er blokbaseret, hvilket betyder, at hver hjemmeside sektion er lavet af blokke. Disse blokke kan tilgås fra enhver ” + ” tegn, som du vil se i grænsefladen. Lad os klikke på den øverst til venstre.
Vælg nu “Cover” – blokken. Du vil se det dukke op med det samme på din side.
du kan uploade et billede, der er lokalt gemt på din computer eller vælge mellem de eksisterende i mediebiblioteket.
jeg valgte et billede fra mediebiblioteket. Nu Kan jeg tilføje noget tekst til det. Redigeringsmulighederne er ret begrænsede her.
hvis du vælger omslaget, vil du se en menu, der vises ovenfor, hvor du kan justere dit billede eller duplikere hele din blok. Du kan endda gemme din blok som en genanvendelig, der skal bruges igen i andre designs.
nu, på højre side af skærmen, har du nogle ekstra redigeringsmuligheder.
inde i medieindstillinger, hvis du skifter til indstillingen fast baggrund, aktiverer du parallakseffekten.
når kontakten er slået fra, kan du justere omdrejningspunktet.
denne omdrejningspunktjustering kan også foretages på procentvis basis under hensyntagen til bredden og højden.
dernæst kan du tilføje et overlay. Du kan vælge dens farve og opacitet.
og du er lidt færdig.
-
tilføjelse af baggrundsbilleder via plugins
her er nogle plugins mærket som baggrundsbillede plugins. Jeg har tænkt mig at spille lidt med den Simple fuld skærm baggrundsbillede plugin, fordi det har de fleste installationer og de bedste anmeldelser hidtil.
nu er her en tutorial om, hvordan du installerer et plugin.
med dette plugin skaleres billeder automatisk med bro.sereren, så uanset bro. serstørrelsen vil billedet altid fylde skærmen.
alt hvad du skal gøre er at gå til udseende- > Fullscreen BG-billede. Herfra skal du vælge dit billede.
når du trykker på “Gem indstillinger”, vil du se, at alle sektioner på din side uden baggrund vil modtage dette billede som baggrund.
nu er det, hvad der sker i den gratis version. Det er ret grundlæggende og slet ikke fleksibelt. Den betalte plan leveres med ekstra muligheder såsom:
- ubegrænset baggrundsbilleder
- Post / side-specifikke baggrundsbilleder
- flere billeder med fade Overgange på sider
og vi er færdige, du har lige fundet ud af de 3 metoder, du kan bruge til at tilføje baggrundsbilleder til din hjemmeside.
der er en ting mere, Jeg vil have dig til at vide, før vi kan kalde det en dag.
billedstørrelser
før du uploader et billede på din side, skal du være opmærksom på dets størrelse. Jeg ved, at vi alle ser på megapiksler, men på nettet er der en fangst. Billeder i høj opløsning kan skade din hjemmeside ved at påvirke dens indlæsningstid. På lang sigt kan enhver ekstra indlæsning sekund miste dig besøgende og konverteringer. Du vil også reducere dine chancer for at rangere i søgemaskiner betydeligt, fordi aldershastighed er en vigtig placeringsfaktor.
på den anden side kan brug af billeder, der er for små, også skade din brugeroplevelse. Så vi er nødt til at få enderne til at mødes.
en måde at gøre dette på er ved at bruge eksterne apps, der kan hjælpe dig med at ændre størrelsen på dine billeder og samtidig sikre korrekt klarhed.
men du kan gøre det nemt ved hjælp af et…plugin, som du måske allerede har gættet.
her på Colibri er vi Smush fans. Smush kan og vil komprimere billeder uden et synligt fald i kvalitet.
i pro-versionen konverterer det også billeder til internet, et næste generations billedformat, der kan komprimere billedfilstørrelser op til 35% uden åbenlyst kvalitetstab.
og det er en indpakning, folkens!
hvis du kunne lide denne artikel, og du vil lære mere om, hvordan du designer en hjemmeside, skal du sørge for at abonnere på Colibris Youtube-kanal og følge os på kvidre og Facebook!