En boksliste presenterer innhold på en ryddig måte. Som navnet tilsier, er det små bokser som blir plassert ved siden av hverandre og består av:
Et bilde
En tittel
Innhold
Du har kanskje allerede en boksliste på siden din som automatisk viser artikler du skriver, og lurer på hva som er forskjellen på Boksliste-komponenten og Manuell boksliste? I denne artikkelen får du svaret på hvordan den manuelle bokslisten brukes, og inspirasjon til hva du kan bruke denne komponenten til.
I motsetning til den vanlige bokslisten, kan ikke den manuelle bokslisten settes opp automatisk innhold (kanskje ikke så overraskende ut fra navngivningen). MEN den er veldig fleksibel i bruk, siden "Innholds"-feltet godtar HTML.
Så hva kan jeg bruke den til?
Kanskje har du lyst å sette opp en ansattliste, som linker direkte til e-posten til hver enkelt ansatt? Kanskje du har lyst å bruke denne komponenten til å linke til eksterne sider som på en eller annen måte er knyttet til huset ditt (f.eks. kulturskole, bibliotek o.l. som har egne websider)? Eventuelt så har du kanskje noen arrangementer du ønsker å fremheve på en egen side utenom det vanlige programmet?
I eksemplet vi tar for oss her, skal vi sette opp en boks for ansattliste.
Hvordan sette opp den manuelle bokslisten
Det første du må gjøre, er å velge den riktige komponenten. Denne finner du i lista til venstre når du trykker på knappen Legg til komponent. Bla ned til du finner Manuell boksliste.
Når du har valgt komponenten, vil den dukke opp på sidestrukturen. Trykk på denne for å legge til innhold.
I tillegg til bildeopplasting, så er det noen elementer som er viktig å kjenne til. For å legge til flere bokser, benytter du deg av knappen som står Legg til på (1.). Hvis du ønsker å fjerne en boks kan du trykke på minustegnet (2.). Rekkefølgen på boksene kan endres ved å trykke på det blå ikonet ved siden minustegnet. Videre har du Tittel-felt (3.) og et felt for Innhold (4.). Det er fleksibiliteten i Innholds-feltet som at gjør denne komponenten er fin å bruke til forskjellige ting. Her er det nemlig mulig å bruke HTML.
Nå ønsker vi å benytte oss av disse feltene for å lage en enkel ansattliste. Da går vi fram på følgende måte:
Finn bildet du ønsker å laste opp (Husk at bildene i boksene bør ha samme format for å se pent og pyntelig ut)
Legg til en tittel. I dette tilfelle navn på den ansatte.
Bruk innholdsfeltet til å legge til informasjonen du ønsker skal stå på "ansattkortet".
Hvis du ikke er kjent med HTML fra før, krever det at vi gir innholdsfeltet en nærmere forklaring.
Her er selve kodesnutten i innholdsfeltet i eksemplet over:
Mobil: 90909090<br><a href="mailto:[email protected]">Send e-post</a>
Vi knekker det opp i mindre deler:
Mobil: 90909090: Helt vanlig tekst<br>: Denne HTML-taggen blir brukt til linjeskift. Det vil si at videre tekst kommer på neste linje<a href="mailto:[email protected]">Send e-post</a>: selve <a>-taggen er et ankerelement, som kombinert med href=" " vil kunne linke teksten (som her er "Send e-post") mellom starttaggen (<a>) og slutttaggen (</a>) til enten en nettadresse, eller slik som i dette tilfelle en mailadresse. Det ermailto:{mailadresse}som gjør at enheten sin mail-tjener åpnes.
Så hvis du skulle satt opp ansattliste på din hjemmeside, er det bare å følge stegene over (og husk å bruke knappen "Legg til" for å få laget flere bokser), deretter kopiere kodesnutten over til innholdsfeltet og bare endre telefonnummer og mailadresse.
De som har kjennskap til HTML kan bygge videre på denne oppskriften med å endre f.eks. farge på tekst o.l. Så her er det bare kreativiteten som setter stopper for hva som er mulig med denne komponenten 🎉