Tilpasse Astra 2.0 Tema

Ser du etter et WordPress-tema som er raskt, elegant og og enkelt å tilpasse? Da bør du velge Astra! Det er SEO-vennlig og kompatibelt med store sidebyggere.

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 og du vil få frem valgene som vist til høyre.

Kontainer

• Velg deretter Kontainer
• Bredden er 1200 piksler. Jeg gjør som regel aldri endringer på standardinnstillingene, da det er enkelt å optimalisere sidene for både mobil og nettbrett.
• Velg Full bredde/omsluttet 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 blogginnlegges settes forskjellige widges; som Like-box for facebook, Siste blogginnlegg, Kategorier m.v. – Disse står i egne bokser. Ryddig og oversiktlig. Se under.

Global > Farger

• Velg Basefarger
• Jeg ønsker å bruke samme fargene som er i logoen
• Tekstfarge settes til #565656
• Temafarge settes til #753a88
• Lenkefarge settes til #cc2b5e
• Lenkefarge når musepeker = over settes til #636363
• Heading Color (H1 – H6) settes til #cc2b5e
• Du kan også sette inn bakgrunnsfarge eller bakgrunnsbilde om ønskelig.

Gå helt tilbake 2 ganger ved å klikke på pilen øverst (ved Customizing > Global > Basefarger.

Global | Typografi | Basetypografi

• Velg Typografi
• Velg deretter Base Typografi
• Velg Open Sans som Familie (skriftfamilie). Det er en lettlest font som egner seg svært 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 letter å lese. For liten linjeavstand fører til at teksten blir vanskelig å lese.
• Klikk på pilen tilbake.

Global | Typografi | Overskrifter

Header

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

Nettstedsidentitet

• 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 180 piksler bred. Den skal helst ikke være over 80 piksler høy. Logoen jeg lastet opp hadde en bredde på 250 piksler.
• Retina-Logoen. Med økningen i teknologi og behovet for bedre brukeropplevelse, er det nødvendig å ha en nettstedslogo som ser bra ut på retina (høyere piksel tetthet) -skjermer. Så hvis den normale logoen har en størrelse på 100 × 30 piksler, må du opprette en større logo. Som Retina-logo har jeg lastet inn en logo som er 500 piksler bred.
• Nettstedsikon (Favicon). – Her bruker jeg S’en i logoen. Bildet jeg lastet opp var 300 x 300 piksler og i JPG-format. Det er viktig at det har samme høyde og bredde. Nettstedsikonet står på fanen til adresselinjen.

• Scroll litt lenger ned og sett inn Nettstedstittelen på siden, den samme som du satte under Generelle Innstillinger på Kontrollpanelet.
  Nettstedstittelen på denne siden er WordPress Webdesign | Sissels Grafiske
• Sett også inn slagordet, dvs. hva du ønsker å selge til kundene. I mitt tilfelle er det Lær Kreativ Design.
• Publiser endringene dine

Primær-Header

• Klikk 1 gang på pilen for å gå tilbake til Nettstedsidentitet, og velg Primær-Header
• Her kan du velge om logoen skal komme til venstre, høyre eller i midten. 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 grå farge.
• Du kan også angi hvordan menyen skal være på en mobil-enhet, dvs. om den skal være til høyre eller midtstilt med logoen over.

Primær-Meny

• Klikk 1 gang på pilen for å gå tilbake til Nettstedsidentitet, og velg Primær-Meny
• Her angir du om undermenyen skal fade inn, skli opp / ned. Jeg har valgt Utfase.
• Jeg har også lagt en tykkere linje under hovedpunktet “Tjenester” og dropdownmenyen. Linjen er 3 piksler tykk og fargen er #cc2b5e, som er brukt ellers på nettstedet.
• Du angir også om det skal være en linje for å skille valgene i undermenyen. Jeg har valgt en tynn linje på 1 piksel og fargen er lys grå #bebebe.

• Helt nederst angir man om det skal være en menyetikett på en mobil-enhet. Jeg har skrevet MENY slik at det blir litt mer enn de 4 strekene.
• Du kan også sette et brytningspunkt for meny, dvs. hvor mange piksler skal bredden være når menyen endrer seg til en mobil-meny (hamburger-struktur). Det er greit å bruke standardinnstillingene.

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, mitt 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.

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.
• Sidetittelen (som jeg satte i Kontrollpanelet og under Nettstedsidentiteten) står også der.
• 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 tå 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 pentere.

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