Lagavsnitt

Team er svært viktige for suksessen til enhver organisasjon. De samler individer med ulike ferdigheter, kompetanse og perspektiver, og skaper et dynamisk miljø der mål kan nås.

Ved å bruke Pixpas teamseksjon kan du vise profiler og bilder av teammedlemmene dine, sammen med deres respektive roller og ansvar.

I denne artikkelen:

    1. Legger til lagseksjon
    2. Legg til og rediger listeelementer
    3. Sekvenseringslisteelementer
    4. Administrer elementer
    5. Endre seksjonsoppsett
    6. Stylingteam-seksjonen

Legg til lagseksjonen på siden

  • For å legge til en seksjon, må du legge til en side til nettstedet ditt først.
  • På siden din, Klikk på blått + ikon å legge til en Ny seksjon.

  • Du vil nå se seksjonskategorier på venstre side.
  • Bla gjennom Team (1) og klikk på den. Nå vil en skjerm dukke opp som lar deg velge mellom forskjellige oppsett av lagseksjonen (2).

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

Legg til og rediger listeelementer

Legg til et listeelement

  • Klikk på Rediger team (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 primær- og sekundærbilde (1)
    Du kan laste opp en Sekundært bilde sammen med Primærbilde for hvert listeelement. Når en bruker holder musepekeren over elementet, vil sekundærbildet vises, og erstatte det primære bildet. I tillegg kan du stille inn Bildeaksentfarge, 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.

5. Handling ved klikk

Du kan tilpasse klikkeatferden til individuelle elementer i Team- delen. Nedenfor finner du de tilgjengelige alternativene:

  • Gå til en lenke
    Ved å velge dette alternativet åpnes Link Builder, slik at du kan legge til en hyperkobling til dette elementet. Linken kan lede brukere til en annen side på nettstedet ditt eller en ekstern URL. Vite mer handle om Link Builder.
  • Åpne i Lightbox
    Dette alternativet viser elementet forstørret Lysboks se når du klikker. I denne modusen vil Undertittel og Tekniske beskrivelser knyttet til elementet vises ikke i rutenettvisningen, men vil være synlig i lysboksmodus.
  • Ingen handling
    Velg dette alternativet for å gjøre elementet uklikkbart. Når det er valgt, vil det ikke utløse noen handling ved å klikke på elementet.

6. Åpne lenke i nytt vindu: Angi at lenken skal åpnes i en ny fane eller i samme fane. Dette vil bare være synlig når alternativet Gå til en lenke er valgt under Handling ved klikk- menyen.

7. Knapper og lenker: Legg til en hvilken som helst type lenke i listeelementet. Du kan legge til en knapp/bildelenke/sosialt ikon/tekstlenke. Finn ut mer.

8. Overstyring av kortstil

Du kan overstyre de globale kortstilinnstillingene fra seksjonens stilinnstillinger og tilpasse hvert elements kort individuelt i bildelistedelen. Dette lar deg bruke unike stiler på forskjellige listeelementer for bedre tilpasning.

Lær mer om kortalternativene i den dynamiske delen.

9. Lagre: Lagre endringene etter at du har gjort tilpasningene.

Merknader

For å tilpasse kort for hvert element separat, må du først aktivere Kort- alternativet fra Stilinnstillingene.


Sekvenseringslisteelementer

Du kan enkelt endre rekkefølgen på listeelementene ved å dra og slippe dem. Se rekkefølgen på listen over teamelementer i aksjon:


Administrer elementer i teamseksjonen

Team-delen inneholder en Elementer-fane som lar deg enkelt administrere synligheten til ulike elementer i seksjonen.

Ved hjelp av enkle vippebrytere kan du aktivere eller deaktivere bestemte elementer uten å måtte slette eller endre selve elementene.

  • Klikk på Elements (1) fane.
  • Etter å ha gjort endringene, trykk på Spar (2)-knappen.

Seksjonsalternativer

  1. Vis overskriftAktiver eller deaktiver synligheten av overskriften for Team-delen.
  2. Vis knapper: Kontroller om knapper vises på seksjonsnivå.

Elementer Alternativer

  1. Vis bilde: Veksle mellom synligheten av bildene.
  2. Vis tittel: Kontroller om tittelen skal vises.
  3. Vis undertekst: Aktiver eller deaktiver undertekster.
  4. Vis beskrivelse: Administrer synligheten til varebeskrivelser.
  5. Vis knapper: Bestem om knapper for individuelle elementer skal vises.


Seksjonsoppsett

    • Klikk på Rediger team knappen for å åpne seksjonsredigeringspanelet og velge Layout fanen.
    • Herfra kan du enkelt endre oppsettet til seksjonen selv etter at du har lagt det til på siden.

Mens du endrer oppsettet, vil du se seksjonsrelaterte oppsett øverst.

Bortsett fra disse har du også muligheten til å velge et oppsett fra andre seksjoner under overskriften Flere oppsett.


Seksjon for stylingteam

Du kan tilpasse ulike aspekter av Team-delen ved hjelp av diverse stilalternativer. For å gå til stilalternativene, klikk på Rediger team (1)-knappen.

  • Velg Stil (2) fane.
  • Etter å ha gjort tilpasninger, Spar (3) endringene.


Du vil ha flere stilalternativer for delen: 

  1. Visningsalternativer
  2. Mobil skjerm
  3. Justering
  4. Tekststørrelse
  5. Mellomrom
  6. Seksjonsoverskrift
  7. Alternativer for bilder
  8. Formmaske
  9. Alternativer for hover på bilde
  10. Bildekant
  11. Kort
  12. Shadow
  13. Knapper og lenker

Visningsalternativer

  1. Velg til Vis elementer in rader og kolonner / karusell / utstillingsvindu
    • 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.
    • Showcase tilbyr et elegant og interaktivt karuselllignende oppsett for å vise bildene dine ett om gangen med jevne overganger og effekter. Dette oppsettet gir nettstedet ditt en moderne og altoppslukende opplevelse. Finn ut mer.

  2. Sett Antall kolonner for bildelisten. Du kan velge mellom 1 og 10 kolonner.
  3. Spesifiser Mellomrom mellom kolonner av listeelementene.
  4. Spesifiser Mellomrom mellom rader av listeelementene.

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

  1. Aktiver jevn rulling: Muliggjør kontinuerlig rulling av elementer i karusellen for en sømløs og visuelt tiltalende opplevelse.
  2. Auto Slide: Roterer automatisk gjennom lysbilder uten brukerinteraksjon.
  3. Vis fremdrift for autoavspilling: Viser en fremdriftsindikator mens autoavspilling er aktiv for bedre synlighet.
  4. Autoavspillingsforsinkelse: Angir tidsintervallet mellom hver lysbildeovergang når autoavspilling er aktivert.
  5. Karusellløkke: Muliggjør kontinuerlig looping av lysbilder, slik at karusellen starter sømløst på nytt etter siste lysbilde.
  6. Karusellkontroller: Velg NavigasjonskontrollerDu kan velge mellom Ingen kontroller, Piler – Nederst i midten/Øverst til høyre/Nederst til høyre, Chevron, Prikker og Horisontal rulling.
  7. Fade Edges: Påfør en subtil falmingseffekt på kantene av karusellen. Det forbedrer brukeropplevelsen ved å blande bilder mykt når de kommer inn eller ut av visningen.

Hvis alternativet Vis frem er valgt i trinn 1, vil du se følgende tilleggsalternativer:

  1. Effekter: Velg mellom fem animasjonseffekter: Fade, Vend, Kort, Coverflow (Skråstilt) eller Coverflow (Flat) for å kontrollere hvordan bilder går over.
  2. Aktiver jevn rulling: Muliggjør kontinuerlig rulling av elementer i presentasjonen for en sømløs og visuelt tiltalende opplevelse.
  3. Automatisk lysbilde: Automatisk overgang mellom bilder uten brukerinndata.
  4. Vis autoavspillingsfremdrift: Viser en fremdriftsindikator mens autospill er aktiv for bedre oversikt.
  5. Forsinkelse for automatisk avspilling: Angi tiden mellom lysbilder når autoavspilling er aktiv. Du kan velge en verdi mellom 1 og 10 sekunder.
  6. Karusellsløyfe: Aktiver dette for å gjengi karusellen i det uendelige, slik at du kan spille av kontinuerlig.
  7. Karusellkontroller: Med innstillingen Karusellkontroller kan du velge hvordan brukere navigerer gjennom lysbilder, med alternativer som piler (nederst i midten, øverst til høyre, nederst til høyre), prikker eller ingen kontroller i det hele tatt.


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).

Enhetsspesifikk kolonneoppsett basert på Studio-innstillinger:


Justering

  1. Rette inn bildet horisontalt i Team-delen. Du kan angi at de skal være venstrejustert, høyrejustert eller midtstilt.
  2. Rette inn Teksten horisontalt i Team-delen. Du kan angi at de skal være venstrejustert, høyrejustert eller midtstilt.
  3. Rette inn innholdet vertikalt i teamlisten. Du kan angi at de skal være justert øverst, i midten og nederst.
  4. Velg Innholdsrekkefølge dvs. bildene av listeelementene som skal vises først, eller den tilhørende teksten.


Seksjonsoverskrift

  1. Juster horisontalt seksjonens overskriftstekst. Du kan sette den til Venstre, Senter og Høyre.
  2. Aktiver/deaktiver divider mellom seksjonsoverskriften og seksjonsinnholdet.
  3. Sett tykkelse på skilleveggen (i px).
  4. Spesifiser Skillefarge fra fargevelgeren.
  5. Velg en Divider stil fra rullegardinmenyen.


Tekststørrelse

  1. Klikk på Endre tekststil knappen for å besøke Design 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 Tekniske beskrivelser skriftstil for listeelementene i seksjonen.
  5. Aktiver dette alternativet for å animer alle tall til stede i Tittel og Undertittel felt. Når de er slått på, vises numeriske verdier med en dynamisk telleanimasjon, noe som gjør dem mer visuelt engasjerende.


Mellomrom

  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 %).


Seksjonsoverskrift

  1. Juster horisontalt seksjonens overskriftstekst. Du kan sette den til Venstre, Senter og Høyre.
  2. Aktiver/deaktiver divider mellom seksjonsoverskriften og seksjonsinnholdet.
  3. Sett tykkelse på skilleveggen (i px).
  4. Spesifiser Skillefarge fra fargevelgeren.
  5. Velg en Divider stil fra rullegardinmenyen.


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

Ved å bruke hjørneradiusfeltet kan du opprette forskjellige former for listeelementbilder. Hvis du angir 500 piksler 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.


Formmaske

  1. Formmaske: Aktiver denne veksleknappen for å bruke en formmaske på bildene i Teams-delen. Når den er aktivert, vil den valgte formen visuelt klippe bildet inn i det skjemaet.
  2. Velg form: Velg mellom forskjellige forhåndsdefinerte former for å bruke på bildene dine. Dette lar deg stilisere innholdet ditt kreativt ved å vise bilder i unike former som avrundet, diamant, dråpe, etc.
  3. Tøye ut: Aktiver dette alternativet for å strekke den valgte formen slik at den passer bedre til bildebeholderen. Dette sikrer at formen fyller den tilgjengelige plassen proporsjonalt, og forbedrer visuell justering på tvers av forskjellige skjermstørrelser.

Merknader

  • Strekk-alternativet er layoutavhengig – Det kan hende det ikke vises under visse oppsett. På oppsett der tekst som tittel eller undertekst vises over bildet, vises Hele Shape Mask-alternativet er kanskje ikke tilgjengelig.
  • Stretch-innstillingen avhenger av flere faktorer - gjelder også bildestørrelse, innrettingog beskjæringsinnstillinger definert under kategorien Stil.
  • Hvis Bildebeskjæring er satt til Original, vil bildets faktiske dimensjoner avgjøre om det blir strukket vertikalt eller horisontalt.


Bilde Hover

  1. Velg Bilde Hover farge å være aksentfarge eller å være spesifisert. Hvis du har valgt aksentfarge, spesifiser deretter opacity. Du kan spesifisere aksentfargen for hvert element fra Rediger element panel.
  2. Hvis du har valgt angi farge alternativet og deretter angi Overleggsfarge og opasitet.
  3. Sett Overlegg tekstfarge som dukker opp på pekeren.
  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 svever over dem.
  6. Velg om du vil tillate overgang av bilder på sveve eller ikke.
  7. Velg en Overgangsstil for sveveovergang. Tilgjengelige alternativer er Fade og Flip.


Bildekant

  1. Aktiver / deaktiver kantlinje rundt bildene ved å bytte bryteren.
  2. Velg å ha en felles grense på alle sider av bildene, eller du kan spesifisere grenser separat for hver side.
  3. Spesifiser bredde av grensen. Hvis den er satt til 0, vil ikke rammen vises. Du har også muligheten til å angi kantbredden individuelt for hver side av bildet.
  4. Velg Grensefarge fra fargevelgeren.
  5. Velg en foretrukket Border Style fra rullegardinmenyen.
  6. Bestem kantbredde for mobil enheter, justere den med bredden valgt for skrivebordet.


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.


Knapper og lenker

  • Se hvordan å administrere stylingen av Knapper og lenker.


Finner du ikke det du leter etter?

Ta kontakt med en Pixpa-ekspert.

Pixpa Studio har nettopp blitt oppdatert. Vi oppdaterer for tiden alle skjermbilder fra hjelpeartikler.