I dag laver vi et fuldstændigt site med forside, undersider og en blogsektion. Brugeren kan navigere rundt på siden ved hjælp af menuer, ikoner og forskellige links.

Klik på knappen for at se hvordan sådan en løsning kan se ud i en Playground:

Sider er til “statisk indhold”

I WordPress bruger vi sider til statisk indhold, der præsenterer websiden, afsenderen og sitets muligheder. Siderne giver sitet den struktur som afspejles i navigationen.

Lidt om skabeloner

Sidernes indhold præsenteres af skabelonen. Du kan derfor designe alle siders udseende ved at redigere skabelonen “Sider”. Skabelonen præsenterer indholdet mellem en header og en footer. Indholdet kommer frem ved hjælp af blokke som “Indhold” ved en enkelt side eller indlæg eller ved hjælp af et “Forespørgsels-loop”, der bruges når mange elementer skal hentes, fx alle de nyeste indlæg.

Enkelte sider/indlæg skal måske have et helt specielt design. Når det er nødvendigt kan du vælge at fremstille en særlig skabelon til disse sider.

Nu skal vi oprette sidens overordnede struktur. Det sker ved at tilføje nogen sider og skabeloner:

• Tilføj en side og kald den fx “Forside“
• Tilføj en side og gem den som fx “Blog” (… eller: Nyheder, Det sker, etc.)

I kontrolpanelet skal du gå ind i læsning og tilføje forsiden og blogsiden til disse sider, fx sådan:

Når du har valgt at disse sider skal holde pladsen for forsiden og din nyheds-blog kan du ændre deres udseende. Det sker ved at redigere sidernes skabelon.

• Forsidens skabelon er “Forside”. Hvis temaet ikke har sådan en, så skal den oprettes.
• Bloggens skabelon er “Blog forside”.

De øvrige sider styres også af skabeloner, som kan redigeres ved at klikke på “Rediger websted”, når du står på siden.

Alle webstedets skabeloner er her:

Udseende > Rediger > Skabeloner

Blokgrupper som headere og footere er her:

Udseende > Rediger > Blokgrupper

Forsiden

Nu skal vi designe vores forside. Det er en af de vigtigste sider. Her må du overveje, hvad du ønsker, at dine brugere skal gøre.

Lav nu et udkast til din forside. I Twenty twenty-five styres forsidens udseende af skabelonen “Frontpage”. Begynd med at oprette skabelonen. Husk, at du altid kan vende tilbage og lave forsiden om, når der er brug for det.

I kontrolpanelet skal du åbne:

Udseende > Editor > Skabeloner

Klik på den blå knap “Tilføj skabelon” og klik på “Forside”. Så laver WP skabelonen, der viser din forside.

Så nu kan du designe din forside, som du vil. Hvad du gør i denne skabelon bliver simpelt hen til din forside!

I arbejdet med forsiden kan disse designblokke være nyttige:

• Banner: viser et stort billede baggrunds, og du kan lægge tekst ind over. Alle typer af blokke kan bruges inde i banner. Banneret bruges til “Hero-billeder”.
• Video: du kan lægge videoer ind – og endda have en video som baggrund i banneret. En “hero-video” giver noget særligt til et website.
• Udvalgt billede: Banneret kan bruge sidens udvalgte billede.
• Indhold: viser det indhold, som du skriver på din siden “Forside”. Hvis du ikke skriver noget, kan du frit designe forsiden som du vil.
• Header/footer: brug gerne headere og footere.
• Knapper: er praktiske når du vil have brugeren til at gøre noget bestemt. Derfor kaldes de ofte “Call to action”.
• Billeder, video, etc.

Øvelse: Typiske sider på et site

Snak med din(e) sidekammerat(er):

• Undersøg en tre fire websider fra mindre forretninger.
• Hvilke sider findes på næsten alle websites?
• Hvilke sidetyper kan du nævne?

Tilføj tre sider i kontrolpanelet. Arbejd med passende indhold af disse nødvendige sider.

Sådan nogen sider får vi også brug for.

Sidernes skabeloner

Åbn en af dine sider. I stedet for at redigere sidens indhold skal du ændre dens skabelon. Dette vil ændre, hvordan alle dine sider vises. Husk, at skabelonerne ikke er beregnet til indhold – de præsenterer hvor indholdet skal være.

Videoen viser, hvordan du åbner sidens skabelon – og redigerer den.

Navigationsblokken

Navigation handler om at finde rundt i noget. På websites styrer vi brugere på mange måder. Menuer er særligt vigtige. De bør placeres synligt, typisk sker det i headeren, til siden eller i footeren.

Når du har et antal sider kan du begynde at arbejde med Navigations-blokke. Blokken forudsætter, at du har nogen sider eller links, der kan lægges ind.

Andre navigationsformer: Links, knapper, ikoner , etc.

Det siges, at en side maksimalt har ét formål. En god landingpage lokker din bruger til at udføre en bestemt handling. Dette princip kaldes “Most wanted response” eller “Call to action” (CTA).

Når vi arbejder med CTA bruges billeder, links, knapper, ikoner, animationer og meget mere. WordPress har et rigt udvalg af muligheder.

Se disse artikler på WordPress.org:

• “Link an Image” (billeder, ikoner, etc.)
• “Add Links to Text” (tekstlinks)
• “Buttons Block” (Knapper)

Øvelse: CTA (Call to Action)

Når du har lavet sideskabelonen bestemmer du, hvordan alle sider skal se ud. Nu skal du lave flere sider med indhold. Vi begynder med en side med en CTA: fremstil et banner med en kort sætning, som skal “lokke” (nudge) din bruger til at klikke på den tydelige knap du har placeret visuelt centralt på dit banner!

Når brugeren klikker på knappen skal hun føres til en af dine sider måske med et produkt, kontaktoplysninger eller et indlæg i din blok.

Du får brug for:

• Banner
• Strækbar overskrift
• Knap
• Find ud af hvordan man linker til sider, mv.

Alternative navigationsformer

WP tilbyder mange alternative navigationsformer, her er et par stykker.

Kalender

Kalenderen lægger et link dér, hvor nye indlæg er skrevet. Kalendere kan være nyttige i logskrivning.

Blokken søg

Måske ved brugeren hvad hun søger. Her kan du tilbyde en søgeformular.

• “Search Block” (WordPress.org)

Det er nemt at sætte en søgebar ind i WP. Blokken søg har mange muligheder. Når brugeren klikker søg, vil WP bruge skabelonen Søgeresultater, som du også kan redigere.

Søg

Tagcloud (“emneordssky”)

En tagcloud kan samle dine emneord. Derefter kan din bruger navigere efter de tags (emneord) du har giver til dine indlæg. Her er en tagcloud for denne webside:

Animation (6) Backup (2) Blokke (4) CSS (7) Filter (3) Forespørgsels-loop (7) Forside (2) HTML (2) JavaScript (4) karrusel (2) kategorier (3) Landkort (4) Map (3) Mega Menu (2) Playground (7) Programmering (2) Skabelon (4) tags (5) Tilpasset kode (22) Twenty twenty-five (3) Video (3) WordPress introduktion (11)

Sider: 1 2