Att bygga webbsidor i ClubRunner

- 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å.
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

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!
Att göra nya sidor
Inbyggda färdiga sidor
Egna sidor
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.
- 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.
Tips för nedladdningsfil
- 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.
Tips för kalendervy
- 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
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.