4.1 Skapa innehållselement

4.1 Skapa innehållselement Innehållet på en sida skapas genom att använda innehållselement. Du kan bygga upp sidan genom att använda många olika element i kombination med varandra. Välj sidan du vill jobba med i sidträdet, genom att vänsterklicka på sidtiteln. Klicka på knappen 'Content', inuti innehållsytan, för att lägga till ett nytt element. (Img. 4.1.1) 4.1.1 Ett antal ﬂikar, som innehåller olika typer av innehållselement, visas. Läs mer om de olika typerna av element här. I detta fallet kommer vi att välja ett 'Text & Media'element, under ﬂiken 'Typical page content'. (Img. 4.1.2) 4.1.2 Elementet 'Text & Media' är troligen det mest frekvent använda.

Fliken 'General' innehåller information om vilken typ av element som är valt (1), i vilken innehållsyta det är placerat (2), rubriken (3), vilken layout/storlek rubriken har (4), möjlighet att länka rubriken (5)samt innehållstexten (6). (Img. 4.1.3) 4.1.3 Innehållstyp Innehållstyper Högst upp under ﬂiken 'General', kan du se vilken typ at innehållselement det är. Det är även möjligt att ändra typ av element. Om fält som redan är ifyllda, har motsvarande fält i en annan typ av innehållselement, följer dessa texter/inställningar med automatiskt.

Innehållskolumn Sidmallen kan ibland innehålla olika typer av innehållsfält (Content main, Sidebar, Menu), och i dropdown-menyn 'Column' har du möjlighet att se i vilken av innehållsytorna innehållet är placerat. Det är även möjligt att ﬂytta innehållet mellan ytorna med hjälp at dropdown-menyn.

Rubriktyp Rubriktyp Det finns flera olika typer av layouter för rubriker. Layouten bestämmer utseendet för rubriken på framsidan, men kommunicerar även rubrikens värde till sökmotorerna. Layout 1 skall användas för den första rubriken på sidan. Den representerar även H1-taggen, som indikerar för sökmotorerna att det är den viktigaste rubriken på sidan. Läs mer om att optimera din hemsida. Layout 2 bör användas för alla underrubriker (upp till 4-5 stycken) och därefter Layout 3 - Layout 5. Även dessa olika rubriker indikerar för sökmotorerna sidans uppbyggnad. De olika rubriktyperna har även olika textstorlekar på framsidan, utifrån designen. Det är alltid bra att ha en rubrik för varje element på sidan, för att enklare kunna hantera strukturen i backend. Det finns därför även möjligheten att dölja rubriken från frontend, men ha den synlig för internt bruk. Textarea Textarea Textarean är som en nedskalad variant av ett Word-dokument. Enklare formatering kan utföras på texten, såsom rubriker i texten, fetstil och kursiv text, skapa länkar, rensa text från formatering etc. Notera att det är väldigt viktigt att texten, som klistras in i textarean, är fri från utomstående formatering, som t ex formatering från Word eller HTML-kod. Om

sådan formatering följer med, kan det påverka utseende och funktionalitet på framsidan. Då vi valde innehållselementet 'Text & Media', finns det en flik som heter 'Media'. Här kan du välja in bilder eller video. För att lägga till en fil från Filelist, klicka på 'Add media file'. Det är även möjligt att att hämta in en fil från din lokala dator, om detta val är tillgängligt, genom att istället klicka på 'Select & upload files'. Notera att filer som läggs till med 'Select & upload files' sparas och lagras i roten av Filelist. Slutligen är det även möjligt att lägga till ett filmklipp via URL, t ex via adressen till en Youtube-film, genom att använda alternativet 'Add media by URL'. Godkända filformat listas under knapparna. (Img. 4.1.4) 4.1.4 Efter att ha klickat på 'Add media file', kan du välja filen från 'Filelist' i popup-fönstret. Välj mapp (1), och klicka på filnamnet (2) eller på bilden (om du har miniatyrbilder aktiverat). Om du vill ladda upp en fil undertiden du arbetar, är detta möjligt längst ner i popup-fönstret (3). Välj då mapp (1) där du vill ladda upp filen, och klicka på 'Välj filer/Bläddra'. Välj fil/filer från din lokala dator och klicka på Öppna. Klicka nu på 'Upload files' i sektionen, och filerna kommer att laddas upp i mappen, där du sedan kan välja den. (Img. 4.1.5)

4.1.5 Filinformationen läggs till som sektion i elementet. Om du lagt till metadata till filen i Filelist, kommer detta att visas i fälten Title (1), Alternative text (2) och Description (4). Dessa texter kan skrivas över genom checkboxen ovanför varje fält, som öppnar upp fältet för redigering. Det är möjligt att länka filen (3) så att den är klickbar på framsidan. Antingen klistrar du in en länkadress (t ex ID-numret till en intern sida), eller så använder du länkikonen till höger. Om en bild lagts till, är det möjligt att beskära den inne i elementet (5). (Img. 4.1.6) För att redigera bilden, klickar du på 'Open Editor'. Du kan antingen välja ett fixerat förhållande (16:9, 4:3, 1:1) eller beskära bilden fritt. Efter att du valt ytan du vill beskära, klicka på 'Accept'. Den beskurna bilden visas nu som en miniatyrbild i bildinformationen. (Img. 4.1.7)

4.1.7 Längst ner på denna ﬂik ﬁnns det ett alternativ att aktivera 'Enlarge on Click', för funktionen att klicka på bilden på framsidan och visa den i ett större format på framsidan. Förstoringen visas i en lightbox. (Img. 4.1.8) 4.1.8 När du använder 'Add media by URL' öppnas en popup där du kan klistra in adressen till en video från Youtube eller Vimeo. (Img. 4.1.9)

Efter att du lagt till videon, är det möjligt att justera titeln (1) samt beskrivningen (2). Du kan även välja om ﬁlmen skall börja spela automatiskt vid sidladdning. (Img. 4.1.10) 4.1.9 4.1.10 Fliken 'Appearance' har valmöjligheter för layout och styling för elementet. Valmöjligheterna kan variera beroende på typen av element. (Img. 4.1.11) Beroende på designen för hemsidan kan vissa typer av innehållselement nyttja denna funktion för att få olika layouter (1). Utseendet för elementet, t ex bakgrundsfärg och textfärg, kan styras via 'Appearance'

(2). Även välmöjligheter för denna funktion baseras på designen för hemsidan. Ibland kan det behövs lägga till marginaler för ett element, för att skapa mer utrymme mellan två element. Marginal kan läggas till ovanför elementet (3) eller nedanför (4). Det finns inställningar för att skala om bilden samt skapa en ram (5). Men att skala om en bild, är något vi avråder från, då det kan göra att bilden blir för liten i vissa skärmvyer. Detta beror på att man använder en responsiv design, som anpassar bilderna automatiskt till skärmstorlek, och genom att sätta en fast bredd/höjd fungerar detta ej. Placering av bilden i förhållandet till texten (6) är också möjligt. Om du har lagt till mer än en en fil, kan du också välja hur filerna skall placeras i förhållande till varandra, genom att använda antal kolumner (7). Slutligen är det möjligt att lägga en länk till toppen av sidan (8), som automatiskt placeras i botten av elementet på framsidan. När besökaren klickar på länken skickas de automatiskt till toppen av sidan de är på. Detta är alltså en fördelaktig funktion om man har väldigt mycket text på en sida, t ex för användarvillkor etc.

4.1.11 Fliken 'Access' innehåller inställningarna för att publicera och avpublicera elementet (1). Du kan även välja att publicera (2) och avpublicera (3) elementet vid ett speciﬁkt datum. Detta är perfekt när du hanterar kampanjinnehåll, produktlanseringar etc. då du inte behöver göra det manuellt. Det är inte möjligt att förhandsgranska innehåll som är satt till att publiceras vid ett senare tillfälle, så gör denna inställning i sista skedet. Försäkra dig också om att döljfunktionen (1) ej är aktiverad, då innehållet fortsatt kommer att döljas. (Img. 4.1.12)

4.1.12 Flikarna 'Categories' och 'Grid elements' används vid ytterst få tillfället, och vi kommer därför att hoppa över dessa i denna sektion. Glöm inte att spara när du har fyllt i all nödvändig information. Spara-funktionen är placerad högst upp i innehållselementet, knappen 'Save'. Det är även möjligt att använda pilen till höger om knappen, för att få tillgång till ytterligare alternativ som t ex. 'Save and view page', 'Save and Create new one' samt 'Save and close'. (Img. 4.1.13) 4.1.13 Om TYPO3manual.com TYPO3manual.se är en online-manual som vänder sig till redaktörer som jobbar i TYPO3. Den produceras av webbyrån Pixelant AB. Läs mer om Pixelant AB