Sisällytä nämä elementit WordPress-sivustollesi parantaaksesi ulkoasua.
Tuntuuko sinusta siltä, että WordPress-sivustosi näyttää hieman litteältä? Oletko koskaan käynyt verkkosivustolla ja miettinyt, miksi se tuntuu ammattimaiselta, kun taas sinun omasi tuntuu yksinkertaiselta? Meillä on ohjeet kuinka tehdä WordPress-sivustostasi toimiva ja upea.
Esteettisiä suunnitteluideoita WordPress-sivustollesi
Ennen kuin sukellamme, muista, että vähemmän on yleensä enemmän, varsinkin mitä tulee suunnitteluun. Voit vapaasti ottaa käyttöön muutamia näistä vinkeistä sivustossasi, mutta älä mene hulluksi. Verkkosivustosi turhauttaminen tehosteilla ei ainoastaan tee siitä amatöörimäisen näköistä, vaan riskinä on myös hidastaa sen suorituskykyä.
Katsotaanpa kuitenkin vinkkejä, joiden avulla voit tehdä WordPress-sivustostasi esteettisesti miellyttävämmän.
1. Hover Effects
Hover-tehosteiden (animaatiot, jotka syntyvät, kun siirrät hiiren kohteen päälle) lisääminen on loistava tapa tehdä verkkosivustostasi interaktiivisempi ja kiinnostavampi. Hover-tehosteet kiinnittävät kävijöiden huomion kaikkiin olennaisiin elementteihin, joista haluat tehdä popin.
Linkit on helppo saada vaihtamaan väriä itse WordPressin kautta, mutta jos haluat saada tietyt objektit pomppimaan, suurentamaan hieman tai sykkimään, tarvitset WordPress-laajennuksen, kuten Hover Effects.
Jos käytit Elementor Suunnitellaksesi WordPress-sivustoasi, voit myös lisätä sen kautta hover-tehosteita. Elementor tarjoaa helpon opetusohjelman hover-tehosteiden lisäämiseen YouTube-kanavalleen.
2. Smooth Animaatioita
Hienovaraiset animaatiot voivat lisätä vuorovaikutteisuutta ja tyyliä WordPress-sivustollesi. Hover-tehosteista poiketen voit ottaa käyttöön animaatioita, kuten häivytyksiä tai siirtymiä, jotka paljastavat sisällön, kun käyttäjät vierittävät sivua alaspäin.
Harkitse yhden animaation lisäämistä muutaman sivun välein, jos haluat erottua joukosta. Muista testata animaatioita toiminnassa varmistaaksesi, että ne eivät kuormita sivua.
Animaatioita voidaan helposti lisätä Elementorin kautta siirtymällä kohtaan Pitkälle kehittynyt > Liiketehosteet. Jos et käytä Elementoria, voit ladata laajennuksen, kuten Blocks Animaatio.
Hyppylinkin (kutsutaan myös sivuhypyksi) avulla käyttäjät voivat "hyppää" nopeasti tiettyihin osiin sivulla. Käyttämällä hyppylinkkejä tehokkaasti, kuka tahansa sivustollasi vieraileva voi selata pitkiä osioita joutumatta odottamaan uuden sivun latautumista.
WordPress-blogissa on opastus sivuhyppyjen lisäämiseen sekä Block- että Classic Editorille.
Nykyään sosiaalinen media ja bisnes kulkevat käsi kädessä. Olipa verkkosivustosi henkilökohtainen tai ammattimainen, sosiaalisen median syötteiden integrointi WordPress-sivustoosi lisää visuaalista mielenkiintoa ja voi lisätä vierailijoidesi luottamuksen tunnetta.
Sinä pystyt upota twiittejä WordPress-viesteihisi tai käytä lisäosaa, kuten Syötä heitä sosiaalisesti. Joka tapauksessa harkitse sosiaalisen median elementtien lisäämistä sivustollesi vierailijoiden vuorovaikutuksen ja verkostoitumisen lisäämiseksi.
Vaikka et tunne termiä, olet todennäköisesti nähnyt parallaksin vierivän toiminnassa. Parallaksivierityksen avulla taustakuvat liikkuvat eri tahdissa kuin etualalla oleva sisältö, mikä luo ainutlaatuisen 3D-vaikutelman, kun käyttäjät vierittävät sivua alaspäin.
Voit toteuttaa parallaksitehosteita CSS: n, Elementorin tai laajennuksen kaltaisten kautta Edistyneet WordPress-taustat.
6. Videon taustat
Oikein käytettynä videotaustat voivat vangita vierailijoiden huomion ja saada sivusi näyttämään erittäin ammattimaiselta. Valitse korkealaatuinen video, jossa on saumaton silmukka, joka ei syrjäytä sivun muita elementtejä.
Kaikkea mainitsemaamme tulee käyttää säästeliäästi, mutta ole erityisen varovainen, ettet liioittele videotaustalla. Jos olet epävarma, valitse yksi tai kaksi koko sivustoa varten.
Voit lisätä videotaustan sivustollesi Elementorin tai liitännäisen kautta Videon tausta.
7. Toimintakehotuspainikkeet (CTA).
Vaikka et myyisikään mitään, toimintakehotuspainikkeet ovat tärkeitä kertoessaan vierailijoille, mitä tehdä seuraavaksi. Napsautettavat toimintakehotuspainikkeet, jotka pyytävät ihmisiä tilaamaan uutiskirjeesi, suunnittelemaan konsultaatiota tai pyytämään tarjouksen, voivat parantaa sivustosi tulosprosenttia.
Kokeile lisätä muutamia hyvin sijoitettuja toimintakehotuspainikkeita kontrastiväreillä ja houkuttelevalla tekstillä. Voit lisätä toimintakehotuspainikkeen Elementorin kautta tai käyttää lisäosaa, kuten Icegram Engage.
8. Tahmea otsikko
Tahmea otsikko (kutsutaan myös kiinteäksi valikoksi) pysyy kiinteänä näytön yläreunassa, vaikka käyttäjät vierittävät sivuasi alaspäin. Kiinnittävät otsikot tarjoavat nopean pääsyn tärkeisiin elementteihin, kuten koti- ja yhteystietosivuihisi.
Kiinteät otsikot voidaan lisätä CSS: n kautta siirtymällä osoitteeseen Ulkomuoto > Ylimääräinen CSS ja syötä sopiva koodi. Voit myös käyttää laajennusta, kuten Sticky Menu & Sticky Header.
9. Ikonografia
Kuvakkeet eivät ole vain mahtavia visuaalisia apuvälineitä, jotka välittävät tietoa ytimekkäästi, vaan ne myös tekevät verkkosivustostasi helpommin saavutettavissa. Tutkimukset ovat osoittaneet, että visuaaliset elementit auttavat sekä lukijoita, joilla ei ole lukihäiriöitä, navigoimaan tekstitiedoissa nopeammin ja helpommin.
Yritä lisätä muutama asiaankuuluva kuvake, erityisesti runsaasti tekstiä sisältäviin osioihin, jotta sisältösi on helposti skannattavissa. Säilytä kiillotettu ja yhtenäinen ulkoasu koko sivustollasi käyttämällä yhtenäistä kuvaketyyliä. Löydät ilmaisia kuvakkeita eri sivustoilta, kuten litteä kuvake tai freeicons.io.
10. Animaatiot LottieFilesin kanssa
Nosta kuvakkeitasi ylemmäs animoimalla niitä LottieFiles-laajennus WordPressille. Lotit ovat animoituja elementtejä, jotka latautuvat nopeammin kuin GIF-tiedostot, ja niiden väriä voidaan mukauttaa brändiisi sopivaksi. Löydät runsaasti ilmaisia malleja laajennuksesta tai tee omat lottisi AfterEffectsissä tai vastaava ohjelmisto.
WordPress-suunnittelun parhaat käytännöt
Nyt kun olemme tarkastelleet joitain WordPressin koristeellisempia elementtejä, katsotaanpa joitain suunnittelun peruskäytäntöjä, jotta sivustosi näyttää terävältä.
- Vähemmän on enemmän: löydä oikea tasapaino design-elementtien ja negatiivisen tilan välillä.
- Käytä johdonmukaista brändäystä, mukaan lukien fontit, logot ja värit seuraa brändisi tyyliopasta.
- Käytä väriteoriaa ja psykologia herättääksesi haluttuja tunteita yleisössäsi.
- Selkeä visuaalinen hierarkia auttaa katsojia sulattamaan tietoa.
- Optimoi sivustosi kaikille laitteille ja näytön kokoille.
- Pyydä ystäviä ja perhettä testaamaan sivustosi ja raportoimaan virheistä tai ideoista suunnittelun parantamiseksi.
Tee WordPress-sivustostasi ainutlaatuinen
Jos sinusta tuntuu, että WordPress-sivustosi on hieman liian yksinkertainen, harkitut yksityiskohdat, kuten animaatiot, dynaamiset taustat ja tahmeat otsikot, voivat olla täydellisiä asioiden piristämiseen. Älä liioittele erikoistehosteita, jotta et muuta sivustosi suorituskykyä. Pidä aina suunnittelun parhaat käytännöt mielessä, kun muokkaat WordPress-sivustoasi.
Toimiiko nykyinen WordPress-teemasi sinulle? Ennen WordPress-teeman valitsemista on otettava huomioon muutama seikka, ja sivustosi voi hyötyä uudistuksesta, jos haluat muuttaa asioita.