Hoppa till huvudinnehåll

Genomgång av portfoliofunktionen

Videogenomgång av portfoliofunktionen i Webbas, med exempel på CSS-kod för att anpassa typsnitt och storlek på rubriker i portfolio- och bloggwidgeten.

Lär dig mer om hur du kan använda funktionen portfolio i Webbas plattform. Di hittar först en videoguide här överst. Under videon visar vi även steg för steg i text hur du använder portfolion samt vanliga frågor och svar.


Översikten Portfolion

När du kommer in i din portfolio ser du de olika inställningsknapparna där du kan modifiera portfolion samt ett rutnät över alla objekt du skapat för portfolion. Det kommer automatiskt vara sorterat på fliken Alla. Men du kan enkelt skifta mellan olika filtervyer på de olika kategorier du skapat.

Här kan du även hovra över dina objekt och välja antingen:

  • Penseln för att redigera objektets grundinställningar.

  • Papperskorg för att radera objektet.

  • Kopiera objektet (perfekt när du ska skapa flera objekt och inte vill skapa allt från grunden igen).


Lägg till objekt

För att börja lägga till objekt, tryck på knappen Lägg till objekt överst på sidan.

Nu öppnas en popupvy där du kan ställa in din portfolioartikel. Under bilden beskrivs varje del detaljerat hur de fungerar.

Här kan du:

  1. Välj omslag för din portfolio. Det kan vara en stillbild, eller ett galleri, eller en video.
    ​

  2. Välj vilken kategori artikeln skall tillhöra. Välj befintlig eller skapa en ny genom att skriva namnet på kategorin och trycka Enter (eller plustecknet).
    ​

  3. Döp artikeln genom att ge en titel.
    ​

  4. Skriv en kort beskrivning vad artikeln visar/innehåller.
    ​

  5. Välj om titel och beskrivning ska visas eller ej i översiktsvyn av alla portfolioobjekt. Som du ser i detta bildexempel så syns beskrivningen i rutan för vårt objekt.
    ​


    När du ser portfolioobjekten i översikten, och om du hovrar med muspekaren över objektet visas två ikoner som ger dig två snabbval.

    1. Öppna portfolions omslagsbild i större vy (se punkt 6 nedan).

    2. Öppna portfolioobjektet i popup (se punkt 7 nedan)
      ​


      ​

  6. Bilder i portfolion, välj om de ska visas i lightbox. Detta innebär att, om man klickar på bilden öppnas den i en popupvy så man kan se bilden i större format.
    ​


    ​

  7. Välj om du vill att beskrivningen skall visas i popupen.
    ​

  8. Välj om du vill lägga till en dedikerad sida. Detta innebär att du kommer kunna bygga upp en hel sida med information kring objektet. Till exempel skriva mer beskrivande texter, förklara processen och dela fler bilder med mera.
    ​
    När du väljer detta visas en ny menyn för Sidinställningar där du kan välja vad URL-strängen ska vara samt eventuell meta-beskrivning för att SEO-optimera din sida. Meta-titel blir samma som din titel du angett för objektet.
    ​


    ​
    För att redigera själva sidan sparar du i objektinställningarna så du kommer tillbaka till översikten. Här syns nu en liten ruta att Redigera sida.
    ​


    ​

  9. Spara ditt objekt som Utkast = du kan återkomma och jobba vidare på den senare och den syns inte under tiden utåt. Eller så Publicerar du objektet så finns den synlig utåt direkt. Du kan alltid öppna och ändra status till utkast när du önskar igen.


Redigera mallens sida

Här skapar du standardmallen du önskar dina artiklar ska ha när du väljer att dina portfolioobjekt även skall ha en dedikerad sida. Denna sida fungerar precis som byggaren med undantaget att du inte kan mobilanpassa sidan.

Detta är en standardmall. När du väljer i ett objekt att aktivera en dedikerad sida är det så det kommer se ut före du gör redigeringar. Sedan går du in på sidinställningarna för det unika objektet och anpassar unikt för den sidan hur du vill den ska se ut. Då kan du även göra ändringar från standardmallen så varje sida blir unik om man önskar det.
​


​


Redigera sidhuvud

Här formar du som en översiktsvy till själva portfolion. Besökaren kommer även se din header i din webbplats samtidigt. Så detta är (likt bloggen) en slags omslagsvy över objekten.
​
Såhär ser det ut i redigeringsvyn (du kan använda byggarens funktioner och widgets som vanligt.
​


Live ser det ut t.ex. såhär:
​


Inställningar

Här ställer du in övergripande layout för översikten av din portfolio. Se mer under bilden.
​

  • Hur du vill de ska visas. Du kan välja mellan:

    • Kolumner (rutnät) och hur många objekt per rad som ska visas.

    • Lista (alla läggs som en lista).

    • Murverk (läggs som rutnätverk men där objekten kan vara olika stora beroende på hur lång beskrivning etc. som är inlagt).
      ​

  • Om det ska vara ett mellanrum (radavstånd) mellan varje objekt eller inte.
    ​

  • Om blocket alla objekt ligger i ska vara inboxade eller i fullbredd. På samma vis som du kan ställa in i din webbplats på blockinställningar. Vi rekommenderar inboxad då det ger bäst layout när objekten inte hamnar längt ut i kanten på webbplatsens fönster.


Kod för att anpassa portfoliowidgetens typsnitt i översikten

Observera!

Nedan ger vi förslag på så kallad CSS-kod för att kunna förbättra din styling. Det viktigt att känna till att vi tyvärr inte kan garantera dessa koders funktionalitet eller ge support i dessa då vi tyvärr inte kan tillgodose skräddarsydda lösningar på våra funktioner för enskilda webbplatsers behov.

Med det sagt har vi tagit fram nedan kodexempel att testa implementera om du vill prova. Vi kan varmt rekommendera att ta del av den här guiden i hur du lägger till egen kod på webbplatsen. Samt tipsa om att ta stöd av verktyg så som ChatGPT med flera som idag är ganska duktiga i att vägleda i till exempel CSS kod vid behov.
​

Om du önskar att ändra typsnitt på rubriker i översikten (då detta inte går att välja idag) kan du använda följande kod. ​


​/* Ändra typsnitt + storlek på rubriker i portfolio + bloggen */

.post-title a {

font-family: "Times New Roman", Times, serif;

font-size: 16px;

}

Fick du svar på din fråga?