Att bygga webbsidor i ClubRunner
Bilden visar en tom mall i (den nya grafiska) editorn*. Layouten kan ändras med knappen Layouter (uppe till höger). Börja alltid redigeringen med att ge sidan ett unikt namn i Egenskaper.
Sidan byggs upp med att dra in widgets (byggblocken till höger) i mallen till valfritt område "Drop here" och släppa när rätt plats lyser grön. I varje område är det valfritt att lägga ingen, en eller flera widgets. Widgetar fylls med innehåll - text, bilder, länkar - i olika layouter eller hämtar innehåll, beroende på vilken widget du väljer att använda.
Översta området Band 1 är avsett för en "banner", dvs en portalbild för sidan. Band 1 skiljer sig från sidans övriga områden genom att gå ända ut till sidans kanter - om du ändrar widgetens inställning (kugghjulet) genom att ta bort Visa kant. För att en bannerbild inte ska ta onödigt stor del av bildytan innan man behöver scrolla ner bör den vara i brevlådeformat t ex 1600x550 px eller gärna lägre, ner till typ 350 px.
Widgets finns i olika kategorier, bl a:
- Widgetar för text och bilder fylls av redaktören med innehåll (text, bilder, länkar).
- Widgetar som visar information, Evenemang, Nyhetsbrev & PR hämtar färdigt innehåll från annat ställe i CR, tex artiklar eller kommande evenemang.
- Fritextwidgets (sidspecifika) fylls med eget innehåll och ger möjlighet bl a att ändra i HTML-koden.
- Fritextwidgeter (globala) fylls också med eget innehåll och kan användas på flera sidor. Ändringar av sådan widget behöver bara göras på en av de sidor som den används på.
Du kan granska hur sidan visas på läsplatta eller i telefon med hjälp av ikonerna högst upp i mitten på redigeringssidan.
Klubbwebben levereras med en hemsida som exempel med några av de komponenter som man kan använda för att bygga upp en webbsida.
* Det går att använda gamla editorn "Webbplatsen", men den är på väg att fasas ut. Det är dock samma sidor som du arbetar med, vare sig du använder gamla eller nya editorn.
Gör så här
Designrekommendation
För att distriktets klubbar ska visa en enhetlig grafisk profil rekommenderar distriktet följande inställningar:
- Gå till Webbplatsen (ny, beta) -> Webbplatsdesigner.
- Klicka på Teman
- Leta upp och markera tema Millennium (Next Gen – No Banner)
-
Välj färgschema vid röda pilen.
- Klicka på Layouter och välj Full Width Top Band above Three Columns.
- Klicka Publicera.
Widgets
- Widget-kontrollerna:
- Om widgeten har rubrik redigeras rubriktexten via kugghjulet. Om rubriken inte har bakgrundsfärg bör en grå remsa sättas dit: färgkod #ECECEC.
- Egenskaper ställs in via kugghjulet, t ex i artikel-widget och kommande-evenemang-widget ställs in hur många objekt som ska visas.
- Om widgeten har penn-symbol klickar du på den för att redigera innehållet.
- Widget som visar innehåll har istället symbol för att redigera vad som hämtas. Klicka där och då öppnas sidan för uppgiften, t ex artikelbiblioteket. När du är klar med det, klicka på Gå tillbaka och du kommer tillbaka till editorn.
- Områdena Drop Here (nya editorn) resp Överst, Primär osv (gamla editorn) rymmer flera widgets, om så önskas. Den andra widgeten kan placeras antingen över eller under den första widgeten. Dra den andra widgeten uppåt och nedåt över den första, tills du ser att ett grönt landningsområde tänds där du vill ha den, då släpper du widgeten.
- Tips på några bra widgets:
- För arbete med egen text och bilder klarar man sig långt med bara dessa två från gruppen Widgetar för text och bilder: Endast text, Två textkolumner. I dessa går det nämligen utmärkt att blanda text och bilder.
- Carousels -> Dynamic Carousel (bildspelet överst på hemsidan).
- Widgetar som visar information -> Webbplatsartiklar. Hämtar och visar senaste artiklarna: viktig del av informationsflödets automatisering! Ställ in i egenskaper (kugghjulet) hur många artiklar som ska visas.
- Widgetar som visar information -> Nyheter på webbplatsen: Hämtar och visar utvalda artiklar, dvs en statisk publicering. Välj artiklar genom att klicka på widgeten och lägga till artiklar från Artikelbiblioteket, eller ta bort artiklar från widgeten.
- Widgetar som visar information -> Contact us (en inbyggd sida (Built-in Page) med kontaktformulär).
Läs CR:s Instruktion för att redigera mottagare, dvs vem inom klubben som ska få de mail som formuläret skickar. - Evenemang -> Kommande evenemang. Ställ in i egenskaper (kugghjulet) hur många evenemang som ska visas. Obs att i själva evenemanget finns också inställningar för visning, t ex att det inte ska visas på hemsidan eller i kalendern.
- Nyhetsbrev & PR -> Prenumerera på nyhetsbrev (leder till prenumerationsformulär för icke-medlemmar).
- Fritextwidget (global). Samma widget finns tillgänglig för alla sidor. Redigeras den på en sida, då ändras den samtidigt på andra sidor där den ingår. Perfekt för t ex info om klubben, mötestid etc som man vill använda på många sidor.
- Fritextwidget (sidspecifik). Ger möjlighet till avancerad redigering (HTML-kod m m). En erfaren webbredaktör kan använda dessa genomgående istället för de enkla textwidgetarna.
- VARNING för Artikel med bild till vänster/höger: Detta är ett format med fasta element (rubrik, ingress, bild, brödtext, länkknapp) för ett statiskt innehåll. Formatet kan vara helt OK att använda för t ex en kampanj, men det blir inte en Artikel ("Story"), så widgetens namn kan därför leda till förvirring.
Avancerad redigering
Fritextwidgets har en Redigera-symbol till vänster om kugghjulet. Den leder till en sida med avancerade redigeringsmöjligheter av widgeten, bl a källkod (HTML).
För att bädda in t ex en Youtube-film använd fritextwidget och se CR supportsida (engelska).
Bildhantering
- Ladda upp grundbilder till Image Library (vänsternavigeringen Webbplatsen -> Webbplatsens innehåll ->Bibliotek -> Image Library -> My Images).
- Notera mapparna som redan finns med CR-bilder, Rotaryloggor och Rotarybilder! Rotarybilderna i CR:s Image Library och de som finns i MyRotary Brand Center kan användas fritt i alla Rotarysammanhang, även om lokalt präglade bilder är att föredra.
- Missa inte "Branding" av bilderna - ladda bilden med Rotarybudskap. En mycket användbar webb-app för att lägga Rotaryloggor – People of Action-teman m m – på bilder (även egna bilder) är app.poaphotos.com Rekommenderas!
- Bilder till artiklar, program osv kan laddas upp löpande under redigeringsarbetet.
Tips: strukturera redan från början bildfilerna i olika mappar under My Images, bl a eftersom de troligen kommer att användas av flera av klubbens funktionärer under många år. - Bildfilerna till Karusell-funktionen (redigera genom att klicka på Karusell-widgeten på hemsidan) laddas upp till den Karusellens redigeringssida (inte via My Images). För en snygg karusell gör alla bilder lika stora (t ex 1600 x 300 till 550 px).
Använd nya Dynamic Carousel-widgeten, den har många användbara inställningsmöjligheter. - Klubblogga för webben (klubbnamnet till höger om hjulet) kan tillverkas på https://brandcenter.rotary.org/en-GB/App/Approval/AdrenalineTemplate/Details/19 länken måste klistras in i webbläsaren (eller gå vidare till Logos -> Template).
- Läs mer om loggor och verktyg för att ta fram dessa i handledningen Grafik för Rotary.
- Gör gärna ett klubbprojekt för att få fram bra lokala bilder som lämpar sig för "brevlådeformatet" och har bra upplösning för webbvisning. Dessutom ska klubben ha rätt att använda bilderna (fotografens upphovsrätt) och personerna på bilderna ska medge det (GDPR). Se fina bilder hos rotary2390.se och deras klubbar!
Tips: se nedan om upphovsrätt!
Att göra nya sidor
Inbyggda färdiga sidor
Bekanta dig med Built-in Pages, det finns många användbara - du behöver bara länka en menypunkt till en Built-in Page, vips har du en färdig sida med bra information som hämtas från sådant som redan finns i klubbens ClubRunner.
I hemsidan som kom med CR-leveransen finns menypunkten Evenemang som visar just en inbyggd kalendersida med klubbens kommande evenemang. Se mer info om Built-in Pages på supportsidan Webbmenyer.
Egna sidor
För att göra Custom Pages, börja med att skapa en egen sidmall (visas i filmen ovan) med en grundlayout utan widgets. Då blir den generellt enkel och snabb att göra nya sidor med.
En bra grundlayout på en egen webbsida är den variant som har två spalter: smal till vänster och bred till höger.
Den globala widgeten för klubbinformation (Välkommen till oss) platsar i mallen (t ex i smala vänsterspalten) eftersom man troligen vill ha den på alla sidor, men låt i övrigt mallen vara tom.
Arbetsgången för ny sida är
- Skapa ny sida från mall.
- Ge sidan sitt unika namn i Egenskaper. Här kan du också välja om sidan ska vara publik eller kräva inloggning.
- Ändra vid behov layout.
- Dra in lämplig widget och släpp på ett landningsområde.
- Fyll widgeten med innehåll (text, bilder, länkar), eller ställ in widgetens hämtning av innehåll.
När sidan är skapad går den att använda i menyer.
Alltså: först sida, sen menypunkt.
Tips för nedladdningsfil
Länk till Link Type = Document är praktisk för att öppna ett dokument i webbläsaren (dvs en fil som finns bland ClubRunners dokument (Organisation/Dokument).
Men om klick på länken istället ska utföra nedladdning av filen (t ex en medlemsansökan), då måste man justera HTML-koden. Gör så här:
- Använd en fritextwidget, sidspecifik (inte vanlig widget för text och bilder).
- Lägg in länken som vanligt.
- Klicka på widgetens Redigera komponenten (se Widgets, Avancerad redigering ovan).
- Om du får frågan Draft vs. Live: välj Edit Draft version.
- Klicka knappen Källa (källkodsläge). Leta upp länken i HTML-koden och ändra den enligt syntaxen
<a href="filnamn" download>
Exempel:
Före ändring
<a href="documents/sv-se/9b44e4aa-fe18-4b26-a8b4-46054b874a84/1" target="_blank">Medlemsansökan</a>
Efter ändring
<a href="documents/sv-se/9b44e4aa-fe18-4b26-a8b4-46054b874a84/1" download>Medlemsansökan</a> - Klicka Save and publish och du är tillbaka i webbsides-editorn.
Widgetkoden kommer att flytta download-kommandot till före href, men ändring enligt ovan är enklast att göra.
OBS - var uppmärksam på om det länkade dokumentet kräver inloggning eller ej. Detta ändras vid behov genom att redigera dokumentets egenskaper i Organisation/Dokument.
Tips: överväg om minikalendern tillför något för besökare till hemsidan. Om inte, kan du låta något mer informationsrikt innehåll använda den ytan.
Tips för kalendervy
Minikalendern går inte att bläddra. Gör en länk till den inbyggda sidan med kalendervy, vilken går att bläddra och där finns också länk för att prenumerera på kalenderhändelserna.
Använd en Fritextwidget (sidspecifik):
- Widgetinställningar
- Visa inte kant
- Visa inte rubrik
- Innehåll Egenskaper/Bakgrundsfärg: #ECECEC
- Skriv in texten
- Ändra till Font Arial, Fet
- Infoga pilen i källkodsläge (se Widgets, Avancerad redigering ovan) med HTML-kod →
- Länka KALENDERVY till Built-in Page: Event Calendar
- Stryk under KALENDERVY för att göra tydligt att det är en länk
- Ändra teckenfärg till #005DAA
- Öka eventuellt Size på pil och/eller text
Många har "Kommande evenemang" eller "På gång" i sidmenyn, men då ofta då till Listvyn (Events List) med bilder.
Arbetsfördelningen är att webbredaktören placerar widgetar för artiklar och evenemang samt ställer in hur många objekt som ska visas. Andra funktionärer skapar innehåll som automatiskt publiceras på det sätt som webbredaktören har skapat förutsättningar för.
När programkommittén publicerar program visas det i widgeten Kommande evenemang och när andra funktionärer publicerar artiklar visas de i widgeten Artiklar, t ex på hemsidan. Detta utan att webbredaktören behöver göra något! Senaste artikeln puttar automatiskt ut artikeln som visas längst ner i listan och därmed uppdateras webbsidans innehåll löpande (äldre artiklar visas fortfarande på samlingssidan för artiklar, se supportsidan Artiklar).
ClubRunners potential som kommunikationsverktyg är mycket stor om klubbens webbplats har en genomtänkt struktur som förvaltas av webbredaktören, men att många funktionärer bidrar till innehållsflödet.
Använd bara bilder som klubben har rätt att publicera och sprida. Det finns juridiska tjänster som är specialiserade på att kräva ersättning för bilder som publicerats utan tillstånd och det går inte att bortförklara användningen av en bild som publicerats på klubbwebben och kanske också delats i sociala media.
Du kan leta licensfria bilder t ex på "free clipart", "royalty-free", "free images" osv. När du googlar fram bilder, filtrera licensformer m h a Verktyg/Användningsrättigheter.
