Kotisivut WordPressillä

Hair-do kampaamopalvelut

Tagged with

Kampaamo Ranuan raitilla

Kurssilla luodaan harjoitussivusto kuvitellulle kampaamolle nimeltä Hair-do. Tein jonkinlaisen suunnitelman sivuston rakenteesta sekä sivuston sivujen layoutista. Voit ladata koko harjoituksen materiaalin suunnitelmineen ja mediasisältöinen oheisesta painikkeesta ”Lataa kurssimateriaali Drivesta”. Materiaali latautuu Google Drivesta jaetusta hair-do.zip-tiedostona. Tiedosto on melko suuri mutta sen voi huoletta silti ladata vaikka selain ilmoittaakin, että virustarkistusta ei voi tehdä.

Pura paketti omalle koneellesi ja aloitetaan tutkimaan mitä se pitää sisällään.

Lataa kurssimateriaali Drivesta

Hairy-do on parturi-kampaamo Ranualla

Tarvitsemme näyttävät sivustot, joiden avulla markkinoida yrityksemme palveluja.

Sivustoille olisi hyvä tulla tietoa palveluistamme, joita ovat:

  • Leikkaukset
  • Juhlakampaukset
  • Permanentit
  • Hiustenhoitotuotteet

Lisäksi sivustolle tulee yhteystiedot-sivu, jossa Google Maps-sijaintikartta sekä yhteydenottolomake, jonka avulla voidaan tilata palveluja. Automaattista varausjärjestelmää tässä vaiheessa ei tehdä mutta voidaan palata siihen myöhemmin. Minusta kampaajana voisi olla jonkinlainen henkilökuvasivu. Kuvia minusta on kuvamteriaalissa. Myös henkilökuva löytyy sieltä.

Sivuston ulkoasun suunnittelun jätän teidän ammattilaisten käsiin. Toivon kuitenkin sivustolle pinkkiin vivahtavaa ulkoasua, joka sopii mukavasti yhteen logomme kanssa (liitteenä). Pinkki ja kevyet värit ovat meille mieluisia :). Sivustolle ei tule varauskalenteria tässä vaiheessa vaan yhteydenottolomake riittää. Lomakkeessa voisi olla myös jokin valinta mitä palvelua viesti tai ajanvarauspyyntö koskee.

Etusivulla voisi olla lyhyesti kuvattuna ja eriteltynä palvelumme kuvitettuna kuvilla. Kuvia meillä ei ole mutta käyttäkää joitain vapaasti käytettäviä kuvia kuvittamiseen. Voimme lisätä omat kuvat sitten itse jälkikäteen, jos haluamme.

Yrityksemme tiedot ovat:

Tmi Hairy-do
Rantamutka 4
97700 Ranua
p. 0500 345 9867
paivi.lahtinen@hairdo.com
Y-123456-7

Sivustosuunnitelma

Hair-do-sivustolle on luotu miellekaavio sivuston rakenteesta ja sitä voi käyttää apuna navigoinnin ja alasivujen, artikkelien sekä taksonomian luomisessa. Muutoksia rakenteeseen voidaan tehdä ja tavallisesti myös tehdään sillä sivujen tekeminen on luovaa työskentelyä. Suunnitelman tekeminen muodostaa kuitenkin raamit projektin toteuttamiselle ja sellainen kannattaa aina tehdä jollain tasolla.

Avaa materiaalista suunnitelmat ja tutustutaan niihin ennen varsinaiseen hommaan ryhtymistä. Sisältötekstejäkin on mutta tekstien luomisessa voidaan käyttää myös tekoälyä avuksi.

Lataa päivitetty suunnitelma

Tehdään aluksi sivuston perustamiseen liittyvät perusasiat kuntoon. Alla luetellut perustoimet ja niiden toteuttaminen käydään tunneilla läpi vaihe vaiheelta.

Hair-do kampaamopalvelut on paikallisesti Suomessa toimiva yritys ja sivustosta tulee suomenkielinen, joten asetetaan lokalisaatioasetuksiksi sivustolle Suomi (aikavyöhyke Helsinki). Päivämäärän ja ajan asetus on toivottu muotoon j.n.Y ja H.i. Sivustolla tullaan käyttämään kategorioita, joten URL osoitteen rakenteeksi asetetaan /%category%/%postname%/

Teema lisäosat ja editori sekä ensimmäiset sivut

Harjoitussivulla tullaan käyttämään:

  • sivueditorina Elementor-lohkoeditori
  • WordPress teemana Kadence niminen teema.
  • Asennetaan myös lisäosia kuten Yoast duplicate post, Contact Form 7, Disable Gutenberg, Add Custom CSS/JS.

Asenna editori, teema sekä yllämainitut lisäosat WordPressiin.

Luo myös sivustolle etusivu ja artikkelien sivu ja ota ne käyttöön WordPressin asetuksista (kts.video).

Aloitetaan sivuston rakentelu

Teema ja sen valinta

Teeman valinta sivustolle saattaa olla haastava tehtävä. Hyvin tavallisesti joudutaan testaamaan ja kokeilemaan erilaisia tarjolla olevia teemoja, jotta löydetään oman sivustolayoutin toteuttamiselle paras ja käytännöllisin vaihtoehto. Käytännöllisyyteen vaikuttavat käytännössä teeman antamat mahdollisuudet vaikuttaa eri osiin sivun layoutissa.

Teeman etsintää

Soveltuvaa teemaa joudutaan käytännössä etsimään tarjolla olevista teemoista testaamisen kautta asentamalla teema ja kokeilemalla millä teemalla suunnitelman mukainen toteutus parhaiten onnistuu. Parhaaseen tulokseen ja rajattomaan muotoilujen toteutusmahdollisuuksiin päästään luonnollisesti luomalla itse tyhjä teema mutta tällä kurssilla se ei kuitenkaan ole mielekästä runsaan koodauksen takia.

Vertaile kokemuksia teemoista

Käytämme Elementor-editoria, joten yksi tapa on tutkia kokemuksia Elementor-editorille parhaiten soveltuvista teemoista. Googleta tai tiedustele tekoälyltä mistä teemoista on parhaita kokemuksia Elementorin kanssa käytettäväksi. Tein tutkimusta teemaa valitessa ja kehutuimmaksi teemaksi muodostui Elementorin oma Hello-teema. Keskusteluissa ilmeni kuitenkin tuloksia, joiden mukaan Hello-teema toimisi, jos käytössä on Elementorin maksullinen Premium-versio mutta ilmaisessa versiossa teema ei toimisi hyvin.
Toisena vaihtoehtona suosittu ehdokas oli Astra-teema, jota kehuttiin vaihtoehtona Elementorin ilmaiselle versiolle. Testasin teemaa mutta havaitsin joitain ongelmia ylä- ja alatunnisteen muotoilussa, joten siirryin seuraavaan vaihtoehtoon. Keskusteluissa vilahti myös teema nimeltä Neve, jonka havaitsin Hair-do sivustolle sopivana vaihtoehtona.

Sydney-teema

Etsittäessä Hair-do kampaamon sivun suunnitelmaan soveltuvaa teemaa testasin myös teemaa nimeltä Sydney. Kun aloitin luomaan suunnitelman taittoa sivustolle teeman asetuksissa, törmäsin ongelmaan, jossa teeman tiedostot tuottivat tyhjän tilan ylimmän elementin ympärille content-sisältöosassa. Tyhjän tilan ongelmaan ei ollut ratkaisua teeman asetuksissa vaan ne olisi poistettava CSS-muotoiluilla. Näin ollen päädyin tutkimaan muita teemoja sivuston toteuttamiseksi.

Kadence-teema

Tällä kurssilla on luotu onnistuneesti Hair-do sivusto Kadence nimistä teemaa. Kadencen osalta joitain sivun rakenteita (esim. artikkelin subheader) joudutaan asemoimaan CSS-muotoiluilla melko monimutkaisin muotoiluin. Kadence-teema sisältää kuitenkin runsain mitoin vaihtoehtoja sivuston muodon toteuttamiselle ja sen avulla voidaan toteuttaa suunnitelman mukainen sivutaitto ja on näin ollen hyvä vaihtoehto teemaksi sivustolle.

Asenna siis teemaksi sivustolle Kadence. Ota se myös käyttöön ja poista muiden teemojen asennukset.

Sydney-teeman tyhjä tila olisi poistettava CSS-muotoilulla.
Sydney-teeman tyhjä tila olisi poistettava CSS-muotoilulla.

Teeman mukauttaminen

Teeman mukauttaminen tarkoittaa käytössä olevan teeman muotoilemista omaan tarkoitukseen (taittoon) sopivaksi. Mukauttamisella pyritään samaan ulkomuotoon (layout, taitto), joka sivustolle on suunniteltu.

Tavallisimpia asioita, joita itse muokkaan ja on tarpeen muokata teeman mukauttamisessa ovat:

  • sivun, artikkelien ja muiden sivujen sisällön leveyden mukauttaminen
  • ylätunnisteen ulkoasun mukauttaminen ja sisältöelementtien valitseminen sekä niiden asemointi ylätunnisteeseen
  • alatunnisteen ulkoasun mukauttaminen ja sisältöelementtien valitseminen sekä niiden asemointi alatunnisteeseen
  • sivupalkkien näyttäminen ja vimpaimien valitseminen sivupalkkeihin
  • mahdollisesti typografian määrittäminen, jollei sitä ei aseteta editorissa tai CSS:llä
  • omien CSS-muotoilujen luominen, jollei käytetä erillistä lisäosaa

Kaikissa saatavilla olevissa valmisteemoissa on erilaiset mahdollisuudet vaikuttaa sivuston layoutiin. On hyvin tavallista, että jotain sivuston elementin muotoa ei valmisteemassa voida mukauttaa teeman asetuksista vaan on turvauduttava CSS-muotoiluun. Jos tällainen ongelma teemassa ilmenee, kannattaa asentaa sivustolle ns.lapsiteema (child-theme), josta voit lukea erillisestä artikkelista.

Jos teen sivustoja valmisteemaan, tavallisesti otan käyttöön lapsiteeman sillä yleensä joudun asettamaan sivustolle myös omia asetuksia teeman tiedostoihin.

Siirrytään seuraavaksi Kadence-teeman mukauttamiseen ja tehdään siitä suunnitelman mukainen ratkaisu sivuston ulkomuotoon. Avaa Mukauta toiminto ohjauspaneelin toiminnosta Ulkoasu/Mukauta (Appearance/Customize)

Kokeile seuraavia teeman asetuksia:

  1. General/Layout: Aseta Content Max Width width asetus HD-leveyteen 1920 sillä haluamme luoda koko HD-levyisen sivuston ja Narrow Container saa jäädä olemassa olevaan arvoon. Aseta avo nolla (0) sekä Content Left/Right Edge Spacing että Content Top/Bottom Spacing eli poistetaan tyhjät tilat kaikilta reunoilta. Tässä vaiheessa asetetaan vain sivujen asetukset. Palataan artikkeleiden (Single) ja muihin asetuksiin myöhemmin.
  2. Posts/Pages Layout -> Page Layout: Asetuksessa määritetään kuinka sivuston Sivutyyppiset html-dokumentit esitetään. Otetaan kaikilta sivuilta Page Title pois käytöstä sillä asetetaan sivuille sivun pääotsikko sisältöä luodessa. Default Page Layout asetetaan Fullwidth sillä haluamme kokoleveän sivun. Kohdassa Content Style aseta arvoksi Unboxed. Sivuilla ei näytetä artikkelikuvaa eikä kommentteja.

Navigointivalikot

Sivuston navigointivalikko on saavutettavuuden ja sivuston käytettävyyden kannalta tärkein objekti sivustolla. Sivustolle voidaan luoda päänavigoinnin lisäksi useita muitakin navigointivalikkoja tarpeen mukaan. Kadence-teemassa on koodattu kolme valikkoa ja sivustolle luodaan niistä kaksi Primary menu (päänavigointi header-osaan) ja Secondary navigation footer-osaan.

Siirry ohjauspaneelin toimintoon Ulkoasu/Navigointi (Appearance/menus) ja luo sivustolle kaksi navigointivalikkoa suunnitelman mukaisesti.

Alatunnisteen valikossa luodaan Custom Links-toiminnon avulla ns.tyhjiä linkkejä (dummy link), joiden avulla luodaan näennäiset paikat menun itemeille.

Vimpaimet

Vimpaimet (Widgets) ovat WordPressissä tavallisesti sivupalkissa (sidebar) tai alatunnisteessa käytettäviä toimintoja. Vimpaimet löytyvät ohjauspaneesista Ulkoasu/Vimpaimet (Appearance/Widgets) -asetuksesta. Harjoitussivustolla käytetään vimpaimia alatunnisteen sivupalkeissa sekä etusivun sivupalkki lohkossa, jossa oikella puolella on Uusinta uutta! viimeisimpien artikkeleiden vimpain.

Uusinta uutta! etusivulla

Kun päästään etusivun sisällön luomiseen, sisvustosuunnitelmassa on asetettu etusivulle näkyviin viimeisimmät artikkelit. Toiminto on toteutettu Elementorin-toiminnolla Sidebar, jossa tuodaan sivulle näkyviin WordPressin vimpaimet asetuksissa luotu vimpain.

Vimpaimista etusivulle.
Vimpaimista etusivulle.

Ylätunniste (header)

Siirry mukauta toiminnossa kohtaan Header. josta muotoillaan sivuston ylätunnisteen tyyli. Tässäkin teemassa ylätunniste sisältää kolme riviä (Row), jotka on jaettu kolmeen sarakkeeseen, jotka sisältävät sisältöelementtejä.

Ylätunnisteen riveistä käytetään meidän tapauksessamme keskimmäistä Header Main-riviä, jossa voidaan raahata olemassa olevia elementtejä sarakkeesta toiseen tai klikata sarakkeen keskellä olevaa ikonia ja lisätä haluttu elementti sarakkeeseen.

Luodaan seuraavanlainen layout ylätunnisteeseen:

Sivuston tunniste eli logo Navigointi Search

Ylätunnisteessa sarakkeissa käytetään sarakkeeseen lisättäviä elementtejä, kuten logo, Primary Navigation, Search jne.

Aseta seuraavanlaisia asetuksia elementeille:

  • Vasen sarake: logo, johon tuodaan logokuva ilman osoitetietoja (löytyy materiaalista). Aseta logokuvan Max Width arvoksi esimerkiksi 200px.
  • Keskisarake: Luo sivustolle Päänavigointivalikko ja lisää se Primary Menu-elementin asetuksissa menuksi.
  • Oikea sarake: Search Icon, joka tuo sivustolle hakutoiminnon. Muotoile ikoni ja sen toiminto halutunlaiseksi oman makusi mukaan.

Klikkaa vielä Header-asetuksista auki Header Main-valinta ja aseta ylätunnisteeseen sivustosuunnitelman mukainen tai haluamasi taustaväri.

Logon asemointi CSS:llä

Logo voidaan asemoida header-osassa CSS:n avulla niin, että se nostetaan z-suunnassa (syvyyssuunnassa) muiden elementtien päälle ”kellumaan”. Jos tutkit sivustosuunnitelmaa huomaat, että suunnitelmassa logon ”häntä” roikkuu ylätunnisteen alapuolella.

Tee seuraavanlaiset asetukset:

  1. Siirry teeman Mukauttamisessa (Mukauta) kohtaan Additional CSS.
  2. Kopioi oheinen CSS-muotoilu leikepöydälle ja liitä se Additional CSS-tekstikenttään ja tallenna muutokset (Publish)
  3. Siirry seuraavaksi logokuvan asetuksiin (Header/Logo) ja aseta logon Logo Max Width arvo esimerkiksi 250
  4. Lisää vielä logon yläpuolelle Design-välilehdeltä täytettä (Padding) esimerkiksi 1rem, jolloin logo asettuu alemmaksi ja sopisuhtaisesti navigointivalikkoon nähden.

CSS-koodi:

header .site-branding {position: absolute; z-index: 9999;}

Omat CSS-muotoilut

Omia CSS-muotoiluja voidaan lisätä Mukauta-toiminnosta Oma CSS-kohdassa. Itse olen kuitenkin suosinut lisäosa-metodia, jolla koodia on omasta mielestäni mielekkäämpää kirjoittaa. On olemassa myös teknisempi vaihtoehto, jossa asennetaan lapsiteema ja luoda lapsiteemaan functions.php ja oma CSS-tiedosto linkitetään sivustolle functions.php-tiedostossa. Tällä kurssilla kuitenkin käytetään lisäosaa CSS:n lisäämiseen, jotta opitte myös millainen lisäosa on.

Katsotaan hieman lähemmin lisäosan toimintaa. Jos et vielä ole asentanut Simple Custom CSS/JS lisäosaa, tee se nyt ja asennettuasi avaa lisäosan toiminto All Custom Code ohjauspaneelista. Luo uusi CSS-tiedosto klikkaamalla painiketta Add CSS Code sivun ylälaidasta.

Nimeä tiedosto vaikka ”Omat muotoilut” ja paina oikeassa laidassa olevaa Publish-painiketta.

Simple Custom CSS/JS-lisäosa WordPressin lisäosissa.

Käyttöliittymä

Käyttöliittymä on hyvin yksinkertainen. Keskellä on koodinäkymä missä on kirjoitettuna automaattisesti CSS-kommentteja, joissa kaikki tekstit on kirjoitettu kommenttimerkinnän /* ja */ sisään. Kommenteissa on myö esimerkki CSS-muotoilumerkinnästä, josta saat ensikosketuksen CSS:ään. Kun olet lkukenut kommentit ja sisäistänyt idean voit pyyhkiä merkinnät pois ja kirjoittaa koodinäkymään oman kommenttisi: /*Tiedosto sisältää minun omat muotoilut sivustolleni*/

Oikealla puolella (1.) on tiedoston asetuksia (Options), joihin kannattaa myös tutustua:

  1. Linking type
    • External File: Tarkoittaa, että luoduista muotoiluista muodostuu erillinen tiedosto teeman tiedostorakenteeseen ja se ladataan ulkoisena tiedostona jokaiselle sivulle.
    • Internal: Tarkoittaa, että muotoiluista ei muodostu erillistä tiedostoa vaan kaikki muotoilut lisätään jokaisen sivun lähdekoodin metatietoihin joko head- tai footer-osaan.
  2. Where on page
    • In the <head> element: Valinnalla edellisessä kohdassa 1 asetettu sisäinen CSS tulostuu sivun metatiedoissa head-elementtiin.
    • In the <footer> element: Valinnalla edellisessä kohdassa 1 asetettu sisäinen CSS tulostuu sivulla footer-elementtiin.
  3. Where on site
    • In Frontend: Frontend tarkoittaa käytännössä, että koodi tulostuu selaajan selaavan sivun lähdekoodiin.
    • In Block Editor: Block Editor tarkoittaa, että voimme vaikuttaa editorin ulkoasun muotoiluun.
    • In Admin: Admin tarkoittaa käytännössä Backendia eli hallintapaneelin toimintojen muotoilemista. Lisäosalla voidaan siis vaikuttaa myös ohjauspaneelin toimintojen ulkonäköön aluttaessa.
    • In Login Page: WordPressin kirjautumissivun lähdekoodiin, joten voit muotoilla kirjautumissivusi täysin uudelleen, jos haluat. Esimerkki muotoilusta login-sivusta.

Alatunniste

Alatunnisteen tekeminen tapahtuu teeman mukauttamisesta Footer-asetuksista, josta aukeaa samankaltainen toiminto, kuin ylätunnisteen mukauttamisessa. Kolme riviä näkyy taas sivun alareunassa ja rivit on jaettuna kolmeen sarakkeeseen. Sarakkeiden määrää voidaan muokata klikkaamalla sivin vasemmassa laidassa olevaa hammasratasikonia.

Muokkaa rivien sarakkeiden määrät:

  • Ylin rivi: 1 sarake
  • Keskirivi: 3 saraketta

Alatunnisteen sisältöelementteihin käytetään kahta ylimmäistä riviä, joihin tulee seuraavat elementit:

Avainsanapilvi – Tag Cloud – FOOTER 1
Alatunnisteen logo etusivun linkillä
FOOTER 2		 FOOTER 3
Y-tunnus
Kokonaisvaltaista hyvinvointia
ja kampaamopalveluita Ranualla		 Footer navigation FOOTER 4

Copyright-teksti

Alatunnisteen alimmaisena oleva Copyright-rivi on muokattavissa teemassa erilisellä tekstimuotoisella toiminnolla Change Copyright, jossa tekstissä käytetään html-merkkausta. Jos haluat käyttää Copyright-symbolia se voidaan tuoda näkyviin koodilla (html-enteetti) &copy; tai &#169;. Muokkaa Copyright-tekstiä liittämällä seuraava koodi tekstikenttään asetuksessa:

<p>&copy;2025 T:mi Hair-do</p>

Vimpaimet ja sivupalkit (esimerkkisivusto)

Vimpaimet (Widgets) ovat WordPressissä tavallisesti sivupalkissa (Sidebar) tai alatunnisteessa käytettäviä toimintoja. Vimpaimet löytyvät ohjauspaneesista Ulkoasu/Vimpaimet (Appearance/Widgets) -asetuksesta. Vimpaimia voidaan tuoda sivustolle näkyviin joko lisäämällä sivupalkki sivulle Teeman mukauttamisasetuksissa tai asettamalla sivupalkki näkyviin sivun sisältöön Editorissa, josta löytyy oma elementti sivupalkin lisäämistä varten. Tämä metodi on käytössä esimerkkisivustolla otsikon linkin takana.

Hair-do sivustolla käytetään vimpaimia alatunnisteen sivupalkeissa sekä etusivun sivupalkki lohkossa, joka lisätään myöhemmin editoitaessa etusivun sisältöä. Alatunnisteen tapauksessa sivupalkit asetetaan Teeman mukauttamisessa ja valitaan sivupalkkiin oikeat vimpaimet ohajuspaneelin Vimpaimet (Widgets) toiminnossa.

Vimpainten luominen alatunnisteeseen

Siirry Vimpaimet-toimintoon ohjauspaneelin Ulkomuoto-asetuksissa. Sivupalkeista (Sidebar) keskitytään nyt siis Footer One, Footer Two, Footer Three sekä Footer four sivupalkkeihin, joihin raahataan seuraavat vimpaimet näkymän vasemman reunan käytettävänä olevista vimpaimista:

  1. Footer One: Vimpain, joka lisää avainsanapilven
  2. Footer Two: Image-vimpain. johon lisätään osoitteellinen logokuva. Aseta Image-vimpaimeen Link to-kohtaan toistaiseksi risuaita (#).
  3. Footer Three: Custom html-vimpain, johon asetetaan seuraava html-merkintä: 
    <p>Y-123456-7</p>
<p>Kokonaisvaltaista hyvinvointia<br>
ja kampaamopalveluita Ranualla</p>

    Määritä tekstien tasaus keskelle elementin muotoiluasetuksista.

  4. Footer Four: Asetetaan tähän sivupalkkiin Navigation Menu-vimpain ja lisätään siihen alatunnisteen navigointivalikko.

ps.Muista tallentaa aina sivupalkki, kun olet lisännyt vimpaimet palkkiin.

Teeman mukauttamisessa Footer-asetuksissa on huomattavaa, mistä elementin asetukset löytyvät. Niille on oma ikoni elementissä (kts.kuva). Asemoi seuraavaksi elementit alatunnisteen rivien sarakkeissa oikein. Tarkista asemointi myös tabletti ja mobiilinäkymissä klikkaamalla näytön vasemmassa alalaidassa olevia tabletti ja mobiilinäkymän painikkeita. Jokaiselle näkymälle on asetettava asetukset erikseen, jotta responsiivisuus toteutuu asemoinnissa.

Footerin muotoilun asetukset teeman mukauttamisessa.
Footerin muotoilun asetukset teeman mukauttamisessa.

Alatunnisteen muotoilemista

Asetettiin alatunnisteen asetukset Mukauta-toiminnosta WordPressissä mutta elementit kaipaavat hieman lisämuotoilua. Teeman asetuksista ei löydy sopivaa säätöä muotoilujen toteutukseen tästä eteenpäin, joten muotoiluja on toteutettava CSS:llä. Harjoitellaan seuraavaksi selaimen tarkista-työkalun käyttöä ja muotoilujen toteuttamista CSS-muotoilukielellä.

Tutustu ensin Tarkista-työkalun toimintaperiaatteisin erillisessä artikkelissa.

Avaa etusivu esikatseltavaksi ja klikkaa painikkeella alatunnisteen navigointivalikon päällä. Valitse avautuvasta valikosta toiminto Tarkista käytettäessä Google Chrome-selainta.

Navigointivalikko nojaa kiinni sivun oikeassa laidassa ja navigoinnin oikealle puolelle on saatava tyhjää tilaa. Etsi html-koodista ul id=-elementti, jonka CSS-luokka (ID) on menu-footer-navigointi ja lisää kohteelle seuraavat muotoilut:

padding-right: 3%
padding-left: 3%

Elementor-editori

Olet nyt luonut sivustolle perusasetukset ja muotoilut sivuston ylä- ja alatunnisteeseen sekä etusivun ja sivujen ulkoasuun. Voidaan seuraavaksi siirtyä etusivun sisällön rakentelemiseen Elementor-editorilla.

Kurssimateriaaleissa on pintapuolisesti tietoa Elementor-editorista ja sen käyttämisestä artikkelissa 1.5.1 Sivustoeditorit mutta alta voit katsoa havainnevideon Elementorin käytöstä. Videolla tehdään valmiiksi layoutsuunnitelman mukaiset kaksi ensimmäistä lohkoa etusivulle.

Ennen aloittamista lukaise myös artikkeli 1.6 Perusperiaatteita, jossa kerrotaan lohkojen ja lohkoeditoreiden perusasioita.

Yksittäisen artikkelin muotoilu

Siirrytään yksittäisen artikkelin muotoilemiseen. Aikaisemmin tehtiin yksittäisen sivun muotoilut teeman mukauttamisesta mutta nyt on aika muoitoilla yksittäinen artikkeli. Jos halutaan toteuttaa tarkalleen suunnitelman mukainen muotoilu artikkelille, joudutaan käyttämään muotoilemisessa CSS-muotoiluja sillä teema ei suoraan tue murupolun asemoimista otsikko-osan ylälaitaan.

Tehdään aluksi Artikkelin muotoileminen teeman mukauttamistoiminnossa (Mukauta) Posts/Pages Layout -> Single Post Layout:

  1. Show Post Title?: Kyllä
  2. Post Title Layout: Above Content
  3. Container Width: FULLWIDTH
  4. Post Title Align: left
  5. Container Min Height: 50px
  6. Title Elements: Kaikki muut piiloon paitsi BreadCrumbs
  7. Default Post Leyout: Fullwidth
  8. Content Style: Unboxed
  9. Design-välilehdellä aseta suunnitelman mukainen typografia Breadcrumbs (Murupolun) Fontille (Open Sans, 700, 1rem, väri: #e0cbd8 tai #d6cfff).

CSS-muotoilut murupolkuun

Korvaa olemassa olevat muotoilut sivuston omissa CSS-muotoiluissa oheisella CSS-muotoilulla:

header .site-branding {
position: absolute;
z-index: 9998;
}
.post-title .kadence-breadcrumbs {
display: block;
position: absolute;
z-index: 9999;
left: 5%;
top: 0;
}
.single header.entry-header {
background-color: #333333;
}