Legge til og flytte seksjoner og dra størrelser

Modul 3: Tekster, bilder og seksjoner · Lesetid: 10 minutter

Læringsmål: Etter denne leksjonen kan du bygge opp en side av seksjoner: legge til en seksjon via velgeren eller chatten, flytte, kopiere og fjerne den, dra avstand og størrelser, og velge kolonner, hjørner, bakgrunn og synlighet på mobil for hver seksjon.

Nøkkelbegreper: seksjon, Blokker, Legg til seksjon, variant, Seksjon under, tre design, Lag med KI, Rediger seksjon, Avstand, Mellomrom, Kolonner, Hjørner, Skjul på mobil, håndtak, Egen HTML

En side er en stabel med seksjoner

Hver side på nettstedet ditt består av seksjoner: vannrette felt som ligger under hverandre. Øverst er det som regel en Hero (den store åpningen med overskrift, tekst og knapp), og under den for eksempel Kort med tjenestene dine, Anmeldelser, Åpningstider og nederst Kontakt. Byggeren har 35 typer, hver i én eller flere varianter: samme innhold, men med en annen utforming.

Tenker du slik, bygger du en bedre side. Legg den viktigste informasjonen øverst, ha ett tema per seksjon, og avslutt med det besøkende skal gjøre (ringe, sende e-post, be om et tilbud). Hos Schildersbedrijf Example ser forsiden slik ut: Hero med "Be om tilbud", Kort med tre tjenester, Bilde og tekst om arbeidsmåten, Anmeldelser, Spørsmål og Kontakt.

Legge til en seksjon: tre måter

1. Velg selv i velgeren (gratis)

Åpne panelet Blokker i sidemenyen, eller klikk på Seksjon under i forhåndsvisningen: den knappen finner du i verktøylinjen til en valgt seksjon og på linjen med + som dukker opp når du beveger musen mellom to seksjoner. Under forhåndsvisningen finner du også Legg til seksjon.

Velgeren viser typene i grupper: Populære, Åpning og toppseksjon, Tekst og historie, Tjenester og produkter, Priser og tilbud, Tillit og team, Bilde og video, Praktisk informasjon, Kontakt og handlingsoppfordring og Egendefinert og widgeter. Det finnes et søkefelt ("Søk, for eksempel anmeldelser, priser eller team"). Hver type vises som et eksempel i din egen visuelle profil. Klikk på en type for å se variantene, og velg én med Legg til. Kom du ikke dit via en bestemt seksjon, spør byggeren "Hvor skal ... plasseres?": klikk på en grønn linje på siden din, eller velg Øverst eller Nederst. Du kan også dra en blokk rett fra panelet til siden din.

Dette koster ingenting. Den nye seksjonen kommer med eksempeltekster som du deretter endrer selv (leksjon 3.2) eller lar KI-en fylle ut (leksjon 3.1). Viktig: så lenge det fortsatt står slik eksempeltekst på nettstedet ditt, publiserer ikke byggeren det. Da får du "Nettstedet ditt har fortsatt eksempeltekst. Fyll den ut først eller fjern seksjonen."

2. Spør i chatten: tre design

Skriver du i chatten "Jeg vil ha en seksjon med arbeidsmåten vår i fire trinn", viser KI-en først tre passende design fra seksjonsbiblioteket, i din visuelle profil. Du velger med Dette designet, eller klikker på La KI-en velge. Deretter fyller KI-en seksjonen med innhold, som et forslag. Fordi det kommer en ny seksjon, koster det 2 redigeringer.

Sier du at noe skal inn i en eksisterende seksjon ("legg åpningstidene i kontaktblokken"), eller nevner du en tjeneste som Spotify eller Calendly med en lenke, hopper byggeren over de tre designene: da er det tydelig hva du vil.

3. La KI-en lage en egen blokk

Finner du ikke det du leter etter? Øverst i velgeren står Lag din egen seksjon med KI. Beskriv hva besøkende skal kunne gjøre, for eksempel en priskalkulator eller en kort quiz, og klikk på Lag med KI. Det koster 2 redigeringer, fordi det kommer en ny blokk.

Flytte, kopiere og fjerne

Beveg musen over en seksjon. Det dukker opp en verktøylinje med Endre med KI, Flytt opp, Flytt ned, Dupliser, Seksjon under og Slett, og et håndtak for å dra seksjonen ("Dra denne seksjonen til et annet sted"). Ved Slett spør byggeren først "Sikker?". Også enkeltelementer i en rad, som ett kort eller én anmeldelse, kan du dra, duplisere og fjerne.

Alle disse knappene er gratis. Hver handling lager en ny versjon ("Seksjon flyttet (versjon ...)"), så en seksjon du har fjernet ved en feil, henter du tilbake via Versjoner (leksjon 3.5). Å fjerne noe med en instruksjon i chatten koster derimot en redigering: bruk derfor knappen.

Dra størrelser

Beveg musen over en seksjon, et bilde eller en tekst i forhåndsvisningen, så dukker det opp håndtak. Å dra er gratis og skjer uten KI:

• Nederkanten av en seksjon: mer eller mindre avstand over og under seksjonen.
• Hero: gjøre den høyere eller lavere.
• Bilde: bredere eller smalere, høyere eller flatere (formen), rundere eller skarpere hjørner, og fokuspunktet (leksjon 3.3).
• Tekstblokk: bredere eller smalere (høyre kant).
• Overskrift: større eller mindre, og avstanden under.
• Rad med kort eller kolonner: bredden på hele raden.

Dobbeltklikk på et håndtak, så kommer standardstørrelsen tilbake; for heroen velger byggeren da høyden selv igjen.

Hvorfor det er bedre å dra enn å be om "gjør den større": du ser med en gang hva som skjer, det koster ingenting, og KI-en endrer ikke tekst underveis.

Rediger seksjon: innstillingene for én seksjon

Klikk på en seksjon og velg Rediger seksjon. Det åpnes et vindu med:

Under dette finner du de samme knappene som i verktøylinjen (Flytt opp, Flytt ned, Dupliser, Seksjon under, Slett), og under "Eller spør KI-en om noe annet:" et tekstfelt for en KI-instruksjon som bare gjelder denne seksjonen.

Noen råd. Varier bakgrunnene (lys flate, ingen, fargetone), slik at besøkende ser hvor et tema slutter. Bruk høyst tre eller fire kolonner på en rad med kort; på en telefon havner de uansett under hverandre. Vær sparsom med Skjul på mobil: skjul aldri kontaktopplysningene dine eller noe en mobilbesøkende trenger. Vil du sjekke hvordan det ser ut, velger du Mobil i topplinjen.

Egen HTML

I gruppen Egendefinert og widgeter finner du også Egen HTML: en seksjon der du selv limer inn HTML og, hvis du vil, CSS. Etter at du har plassert den, endrer du den med Rediger HTML på seksjonen. Farger og skrift følger den visuelle profilen din via variabler som var(--acc), var(--tekst) og var(--kop-font). CSS-en gjelder bare for denne seksjonen.

Begrensningene er bevisste: skript, iframes og skjemaer fungerer ikke her. For en spiller, kalender, et kart eller et skjema fra en annen tjeneste bruker du Widget (leksjon 4.3). Egen HTML er for deg som kan HTML; for alle andre er de vanlige seksjonene og KI-en den raskeste veien.

Fallgruver

• Å la eksempeltekst stå i en seksjon fra velgeren: da kan du ikke publisere.
• For mange seksjoner. En lang side med ti seksjoner blir ikke lest. Fjern det som ikke tilfører noe. En side kan ha høyst 40 seksjoner, men så mange trenger du aldri.
• Å ordne avstand via chatten. Det koster redigeringer og er mindre presist enn å dra.
• Å bare se på datamaskinen. Kolonner, avstand og skjuling fungerer annerledes på en telefon.
• Å fjerne noe i chatten når knappen Slett er gratis.

I byggeren: slik gjør du det

1. Klikk på Seksjon under i forhåndsvisningen, eller åpne Blokker.
2. Velg en gruppe, en type og en variant, og klikk på Legg til.
3. Erstatt eksempeltekstene selv eller med KI-en.
4. Flytt med Flytt opp, Flytt ned eller håndtaket; dupliser eller slett via verktøylinjen.
5. Dra i nederkanten for avstand; dobbeltklikk for å gå tilbake til standard.
6. Åpne Rediger seksjon for bakgrunn, kolonner, hjørner, hero-høyde og Skjul på mobil.
7. Sjekk på Mobil.

Oppsummering

• En side er en stabel med seksjoner; 35 typer, hver i én eller flere varianter.
• Å legge til via velgeren er gratis og gir eksempeltekst som du må erstatte før du kan publisere; via chatten får du tre design, og det koster 2 redigeringer.
• Å flytte, duplisere, fjerne og dra størrelser er gratis; dobbeltklikk på et håndtak gir deg standarden tilbake.
• Rediger seksjon styrer bakgrunn, avstand, mellomrom, kolonner, hjørner, hero-høyde og Skjul på mobil.
• Egen HTML er mulig, men uten skript, iframes og skjemaer; til det bruker du widgeten.

Quiz

Oppgave

Oppgave D3.4: Én seksjon til, én ut. Forbedre oppbyggingen av forsiden din med knappene og håndtakene, uten unødvendige KI-instruksjoner.

Sjekkliste:

• [ ] skrevet ned seksjonene på forsiden din fra topp til bunn;
• [ ] lagt til én seksjon via velgeren og erstattet all eksempeltekst;
• [ ] fjernet eller slått sammen én seksjon som ikke tilførte noe, med Slett;
• [ ] flyttet én seksjon med Flytt opp, Flytt ned eller håndtaket;
• [ ] dratt avstanden for minst én seksjon, og tilbakestilt den én gang med dobbeltklikk;
• [ ] endret bakgrunnen eller kolonnene i Rediger seksjon;
• [ ] sett på siden i Mobil.

Spørsmål:

1. Hvordan så rekkefølgen på seksjonene dine ut før og etter, og hvorfor valgte du denne rekkefølgen?
2. Hvilken seksjon fjernet du, og hvorfor savner ikke en besøkende den nå?
3. Hvor mange redigeringer kostet denne oppgaven deg, og hvilket trinn ville ha kostet redigeringer via chatten?

Etter "ferdig" ser du et eksempelsvar: fra Hero, Tall, Kort, Anmeldelser, Kontakt til Hero, Kort, Bilde og tekst (arbeidsmåte), Anmeldelser, Spørsmål, Kontakt, slik at tjenestene står rett under åpningen; seksjonen Tall er borte fordi tallene var oppdiktet; oppgaven kostet 0 redigeringer, mens å fjerne noe eller legge til en ny seksjon via chatten ville ha kostet 1 eller 2.

Les mer

• Gratis kurs Bli funnet på nett 3.2: Overskrifter og oppbyggingen av en side
• Gratis kurs Bli funnet på nett 4.2: Mobil først og viewport
• Sitebuilder og AI Builder: hvilken bør du velge, og hvordan åpner du den?