Ett antal standardverktyg som används för att skapa innehåll på .wpp-sidor ingår i Web Port.
Dessa finns på samma ställe som symbolbiblioteken.
Textredigerare
Textredigeraren ger dig möjlighet att skapa egna texter via en WYSIWYG som även ger dig möjlighet att lägga till egna bilder och länkar.
Följande inställningar kan göras:
| Inställning: | Beskrivning: |
| Formaterad text | Skriv in text och välj önskad formatering |
| Bakgrundsfärg | Välja bakgrundsfärg för textområdet |
| Färg på text | Välja en standardfärg för text (om ingen färg har valts i formateringen) |
| Överhängande innehåll | Överhängande innehåll, kan döljas, rullas eller visas |
| Css-klass | Css-klass för anpassad formatering |
| Css-stil | Gör att du kan lägga till din egen css-kod |
| Redigerbar i visningsläge | Gör att du kan redigera texten i visningsläge |
Bild
Ger möjlighet att ladda upp och bädda in bilder.
Följande inställningar kan göras:
| Inställning: | Beskrivning: |
| Ladda upp bild | Ladda upp ny bild eller välj bild från tillgångar/uppladdning (om URL inte anges) |
| URL för bild | Ange URL för bild för att visa den (åsidosätter valet av uppladdning) |
| Anpassa bilden till proportioner | Visa hela bilden, beskär eller skala |
| Positionera bilden vertikalt | Så här placerar du bilden på bildytan |
| Bildposition horisontellt | Så här placerar du bilden på bildytan |
| Bildlänk | Skapa en länk om du klickar på bilden |
| Ange var URL:en ska öppnas | Öppna i samma fönster, ny flik eller överordnat fönster |
| Css-klass | Css-klass för anpassad formatering |
| Css-stil | Gör att du kan lägga till din egen css-kod |
| Upprepa bild och skapa mönster | Upprepar bilden i ett mönster |
Bädda in knapp
Ger möjlighet att skapa knappar med valbar funktionalitet. Bland annat länka, läsa och skriva taggar, köra skript, öppna och stänga innehållsyta, visa och dölja komponenter.
Följande inställningar kan göras:
| Inställning: | Beskrivning: |
| Ange text till knappen | Ladda upp ny eller välj bild från tillgångar/upload (om URL inte finns) |
| Navigera till sida | Välj sida att länka till |
| Navigera till din egen URL | Ange URL för sidan som ska öppnas |
| Ange var URL:en ska öppnas | Öppna i samma fönster, ny flik eller överordnat fönster |
Inställningar för design
Klicka för att expandera
| Inställning: | Beskrivning: |
| Knappens färg | Färg för knappen |
| Färg för text | Färg för texten på knappen |
| Knapp med bild | Ladda upp bild och använd som knapp |
| Placera bild till text | Var bilden ska placeras bredvid knappens text |
| Bildens bredd (höjden är automatisk) | I pixlar |
| Avstånd mellan bild och text |
I pixlar |
| Ange storlek på text | I pixlar |
| Anpassa knappens bredd | Antingen till text eller till definierad storlek |
| Marginal runt text | Ange marginal från text till knapp i pixlar |
| Skugga för rullgardinsmeny (kryssruta) | |
| Färgskuggning (kryssruta) | Lägg till skuggning till knappen |
| Rundade hörn (kryssruta) | Släta ut hörnen på knappen |
| Större muspekare (kryssruta) | Förstora knappen när du sveper över den |
| Ange färg baserat på tagg |
Byter färg på knappen baserat på taggvärden. Anges i format: TAG=VALUE|#hex&TAG2=VALUE2|#hex2. T.ex. FAN_CMD=1|#00FF00&FAN_CMD=0|#FF0 000. Vilket gör knappen grön när FAN_CMD=1 och röd när FAN_CMD=0. |
Skriva och läsa taggar
Klicka för att expandera
| Inställning: | Beskrivning: |
| Skriv till taggar |
Skriv till en eller flera taggar med ett klick. Format TAG1=VÄRDE&TAG2=VÄRDE2 |
| JavaScript körs efter att taggar skrivits | Returnerar ett objekt med namnet data som kan användas i JavaScript för att visa resultatet av skrivningen. Exempel: alert (data.FAN_CMD); Skriver ut "OK" om skrivningen lyckades. Se webbläsarkonsolen för mer information |
| Läsa data från taggar |
Läser värdet på taggar och returnerar som objekt med namnet data. Format: TAG1&TAG2 |
| Kör Javascript efter att taggar har lästs | Se funktion JavaScript efter skrivning ovan |
| Växla värde fram och tillbaka på tagg | Växla värde på tagg. Format: TAG_CMD |
| Kör javascript efter att taggen har växlats | Se funktion JavaScript efter skrivning ovan |
Kör skript
Klicka för att expandera
| Inställning: | Beskrivning: |
| Kör JavaScript vid klick | Kör JavaScript-kod vid klick. T.ex. alert ('test'); |
Öppna/stäng navigeringsområdet
Klicka för att expandera
| Inställning: | Beskrivning: |
| Öppna ett navigeringsområde | Ange Html-ID för det område som ska öppnas. (se nedan yt-ID högst upp) |
| Vilket läge ska navigationsområdet öppnas i | Stor yta, liten yta, ikon eller stängd |
| Växla läge mellan | Tillåter dig att växla mellan olika lägen. T.ex. mellan Stor och Ikon |
Visa/dölj komponenter
Klicka för att expandera
| Inställning: | Beskrivning: |
| Ange css-klasser som ska visas | Kan anges på portlets, komponenter och i bakgrundsbild. Separera med ",". T.ex. kall1, rum |
| Synlighet för strömbrytare | Anger om samma knapp ska användas för att både slå på och stänga av |
| Dölj objekt vid första klicket | Ställer in standardbeteendet för första klicket |
Kryssruta
Med kryssrutan kan du slå på och av lager (via klasser), markera andra kryssrutor och köra JavaScript medan du växlar. Den kan också användas som en radioknapp för att välja ett av flera alternativ.
Följande inställningar kan göras:
| Inställning: | Beskrivning: |
| Ange beskrivning | Den text som visas bredvid kryssrutan |
| Välj typ | Välj om du vill använda kryssruta eller radioknapp. Om du använder radioknapp måste gruppen fyllas i under Avancerade inställningar |
| Ange CSS-klasser | Anger CSS-klasser som ska aktiveras/avaktiveras, separeras med "," |
Inställningar för design
Klicka för att expandera
| Inställning: | Beskrivning: |
| Färg på text | Färg på texten |
| Bakgrundsfärg | Färg på bakgrunden |
| Färg på bock eller cirkel | Färg på bockmarkering eller urvalskula |
| Egen css-klass | Css-klass för anpassad formatering |
Avancerade inställningar
Klicka för att expandera
| Inställning: | Beskrivning: |
| Grupp-ID för radioknapp |
Används för att gruppera radioknappar så att endast en kan väljas |
| Markera andra kryssrutor | Ställ in för att markera/avmarkera andra kryssrutor |
Kör skript
Klicka för att expandera
| Inställning: | Beskrivning: |
| Kör JavaScript när (inte) | T.ex. alert ('markerad'); |
| Markerad Kör skript vid start (kryssruta) | Anger om skript för tillstånd ska köras när sidan laddas |
| Inställning: | Beskrivning: |
| Kom ihåg tillstånd mellan | Anger om det senaste tillståndet ska sparas i minnet |
| sidor Kontrolleras vid start | Anger om kryssrutan ska markeras när sidan laddas |
Område för innehåll
Det har aldrig varit enklare att skapa dynamiska områden på din sida. Med vår innehållsyta kan du placera innehåll i sidhuvudet eller sidfoten, tillsammans med öppna och stänga dynamiska områden för olika skärmar. Exempelvis kan information som kanske inte får plats på mindre skärmar minimeras till en ikon. Det är enkelt att skapa en ny innehållsyta - allt du behöver göra är att dra och släppa andra objekt i ytan. Objekten kommer att följa ytan i både redigerings- och visningsläge. Du kan också flytta ytan utan dess ingående komponenter genom att trycka på Ctrl medan du flyttar innehållsytan. När du har skapat innehållsytan har du en vit ruta utan dynamiska funktioner.
Innehållsytan har 4 möjliga tillstånd:
| Tillstånd: | Beskrivning: |
| Stor yta | Ytan har den storlek som definierats i objektinställningarna |
| Liten yta | Kan vara en mindre version av stort område där innehållet är skalat, eller som visar en mindre del av ett stort område. Kan också vara ett eget område med innehåll |
| Ikon | Visar en ikon som öppnar ett litet eller stort område vid klick |
| Osynlig | Innehållsytan är dold |
Observera!
Stor yta, liten yta och ikon har alla sina egna inställningar.Objekt som placeras på en innehållsyta kan visas på följande sätt:
| Inställning: | Beskrivning: |
| Anpassad innehållspositionering | Objekt som placeras på ytan positioneras som i redigeringsläget |
| Vertikal/horisontell lista | Objekt som placeras i området fördelas horisontellt eller vertikalt i visningsläget |
| Överflödigt innehåll | Överflödigt innehåll kan antingen döljas, visas eller få ett rullningsfält att visas |
| Skala innehåll | Innehållsytan är dold |
Allmänna inställningar för området:
| Inställning: | Beskrivning: |
| Startläge mobil/skrivbord | Anger startläge (stor, liten, ikon, osynlig) på mobil eller stationär dator |
| Position för område mobil/skrivbord | Anger position för innehållsytan på sidan i visningsläge |
| Stäng knapp | Manuell konfiguration av om stängningsknappen ska visas. Standard är att visa stängningsknappen om ikonen visas vid stängning |
| Växla mellan | Knapp för att växla mellan stor och liten yta visas som standard när liten yta är definierad |
Inställningar liten yta:
Ett litet område aktiveras antingen genom att välja att det ska ha samma innehåll som det stora området, eller genom att definiera en storlek. Om olika innehåll har valts visas både en stor och en liten yta i redigeringsläget.
| Inställning: | Beskrivning: |
| Samma innehåll som stor yta | Anger om det lilla området ska ha ett eget innehåll |
| Justera stort innehåll | Skalar innehållet i ett stort område så att det passar i det lilla området |
Ikon för inställningar:
Ger möjlighet att välja om området ska döljas helt eller representeras av en ikon när det är stängt. När du klickar på en ikon kan följande beteende väljas:
1. Öppna stort/smått område
2. Öppna webbadress eller kör javascript
Alternativ för lista:
Ger möjlighet att sätta en marginal runt objekt när positionering är vald som lista, och även att sätta en marginal runt hela listan. Inmatningsformat över-höger-under-vänster, t.ex. 5px 5px 5px 5px.
Allmänna designalternativ:
Visualiseringen av området anpassas här, med möjlighet att lägga till skuggning, färger, rundade hörn och anpassa scrollbar-design. Texten på innehållet i området kan också anpassas för att passa områdets bakgrundsfärg.
Avancerade alternativ:
Här anpassas områdets beteende på en sida
| Inställning: | Beskrivning: |
| Områdets riktning | Om områdets position inte har angetts i page eller floating kan det väljas om det ska läggas till i en horisontell eller vertikal lista med andra innehållsområden |
| Sorteringsordning | Ange sorteringsordning för innehållsytan. Lägre = högre prioritet. Som standard sorteras innehållsytor efter relativ position |
| X/Y-position för flytande/på sidan | Används t.ex. för stora innehållsytor som inte får plats på sidan i redigeringsläget, men som bör visas i visningsläget |
| Prioritet för stängning | Bestämmer vilka områden som ska stängas först när det inte finns plats på skärmen för alla områden. Lägre siffra = senaste stängningsordning |
| Drabart område | Ger möjlighet att dra innehållsområdet på sidan |
| Kom ihåg tillstånd vid omladdning | Innehållsytan startas i samma läge som senast den visades |
| Stäng om du klickar utanför | Stänger området när du klickar utanför det |
| Minimera automatiskt | Området minimeras automatiskt om det inte finns tillräckligt med utrymme på skärmen |
Exempel
Exempel 1: Enkel grafisk meny på sidan
Skapa en ny innehållsyta, välj rubrik, placera ytan på rätt position på sidan, välj en färg under inställningar för stor tjänst och allmänna designinställningar.
Exempel 2: Placera datum och tid i sidfoten
Skapa en ny innehållsyta, placera ytan på godtycklig position utanför sidan. Sätt höjd till 30px, välj position mobil/desktop som footer-right.
Konfigurera att den stora ytan inte ska ha bakgrundsfärg, overflowing content auto. Ta bort skugga och rundade hörn från designinställningarna. Placera en symbol av typen Value med prefixet WEBPORT_DATETIME.
Textfärgen kan antingen konfigureras i värdeobjektet eller i de allmänna designinställningarna för innehållsytan.
Exempel 3: Ikon överst som visar stor yta vid klick
Skapa en ny innehållsyta, placera den godtyckligt där den inte blockerar annat innehåll.
Ange startläge mobil/desktop som ikon, position uppe till höger. Välj visa ikon när ytan är nära och välj en ikonbild. Placera önskade objekt på ytan.
HTML-kod
Med portleten HTML-kod kan du ange din egen html/JavaScript-kod, ladda upp/länka andra filer eller länka andra URL:er via iframe.
Följande inställningar kan göras:
| Inställning: | Beskrivning: |
| Ange html/JavaScript | Exempel som skapar en varningsruta och skriver ut text på sidan: <script> alert('test'); </script>Text i html |
| Länka fil | Ladda upp och använd HTML/Java-skriptfil |
| Länk URL | Ange URL som ska länkas in via iFrame, t.ex. https://kiona.com |
| Överhängande innehåll | Välj beteende för innehåll som faller utanför den valda storleken på portleten |
How-Tos
###SectionLinks 12348938402716 sv