Hjälpwebb SiteVision 4

Panelen Responsiv webb

Responsiv webb innebär att du bygger en webbplats som anpassar utseendet beroende på vilken skärmupplösning besökaren har. Det innebär exempelvis att samma webbplats kan se olika ut för besökaren om den kommer in till webbplatsen med en dator, en surfplatta eller mobiltelefon.

Mer information om hur du bygger responsiva mallar hittar du under Tema Responsiva mallar.

Aktivera grids och responsiv webb

Under panelen Responsiv webb aktiverar du funktionerna för att göra webbplatsen responsiv i SiteVision. Du behöver aktivera både grids och responsiv webb för att få full responsiv funktionalitet.

Panelen Responsiv webb

Grids

Ett grid används för att bygga mallar på webbplatsen. Ett grid är som ett rutnät som innehåller rader och kolumner som fungerar som en mall där du kan placera in din design (text, bild m.m) för att den ska bli konsekvent och tydlig.

Inställning för att lägga till ett grid

Du ställer in ditt grid på webbplatsen där du anger bredd, mellanrum mellan kolumner, hur många kolumner som ska användas och om det ska vara centrerat. Sedan använder du gridrader och gridkolumner för att placera ut innehållet på webbsidorna.

När du har aktiverat ett grid på webbplatsen kan du använda det när du bygger mallar. Det går också, precis som layouter, att använda på enskilda sidor.

Aktivera grids på webbplatsen

När du har aktiverat grids så är det möjligt att bygga mallar och webbsidor med grids. Det är då möjligt att lägga till grids, rader och kolumner ute på sidorna.

Det är en förutsättning att aktivera grids om du ska bygga en responsiv webb.

Det förvalda gridet är det som kommer att användas när du väljer "Lägg till grid" ute på sidorna.

Lägg till grid

Klicka på knappen Lägg till grid för att lägga till ett grid på webbplatsen. En ny vy Lägg till grid öppnas.

Brytpunkter

En brytpunkt är den bredd vid vilken utseendet på webbsidan ska ändras för att anpassa sig till olika enheter som telefon, surfplatta och dator.

Ordningen på brytpunkterna är viktig. Om brytpunkterna överlappar varandra kommer den brytpunkt som ligger sist i listan att gälla. Sortera brytpunkterna med den största överst, utgå ifrån stor skärm - när skärmen minskar slår de olika brytpunkterna in efterhand.

Aktivera responsiv webb på webbplatsen

Bocka i kryssrutan Aktivera responsiv webb för webbplatsen för att börja använda alla de funktioner som gör din webbplats responsiv.

Aktiveringen innebär:

  • Automatisk omskalning av bildmoduler och YouTube-moduler.
  • Eventuella brytpunkter kommer att aktiveras (skrivas ut i CSS:en)
  • Du kommer att få inställningar på moduler och layouter för att visa/dölja i och brytpunkter

Brytpunkter

Här kan du lägga till, ändra, ta bort och sortera brytpunkter.

Klicka på knappen Lägg till brytpunkt för att lägga till en brytpunkt. Du ser nu en ny dialogruta.

Stöd för responsiva bilder

När webbplatsen är responsiv har vi stöd för responsiva bilder. Om en bildmodul läggs ut i sidans innehåll så ska den förutom src få ett srcset med nedskalade versioner av bilden.

Om du har behörigheten "Hantera funktioner för utvecklare" finns det en extra kryssruta på bilder där du kan välja att avaktivera denna omskalning.

OPtimera för mindre skärmar

Extra inställning för de som har behörigheten "Hantera funktioner för utvecklare"

Moduler som HAR srcset:

  • Bild
  • Nyheter
  • Blogg
  • Bildspel (nytt)
  • Slumpad bild
  • Skriptmodul och alla egna mallar som använder ImageRenderer.

Denna funktion kräver att du har behörigheten "Hantera webbplatsinställningar" och "Hantera responsiv webb"

Denna sida publicerades:

Missa inga nya rön, tips och tricks! Prenumerera på insite!