Astra 3.0 – Tilpasse temaet

Ser du etter et WordPress-tema som er raskt, elegant og og enkelt å tilpasse? Da kan jeg anbefale Astra! Det er stabilt, SEO-vennlig og kompatibelt med store sidebyggere som benyttes i WordPress.

Du bør tilpasse Astra-Temaet før du starter med selve sidedesignet.

Ved å velge Tilpass (enten i menyen eller fra toppen av siden), setter du innstillingene for design av siden, hvordan menyene skal se ut, du setter inn logo og nettstedsikon, samt angir hvordan sider og blogginnlegg skal se ut.

I eksemplene under har jeg gått gjennom innstillingene etter at siden er ferdig, slik at det skal være enklere å se og lettere å huske om det er noe du glemmer underveis. Da er det bare å gå tilbake til blogginnlegget og lese.

Globale innstillinger – Layout

Det første du skal gjøre er å designe layouten på siden din. Klikk på Globale innstillinger der du kan sette standard innstillinger for

• Typografi
• Farger
• Kontainer
• Knapper

Kontainer

• Velg Kontainer
• Bredden er 1200 piksler. Jeg gjør som regel aldri endringer på standardinnstillingene, da de er gjennomtenkte slik at det er enkelt å optimalisere sidene for både mobil og nettbrett.
• Velg Full bredde/utstrekt som Layout på nettsiden. Da vil siden dekke hele skjermen. Om du legger en video / bilde i bakgrunnen, vil hele siden dekkes. Selve innholdet på websiden vil være midt på siden, dvs. innenfor 1200 piksler, som ble angitt som bredde. (Se første bildet under).
• Sideoppsettet settes til Standard.
• Oppsett for Blogginnlegg og Arkivoppsett settes begge til I boks (boxed). Det betyr at selve blogginnlegget står i en egen boks. Til høyre for blogginnlegget kan det settes forskjellige widges; som Like-box for facebook, Siste blogginnlegg, Kategorier m.v. – Disse står i egne bokser slik at det blir ryddig og oversiktlig.

Global > Farger

• Jeg har laget en palett med følgende hexafarger
• Temafarge #2d3e50
• Lenkefarge #34495e
• Lenkefarge når musepeker = over #7e8c8d
• Heading Color (H1 – H6) #2d3e50
• Tekstfarge #424242
• Gul Farge #F39C11
• Rød Farge #C84C3D
• Lilla Farge #8D44AD
• Du kan også sette inn bakgrunnsfarge eller bakgrunnsbilde om ønskelig.

For å endre farge klikker du på fargeikonet til høyre for navnet (bildet under til venstre.

På bildet under til høyre viser hexacoden (fargekoden) helt nederst. Du kan kopiere og lime den inn i feltet.

Gå helt tilbake til menyen for Global ved å klikke 1 gang på pilen øverst (ved Tilpasse > Global > Farger).

Global | Typografi | Basetypografi

• Velg Typografi
• Velg Open Sans som Skriftfamilie for brødtekst. Open Sans er en lettlest font som egner seg godt på nettet. I tillegg har den flere forskjellige tykkelser.
• Sett tekststørrelse til 15 pkt
• Sett vekt (tykkelse) til 400
• Sett linjehøyde til 1,8. Det er viktig med luft mellom linjene for at teksten skal bli lettere å lese. For liten linjeavstand fører til at teksten blir vanskelig å lese.
• Klikk på pilen tilbake.

Global | Typografi | Overskrifter – Innstillinger

Header

Velg Toppfelt-bygger, som er toppområdet på siden din. På dette området skal du gjøre en rekke innstillinger.

Når du velger Toppfeltbygger, kan du redigere Nettstedstittelen og sette inn logo. Du kan enten ha en solid bakgrunnsfarge på sidehodet, eller den kan være gjennomsiktig. I eksempelet har jeg valgt at temafargen skal være bakgrunnsfarge på sidehodet.

Nettstedsidentitet – Site Title & Logo

• Her setter du inn en logo som vises øverst til venstre. Jeg bruker alltid PNG-filer, da disse er gjennomsiktige, og jeg kan sette dem på en mørk bakgrunn uten at de er omsluttet av en hvit firkant. Jeg har også alltid en negativ variant av logoen, dvs. der teksten er i hvitt.
• Last opp logoen og sett størrelsen under. I mitt tilfelle er logoen 530 piksler bred. Den skal helst ikke være over 80 piksler høy. Logoen jeg lastet opp er veldig bred, og jeg begrenset derfor bredden til 530piksler.
• Retina-Logoen. Dette er en spesialfunksjon for Apple, og har derfor ikke lastet opp Retina-logo.
• Sidetittel. Nettstedets tittel er det samme som logoen, så har ikke slått på dette valget.
• Nettstedsikon (Favicon). – Scroll deg til bunnen og klikk på Nettstedsikon. Dette er det lille ikonet som står på fanen i adresselinjen til nettleseren. Størrelsen er 512x 512piksler og i PNG-format. Det er viktig at det har samme høyde og bredde.

Angi Meny (Primær-Meny) på Desktop, nettbrett og mobil

• Klikk på tilbakepilen til du kommer til hovedmenyen og velg Meny
• Jeg opprettet flere sider i WordPress sitt kontrollpanel, og opprettet en meny på basis av disse sidene
• Jeg kalte menyen Main i WordPress
• De innrykkede valgene (Link til sider) kommer som drop-down-meny under de forskjellige hovedpunktene og vil komme til syne når man peker over hovedpunktet.
• Klikk på Main-menu for å tilpasse Primær-Menyen – dvs. menyen som kommer til syne øverst på nettsiden. Du kan legge til og fjerne linker etter eget ønske.
• Under Menylokasjoner angir du at Primærmenyen skal være Main_menu både på Desktop og mobil (off canvas menu). Se bilde nr 3 under.

Primær-Meny – redigere plassering | utseende på Desktop og mobil

• Klikk 1 gang på pilen for å gå tilbake til Toppfelt-bygger, og velg Primær-meny
• Her kan du velge om logoen skal komme til venstre, høyre eller i midten (se bilde 2 under). De aller fleste bedrifter har den til venstre, og det er smart å følge standarden.
• Du kan også sette inn en linje i bunn under logo og meny-feltet. Jeg har satt inn en tynn linje på 1 piksel og valgt en lys farge.
• Jeg har også angitt at det skal være en hamburgermeny på mobile-enheter ved at jeg klikket av valget for Stable på mobil.
• I tabellen under selve bildet ser man at Primærmenyen er plassert til høyre i toppfeltet.

• For å få frem mobilinnstillingene klikker du på mobilikonet neders til venstre på skjermen. Feltet der Primærmeny sto, er endret til Veksleknapp. – Ved å klikke på veksleknappen, får du mulighet til å redigere layout på hamburgermenyen.
• Vi kan også velge om det skal være en menyetikett på en mobil-enhet. I eksempelet under har jeg skrevet MENY slik at det blir litt mer enn de 4 strekene. Menyen som kommer frem når man bruker mobil, kalles “Off Canvas Menu”.

Blogg

Gå tilbake (klikk tilbake to ganger og velg hovedpunktet Blogg. Velg Arkiv.

Arkiv

• Jeg har konfigurert og designet selve bloggsiden (oversikten) i Elementor, der jeg har angitt hva jeg ønsker skal være synlig. Hvert blogginnlegg vises med et fremhevet bilde, tittelen, tre tekstlinjer, navn (author) og dato.
• Alle innstillingene setter jeg under Blogg > Arkiv. Ved å slå av øyet for eksempelvis Kommentarer, vil ikke dette valget komme til syne.
• Innhold i innlegget er satt til Utdrag. Dette er litt tekst som jeg setter inn på selve bloggsiden. For at det skal se ryddig ut, passer jeg på at det ikke overstiger 3 linjer som skal utgjøre en slags ingress. Om noen vil lese bloggnnlegget, er det bare å klikke på bildet.

Blogg > Enkeltinnlegg

• Klikk 1 gang på tilbakepilen og velg Enkeltinnlegg. Her bestemmer du hva som skal være synlig på hvert enkelt blogginnlegg
• Fremhevet bilde – Dette er bildet som ligger øverst på blogginnlegget, dvs. samme bildet som står på arkivoversikten
• Tittel og Bloggmeta – Dette ønsker jeg skal være synlig da tittelen forteller hva blogginnlegget handler om
• Metadata – Publiseringsdato, skribent, kategori. Jeg har stengt for kommentarer på blogginnleggene. Jeg har heller ikke lagt inn søkbare tagger. – Som eksempelet viser er datoen først, deretter skribent og kategoriene til slutt. Dette kan endres om ønskelig. Det er bare å dra Meta opp eller ned om man ønsker en annen rekkefølge.

Sidebar

• Klikk 2 gange på tilbakepilen og velg Sidebar.
• Standard layout settes til Ingen sidebar. Det betyr at denne ikke vil være synlig på standardsider på nettstedet
• Sider settes til Standard (Layout)
• Blogginnlegg | Arkiv – her har jeg valgt å ha sidebaren til høyre
• Du kan også angi hvor bred sidebaren skal være. Standard er 30%. Den kan godt være litt smalere, så jeg har satt den ned til 27% slik at tekstkolonnene blir litt bredere.

Footer

Det neste du skal tilpasse er nettstedets Footer. Klikk på tilbakepilen 2 ganger og velg Footer. Du kan velge mellom Footer Widgets og Footer Bar. Klikk på Footer Bar. I feltet til venstre er lagt inn kode for årstall og kode for nettstedtittelen. Årstallet oppdateres automatisk ved hvert årsskifte.

Footer Bar

• Om du klikker på Disable, forsvinner den.
• Under Seksjon 1 (egendefinert tekst) står koden for copyright, årstall og sidetittel. Jeg lar det stå som det er. Ved at koden for årstall står der, vil det endres automatisk. Om jeg satte den inn manuelt, måtte jeg huske å endre hvert år.
• I eksempelet under har jeg lagt inn eget felt for logo, Siste Blogginnlegg og Facebook Likeboks.
• Jeg kan angi om jeg ønsker en kantlinje. Jeg har lagt inn 1 piksel og en lysegrå strek.
• Jeg har også lagt inn en koksgrå farge som bakgrunnsfarge. Tekstfargen er hvit.
• Om jeg ønsker å redigere teksten, kan jeg også klikke på det blå blyantikonet til venstre for teksten i Footeren.
• Klikk på Publiser, og gå tilbake (2 klikk på tilbakepilen).

Ekstra CSS

Ved å legge inn CSS-koden (Customized Style Sheet), kan du kontrollere avstanden mellom overskrifter og avsnitt mye bedre.

• Avstanden mellom overskriften og teksten er altfor stor
• Dette lar seg enkelt ordne ved hjelp av CSS
• h3 {padding: 20px 0px 0px 0px}
• h4 {padding: 20px 0px 0px 0px}
• p {margin: -15px 0px 0px 0px}
• Ved å endre avstanden mellom avsnittet (p) og overskriften med -15px, ble teksten mye penere.

VOILA! – Astra-temaet er ferdig tilpasset og webarbeidet kan påbegynnes!