Webbplatsgalleri

Pixpa ger dig mycket kontroll över hur du visar bilder i dina gallerier.

Med hjälp av alternativen för galleristil kan du helt kontrollera dina bilders visning i galleriet tillsammans med gallerilayouten.

Dricks: Stilalternativ för hela galleriet tillämpas automatiskt på alla nya gallerier du skapar.
Se även: Hur åsidosätter man den webbplatsomfattande galleristilen i ett specifikt galleri?


I den här artikeln:

    1. Galleri Layout
    2. Rutnätstil
    3. Rutnät färger
    4. Hover stil
    5. bild~~POS=TRUNC
    6. Mobil display
    7. Ljuslåda

Du kan anpassa gallerialternativen för hela webbplatsen från Designa (1) avsnitt.

När du är inne i designsektionen klickar du på Gallerier (2) flik.

Alternativt kan du också använda studions sökalternativ.

  • ange Gallerier (1) i sökfältet.
  • Från de relaterade resultaten, klicka på Design – Gallerier alternativ (2).


  1. Layout : Välj en layout som ska tillämpas på galleriet.
    Lär dig hur du ändrar gallerilayouten.
  2. Bredd : Välj galleriets bredd.
    • 'Full bredd' kommer att visa galleriet samtidigt som det täcker hela bredden utan att lämna någon marginal.
    • 'Boxed' kommer att visa galleriet samtidigt som det lämnar lite utfyllnad till höger och vänster på skärmen.
    • 'Webbplatsens bredd' kan anges i designdelen. Du kan ange en fast bredd här.
      Det kommer att visa galleriet genom att följa den angivna fasta bredden.


 

  1. Galleravstånd : Ange avståndet mellan bilderna i rutnätslayouter. (0–250 pixlar) 
  2. Bild hörn radie: Använd en kantradie för att göra bildens hörn rundade i gallerirutnäten.

Till exempel, den Lykta temats hemgalleri har 142px rutnätsavstånd.  

Efter att ha applicerat Image Corner Radius, skulle du se rundade kanter på bilderna som i Bortom mall.


Basens opacitet: Om du har valt svävningstypen som bildens accentfärg, ställ in rutnätsbasens opacitet härifrån. 

 

  1. bas: Basfärgen används för att bilda rutnät och är synlig endast ett ögonblick innan bilderna laddas. Du har två alternativ för rutnätets basfärg.
    • Välj färg: Välj det här alternativet för att ställa in en specifik färg för rutnätsbasen. Ange valfri färg och opacitet för rutnätsbasen.
    • Accentfärg: Använd bildaccentfärger för rutnätsbasen. Detta kommer att ge ett flerfärgat rutnät med accentfärgerna för varje bild.
  2. Basens opacitet: Om du har valt bastypen som accentfärg, ställ in rutnätets basopacitet härifrån. 
  3. Håll muspekaren:  Detta påverkar rutnätet när markören förs över bilden.
    • Välj färg: Ställ in standardfärgen för svävaren och dess opacitet om du har valt Välj färg för dina rutnätsbilder. 
    • Accentfärg: Använd bildaccentfärger för rutnätsbasen. Detta kommer att ge ett flerfärgat rutnät med accentfärgerna för varje bild.
  4. Hover opacitet: Om du har valt svävningstypen som accentfärg, ställ in rutnätsbasens opacitet härifrån. 

 

Bildens accentfärg är den dominerande färgen på en bild som väljs när du laddar upp en bild.


Svävningseffekten kommer endast att användas i rutnätslayouten. Du kan visa följande alternativ vid hovring i rutnätsläge.

  1. Ingen effekt – För ingen effekt på bilder i rutnätsläge.
  2. Färg – För endast svävfärg på dina bilder i rutnätsläge.
  3. Färg och bildtitel – För bildens svävningsfärg med bildens titel. Du kan ställa in svävningsfärgen och bildtitelns textfärg/typsnitt/storlek/vikt i nästa alternativ.
  4. Färg och ikon – För bildens svävarfärg med en ikon.
  5. Färg, bildtitel och ikon – För bildsvävningsfärg, bildtitel och ikon. Du kan också lägga till ikoner på dina bilder som plus, pil, kors och öga. 


Hover ikon

  • Hover-ikoner används endast i rutnätslayouter för gallerier. Du kan välja att visa en ikon för dina bilder i rutnätsläge.
  • Alternativen är – plus, pil, kryss och öga. Detta är endast tillämpligt när ikonen är vald i hover effekt falla ner. 


  1. Detta tillämpas när du väljer att visa bildtitlar vid hovring.


>

  1. Visa som: Välj att visa galleriet som en Bildreglage eller i rutnätsläge i mobilvyn. 
  2. Rutnätskolumner: Välj mellan 1 kolumn eller 2 kolumn vy för rutnätsvisning i mobilvy.
  3. Galleravstånd : Ställ in ränna mellan bilder i mobilvy.


1. Öppna Lightbox

  • När bilder visas i ett rutnät öppnas den i ljusbordsläge (helbildsvisning) genom att klicka på en bild.
  • Du kan aktivera eller inaktivera detta härifrån. 

Kontrollera Lightbox-läge i aktion


2. Aktivera zoom

  • Aktivera/inaktivera zoom över bilder i ljusbordsläge.
  • Zoomfunktionen fungerar även på stationära och mobila webbplatser.


3. Visningsalternativ

  • Välj hur du vill visa dina bilder i helbildsvisning.
  • Du kan välja mellan visa endast bilder, bild med miniatyrer, bild med bildtexter på bottenoch bild med bildtexter till höger

Till exempel, ett galleri med visa endast bild

Till exempel, ett galleri med visa bild med miniatyrer.

Till exempel, ett galleri med visa bild med bildtext på botten.

Till exempel, ett galleri med visa bild med bildtext på höger.


4. Bildvy

Ange visningsläge för ljuslådan –

  • Skala och passform – Bilder skulle skalas för att passa in i det tillgängliga webbläsarområdet så att hela bilden är synlig. 
  • Full blödning – Bilder skulle ha en storlek för att fylla hela det tillgängliga webbläsarområdet – vissa delar av bilden kan skäras av för att uppnå denna helskärmsvisning. 

Till exempel, ett galleri med sCale and fit mode där bilder skulle passa in i den tillgängliga webbläsarens höjd. 

Till exempel, ett galleri med en Full blödning läge där bilder skulle sträckas ut för att fylla den tillgängliga webbläsarens bredd. 


5. Kontroller

I ljusbordsvyn väljer du hur du vill visa navigeringskontroller som bildinformationsikon, galleriinformationsikon, korsikon, webbläsarpassningsikon osv. Alternativen är:

  1. Alltid synlig (visa alltid navigeringskontroller ovanpå bilderna)
  2. Visa på svävaren (navigeringskontroller visas bara när du flyttar markören på skärmen)
  3. dold (navigeringskontroller kommer aldrig att visas). 

Till exempel, ett galleri med Alltid synlig navigeringskontroller.

Till exempel, ett galleri med show på svävar navigeringskontroller. 

Till exempel, ett galleri med dolda navigeringskontroller.


6. Nästa/Föregående stil

Välj hur du vill visa dina navigeringspilar i helbildsvisningen.

  1. Flytande : Navigeringspilarna kommer att flyta. Flytta markören över bilden och klicka på skärmen när pilen visas för att navigera genom bilderna. 
  2. Chevron
  3. Pilar
  4. Visa pil i cirkel
  5. dold : Inaktivera navigeringspilarna helt. 


7. Bildfilnamn

  • Välj att visa filnamnet när bilden visas i ljusbordsläge.

Se i aktion: 


8. Max bildstorlek

  • Du har möjlighet att välja mellan 4 olika storlekar för din ljusbordsdisplay.
  • Som standard Bil kommer att tillämpas där bildstorleken beror på den tillgängliga webbläsarens bredd och på enheten du visar bilden (i ljusbordsläge).
  • Du kan också välja mellan 2048px, 1500px, 1000px, 800px eller 500px för att återge bilder med fast storlek oavsett vilken enhet du använder. 


Inställningar för bildspel

  1. Bildspel: Klicka på självspelande för att starta bildspelet automatiskt i full bildvisare. Du kan också inaktivera bildspelet.
  2. Fart : Välj övergångshastighet. Du kan välja mellan 1 till 10 sekunder.
  3. Övergång: Välj övergångsstil för bildspelet.

 

Se bildspel i aktion: 


Hittar du inte det du letar efter?

Ta kontakt med en Pixpa-expert.