Phlox Tema – Tilpasse

Phlox lar deg enkelt endre standardinnstillingene som kommer med installasjonen av temaet. I dette blogginnlegget vil jeg forsøke å forklare de grunnleggende innstillingene | tilpasningene som bør gjøres i Phlox før du setter i gang med selve designarbeidet med websidene.

Tilpasningen gir deg mulighet til å kontrollere layouten nettstedet, for eksempel navigasjoner, sette inn logo, bunntekst og mye mer.

Slik tilpasser du Phlox-temaet

  • I Kontrollpanelet velger du Utseende > Tilpass
  • Velg Tilpass (Customize) på redigeringslinjen

Nettstedsidentitet

Når du velger Tilpass kommer du til denne siden der du setter innstillinger for hele nettsiden din.

Du angir hvordan menyene skal se ut, hvordan bloggsidene dine skal være, hvilken skrifttype du vil ha på overskrifter, vanlig tekst osv.

Det er alltid lurt å gjøre seg kjent med innstillingene før man starter selve designarbeidet med sidene. Om du ønsker å endre noe underveis, er det ikke noe problem. Endringene gjør seg gjeldende på hele nettstedet.

Det første som skal gjøres, er å tilpasse Nettstedsidentiteten, dvs. du skal sette inn logoen øverst til venstre.

Du skal også sette inn den lille logoen på selve fanen, også kalt «Favicon«, forkortet fra «Favourite Icon«.

Nettstedstittel og Slagord kommer opp automatisk. Det er det samme som du satte inn under Generelle Innstillinger i Kontrollpanelet.

Tilpasse logoen

Du skal angi bredden på logoen. Vanligvis behøver den ikke å være så stor. Dypetse-logoen er høy, og høyden på logoen bør helst ikke overstige 80 piksler. Har satt bredden til 90 piksler. Klikk Publiser og logoen er synlig på websiden.

På selve websiden ser du hvordan logoen ser ut. Jeg satte alle innstillingene før jeg startet med å designe alle sidene, men alle skjermbildene er tatt etter at siden ble ferdig, slik at det skal være enkelt å se hvordan det fungere på et nettsted. – Det er også lurt å lagre logoen i PNG-format, slik at den kan brukes på fargede bakgrunner. Om den blir laget i JPG-format, får man en hvit boks rundt.

  • Det er også lurt å lagre logoen i PNG-format, slik at den kan brukes på fargede bakgrunner.
  • Om den blir laget i JPG-format, får man en hvit boks rundt.
  • Nettstedstittel og Slagord kommer automatisk fra det du lagret under Generelle innstillinger i Kontrollpanelet.
  • Logoen er godt synlig selv om den ikke er for stor. Den skal ligge på samme linjen som menyene, og jeg har derfor satt bredden til 90 pixler.

Favicon på nettstedsfanen

Et favicon skal ha lik høyde og bredde. Det må minimum være 16 x 16 piksler, men kan godt være større. Phlox anbefaler størrelse på 512 x 512 px. I eksempelet under ser du logoen (pennesplitten) på nettfanene.

Generelle innstillinger

Klikk på tilbakepilen (øverst) og velg Generelle Innstillinger. Du får opp valgene som angitt på bildet:

General Layout

Her angir du bredden på siden. Jeg har valgt en layout med full bredde – dvs nettstedet dekker hele bredden av skjermen, mens området selve nettstedet designes i utgjør 1200 piksler. Dette kan settes smalere/bredere, men 1200 piksler er vanlig.

Generelle Innstillinger > Website Socials

Her angir du om Website Socials (ikon for Facebook, Twitter, Instagram, YouTube mm.) skal vises/skjules på mobile enheter og nettbrett. Klikk på ikonet for å skjule (ikonet blir blått).

Scroll nedover og lim inn URL for Facebook-konto, Twitter-konto m.v.

Generelle innstillinger > Website Typography

Her angir du hva som skal være hovedfonten til innholdet på nettsiden. Jeg har valgt Open Sans, som er en lettlest og åpen font. Fonttykkelse er satt til 300.

På toppen av siden (der jeg har satt inn kontaktinfo) har jeg også valgt Open Sans 300. Samme font brukes i menyene, men der er tykkelsen 600, som er en semibold skriftstil.

For knapper har jeg valgt en annen skriftstil; Raleway – som ligner Open Sans, men litt tykkere.

Header

Gå tilbake til hovedmenyen og velg Header. Her skal du sette alle innstillingene i toppfeltet, du skal designe menyen, hvordan drop-down-menyen skal se ut osv. Plox-temaet tilbyr utallige muligheter.

Header Section

Her angir du hvordan selve Header-seksjonen skal være, dvs. om logo skal stå til venstre, menyene til høyre – eller omvendt. Du har også mulighet til å la menyfeltet være en burgermeny, eller du kan la logoen stå midtstilt på toppen med menyene midtstilt under. Personlig foretrekker jeg å la logoen stå til venstre, med menyene til høyre. Dette er en layout de aller fleste firmaer velger.

Scroll deg nedover og angi høyden på Header-feltet. Jeg har satt den til 80 piksler. – Du kan også angi om du vil ha en Sticky Header Menu, dvs. om du vil at menyen skal bli stående når du scroller nedover skjermen. Dersom du reduserer høyden fra 80 til 60 piksler for Sticky Header, vil logoen bli forminsket når menyfeltet endres til Sticky Header. – Prøv og se hvordan det virker.

Header > Meny

Her angir du hvordan menyen skal se ut, og om du ønsker at bakgrunnen skifter farge når du lar musepekeren gå over dropdown-menyen. Det er superenkelt. Bare å klikke på de forskjellige valgene, og teste ut med å føre musepekeren over menyene til høyre.

Ved å scrolle deg lenger ned, kan du angi hvordan submeny-feltene til drop-down-menyen skal se ut.

Top Header Bar

Her angir du hvordan toppfeltet skal se ut. Du kan legge en annen bakgrunnsfarge om du ønsker. Personlig synes jeg det er roligere om feltet har samme bakgrunnsfarge som menyfeltet. Du har allerede angitt nettadressen til Website Socials, og de vil dukke opp når du velger layout. Når du scroller deg nedover, kan du sette inn kontaktinfo, om ønskelig. Den står øverst til venstre.

Page > Page Layout

Gå tilbake til hovedmenyen og velg Page > Page Layout. På en vanlig webside har vi ikke et felt til høyre. Dette er vanlig på bloggsider, som vil bli tilpasset i et eget innlegg. Velg sidelayout uten sidebar til høyre/venstre.

Comments are closed.