EN
Søker...

Bildelisteseksjon

Bruk Bildeliste-delen når du vil vise et sett med bilder og relevant tekst.

Ved å bruke denne delen kan du enkelt koble til forskjellige sider på nettstedet eller legge til lenker der du vil legge til et bilde og en beskrivelse også for hver lenke.

I denne artikkelen:

  1. Hva er en bildeliste?
  2. Legge til en bildelisteseksjon på siden
  3. Legg til og rediger listeelementer
  4. Sekvensere listeelementer
  5. Sletter listeelementer
  6. Endring av seksjonsoppsett
  7. Stilalternativer
  8. Karusellstilen
  9. Levende eksempel

Bildeliste

  • En bildeliste er en samling bilder der du kan legge til en beskrivelse for bildet, og legge til en lenke eller knapp for å koble den til en hvilken som helst annen side på nettstedet eller en hvilken som helst annen lenke.

Legg til bildelisteseksjon

  • En seksjon kan legges til en side. Du kan enten legge til en seksjon på en allerede eksisterende side eller opprette en ny side på nettstedet ditt.
  • På siden din, Klikk på blått + ikon å legge til en Ny seksjon til siden din.

  • Du vil nå se seksjonskategorier på venstre side.
  • Velg Liste (1) kategori og klikk på Bildeliste fane (2) hvor du kan velge mellom forskjellige oppsett av bildelisten (3).

  • Velg et hvilket som helst seksjonsoppsett og klikk på det for å legge det til på siden din.
OBS:

  1. Du kan administrere seksjonsbredden fra innstillingsdel og innholdsbredden fra innholdsstil.
  2. Den ideelle bildestørrelsen du må laste opp i denne delen vil avhenge av antall kolonner. Vite mer.
  3. Hold titlene, undertekstene og beskrivelsene korte og klare.
  4. Trykk på i beskrivelsesfeltet Enter knappen for å gi et linjeskift og Shift + Enter for å starte fra neste linje.

Legg til og rediger listeelementer

Legg til listeelement

Når du har lagt til delen:

  • Klikk på Rediger bildeliste (1)-knappen for å åpne listeelementpanelet.

  • Klikk på Legg til element (2) for å legge til et nytt listeelement.
  • Du kan velge å Doppliker eller slett (3) listeelementene.

Rediger listeelement

Klikk på listeelementet du vil redigere. Det vil åpne de spesielle redigeringsalternativene for listeelementer.

Herfra kan du:

  • Last opp / fjern bilde (1) for listeelementet. Du kan også stille inn Bildeaksentfarge herfra som vil vises ved bildeovervåking.
  • legge en Tittel (2), Undertittel (3)og Beskrivelse (4) av listeelementet.
  • Du finner kanskje ikke alternativet for undertekst og beskrivelse i bestemte listeelementer, avhengig av oppsettet du velger.
    Før du legger til beskrivelsen, sjekk denne artikkel.

  • Klikk på Link Builder-ikonet til Tittellenke (5) for å åpne koblingsbyggeren for å koble listeelementets tittel til en hvilken som helst side. Vite mer handle om Link Builder.
  • Sett koblingen til å åpne i en ny fane eller i samme fane (6).
  • Legg til hvilken som helst type link (7) til listeelementet. Du kan legge til en knapp/bildekobling/sosialt ikon/tekstlenke. Les mer.
  • Spar (8) endringene dine.

Se hvordan du redigerer et bildelisteelement:

Sekvenslisteelementer

  • Du kan enkelt dra og slippe listeelementene for å endre rekkefølgen.

Se sekvensering av bildelisteelementene i aksjon: 

Slett et listeelement

Når du har lagt til et listeelement, kan du redigere og slette det.

  • Klikk på Delete ikonet ved siden av bildelisteelementet.
  • Tne, klikk på Delete knappen i bekreftelsespopupen.
  • Endelig, redde endringene dine.

Se hvordan du sletter et bildelisteelement: 

Merknader

Listeelementet når det er slettet, kan ikke gjenopprettes.

Seksjonsoppsett

  • Klikk på Administrer bildeliste (1)-knappen.
  • Velg Layout (2) fane.
  • Plukke ut (3) oppsettet for din seksjon og Spar (4) endringene.

 

Pro-tips

For å lage en seksjon i full bredde / fanelisteseksjon, velg et hvilket som helst oppsett fra 25 til 29.

Merknader

  • Du kan enkelt legge til et fanelisteoppsett på siden din.
  • Du har muligheten til å velge fra en horisontal eller vertikal fanebasert layout.
  • Det hjelper med å lage en sammenligningsbasert seksjon.

Style seksjonen din

  • Klikk på Administrer bildeliste (1) knapp.
  • Velg Stil (2) fanen.
  • Endre stilen for seksjonselementene og Lagre (3) endringene dine.

Du vil ha flere stilalternativer for delen: 

elementer 

  1. Velg til Vis elementer in rader og kolonner or karusellen 
    • Hvis du har valgt rader og kolonner alternativet, vil listeelementene bli ordnet i rader og kolonner. I dette tilfellet må du spesifisere antall rader og kolonner.
    • Hvis du har valgt karusellen alternativet, vil listeelementene bli presentert som en lysbildefremvisning. Vite mer.
  2. Sett Antall kolonner for bildelisten. Du kan velge mellom 1 til 10 kolonner.
  3. Spesifiser Mellomrom mellom kolonner av listeelementene.
  4. Spesifiser Mellomrom mellom rader av listeelementene.
  5. Velg Innholdsrekkefølge dvs. bildene av listeelementene som skal vises først, eller den tilhørende teksten.
  6. Rette inn innholdet horisontalt i bildelisten. Du kan stille dem til å være venstre-, høyre- eller senterjustert.
  7. Rette inn innholdet vertikalt i bildelisten. Du kan stille dem til å være topp-, senter- og bunnjustert.

Hvis karusellalternativet er valgt i trinn 1, vil du se følgende tilleggsalternativer:

  1. Velg til Sløyfe karusellen eller ikke.
  2. I tilfelle av karusellen, velg Navigasjonskontroller. Du kan velge mellom Ingen kontroller, Piler – Nederst i midten/øverst til høyre/nedre til høyre, Chevron eller Prikker.

Mobil skjerm

  1. Still inn antall Rutenettkolonner for mobile enheter. Du kan sette den til maksimalt 3 kolonner.
  2. Definer Mellomrom mellom rutenett (i piksler).

Bilder 

  1. Velg Imagisk beskjæring for listeelementene. Du kan angi bildene som Firkantet, Sirkel, Horisontal, Portrett og Original.
  2. Velg å ha en felles hjørneradius eller annen hjørneradius for hver side av listeelementene og angi et tall (i px) for Celler radius av listeelementbildene. Vite mer.

Tips

Bruke hjørneradius feltet, kan du lage forskjellige former for listeelementbilder. Hvis du spesifiserer 500 px her, vil bildene vises i en sirkelform.

  • I tilfelle du har valgt delte hjørner, kan du angi forskjellig hjørneradius for hvert hjørne.

På bildepekeren 

  1. Velg Bilde Hover farge å være aksentfarge eller å være spesifisert. Hvis du har valgt aksentfarge, spesifiser deretter opacity.
  2. Hvis du har valgt angi farge alternativet og deretter angi Base hover farge og opasitet for listeelementene.
  3. Sett Elements farge for listeelementene i seksjonen.
  4. Velg til Animer listeelementbildene ved å trykke på Ja. Sjekk denne funksjonen på en live-side.
  5. Velg en Animasjonsstil for bilder når markøren holdes over dem.

Størrelse og plass 

  1. Spesifiser bilde~~POS=TRUNC for listeelementer.
  2. Spesifiser Innholdsbredde for listeelementene.
  3. Spesifiser Plass under seksjonsoverskriften i px.
  4. Spesifiser Plass under bildene av listeelementene (i %).
  5. Spesifiser Plass under titlene av listeelementene (i %).
  6. Spesifiser Plass under undertekstene av listeelementene (i %).

tekst 

  1. Klikk på Endre tekststil knappen for å besøke utforming seksjon og administrere skriftstørrelser og stiler. 
  2. Sett Tittel skriftstil for listeelementene i seksjonen.
  3. Sett Undertittel skriftstil for listeelementene i seksjonen.
  4. Angi standard Beskrivelse skriftstil for listeelementene i seksjonen.

Kort 

  1. Se hvordan å administrere kort.

Shadow

  1. Vise – Velg å vise skyggen bak listeelementene alltid eller bare ved å holde musepekeren.
  2. Stil – Velg fra eksisterende forhåndsinnstillinger eller lag en egendefinert skygge.
    Hvis du har valgt Egendefinert-alternativet, kan du besøke dette Box Shadow Generator for å lage en egendefinert skygge. Til slutt kopierer og limer du inn boksskygge CSS.
  3. I tilfelle du har valgt forhåndsinnstillinger, så Velg Shadow Styles fra rullegardinmenyen.

  1. Se hvordan å administrere stylingen av Knapper og lenker.
  2. Spar alle stilendringene.

Karusellstilen

Karusellstilen viser listeelementer som en lysbildefremvisning, dvs. listeelementene vil bli syklet etter hverandre.

Se hvordan karusellstilen fungerer: 

Her er en live bildeliste: 

Se en live demoside. 

Se hvordan hjørneradiusen fungerer: 

Tagged:

Finner du ikke det du leter etter?

Ta kontakt med en Pixpa-ekspert.

Kontakt oss