Kujunduse ehk teema (Renata) kasutamine
Originaaljuhend (inglise keeles): https://documentation.bold-themes.com/renata/theme-customization/
SISSEJUHATUS
Teema kohandamine. Teema kasutab üldiste teema suvandite jaoks WordPressi kohandajat. WordPressi kohandaja juurdepääsemiseks vali WordPressi konsoolis “Välimus” > “Kohanda”. Ekraani vasakul küljel näed menüüd erinevate suvanditega ning paremal küljel näed veebisaidi eelvaadet. Kõik kohandaja seadetes tehtud muudatused, mõjutavad kogu veebisaiti ehk kõiki postitusi ja lehti, seetõttu nimetatakse neid üldisteks kohandamisseadeteks.
Teema oluline omadus on see, et igat üldist seadet saab igal erineval lehel üle kirjutada, kasutades iga lehe allosas olevat seadistuspaneeli pealkirjaga Settings.
Üldised kohandamise seaded:
1. Veebisaidi info
Veebilehe pealkiri
Saad lisada üldise veebilehe pealkirja, mida kasutatakse lehe üldise info pealkirjana.
Lühikirjeldus
Saad lisada üldise veebilehe lühikirjelduse, mida kasutatakse lehe üldise kirjeldusena.
Veebisaidi ikoon
Saad lisada ikooni, mida kuvatakse näiteks brauseri aknas, enne veebisaidi pealkirja
2. General Settings (üldseaded)
Display site title and tagline
Valik kas kuvada saidi pealkirja ja tutvustusteksti
Page width
Lehe laiuse valik, kas täislaiuse (wide) või kasti stiilis (boxed) ja soovitud laius pikslites.
Colors & styles
Värvide ja stiilide muutmine:
Accent color (primary)
Aktsentvärv (esmane) ehk lehe 1.põhitoon
Alternate color (secondary)
Alternatiivne värv ehk lehe 2.põhitoon
Template skin
Teema värvilahenduse täpsemad valikud: hele/tume, millal ja mis järjekorras kuvada värve jms
Template background
Teema taustavärvi valik
Template text color
Teema tekstivärvi valik
Template background image
Taustapildi üleslaadimine
Sidebar
Küljepaani valikud:
Sidebar position
Küljepaani asukoht: ilma küljepaanita, vasakul või paremal
Enable sticky sidebar
Niinimetatud kleepuv küljepaan ehk küljepaan on koguaeg kuvatud, sõltumata lehel liikumisest
Sidebar title size
Küljepaani pealkirja kirjastiili suurus
Sticky sidebar top position
Kleepuva küljepaani asukoht (ülalt)
Sidebar width
Küljepaani laius
Küljepaani reageeriv murdepunkt (pikslites)
Määrab ekraani eraldusvõime, kui küljepaan kuvatakse määratud kujul. Väiksematel ekraanidel kuvatakse küljepaan sisu all.
Custom options
Kohandatud valikud
Custom JS
Võimalus lisada JS kood
Reset theme settings
Kustutab ehk taastab kõik algseaded ehk tehtud kohandatud muudatused kustutatakse
3. Typography (tüpograafia ehk kirjastiilide määramine)
Body Font
Põhisisu kirjastiil, selle seadega saad määrata peamise kirjastiili (fondi), mida rakendatakse kogu veebisaidil. Teema kasutab Google’i veebifonte.
Põhifondi stiili spetsifikatsioon. Määra Google’i muutuva fondi stiili spetsifikatsioon. Lisateabe saamiseks loe siit. Fondi vaikesätete laadimiseks jätke tühjaks.
Body text transform
Kirjastiili teisendus ehk näiteks valik kas kuvada trükitähtedega.
Body font weight
Kirjastiili paksus
Body font style
Kirjastiili valik
Headings & subheadings
Pealkirjad ja alapealkirjad
Heading Font
Pealkirja font, selle seadega saad määrata fondi peamistele pealkirjadele.
Heading font style specification
Pealkirja fondi stiili spetsifikatsioon
Heading text transform
Pealkirjade teksti transformatsioon
Heading font weight
Pealkirjade fondi paksus
Heading font style
Pealkirjade fondi stiil
Heading letter spacing
Pealkirjade tähtede vahed
Supertitle Font
Pealkirja superteksti fondi valik, selle seadega saad määrata fondi pealkirjade supertekstidele.
Supertitle font style specification
Pealkirja superteksti fondi stiili valik, selle seadega saad määrata fondi pealkirjade stiili supertekstidele.
Supertitle text transform
Pealkirjade supertekstide transformatsioon
Supertitle font weight
Pealkirjade supertekstide fondi paksus
Supertitle font style
Pealkirjade supertekstide fondi stiil
Pealkirjade supertekstide tähtede vahed
Subtitle Font
Pealkirja alapealkirjateksti font
Selle seadega saad määrata fondi pealkirjade alapealkirjadele.
Subtitle font style specification
Alapealkirja superteksti fondi stiili valik.
Subtitle text transform
Alapealkirjade teksti transformatsioon
Subtitle font weight
Alapealkirjade fondi paksus
Subtitle font style
Alapealkirjade fondi stiil
Subtitle letter spacing
Alapealkirjade tähtede vahed
Buttons
Nuppude (taustaga tekstilinkide) stiilid
Button font
Nuppudel kasutatav kirjastiil
Button font style specification
Nuppude fondi stiili valik.
Button text transform
Nuppude teksti transformatsioon
Button font weight
Nuppude fondi paksus
Button font style
Nuppude fondi kirjastiili valik.
Button style
Nuppude stiil
Button letter spacing
Nuppudel olevate tähtede vahed
Button shape
Nuppude kuju
Button color scheme
Nuppude värvilahendus
Menus
Menüüde seadistus
Menu font
Menüü kirjastiil
Menu font style specification
Menüü fondi stiili valik
Menu text transform (first level)
Menüü teksti teisendus (esimene menüütase)
Menu text transform (other levels)
Menüü teksti teisendus (teised menüütasemed)
Menu font weight (first level)
Menüü fondi paksus (esimene tase)
Menu font weight (other levels)
Menüü fondi paksus (teised tasemed)
4. Header and footer
Päis ja jalus
Header>
Header width
Päise laiuse valik
Main logo
logo üleslaadimise valik
Logo Height
Logo kõrgus (pikslites), logo kõrguse muutmine vähendab/suurendab logo ja päise ala kõrgust.
Header position
Päise positsiooni/asukoha valik
Primary menu position
Esmatasandi menüü asukoha valik
Rippmenüü ikooni suunaindeks, viimase menüüüksuse puhul kuvatakse rippmenüüd vastupidises suunas
Top bar colors & styles
Ülemise riba värvid ja stiilid
Top bar color scheme
Ülemise riba värviskeem
Top bar background
Ülemise riba taustavärv
Top bar text color
Ülemise riba teksti värv
Logo bar colors & styles
Logoriba värvid ja stiilid
Logo bar color scheme
Logoriba värviskeemi valik
Logo bar background
Logoriba tausta värviskeemi valik
Logo bar text color
Logoriba teksti värviskeemi valik
Menu bar colors & styles
Menüüriba värvid ja stiilid
Menu bar color scheme
Menüüriba värviskeemi valik
Menu bar background
Menüüriba tausta värviskeemi valik
Menu bar text color
Menüüriba teksti värviskeemi valik
Menu hover color scheme
Menüüle pealeliikudes värviskeem
Menu dropdown color scheme
Menüüle pealeliikudes värviskeemi valik
Menu dropdown hover color scheme
Rippmenüüle pealeliikudes värviskeemi valik
Current menu line color scheme
Praeguse (aktiivse) menüürea värviskeem
Sticky header
Püsiv (kogu aeg aktiivne) päis
Peale aktiveerimist valikud:
Sticky header style
Püsiva päise stiili valikud
Scroll breakpoint (in px)
Kerimise katkestuspunkt (pikslites)
Header logo
Päise logo üleslaadimine
Header width
Päise laiuse valik
Logo height
logo kõrguse valik
Colors & styles
Värvid & stiilid
Logo bar color scheme
Logoriba värviskeemi valik
Logo bar background
Logoriba taustavärvi valik
Logo bar text color
Logoriba tekstivärvi valik
Menu bar color scheme
Menüüriba värviskeemi valik
Menu bar background
Menüüriba taustavärvi valik
Menu bar text color
Menüüriba tekstivärvi valik
Current menu line color scheme
Aktiivse menüürea värviskeemi valik
Responsive header
Kohanduv päis
Kohanduva päise murdepunkt (pikslites), määrab ekraani eraldusvõime, kui reageeriv menüü aktiveerub. Vertikaalse menüü lubamiseks kõigi ekraanide menüü jaoks sisesta 999999.
Header logo
Päise logo valik
Sticky header logo
Püsiva päise logo valik
Header logo height
Päise logo kõrgus
Sticky header logo height
Püsiva päise logo kõrgus
Header logo position
Päise logo asukoha valik
Header trigger position
Päise päästiku asukoha valik
Menu max width
Menüü maksimaalne laius
Menu alignment
Menüü joondamine
Menu logo
See logo on nähtav kohanduva menüü kohal (kui menüü on nähtav)
Menu logo height
Menüü logo kõrgus
Colors & styles
Värvid & stiilid
Header color scheme
Päise värvilahendus
Header background
Päise taustavärv
Header text color
Päise tekstivärv
Sticky header color scheme
Püsiva päise värviskeem
Sticky header bg color
Püsiva päise taustavärv
Sticky header text color
Püsiva päise tekstivärv
Menu color scheme
Menüü värviskeem
Menu background
Menüü taustavärv
Menu text color
Menüü tekstivärv
Footer
Jalus
Määrab kõig lehtede jalusena staatilist sisuga lehte ja selle lehe määramine
Widget area width
Moodulite ala laius
Colors & styles
Värvid & stiilid
Widget area color scheme
Moodulite ala värviskeem
Widget area background
Moodulite ala taustavärv
Widget area text color
Moodulite ala tekstivärv
5. Default headline
Vaikimisi pealkiri (antud lehe pealkiri mida kuvab lehe esimeses sisuosas)
Default headline height
Pealkirja vaikekõrgus. Vali vaikepealkirja keelamiseks „None”.
Kasutades ilmuvad valikud:
Default headline parallax speed
Pealkirja parallaks stiili vaikekiirus
Default headline overlay
Pealkirja vaike ülekate
Default headline alignment
Pealkirja vaikejoondus
Default headline title size
Pealkirja vaikesuurus
Default headline title tag
Pealkirja vaikemärgend
Default headline width
Pealkirja laius
Colors & styles
Värvid & stiilid
Default headline color scheme
Pealkirja värviskeem
Default headline bg
Pealkirja taustavärv
Default headline text color
Pealkirja tekstivärv
Display options
Kuva lehe superpealkirjas
Show in page subheadline
Kuva lehe alapealkirjas
Page share options
Lehe jagamise valikud, veendu, et alapealkirjas või superpealkirjas oleks jagamisvalikud.
Page share icons size
Lehe jagamisikoonide suurus
Page share icons style
Lehe jagamisikoonide stiil
Page share icons shape
Lehe jagamisikoonide kuju
Page share icons color scheme
Lehe jagamisikoonide värviskeem
6. Preloader
Eellaadija, aktiveerimisel valikud:
Preloader color scheme
Eellaadija värviskeem
Preloader background
Eellaadija taustavärv
Preloader text color
Eellaadija tekstivärv
Preloader transition
Eellaadija üleminek
Preloader animation
Eellaadija animatsioon
Preloader logo
Eellaadija logo
Preloader text
Eellaadija tekst
7. Blog
Blogi/uudiste seaded
Blog list and archive
Archive layout
Arhiivi paigutus
Single post animation
Üksikpostituse animatsioon
Headline title size
Pealkirja suurus
Show in superheadline
Kuva superpealkirjas
Show in subheadline
Kuva alapealkirjas
Show excerpt
Näita väljavõtet
Show after content
Näita pärast sisu
Share options
Jagamisvalikud
Share icons size
Jagamisikoonide suurus
Share icons style
Jagamisikoonide stiil
Share icons shape
Jagamisikoonide kuju
Share icons color scheme
Jagamisikoonide värviskeem
Read more button style
Loe lisaks nupu stiil
Read more button icon
Loe lisaks nupu ikoon
Read more button size
Loe lisaks nupu suurus
Read more button shape
Loe lisaks nupu kuju
Read more button color scheme
Loe lisaks nupu värviskeem
Blog single post
Blogi üksikpostitus
Üksikpostituse seadete leht. Kasuta kõigi üksikute postituste mallina staatilist sisuga lehte. Vali leht, mis toimib mallina.
Blog post layout
Blogipostituse paigutus
Headline title size
Pealkirja suurus
Show in superheadline
Kuva superpealkirjas
Show in subheadline
Kuva alapealkirjas
Show after content
Kuva peale sisu
Share options
Jagamisvalikud
Share icons size
Jagamiskoonide suurus
Share icons style
Jagamiskoonide stiil
Share icons shape
Jagamiskoonide kuju
Share icons color scheme
Jagamiskoonide värviskeem
Author info style
Autoriteabe stiil
Show in previous/next post navigation
Kuva eelmise/järgmise postituse navigeerimisel
8. Portfolio (pole kasutusel)
Portfoolio ehk tehtud tööde seaded
9. Search
Otsingu seaded.
Search template page
Otsingumalli leht, otsingumallina kasutuseloleva staatilise lehe valik
Search list headline title size
Otsinguloendi pealkirja suurus
Show in search layout superheadline
Valik mida kuvada otsingumalli superpealkirjas
Show in search layout subheadline
Valik mida kuvada otsingumalli alapealkirjas
Show excerpt
Valik kuidas kuvada väljavõtet
Show in search layout after content
Kuva otsingupaigutuses pärast sisu
Search list share options
Otsi loendi jagamisvalikuid
Search list share icons size
Otsinguloendi jagamisikoonide suurus
Search list share icons style
Otsinguloendi jagamisikoonide stiil
Search list share icons shape
Otsinguloendi jagamisikoonide kuju
Search list share icons color scheme
Otsinguloendi jagamisikoonide värviskeem
Read more button icon
Loe rohkem nupu ikoon
Read more button size
Loe rohkem nupu suurus
Read more button style
Loe rohkem nupu stiil
Read more button shape
Loe rohkem nupu kuju
Read more button color scheme
Loe rohkem nuppude värvilahendus
10. 404
404 ehk lehte ei leitud – lehe määramine
11. Menüüd
Parem (ülevaatlikum) muuta valiku alt>Välimus>Menüüd
Kui soovid menüüsid muuta siis vali “Välimus > Menüüd” ning ülevalt vali millist menüüd soovid muuta. NB! Ära unusta salvestada, selleks kliki “Salvesta menüü” ning ka valiku alt “Asukohtade haldamine” vali soovitud menüü ning salvesta.
Soovides lisada lehti menüüsse siis vali valiku alt “Lehed” soovitud leht ning tiri paremale poole teiste menüülinkide juurde. Menüülinkidel klikkides saad pealkirju muuta ja kustutada. Samuti asukohta vahetada lihtsalt tirides soovitud asukohta.
Uue menüü tegemiseks mine “Välimus” “Menüüd” ja valik”Loo uus menüü”. Lisa menüüle iseloomustav pealkiri ning vasakult “Lehed” valiku alt vali menüülingid mida soovid antud menüü all näidata ning kliki “Salvesta”.
12. Moodulid
Parem (ülevaatlikum) muuta valiku alt>Välimus>Moodulid
Näed vasakul valikus olevaid mooduleid. Soovides lisada mooduleid, siis vali vasakult soovitud moodul ning tiri see soovitud asukohta. Asukohti on palju erinevaid, kuid kuna kasutusel ühe lehe lahendus, siis vali:
Header Menu Widgets
BT Button
Kasutusel paremas nurgas olev konsultatsioonile registreerumise nupp
Icon:
Nupu ikooni valik
Text:
Nupu teksti lisamine
Style:
Stiili valik
Shape:
Kuju valik
Size:
Suuruse valik
Icon position:
Ikooni positsiooni valik
Color scheme:
Värvilahenduse valik
URL- lingi lisamine, soovides et suunaks soovitud sisuosale, sisi sisuosa nime ette # märk
Target:
Nupu käitumise valik
CSS extra class:
CSS stiilikoodi lisamine
Sticky color scheme:
Püsiva (kleepuva) värvilahenduse valik
13. Kodulehe sätted
Sinu koduleht näitab
Saad valida, mida saidi esilehel näidatakse. See võib olla kronoloogiliselt järjestatud postitusteseeria (klassikaline ajaveeb ehk blogi) või staatiline leht ehk kodulehe stiil. Staatilise lehe valimiseks tuleb esmalt luua kaks lehte – üks koduleheks ja teine postituste kuvamiseks.
14. Täiendav CSS
CSS koodide lisamine ehk koodid, mis muudavad täiendavalt stiili.
Sisuhalduse (WordPress) kasutamine
Kokkuvõtvalt WordPressi sisuhalduse ja kujunduse haldamine.
Uute kasutajate lisamine ja valiku alt “Kasutajad” > “Lisa uus”. Täida allolevad väljad, mõned on kohustuslikud, mõned vabatahtlikud. Kasutajanimi (nõutav), E-post (nõutav), Eesnimi, Perekonnanimi, Veebileht. Parool – vajutades “Näita salasõna” näitab süsteemi poolt genereeritud parooli. saad muuta aga loo turvaline parool, mida pole võimalik programmil kiirelt tuletada. Salvestamiseks “Lisa uus kasutaja”
1. Lehtede muutmine
Vali halduses “Lehed” kliki sellel ning vali nimekirjast leht pealkirja järgi ning kliki antud pealkirjal. Avalehe järgi on ka eraldi märge “-Esileht”.
Leht on ülesehitatud lisalahendusega ehk erinevate sisu moodulitega. Soovitud sisuosal klikkides, saad antud sisuosa muuta. Peale soovitud info muutmist või lisamist kliki “Uuenda”. Sisumooduli Bold Builder videojuhend inglise keeles: https://www.youtube.com/watch?v=aUHC67jQfz4
1.2 Uute lehtede tegemine
Uue lehe tegemiseks vali “Lehed” ning sealt “Lisa uus” ja salvestamiseks “Avalda”. Leht on ülesehitatud lisalahendusega ehk erinevate sisu moodulitega. Peale soovitud info muutmist või lisamist kliki “Avalda”.
1.3 Lehtede optimeerimine
Kõigi lehtede all näed valikut “Yoast SEO” Sealt lisa alati iga konkreetse lehe pealkiri (SEO Title) ja kirjeldus (Meta Description). Kirjeldusse kirjuta lühidalt millest see konkreetne leht on (kuvab otsingutulemustes lehe kirjeldusena). See on ka vajalik otsingumootorites nagu Google hea otsingutulemuse positsiooni saavutamiseks (tehtud näitena avalehel). Mida atraktiivsemalt on kirjeldus kirjutatud, seda rohkem külastajaid lehe avab, mis tõstab omakorda lehe väärtust Google otsingumootori silmis. Lisa alati pealkirja peamine märksõna ning samuti kirjeldusse.
1.4 Menüüde muutmine ja lisamine
Kui soovid menüüsid muuta siis vali “Välimus > Menüüd” ning ülevalt vali millist menüüd soovid muuta. NB! Ära unusta salvestada, selleks kliki “Salvesta menüü” ning ka valiku alt “Asukohtade haldamine” vali soovitud menüü ning salvesta.
Soovides lisada lehti menüüsse siis vali valiku alt “Lehed” soovitud leht ning tiri paremale poole teiste menüülinkide juurde. Menüülinkidel klikkides saad pealkirju muuta ja kustutada. Samuti asukohta vahetada lihtsalt tirides soovitud asukohta.
Uue menüü tegemiseks mine “Välimus” “Menüüd” ja valik”Loo uus menüü”. Lisa menüüle iseloomustav pealkiri ning vasakult “Lehed” valiku alt vali menüülingid mida soovid antud menüü all näidata ning kliki “Salvesta”.
1.5 Kontaktivormide seaded
Kasutusel on kontaktivormi programm Contact Form 7. Kontaktivormi leiad valiku alt “Kontakt”.
1.6 Mitmekeelsuse seaded (pole tellitud)
Admin alas on üleval lipud, millel klikkides avanevad lehed ja sisu, mis on lisatud antud keeles. Sealt näed lehti ning saad muuta. Mitmekeelsus on ülesehitatud, nii et teistes keeltes olev on tõlge eesti keelest ehk alguses soovitan alati luua leht eesti keeles ning siis lisada tõlge. Avades eestikeelsed lehed on iga lehe järel + märk, millel klõpsates saab lisada soovitud keeles sisu. Kui tõlge on lisatud siis on pliiatsi ikoon, klikkides sellel saad sisu muuta. Lisamiseks uus leht antud keele menüüsse ava “Välimus” “Menüüd” ning ülevalt vali keel klikkides soovitul.
1.7 Hooldus ja uuendamine
Kõige olulisem on uuendada veebilehe kasutatavaid lisaprogramme (pluginaid), sisuhaldust (WordPressi) ja kasutatavat kujundust (teemat). Väga hea oleks kui vähemalt kord kuus saaks kõik uuendused tehtud. Täpsem info: https://veebilahendus.ee/veebilahenduse-uuendamine-ja-hooldus/