miten rakentaa WordPress verkkosivuilla vuonna 2021 6 vaiheet. A-Z-opas

vuonna 2017 yrityksessä, jossa työskentelin, oli mahdollisuus oppia web-suunnittelua.

aloin opetella HTML: ää, CSS: ää ja JavaScriptiä. Nautin siitä. Kunnes törmäsin ensimmäisiin ötököihini. Myöhemmin minulle annettiin sivuprojekti: varsinainen verkkosivusto. Olin innoissani, kollegani olivat tukenani, kun pyysin apua.

muutamaa kuukautta myöhemmin olin tekemässä pro-bono WordPress-toimeksiantoa kansalaisjärjestölle.

Saanen todeta, että olimme matkailumarkkinoilla ja tein markkinointia. Mutta oli sellainen kulttuuri, että ihmisiä voimaannutettiin uusien taitojen oppimisessa.

olen DIY-tyyppiä ja tajusin, että koodin oppimiskäyrä on paljon odotettua pidempi. WordPress, asiat toimivat eri tavalla.

pikakelauksella, vuonna 2020 päädyin työskentelemään Colibri makersille, Colibri on suosittu WordPress vedä ja pudota-sivun rakentaja.

asiat ovat nykyään niin helppoja tällaisilla työkaluilla. WordPress voi todella valtuuttaa ihmisiä rakentamaan verkkosivuston tyhjästä hetkessä. Inspiraatio nettisivuille on kaikkialla Internetissä.

nyt, tässä ovat vaiheet:

1. valitse verkkotunnuksesi
2. Hanki website hosting
3. Tutustu WordPress-käyttöliittymään
4. Asenna WordPress-teema
5. Rakenna WordPress-sivusto
6. Asenna elintärkeitä WordPress-laajennuksia

koska ottaa joitakin vaiheita ain ei riitä ottaa supercalifragilistikexpialidocious verkkosivuilla, minulla on yksi bonus sinulle lopussa oppaan: UX design vinkkejä ja temppuja.

mutta ennen kuin hyppään aiheeseen, Haluan valaista toista aihetta. Lupaan, ettei se vie kauan.

kuinka paljon WordPress-sivusto maksaa?

jos aiomme tehdä kustannuserittelyn WordPress-verkkosivustolle, tässä on mitä meidän pitäisi sisällyttää:

• verkkotunnuksen ostaminen: hinnat voivat alkaa $15/vuosi
• Hosting-hankinta: hinnat alkavat niinkin alhaisina kuin $ 8 / vuosi
• WordPress teema. Nyt, riippuen tasosta räätälöinnin ja kuinka monta ominaisuuksia haluat sisällyttää, voit aloittaa $0. Jos et halua ratkaista perus verkkosivuilla, vuosittain WordPress teema suunnitelmat pyörivät noin 70 dollaria.
• WordPress-liitännäiset. Monet niistä ovat maksuttomia, mutta jos haluat lisäasetukset, sinun täytyy päivittää maksaa suunnitelma.

tämä tarkoittaa, että perussivusto alkaa 23 dollarista/vuosi. Kun haluat kehittyneitä teema ominaisuuksia, kustannukset nousevat noin $100 / vuosi.

lisäosia päivittäessä saattaa päätyä maksamaan noin 200-500 dollaria vuodessa.

jos haluat jotain mittatilaustyönä tehtyä, ja sinun täytyy soittaa WordPress-kehittäjälle, kustannukset voivat nousta yli 1000 dollarin ensimmäisen vuoden aikana.

verkkokaupoissa kustannukset voivat nousta merkittävästi, koska tarvitaan paljon toiminnallisuuksia, ja suorituskyky ja turvallisuus ovat päällimmäisenä mielessä.

nyt kun selvitämme tämän, on aika käydä päivän aihepiiri läpi: miten luodaan WordPress-sivusto vuonna 2021.

valitse verkkotunnuksesi

lähde: https://unsplash.com/photos/N1XUwR8iOf0

jos et tiedä tätä vielä, verkkotunnus on yrityksesi nimi tai tuotteen nimi. Nimet voivat olla todella voimakkaita, joten älä hätäile verkkotunnuksesi valinnassa. Jos sinusta tuntuu, että alat jänistää, älä huoli, on olemassa työkaluja, jotka voivat auttaa sinua.

vinkkejä website domain-nimen valintaan

olin jokin aika sitten tekemässä ideointia website domainille yritykselle ja tajusin, että ”Wazz” kuulosti varsin mielenkiintoiselta. Se on lyhyt, helppo muistaa. Mutta kun googlasin sen, No … purskahdin nauruun. Brittiläisessä slangissa se tarkoitti ”virtsaamista”. Tehkää tutkimustyönne.

myöhemmin halusin nimetä valokuvaussivustoni. Analysoin ”pontikkaa”. Se tuntui niin mukavalta, romanttiselta, satumaiselta, – paitsi että se tarkoitti ”laittomasti tislattua tai salakuljetettua alkoholia”.

varmista siis, että nimeämisesi on ainutlaatuinen, mieleenpainuva, eikä sillä ole mitään outoa merkitystä englanniksi tai muulla suositulla kielellä (esim.Espanja), jos haluat kansainvälistyä. Jos olet paikallinen yritys, saatat jättää tämän väliin.

nyt, Katsotaanpa hieman pieni tarkistuslista valita verkkotunnus WordPress verkkosivuilla:

• Tee luettelo asiaankuuluvista avainsanoista yrityksellesi/tuotteellesi. Mieti, miltä käyttäjistä pitäisi tuntua tuotteen käytön jälkeen. Oletetaan, että sinulla on ihon tuotesarja, joka perustuu luonnollisiin ainesosiin. Listassa voi olla sanoja, kuten ”iho”, ”hoito”, ”turvallinen”, ”luonnollinen”, ”kaunis”, ”tuore” jne. Käytä työkalua kuten Namelix tai Novanym luoda verkkotunnus ideoita.
• Tarkista juuri löytämäsi verkkotunnuksen merkitys. Googlaan sen aina näin ”{insert name here} eli”. Päädyn sanakirjaselityksiin. Seuraavaksi menen Google images ja nähdä, miten se saa sovitettu. Ehkä on olemassa laulaja, jolla on se nimi, manga sarjakuva nimi, jne. Jos näin on, prosessi on uusittava.
• Etsi verkkotunnus Facebookista tai LinkedInistä nähdäksesi, onko kyseisellä nimellä kulkevaa yrityssivua.
• tarkista, onko verkkosivujen verkkotunnusta myynnissä. Monilla sivustoilla”. com ”on paras ylätason verkkotunnus (TLD), jota seuraa”. org”,”. net ”tai”. io”.
• osta verkkotunnuksesi. Voit tehdä niin verkkotunnuksen rekisterinpitäjä kuten GoDaddy tai kautta hosting-palveluntarjoaja.

ja tästä päästään seuraavaan lukuun.

Hanki website hosting

jokainen verkkosivusto, jolla olet käynyt, on hostattu palvelimella. Tämä tarkoittaa, että sinun täytyy hankkia web hosting hosting-palveluntarjoajalta.

ottaen huomioon, että olemme rakentamassa WordPress-sivustoa, voit valita hostaussuunnitelman WordPress.com tai jokin muu kolmannen osapuolen palveluntarjoaja.

haluan selvittää jotain ennen kuin jatkamme. On olemassa wordpress.com ja wordpress.org. ero on, että päällä WordPress.com voit isännöidä ja rakentaa verkkosivuilla. Mistä WordPress.org yleensä hankit teemoja ja plugins sivustosi, joka on isännöi muualla. Voit vertailla WordPres.com suunnitelmat täällä.

tämän oppaan hypoteesi on, että haluat todella rakentaa brändin ja hallita täysin verkkosivustoasi. Tämä tarkoittaa, että siirryt kolmannen osapuolen hosting-palveluntarjoajalle.

on olemassa kolme pääasiallista hosting-palvelua: jaettu hosting, VPS ja hallittu hosting. Ensimmäisessä tilanteessa palvelimen resurssit jaetaan useampien sivustojen kesken. Pitkällä aikavälillä, jos nämä sivustot kasvavat, ja sinun samoin, saatat kohdata suorituskykyyn liittyviä ongelmia. Saatat ymmärtää, että tarvitset VPS-palvelua tai hallittua hosting-suunnitelmaa.

joten sinun täytyy pitää tämä mielessä, kun valitset hosting-palveluntarjoajan: mitkä ovat yrityksesi tavoitteet?

jos mennään VPS: n isännöinnillä, resursseja jaetaan edelleen, mutta ne saadaan jonkin verran hallintaan. Näet parannuksia turvallisuuden ja suorituskyvyn samoin.

hallittu hosting on eräänlainen ”à la carte” – palvelu. Saat oman fyysisen palvelimen kokonaan itsellesi, ja näet vauhtia suorituskykyä ja turvallisuutta.

varmasti asiat voivat mennä tätä monimutkaisemmiksi, mutta halusin vain maalata ison kuvan isännöinnistä.

seuraavaksi, kun analysoit suunnitelmia, katso tarkemmin:

• hinnoittelu
• varastointi
• tuki
• suorituskyky

joillakin hosting-tarjoajilla on joitain lisäominaisuuksia pakattuna, kuten domain-tarjonta (esim.Namecheap), verkkosivujen rakentaja (esim. GoDaddy), verkkokauppavaihtoehdot jne.

nyt olet luultavasti jo huomannut joidenkin sivustojen käyttävän ”HTTP” – tai ”HTTPS” – koodia. Mitä nuo ovat?

HTTP on nykyaikaisen verkon perusta. Se yhdistää selaimet ja palvelimet ja toimii pyyntöihin vastaamisen perusteella. Nyt ylimääräinen ” s ” tarkoittaa, että yhteys sivustoon on salattu ja sivuston kanssa jaetut tiedot on suojattu.

oletetaan, että käyttäjä tekee maksun verkkosivustollaan tai kirjautuu tilille. Tiedot, jotka käyttäjä kirjoittaa, ovat yksityisiä. Turvassa hakkeroinnilta. Tämä tapahtuu SSL-tekniikalla, joka tarkoittaa ”Secure Sockets Layer.”Kuluttajille, nähdä ”HTTPS” signals trust, koska voit suojata heidän tietoja ja yksityisyyttä. Tämä tarkoittaa, että sinun täytyy hankkia SSL-varmenne.

varmista, että valitsemasi suunnitelma sisältää myös tämän.

kun hankit hostaussuunnitelmasi ja olet määrittänyt kirjautumistietosi, ainoa puuttuva palanen tulee olemaan itse WordPress. Useimmat hosting tarjoajien siellä voit asentaa WordPress niiden kojelauta / ohjattu. Kaikki on aika intuitiivista.

miten kirjaudut sivustoosi? Helppo nakki. Kirjoita selaimeen verkkosivustosi osoite ja lisää siihen ”/wp-admin”, kuten alla.

Tutustu WordPress-käyttöliittymään

WordPress-kojelaudassa on 9 osaa. Katsotaanpa niitä.

WordPress-asetukset

tämän osion sisällä on 7 muuta valikkoa. Kuvailen lyhyesti tärkeimmät asiat, jotka on tehtävä täällä.

• kohdassa ”Yleinen” voit määrittää sivuston otsikon, taglinen, URL-osoitteen, aikavyöhykkeen, ajan & päivämäärämuodon ja kielen.
• kohdassa ”lukeminen” ”kerrot”WordPressille, mikä sivu toimii kotisivuna ja mikä on ”blogisi”. Tämä on tärkeä askel. Voit myös valita, kuinka monta blogikirjoituksia voi näkyä sivulla tai jos haluat sivustosi indeksoitu Google.
• kohdassa ”Keskustelu” teet blogin kommenttiasennuksen.
• ”median” sisällä voit määrittää enimmäismitat pikseleinä, joita käytetään lisättäessä kuvaa Mediakirjastoon.
• ”Permalinksin” sisällä määrität URL-Osoitteidesi muodon.
• voit määritellä tietosuojakäytäntösivusi ”yksityisyyden” sisällä.

paras tapa lähestyä ”Asetukset” – paneelia on syöttää kaikki nämä kohdat ja täyttää puuttuvat tiedot, jottet jätä mitään tärkeää väliin. Asiat ovat melko yksinkertaisia,joten älä jänistä. Kaikki asetukset voidaan tehdä alle 30 minuuttia.

WordPress sivut ja viestit

sinun tulee tietää, että sisältösi menee ”sivujen” tai ”postausten”sisään. Täällä vietät 95% ajastasi.

”sivut” ovat staattisia. Voit olla ”Kotisivu”, ”palvelut” sivu, ”Ota yhteyttä” sivu, saat pisteen. Alle viestit voit olla uusimmat blogiartikkelit, ehkä portfolio. Nämä ovat dynaamisia sivuja, koska ne asettavat automaattisesti uusimman verkkosivustosi sisällön huipulle.

kun valitset ”viestit” kojelaudasta, voit luoda julkaisun, visualisoida kaikki viestit ja hallita tageja ja luokkia.

voit luoda uuden julkaisun, Jos valitset ”Lisää Uusi” kuten yllä on nähty, tai mene ”kaikki viestit” ja valitse ”Lisää uusi”.

samat teokset sivuille.
mitä näet ”kaikki sivut ”tai” kaikki viestit ” ovat joitakin oletussivuja ja julkaisuja käyttöön teema.

Now, how can you can edit a post or a page?

kun viet oletussivujesi ja-julkaisujesi päälle, näet joitakin vaihtoehtoja: muokkaa, pikamuokkaus, trash, view. Yllä olevassa kuvakaappauksessa on myös ”Edit in Colibri”. Tämä johtuu siitä, että asensimme plugin, jonka avulla voit muokata sivuja käyttäen Colibri WordPress builder (mutta puhumme hieman myöhemmin tästä).

WordPress media

kaikki mediasi menevät tänne: kuvat ja videot. Voit vetää ja pudottaa ne tai ladata ne.

voit lisätä medioita myös post/page-tasolta. Näytän aiheesta lisää myöhemmin.

WordPress-Kommentit

4.dashboard-osio on nimeltään ”Kommentit”. Täällä voit hallita virkaa ’ Kommentit. Saat tonnia roskapostia kommentteja, jotka voidaan siirtää roskapostiin tai roskakoriin. Voit hyväksyä olennaiset.

”ulkonäkö” – valikko

tällä tasolla voit:

• Etsi, asenna ja Aktivoi teema (lisätietoja seuraavassa luvussa).
• muokkaa widgettejä lisätäksesi sisältölohkoja sivustosi sivupalkkeihin, alatunnisteisiin ja muihin alueisiin.
• Määrittele WordPress-verkkosivustosi valikot.
• lisää sivustoosi taustakuva.
• muokkaa teeman koodia ”Teemaeditorin” sisällä (suositellaan vain, jos olet kehittäjä).

nyt, kun aktivoit tietyt liitännäiset, saatat nähdä muutaman uuden valikon ”Appearance” – kohdan alla. Tässä tapauksessa, koska olemme aktivoineet Skyline teema, näemme mahdollisuuden asettaa sen alle ”SkylineWP Asetukset”. Jokainen teema voi tulla oma asennus.

”Asenna Plugins” on toinen ylimääräinen valikko lisätään Skyline teema. Täällä näet joitakin plugin suosituksia, jotka toimivat hyvin Skyline.

tästä päästään seuraavaan menuun.

Plugins

on paljon ominaisuuksia, joita ei voi hallita vain teeman mukaan, kuten SEO optimointi, SEO audit, verkkosivuston turvallisuus ja varmuuskopiointi, taulukot, lomakkeet, sähköisen kaupankäynnin ominaisuudet ja paljon muuta. Plugins ovat täällä kompensoimaan puute tällaisia vaihtoehtoja.

tässä pieni opetusohjelma liitännäisten asentamisesta, käyttöönotosta ja deaktivoinnista. Kaikki on intuitiivista ja käyttäjäystävällistä.

käyttäjät

tällä tasolla päätetään, kenellä on pääsy verkkosivuillesi. Voit antaa pääsyn avustajille, vieraileville kirjoittajille, editoreille ja muille, riippuen tarpeistasi.

Työkalut

kohdassa ”Työkalut” on mahdollisuus tuoda ja viedä työkalujen tietoja muihin sisällönhallintajärjestelmiin (esim. Bloggaaja).

mukana on myös” sivuston terveys ” – osio, joka näyttää sinulle kriittistä tietoa WordPress-asetuksistasi ja huomioasi vaativista kohteista, sekä joitakin neuvoja.

koska meidän on noudatettava tietosuojakäytäntöjä, täällä voit viedä tai poistaa käyttäjiesi henkilötietoja.

ja tähän olemme paketoineet WordPress dashboard-luvun.

siirrytään kiinnostavampaan asiaan.

miten asentaa WordPress teema

tätä varten, sinun täytyy mennä WordPress admin dashboard, klikkaa ”ulkonäkö” vasemmasta valikosta, sitten ”Teemat”.

seuraavaksi klikkaa ”Lisää uusi” – painiketta.
näet joukon mallipohjia, jotka voit suodattaa uusimpien, suositeltavien, suosittujen…tai ominaisuuksien perusteella.

olemme ylpeitä voidessamme sanoa, että ikioma Lumoutumisemme ja Colibri-teemamme on listattu 20 suosituimman WordPress-teeman joukkoon.

kun valitset teeman, napsauta ”Asenna” ja sitten ”Aktivoi”.

Voit myös aktivoida WordPress teema, jos pään yli Takaisin ulkonäkö – > teemoja.

koko asennusprosessi kerrotaan myös tutoriaalissa.

Now you ’ re ready to rock and roll!

via GIPHY

Rakenna WordPress-verkkosivustosi

WordPress-palvelussa verkkosivustosi suunnittelu riippuu valitsemastasi teemasta. Jos tarvitset jotain ylimääräistä, sinun täytyy ehkä löytää jotain, jolla täyttää puuttuvat ominaisuudet.

yleensä jokaisella WordPress-teemalla on 2 mallia: yksi blogille ja yksi sivuille. Värit ovat rajalliset, ei ole erityisiä mukautuksia. Tämä tarkoittaa, että tiettyyn aikaan, plugins tulee kätevä.

nyt WordPress-teemoissa on perustoiminnallisuudella varustettu teema-customizer. Ne sopivat hyvin niille, jotka eivät tarvitse mitään mukautettuja ominaisuuksia ja haluavat rakentaa sivustonsa todella nopeasti. Tarvittaessa voit lisätä omia CSS-tyylejäsi. Vain varmista valita teema, joka on asettelu, joka vastaa omaa visiota.

miten teemaa voi muokata? Vain pään yli ulkonäkö – > muokata.

vasemmalta voi valita, mitä muuttaa: Sisältö, valikko ja paljon muuta. Oikealla puolella on nettisivujen esikatselu. Voit muuttaa tekstiä reaaliajassa napsauttamalla kynäkuvaketta.

jutun toisella puolella on WordPress-rakentajia. Ne ovat laajennuksia, jotka auttavat sinua rakentamaan todella ainutlaatuisia verkkosivustoja. Voit muuttaa teeman asettelu kokonaan.

meidän tapauksessamme Skyline esiasentaa tällaisen Colibri-nimisen rakentajan, aiomme käyttää sitä esimerkkinä.

riippuen teeman versiosta, ilmaisesta tai maksetusta, pelissä on erilaisia elementtejä, joilla leikkiä: otsikoista, erityisistä sivuosista pienempiin komponentteihin, kuten puheluihin toimintaan, välilehtiin, laskureihin, haitareihin ja muihin.

voit muokata teemaasi kuten ennenkin, ulkoasusta – > Mukauta tai ota oikotie, kuten alla on esitetty.

mitä muutoksia? Saat access enemmän ominaisuuksia sisällä Customizer.

customizerin käytön lisäksi WordPressissä on toinenkin vaihtoehto verkkosivujen räätälöintiin-oletusmuokkain. Voit käyttää sitä ”muokata” vaihtoehto alla jokainen viesti ja sivu. Myös, kun lisäät uuden viestin tai sivun, pääset suoraan sisään oletusmuokkain (ellei sinulla ole rakentaja aktivoitu).

So, in our next chapter we ’ ll go in-depth with how to:

1. luo WordPress-sivusto käyttämällä WordPress-page Builderia
2. luo WordPress-sivusto käyttäen oletusmuokkainta WordPress

A. miten rakentaa WordPress-sivusto käyttämällä ilmaisia verkkosivujen rakentajia

WordPress-verkkosivujen rakentajat auttavat sinua viemään WordPress-muokkaajan aivan uudelle tasolle. Voit muokata kaikkea: otsikot, sivun sisältö,alatunnisteet, navigointivalikot, maailmanlaajuinen, yksilöllinen muotoilu, nimeät sen! Ei tarvita suunnittelu-tai koodaustaitoja!

se on yleensä vedä ja pudota-prosessi. Ja sinun ei tarvitse huolehtia mobiili suunnittelu, rakentajat ovat reagointikykyä näkökohta katettu.

verkkosivujen asetusten säätäminen muokkaimessa

Katso vasenta sivupaneelia. Vieritä nyt alas kohtaan ”Yleiset asetukset”.

Täältä voit perustaa:

• sivustosi nimi.
• sivustosi yleinen värimaailma ja typografia.
• blogin, otsikon ja alatunnisteen mallipohjat: mitä taustoja käyttää, välitykset, reunukset, varjot jne.
• väli: sisäpainikkeet, pylväät jne.
• Custom CSS Styling

miten luoda sisältöä WordPress käyttäen rakentajia

kuten aiemmin mainittiin, jos haluat luoda uuden verkkosivun, siirry kohtaan ”sivut” ja valitse ”Lisää uusi”. Sinut ohjataan oletuksena WordPress editor jossa voit nimetä sivun. Valitse seuraavaksi ”Edit with Colibri”.

kun haluat muokata olemassa olevaa WordPress-sivua, napsauta ”Edit in Colibri”.

How to add sections to your WordPress pages

Every ”+” sign in the left-side panel open a window with blocks and components. Voit vierittää alaspäin, kunnes löydät haluamasi mallin, tai vain kirjoittaa luokkaan. Tässä ovat luokat saatavilla Colibri builder: Hero Accent, tietoja, ominaisuudet, Sisältö, Call to Action, blogi, laskurit, Portfolio, Kuvagalleria, suosittelut, asiakkaat, joukkue, yhteystiedot, F. A. Q., ja hinnoittelu.

nämä ovat ennalta määriteltyjä malleja, jotka vastaavat valitsemaasi värimaailmaa.
valitsemalla jokin lohkoista, klikkaamalla lohkossa näkyvää ” + ” – merkkiä, lohko sijoitetaan sivun alalaitaan.

voit siirtää niitä minne haluat, vetämällä ja pudottamalla osion vasemmasta sivupaneelista.

on myös vaihtoehto ”tyhjille” lohkoille.

tämä tarkoittaa, että voit muokata niitä miten haluat. Lopulta voit jopa tallentaa suunnittelusi myöhempää käyttöä varten.

jokaisen osion oikeassa yläkulmassa olevasta asetuskuvakekuvakkeesta voit säätää kohteiden määrää per rivi, voit järjestää kohteita uudelleen, lisätä uusia palikoita ja jopa poistaa koko osion.

miten muokata osioita WordPress-sivullasi

jos haluat muuttaa tekstiä osioissasi, voit tehdä sen in-line, eli itse osion sisällä, livenä.

in-line-muokkaus ei ole käytettävissä painikkeilla oleviin teksteihin. Ne hoidetaan vasemmalla olevassa paneelissa.

jos haluat vaihtaa kuvan sivustostasi, se on kaikki intuitiivista. Aloita valitsemalla kuvasi.

voit nähdä sen myös vasemmalla olevan paneelin sisällä. Klikkaa kuvaa. Näet uuden ikkunan avautumisen pyytää sinua ladata kuvan tai valitse yksi kirjastosta. Jos päätät ladata, voit tehdä sen vetämällä ja pudottamalla.

Now, going back to the panel I ’ ve just mentioned, it has 3 main options: Layout, Style, and Advanced. Aina kun valitset osion verkkosivuston esikatselusta oikealla, näet osion vastaavan paneelin.

otetaan ne yksitellen:

• asettelu

tässä voi säätää säiliön leveyttä ja korkeutta rakenteen tasolla. . Yksinkertaisesti sanottuna, säiliö on todellinen tila lohko vie. Säiliön sisälle asetetaan sisältö (teksti, kuvat).

voit myös säätää sisältösi välejä ja sitä, kuinka lähelle ylä-tai alaosaa se sijoitetaan.

voit myös lisätä uusia rivejä lohkosi sisään.

• Tyyli

tällä tasolla voit muokata lohkosi taustaa tai lisätä välilevyjä. Jakajat ovat visuaalisia vihjeitä, jotka viestivät, kun verkkosivuston osio päättyy tai alkaa.

• Lisäasetukset

Here comes the fun, folks!

typografiasta ja välilyönnistä reagointikykyyn, tästä pääset pienimpiin verkkosivujen yksityiskohtiin.

voit luoda muunnelmia riippuen elementin tilasta: normaali tai leijuva.

jos valitset blogin sisältä tietyn elementin, vaikkapa otsikon, sama paneeli näkyy vasemmalla.

tämä tarkoittaa, että editoinnilla voi mennä rakeisemmin.

puhuttaessa nimikkeistä ja rakeisemmista alkuaineista näitä nimitetään ”komponenteiksi”. Katsotaan, miten voit pelata heidän kanssaan.

kuinka käyttää komponentteja WordPress-sivustossasi

komponentit viittaavat otsikoihin, liukusäätimiin, välilevyihin, painikkeisiin, karuselleihin, hinnoitteluun ja muihin. Niitä voi käyttää samalla tavalla kuin lohkoja. Ne istuvat vierekkäin ja niillä on vedä ja pudota toimintoja. Colibri tarjoaa 40 komponenttia.

kuten aiemmin mainittiin, voit säätää niitä vasemmalla olevasta paneelista, jos siirryt ”layout”, ”style” tai ”advanced”.

Mobile responsibility

monilaitteiden maailmassa on elintärkeää saada täysin reagoiva verkkosivusto. Oletuksena, Skyline on mobiili reagoiva teema. Tämä tarkoittaa, että sen osat säätyvät eri laitteiden mukaan. Jos haluat esikatsella, miten WordPress-sivusto näyttää tableteissa tai mobiililaitteissa, voit tehdä niin, kun pelaat ohjaimilla vasemmassa alareunassa.

voit myös valita piilottaaksesi tiettyjä ominaisuuksia mobiiliin, esimerkiksi ”advanced” – vaihtoehtojen sisään.

miten rakentaa valikko WordPress Customizer

nyt, sanotaan, että olet suunnitellut sivusi ja sinun täytyy lisätä ne valikkoon. Paneelissa oikealla, sinulla on kaikki osiot, tilattu ylhäältä alas, kuten sivustosi. Alatunniste on viimeinen osiosi. Sen alla näet joitakin lisäominaisuuksia.

Täällä voit luoda valikon.

kun olet valinnut ”Luo uusi valikko”, saat nimetä valikon ja valita sille paikan (otsikko, alatunniste, sivut jne.).

kun valitset ”Seuraava”, voit lisätä sivusi valikkoon ”lisää kohteita” – vaihtoehdosta. Tästä ei voi tulla helpompaa.

miten työskennellä WordPress-vekottimien kanssa

olen jo maininnut, että widgetit ovat sisältölohkoja, joita voit lisätä sivustosi sivupalkkeihin, alatunnisteisiin ja muihin alueisiin.

kun käytät WordPress builder-laajennusta, käytät widgettejä vain WordPress-sivupalkkeihin, koska olet ennalta määritellyt alatunnisteen asettelut.

yleensä sidebaareja käytetään blogisivuilla. Jokainen teema on eri widgetit vaihtoehtoja, hakupalkeista, viime viestit, ja kommentit, sosiaaliset widgetit, kuvia ja videoita. Sanotaan haluat näyttää Instagram profiili sivupalkissa, siellä on Instagram WordPress vekotin, että.

yksi suosikki widgetit on yksi, joka mahdollistaa mukautetun HTML editointi. Minusta se on todella voimakas.

tästä huolimatta olet tavallaan valmis. Onnittelut, WordPress sivusto on käynnissä!

nyt tarkastetaan Muu rakennustapa WordPressissä.

B. Miten rakentaa WordPress verkkosivuilla käyttäen oletuksena WordPress editor (Gutenberg)

aion tehdä tämän todella nopeasti. Tämä editori on vielä uusi WordPress (se on oletuksena WordPress editor joulukuusta 2018), mutta se kehittyy jatkuvasti ansiosta yhteisön panos.

klassinen WordPress-editori näytti tältä:

nyt meillä on:

nyt, mitä sinun tarvitsee tietää on, että kaikki teema ei ole yhteensopiva tämän uuden editorin. Sinun täytyy löytää yksi Gutenberg-valmis.

Layout design with the default WordPress editor is limited. Se perustuu myös palikoihin. Nyt, kuten Olet luultavasti huomannut edellisessä luvussa, lohkot voivat olla melko paljon kaikkea: otsikot, kuvat, painikkeet, videot, jne.

Now, why I ’ m not intending on the topic: if you check for Gutenberg reviews, the Last are 1-star reviews. Se ei ole hyvä kokemus. Vaikka se on jo ollut 2 vuotta käynnistää, ja monet päivitykset keskellä, tämä on vielä lapsenkengissä. WordPress nojaa nyt yhteisöön luomaan uusia palikoita, jotta muokkauskokemus voi kehittyä.

juuri nyt työkalu käyttäytyy kuin tekstieditori, jonka stailauspuolella on pieni teho.

Kadencen kaltaisista työkaluista voi olla apua, mutta emme ole vielä siellä.

Asenna elintärkeät WordPress-liitännäiset

WordPress-ekosysteemi on tehty teemoista ja liitännäisistä

tarjolla on tuhansia WordPress-liitännäisiä, jotka voivat laajentaa toiminnallisuutta tai lisätä uusia ominaisuuksia verkkosivustoosi.

tämä on hyvin lyhyt opetusohjelma liitännäisen asentamisesta.

liitännäissuosituksemme

nyt, siirrytäänpä hieman toiseen aiheeseen: sivun nopeus.

sekä kävijäsi että Google välittävät paljon sivustosi nopeudesta.

Miksi Google?

nopeus on tärkeä tekijä, joka otetaan huomioon, kun ranking orgaanisesti, eli tässä:

miksi Sivuston nopeus on huono käyttäjille, ja lopulta sinulle?
No, jos tarjoat heille huonon kokemuksen, he eivät välttämättä sitoudu tarjoukseesi tai eivät välttämättä edes palaa lähiaikoina.

Googlen vuoden 2018 tutkimuksen mukaan 53% mobiilikäyttäjistä jättää sivuston, jonka lataaminen kestää kauemmin kuin 3 sekuntia (Holy Moly!).

ja katsokaa tuota!

miten sivun kuormitus vaikuttaa liikkuviin kävijöihin (Huom: bounce tarkoittaa sivustolta poistumista)?
.
niin, miten voit korjata tämän, ja myös parantaa yleistä sivuston suorituskykyä niin, että et saa peukkua alas sekä käyttäjät että Google?

olen poiminut 2 laid back-ratkaisua (siellä on paljon muutakin, mutta aika teknistä).

● optimoi kuvat
verkkosivustosi kuvia ei saa ladata alkuperäisessä koossaan. Yritä myös mennä PNG: llä JPEG: n sijaan (niissä on vähemmän värejä).
Smush on ensisijainen WordPress plugin kuvan pakkaamiseen. Et näe mitään näkyvää pudotusta laadussa ja sivun nopeus on optimoitu.

● välimuisti
yksinkertaisesti sanottuna välimuisti tarjoaa väliaikaista tallennustilaa myöhemmin avattavalle sisällölle. Sivustosi latautuu eri tavalla, jos sama kävijä käyttää sitä ensimmäistä kertaa tai 5. kerran.

miksi?
kun olet tekemisissä selaimen välimuistin kanssa, selain tallentaa kopion tiedostoista käyttäjän laitteen sivustolta
(kiintolevy, matkapuhelin). Kun verkkosivusto on välimuistissa, selaimen tarvitsee vain ladata uusia tai päivitettyjä sivun osia, eikä sen tarvitse aloittaa uutta palvelinpyyntöä. Sama tapahtuu, jos napsautat ”takaisin” – painiketta, selaimesi näyttää sivun välimuistista. Tämä on
myös erittäin hyödyllinen hitaan nettiyhteyden käsittelyssä, sivut latautuvat nopeasti.

haluatko ymmärtää lisää välimuistin käytöstä? Lue tästä.

tässä suosittelemamme työkalut ovat:
➔ W3 Total Cache (W3TC) parantaa sivustosi SEO-ja käyttökokemusta lisäämällä sivuston suorituskykyä ja lyhentämällä latausaikoja.
➔ ➔ Kolibri. Tämä on joitakin lisäominaisuuksia sekä että rakastamme, kuten pakkaus Javascript, HTML & CSS-tiedostoja.

nyt, miten voit tarkistaa, kuinka nopeasti sivustosi latautuu?
Googlella on juuri työkalu, joka auttaa sinua siinä, ja se tarjoaa myös joitakin korjausideoita.

Bonus: UX design tips and tricks

Remember me saying the ”sky’ s the limit” with the WordPress page builders?

No … aina on ”mutta”. Kun suunnittelet verkkosivustoa, sinun tulisi aina pitää mielessä
yleisösi tai ostajapersoonasi (kuten markkinoijat haluavat sanoa). Sinun täytyy tarjota heille loistava kokemus sivustossasi, sitä UX tarkoittaa (käyttäjäkokemus).

tätä varten on olemassa tiettyjä sääntöjä, joita sinun tulee noudattaa, jotta voit tarjota kitkattoman käyttökokemuksen.

vastaa käyttäjien tarpeisiin
sivuston käyttäjät eivät halua ajatella liikaa. He tarvitsevat hyödyllistä tietoa, jota voidaan skimmata ja ymmärtää helposti. He eivät tarvitse kokemusta, joka koostuu monista klikkauksista tai paljon edestakaisin.

ihmiset etsivät välitöntä tyydytystä: löytävät tarvitsemansa nopeasti ja helposti. Jos tämä ei tapahdu sivustossasi, he etsivät toisen.

visuaalinen hierarkia

kaikkia sivuston osia ei kohdella tasapuolisesti, jotkut ovat tärkeämpiä kuin toiset (lomakkeet, painikkeet, otsikko, arvolupaus jne.).

mihin haluat käyttäjäsi laskeutuvan? Minne haluat hänen klikkaavan?

käytä visuaalisia vihjeitä auttaaksesi häntä saavuttamaan haluamasi. Kaikki elementit sivuilla pitäisi käyttäytyä opas.

tutkijat ovat saaneet selville, että vasemmalta oikealle lukevat käyttäjät skannaavat verkkosivuja Z: n muotoisella kuviolla.

tämä tarkoittaa, että sinun tulee ohjata tärkeimmät tietosi sinne.

Helppo navigointi

navigointipalkki kannattaa pitää yksinkertaisena, älä mene liian moneen vaihtoehtoon. Saatat päätyä paradoksi valinta tilanne, kun käyttäjät saada hukkua mahdollisuuksia.

sivujen tulee olla sisäisesti linkitettyjä muihin merkityksellisiin sivuihin, jotta navigointi on sujuvaa, eikä käyttäjän tulisi klikata ”takaisin” monta kertaa päästäkseen edellisille sivuille.

käytä valkoista tilaa. Valkoinen tila mahdollistaa informaation järjestämisen sulaviin sisältöalueisiin. Tämä tekee käyttäjät tuntevat olonsa mukavammaksi eikä hukkua kuormien tietoja.

sama värimaailma (johdonmukaisuus)

Vältä verkkosivuillasi superpimeitä tai supervoimakkaita värejä. He saattavat lähettää käyttäjät pois. Voit käyttää vahvempia värejä korostaa tärkeitä näkökohtia sivuston.

Käytä värejä, jotka ovat yhtä tasapainoisia. Tässä inspiraatiota.

ja vielä yksi asia ennen kuin siirrytään seuraavaan UX-suunnitteluperiaatteeseen. Väreillä on merkityksiä ympäri maailmaa, ne liittyvät erilaisiin tunteisiin. Tämä infografiikka valaisee aihetta.

käytä tehokasta kirjoittamista

Älä käytä liioiteltua ja klikattavaa kopiota. Kirjoita maalaisjärjellä, luonnollisella kielellä, älä käytä jargonia (kaikki eivät tunne tiettyjä teknisiä sanoja).

käytä Maxia. 3 kirjasintyyppiä enintään 3 pisteen koossa-enintään 18 sanaa tai 50-80 merkkiä tekstiriviä kohti, kuten Smashing Magazine suosittelee.

Use social proof

Why should I trust you, your business, or your products?
me ihmiset olemme sosiaalisia olentoja. Asumme yhteisöissä, meillä on ystäviä ja perhettä. He voivat olla vaikuttajiamme. Välitämme paljon heidän mielipiteistään.
.
let me listed out some examples for you:
● Ratings and reviews

● suosittelut

● Ei. asiakkaista (”olet hyvässä seurassa”).

● asiakkaiden logot

● tapaustutkimukset tulosten tukemana

● Press featuring and awards

myös, jos haluat tietää viimeisimmästä design trends, coastal Creative Folks teki ihmeellinen infograafi aiheesta.

johtopäätökset

voimme kutsua sitä wrapiksi eikö niin?

halusimme mennä lyhyttä tietä, Emme hukuttaa teitä tiedolla. Mutta loppujen lopuksi paholainen on yksityiskohdissa. Annoimme sinulle helikopterinäkymän.

juttu on se, että saat nettisivusi toimimaan alle 2 tunnissa. Mutta mitä enemmän ominaisuuksia, sivuja, sisältöä haluat lisätä, sitä kauemmin se kestää. Ja älä koskaan laiminlyödä uusimmat web design trendejä.

vielä yksi asia, jos olet DIY-tyyppiä, sinun on ehdottomasti vietävä Colibri-rakentajamme ajelulle!

tässä video siitä, miten WordPress-sivuston sivu rakennetaan tonneittain ominaisuuksia käyttäen.

nyt, jos pidit tästä artikkelista ja haluat oppia lisää WordPress-verkkosivuston suunnittelusta, varmista, että tilaat Youtube-kanavamme ja seuraat meitä Twitterissä ja facebookissamme!