Lägga till och flytta sektioner och dra mått

Modul 3: Texter, foton och sektioner · Lästid: 10 minuter

Lärandemål: Efter den här lektionen kan du bygga upp en sida av sektioner. Du kan lägga till en sektion via väljaren eller chatten, flytta, kopiera och ta bort den, dra avstånd och mått, och för varje sektion välja kolumner, hörn, bakgrund och synlighet på mobil.

Nyckelbegrepp: sektion, Block, Lägg till block, form, Sektion nedanför, tre designer, Skapa med AI, Redigera sektion, Avstånd, Mellanrum, Kolumner, Hörn, Dölj på mobil, handtag, Egen HTML

En sida är en stapel sektioner

Varje sida på din webbplats består av sektioner: vågräta band som ligger under varandra. Högst upp finns oftast en Hero (den stora inledningen med rubrik, text och knapp). Därunder kommer till exempel Kort med dina tjänster, Omdömen och Öppettider, och längst ner Kontakt. Byggaren har 35 typer, var och en i en eller flera former: samma innehåll med olika layout.

Tänker du så bygger du en bättre sida. Lägg den viktigaste informationen högst upp, ha ett ämne per sektion och avsluta med det besökaren ska göra (ringa, mejla, be om en offert). Hos Schildersbedrijf Example ser startsidan ut så här: Hero med "Begär en offert", Kort med tre tjänster, Foto och text om arbetssättet, Omdömen, Frågor och Kontakt.

Lägga till en sektion: tre vägar

1. Välj själv i väljaren (gratis)

Öppna panelen Block i sidofältet, eller klicka på Sektion nedanför i förhandsvisningen. Den knappen finns i verktygsfältet för en vald sektion och på linjen med + som visas när du för musen mellan två sektioner. Under förhandsvisningen finns också Lägg till block.

Väljaren visar typerna i grupper: Populära, Inledning och rubrik, Text och berättelse, Tjänster och produkter, Priser och erbjudanden, Förtroende och team, Foto och video, Praktisk info, Kontakt och uppmaning och Eget och widgetar. Det finns en sökruta ("Sök, till exempel omdömen, priser eller team"). Varje typ visas som ett exempel i din egen grafiska profil. Klicka på en typ för att se formerna och välj en med Lägg till. Kom du inte dit via en viss sektion frågar byggaren "Var ska ... placeras?": klicka på en grön linje på sidan, eller välj Högst upp eller Längst ner. Du kan också dra ett block direkt från panelen till din sida.

Det kostar ingenting. Den nya sektionen kommer med exempeltexter som du sedan ändrar själv (lektion 3.2) eller låter AI fylla i (lektion 3.1). Viktigt: så länge det finns sådan exempeltext på din webbplats publicerar byggaren inte webbplatsen. Du får då meddelandet "Det finns fortfarande exempeltext på din webbplats. Fyll i den först eller ta bort sektionen."

2. Fråga i chatten: tre designer

Skriver du i chatten "Jag vill ha en sektion med vårt arbetssätt i fyra steg" visar AI först tre passande designer från sektionsbiblioteket, i din grafiska profil. Du väljer med Den här designen, eller klickar på Låt AI välja. Sedan fyller AI sektionen med innehåll, som ett förslag. Eftersom en sektion tillkommer kostar det 2 redigeringar.

Säger du att något ska in i en befintlig sektion ("lägg öppettiderna i kontaktblocket"), eller nämner du en tjänst som Spotify eller Calendly med en länk, hoppar byggaren över de tre designerna: då är det tydligt vad du vill.

3. Låt AI skapa ett eget block

Hittar du inte det du söker? Högst upp i väljaren finns Skapa din egen sektion med AI. Beskriv vad besökarna ska kunna göra, till exempel en priskalkylator eller ett kort quiz, och klicka på Skapa med AI. Det kostar 2 redigeringar, eftersom ett nytt block tillkommer.

Flytta, kopiera och ta bort

För musen över en sektion. Ett verktygsfält visas med Ändra med AI, Flytta upp, Flytta ned, Duplicera, Sektion nedanför och Ta bort, och ett handtag för att dra sektionen ("Dra den här sektionen till en annan plats"). Vid Ta bort frågar byggaren först "Säker?". Även enskilda delar i en rad, som ett kort eller ett omdöme, kan du dra, duplicera och ta bort.

Alla de här knapparna är gratis. Varje åtgärd skapar en ny version ("Sektionen flyttad (version ...)"), så en sektion som du tagit bort av misstag får du tillbaka via Versioner (lektion 3.5). Att ta bort via en instruktion i chatten kostar däremot en redigering: använd alltså knappen.

Dra mått

För musen över en sektion, ett foto eller en text i förhandsvisningen så visas handtag. Att dra är gratis och sker utan AI:

• Nederkanten av en sektion: mer eller mindre avstånd ovanför och under sektionen.
• Hero: gör den högre eller lägre.
• Foto: bredare eller smalare, högre eller plattare (formen), rundare eller rakare hörn, och fokuspunkten (lektion 3.3).
• Textblock: bredare eller smalare (högerkanten).
• Rubrik: större eller mindre, och avståndet under.
• Rad med kort eller kolumner: bredden på hela raden.

Dubbelklicka på ett handtag så kommer standardmåttet tillbaka; för hero väljer byggaren då själv höjden igen.

Varför det är bättre att dra än att be om "gör det större": du ser direkt vad som händer, det kostar ingenting och AI ändrar ingen text på vägen.

Redigera sektion: inställningarna för en sektion

Klicka på en sektion och välj Redigera sektion. Ett fönster öppnas med:

Därunder finns samma knappar som i verktygsfältet (Flytta upp, Flytta ned, Duplicera, Sektion nedanför, Ta bort), och under "Eller be AI om något annat:" en textruta för en AI-instruktion som bara gäller den här sektionen.

Några råd. Växla mellan bakgrunder (ljus yta, ingen, nyans), så att besökarna ser var ett ämne slutar. Använd högst tre eller fyra kolumner i en rad med kort; på en telefon hamnar de ändå under varandra. Var sparsam med Dölj på mobil: dölj aldrig dina kontaktuppgifter eller något som en mobilbesökare behöver. Vill du kontrollera hur det ser ut väljer du Mobil i toppfältet.

Egen HTML

I gruppen Eget och widgetar finns också Egen HTML: en sektion där du själv klistrar in HTML och, om du vill, CSS. När den är placerad ändrar du den med Redigera HTML på sektionen. Färger och typsnitt följer din grafiska profil via variabler som var(--acc), var(--tekst) och var(--kop-font). CSS:en gäller bara den här sektionen.

Begränsningarna är medvetna: skript, iframes och formulär fungerar inte här. För en spelare, kalender, karta eller ett formulär från en annan tjänst använder du Widget (lektion 4.3). Egen HTML är till för dig som kan HTML; för alla andra är de vanliga sektionerna och AI den snabbare vägen.

Fallgropar

• Att låta exempeltext stå kvar i en sektion från väljaren: då kan du inte publicera.
• För många sektioner. En lång sida med tio sektioner blir inte läst. Ta bort det som inte tillför något. En sida har högst 40 sektioner, men så många behöver du aldrig.
• Att ordna avstånd via chatten. Det kostar redigeringar och är mindre exakt än att dra.
• Att bara titta på datorn. Kolumner, avstånd och dölja fungerar annorlunda på en telefon.
• Att ta bort i chatten när knappen Ta bort är gratis.

I byggaren: så gör du

1. Klicka på Sektion nedanför i förhandsvisningen, eller öppna Block.
2. Välj en grupp, en typ och en form, och klicka på Lägg till.
3. Ersätt exempeltexterna själv eller med AI.
4. Flytta med Flytta upp, Flytta ned eller handtaget; duplicera eller ta bort via verktygsfältet.
5. Dra i nederkanten för avstånd; dubbelklicka för att gå tillbaka till standard.
6. Öppna Redigera sektion för bakgrund, kolumner, hörn, hero-höjd och Dölj på mobil.
7. Kontrollera i Mobil.

Sammanfattning

• En sida är en stapel sektioner; 35 typer, var och en i en eller flera former.
• Att lägga till via väljaren är gratis och ger exempeltext som du måste ersätta innan du kan publicera; via chatten får du tre designer och det kostar 2 redigeringar.
• Att flytta, duplicera, ta bort och dra mått är gratis; ett dubbelklick på ett handtag återställer standarden.
• Redigera sektion styr bakgrund, avstånd, mellanrum, kolumner, hörn, hero-höjd och Dölj på mobil.
• Egen HTML går att använda, men utan skript, iframes och formulär; till det finns widgeten.

Quiz

Uppgift

Uppgift D3.4: En sektion till, en bort. Förbättra upplägget på din startsida med knapparna och handtagen, utan onödiga AI-instruktioner.

Checklista:

• [ ] skrivit ner sektionerna på din startsida uppifrån och ned;
• [ ] lagt till en sektion via väljaren och ersatt all exempeltext;
• [ ] tagit bort eller slagit ihop en sektion som inte tillförde något, med Ta bort;
• [ ] flyttat en sektion med Flytta upp, Flytta ned eller handtaget;
• [ ] dragit avståndet för minst en sektion och återställt det en gång med dubbelklick;
• [ ] ändrat bakgrunden eller kolumnerna i Redigera sektion;
• [ ] tittat på sidan i Mobil.

Frågor:

1. Hur såg ordningen på dina sektioner ut före och efter, och varför valde du den här ordningen?
2. Vilken sektion tog du bort, och vad saknar en besökare nu inte?
3. Hur många redigeringar kostade den här uppgiften, och vilket steg hade kostat redigeringar via chatten?

När du klickat på "klar" ser du ett exempelsvar: från Hero, Siffror, Kort, Omdömen, Kontakt till Hero, Kort, Foto och text (arbetssätt), Omdömen, Frågor, Kontakt, så att tjänsterna står direkt under inledningen; sektionen Siffror är borta eftersom siffrorna var påhittade; uppgiften kostade 0 redigeringar, medan att ta bort eller lägga till en ny sektion via chatten hade kostat 1 eller 2.

Läs mer

• Gratis kurs Synas på nätet 3.2: Rubriker och en sidas uppbyggnad
• Gratis kurs Synas på nätet 4.2: Mobilen först och viewporten
• Sitebuilder och AI Builder: vilken ska du välja och hur öppnar du den?