Tilføj og flyt sektioner, og træk i målene

Modul 3: Tekster, billeder og sektioner · Læsetid: 10 minutter

Læringsmål: Efter denne lektion kan du bygge en side op af sektioner: tilføje en sektion via vælgeren eller chatten, flytte, kopiere og fjerne den, trække afstand og mål, og vælge kolonner, hjørner, baggrund og synlighed på mobil for hver sektion.

Nøglebegreber: sektion, Blokke, Tilføj blok, variant, Sektion herunder, tre designs, Lav med AI, Rediger sektion, Afstand, Mellemrum, Kolonner, Hjørner, Skjul på mobil, håndtag, Egen HTML

En side er en stak sektioner

Hver side på din hjemmeside består af sektioner: vandrette bånd, der står under hinanden. Øverst er der som regel en Hero (den store åbning med overskrift, tekst og knap), og derunder for eksempel Kort med dine ydelser, Anmeldelser, Åbningstider og nederst Kontakt. Bygge­værktøjet har 35 typer, hver i en eller flere varianter: det samme indhold, bare sat anderledes op.

Tænker du sådan, bygger du en bedre side. Sæt de vigtigste oplysninger øverst, ét emne pr. sektion, og slut med det, den besøgende skal gøre (ringe, maile, bede om et tilbud). Hos Schildersbedrijf Example ser forsiden sådan ud: Hero med "Få et tilbud", Kort med tre ydelser, Foto og tekst om arbejdsgangen, Anmeldelser, Spørgsmål og Kontakt.

Tilføj en sektion: tre veje

1. Vælg selv i vælgeren (gratis)

Åbn panelet Blokke i sidebjælken, eller klik på Sektion herunder i forhåndsvisningen: den knap står i værktøjslinjen på en valgt sektion og på linjen med +, der dukker op, når du bevæger musen mellem to sektioner. Under forhåndsvisningen står også Tilføj blok.

Vælgeren viser typerne i grupper: Populære, Åbning og overskrift, Tekst og historie, Ydelser og produkter, Priser og tilbud, Tillid og team, Foto og video, Praktisk info, Kontakt og opfordring og Eget og widgets. Der er et søgefelt ("Søg, for eksempel anmeldelser, priser eller team"). Hver type vises som et eksempel i din egen visuelle identitet. Klik på en type for at se varianterne, og vælg en med Tilføj. Kom du ikke ind via en bestemt sektion, spørger builderen "Hvor skal ... placeres?": klik på en grøn linje på din side, eller vælg Øverst eller Nederst. Du kan også trække en blok direkte fra panelet ind på din side.

Det koster ingenting. Den nye sektion kommer med eksempeltekster, som du bagefter selv retter (lektion 3.2) eller lader AI udfylde (lektion 3.1). Vigtigt: så længe der stadig står sådan eksempeltekst på din side, sætter builderen ikke din side online. Du får så beskeden "Der står stadig eksempeltekst på din side. Udfyld den først, eller fjern sektionen."

2. Spørg i chatten: tre designs

Skriver du i chatten "Jeg vil have en sektion med vores arbejdsgang i fire trin", viser AI først tre passende designs fra sektionsbiblioteket, i din visuelle identitet. Du vælger med Dette design eller klikker på Lad AI vælge. Derefter fylder AI sektionen med indhold, som et forslag. Fordi der kommer en sektion til, koster det 2 redigeringer.

Siger du, at noget skal ind i en eksisterende sektion ("sæt åbningstiderne i kontaktblokken"), eller nævner du en tjeneste som Spotify eller Calendly med et link, springer builderen de tre designs over: så er det tydeligt, hvad du vil.

3. Få lavet din egen blok

Er det, du leder efter, ikke med? Øverst i vælgeren står Lav din egen sektion med AI. Beskriv, hvad de besøgende skal kunne gøre, for eksempel en prisberegner eller en kort quiz, og klik på Lav med AI. Det koster 2 redigeringer, for der kommer en ny blok til.

Flyt, kopier og fjern

Hold musen over en sektion. Der dukker en værktøjslinje op med Tilpas med AI, Flyt op, Flyt ned, Dupliker, Sektion herunder og Slet, og et håndtag til at trække sektionen ("Træk denne sektion til et andet sted"). Ved Slet spørger builderen først "Sikker?". Også enkelte elementer i en række, som ét kort eller én anmeldelse, kan du trække, duplikere og fjerne.

Alle disse knapper er gratis. Hver handling laver en ny version ("Sektion flyttet (version ...)"), så en sektion, du har fjernet ved en fejl, henter du tilbage via Versioner (lektion 3.5). At fjerne via en opgave i chatten koster derimod en redigering: brug derfor knappen.

Træk i målene

Hold musen over en sektion, et foto eller en tekst i forhåndsvisningen, så dukker der håndtag op. At trække er gratis og uden AI:

• Nederste kant af en sektion: mere eller mindre afstand over og under sektionen.
• Hero: gør den højere eller lavere.
• Foto: bredere eller smallere, højere eller fladere (formen), rundere eller skarpere hjørner, og fokuspunktet (lektion 3.3).
• Tekstblok: bredere eller smallere (højre kant).
• Overskrift: større eller mindre, og afstanden under den.
• Række af kort eller kolonner: bredden på hele rækken.

Dobbeltklik på et håndtag, så kommer standardmålet tilbage; ved heroen vælger builderen så selv højden igen.

Hvorfor det er bedre at trække end at bede om "gør det større": du ser med det samme, hvad der sker, det koster ingenting, og AI ændrer ikke tekst undervejs.

Rediger sektion: indstillingerne for én sektion

Klik på en sektion, og vælg Rediger sektion. Der åbner et vindue med:

Derunder står de samme knapper som i værktøjslinjen (Flyt op, Flyt ned, Dupliker, Sektion herunder, Slet), og under "Eller spørg AI'en om noget andet:" et tekstfelt til en AI-opgave, der kun handler om denne sektion.

Et par råd. Skift mellem baggrunde (lyst felt, ingen, nuance), så de besøgende kan se, hvor et emne slutter. Brug højst tre eller fire kolonner i en række kort; på en telefon kommer de alligevel under hinanden. Vær sparsom med Skjul på mobil: skjul aldrig dine kontaktoplysninger eller noget, en mobilbesøgende har brug for. Vil du tjekke, hvordan det ser ud, så vælg Mobil i topbjælken.

Egen HTML

I gruppen Eget og widgets står også Egen HTML: en sektion, hvor du selv indsætter HTML og, hvis du vil, CSS. Når den er placeret, retter du den med Rediger HTML på sektionen. Farver og skrifttyper følger din visuelle identitet via variabler som var(--acc), var(--tekst) og var(--kop-font). CSS'en gælder kun for denne sektion.

Begrænsningerne er bevidste: scripts, iframes og formularer virker ikke her. Til en afspiller, kalender, et kort eller en formular fra en anden tjeneste bruger du Widget (lektion 4.3). Egen HTML er til dem, der kan HTML; for alle andre er de almindelige sektioner og AI den hurtigere vej.

Faldgruber

• At lade eksempeltekst stå i en sektion fra vælgeren: så kan du ikke sætte siden online.
• For mange sektioner. En lang side med ti sektioner bliver ikke læst. Fjern det, der ikke tilføjer noget. En side kan have højst 40 sektioner, men så mange får du aldrig brug for.
• At styre afstand via chatten. Det koster redigeringer og er mindre præcist end at trække.
• Kun at kigge på computeren. Kolonner, afstand og skjulte sektioner fungerer anderledes på en telefon.
• At fjerne via chatten, selvom knappen Slet er gratis.

I builderen: sådan gør du

1. Klik på Sektion herunder i forhåndsvisningen, eller åbn Blokke.
2. Vælg en gruppe, en type og en variant, og klik på Tilføj.
3. Erstat eksempelteksterne selv eller med AI.
4. Flyt med Flyt op, Flyt ned eller håndtaget; dupliker eller slet via værktøjslinjen.
5. Træk i den nederste kant for afstand; dobbeltklik for at gå tilbage til standard.
6. Åbn Rediger sektion for baggrund, kolonner, hjørner, herohøjde og Skjul på mobil.
7. Tjek på Mobil.

Opsummering

• En side er en stak sektioner; 35 typer, hver i en eller flere varianter.
• At tilføje via vælgeren er gratis og giver eksempeltekst, som du skal erstatte, før du kan gå online; via chatten får du tre designs, og det koster 2 redigeringer.
• At flytte, duplikere, fjerne og trække i målene er gratis; et dobbeltklik på et håndtag sætter standarden tilbage.
• Rediger sektion styrer baggrund, afstand, mellemrum, kolonner, hjørner, herohøjde og Skjul på mobil.
• Egen HTML kan bruges, men uden scripts, iframes og formularer; til dem er der widgetten.

Quiz

Opgave

Opgave D3.4: En sektion til, en sektion væk. Forbedr opbygningen af din forside med knapperne og håndtagene, uden unødvendige AI-opgaver.

Tjekliste:

• [ ] skrevet sektionerne på din forside ned oppefra og ned;
• [ ] tilføjet én sektion via vælgeren og erstattet al eksempeltekst;
• [ ] fjernet eller slået én sektion sammen, som ikke tilføjede noget, med Slet;
• [ ] flyttet én sektion med Flyt op, Flyt ned eller håndtaget;
• [ ] trukket afstanden på mindst én sektion og sat den tilbage én gang med et dobbeltklik;
• [ ] ændret baggrunden eller kolonnerne i Rediger sektion;
• [ ] set siden på Mobil.

Spørgsmål:

1. Hvordan så rækkefølgen af dine sektioner ud før og efter, og hvorfor valgte du denne rækkefølge?
2. Hvilken sektion fjernede du, og hvad savner en besøgende ikke nu?
3. Hvor mange redigeringer kostede denne opgave dig, og hvilket trin ville have kostet redigeringer via chatten?

Når du har klikket "færdig", ser du et eksempelsvar: fra Hero, Tal, Kort, Anmeldelser, Kontakt til Hero, Kort, Foto og tekst (arbejdsgang), Anmeldelser, Spørgsmål, Kontakt, så ydelserne står lige under åbningen; sektionen Tal er væk, fordi tallene var opdigtede; opgaven kostede 0 redigeringer, mens det at fjerne eller tilføje en ny sektion via chatten ville have kostet 1 eller 2.

Læs mere

• Gratis kursus Bliv fundet online 3.2: Overskrifter og opbygningen af en side
• Gratis kursus Bliv fundet online 4.2: Mobil først og viewporten
• Sitebuilder og AI Builder: hvilken skal du vælge, og hvordan åbner du den?