Team är mycket viktiga för framgången för alla organisationer. De sammanför individer med olika kompetens, expertis och perspektiv, vilket skapar en dynamisk miljö där mål kan uppnås.
Med hjälp av Pixpas teamsektion kan du visa profiler och foton för dina teammedlemmar, tillsammans med deras respektive roller och ansvarsområden.
I den här artikeln:
Lägg till teamsektionen på sidan
- För att lägga till ett avsnitt måste du lägga till en sida till din webbplats först.
- På din sida, Klicka på blå + ikon att lägga till en Nytt avsnitt.
- Du kommer nu att se sektionskategorier på vänstra sidan.
- Bläddra igenom Team (1) och klicka på den. Nu dyker en skärm upp där du kan välja mellan olika layouter av lagsektionen (2).
- Välj valfri sektionslayout och klicka på den för att lägga till den på din sida.
Lägg till och redigera listobjekt
Lägg till ett listobjekt
- Klicka på Redigera team (1) för att öppna panelen med listobjekt.
- Klicka på Lägg till objekt (2) för att lägga till ett nytt listobjekt.
- Du kan välja att Dkopiera eller ta bort (3) listobjekten.
Redigera listobjekt
Klicka på listobjektet som du vill redigera. Det kommer att öppna de särskilda redigeringsalternativen för listobjekt.
Härifrån kan du:
- Ladda upp/ta bort primär och sekundär bild (1)
Du kan ladda upp en Sekundär bild tillsammans med Primär bild för varje listobjekt. När en användare håller muspekaren över objektet kommer den sekundära bilden att visas och ersätter den primära bilden. Dessutom kan du ställa in Bild Accent Färg, som kommer att visas när du svävar på bilden. - Lägg till Titel Lagring, Undertext Lagringoch Beskrivning (4) i listpunkten.
- Du kanske inte hittar alternativet för undertext och beskrivning i vissa listobjekt beroende på vilken layout du väljer.
Kontrollera innan du lägger till beskrivningen detta artikel.
5. Åtgärd vid klick
Du kan anpassa klickbeteendet för enskilda objekt i Team avsnitt. Nedan finns de tillgängliga alternativen:
- Gå till en länk
Om du väljer detta alternativ öppnas Länkbyggare, så att du kan lägga till en hyperlänk till detta objekt. Länken kan leda användare till en annan sida på din webbplats eller en extern URL. Veta mer handla om Länkbyggare. - Öppna i Lightbox
Detta alternativ visar objektet i en förstoring Lightbox visa när du klickar. I det här läget är Texta och BESKRIVNING associerat med objektet kommer inte att visas i rutnätsvyn men kommer att vara synligt i ljusbordsläge. - Ingen åtgärd
Välj det här alternativet för att göra objektet oklickbart. När det är markerat kommer det inte att utlösa någon åtgärd om du klickar på objektet.
6. Öppna länk i nytt fönster: Ställ in länken så att den öppnas i en ny flik eller i samma flik. Detta kommer bara att synas när Gå till en länk alternativet är valt under Åtgärd vid klick meny.
7. Knappar och länkar: Lägg till vilken typ av Länk till listobjektet. Du kan lägga till en knapp/bildlänk/social ikon/textlänk. Läs mer.
8. Åsidosätt kortstil
Du kan åsidosätta de globala kortstilsinställningarna från sektionens Stilinställningar och anpassa varje objekts kort individuellt i avsnittet Bildlista. Detta låter dig tillämpa unika stilar på olika listobjekt för bättre anpassning.
Läs mer alternativet om kort i dynamiskt avsnitt.
9. Spara: När du har gjort anpassningarna sparar du ändringarna.
För att anpassa kort för varje objekt separat måste du först aktivera Kortet alternativet från Style Settings.
Sekvenseringslistobjekt
Du kan enkelt ändra ordningsföljden för listobjekten med Dra och släpp dem. Se sekvensering av Teams Item List i aktion:
Hantera element i teamsektionen
Lagsektionen innehåller en Fliken Element som gör att du enkelt kan hantera synligheten för olika element inom sektionen.
Med hjälp av enkla vippbrytare kan du aktivera eller inaktivera specifika element utan att behöva ta bort eller ändra själva elementen.
- Klicka på Elements (1) flik.
- När du har gjort ändringarna, tryck på Spara (2) -knapp.
Sektionsalternativ
- Visa rubrikAktivera eller inaktivera synligheten för rubriken för teamsektionen.
- Visa knappar: Styr om knappar ska visas på sektionsnivå.
Objekt Alternativ
- Visa bild: Växla synligheten för bilderna.
- Visa Titel: Kontrollera om titeln ska visas.
- Visa undertext: Aktivera eller inaktivera undertexter.
- Visa beskrivning: Hantera synligheten för artikelbeskrivningar.
- Visa knappar: Bestäm om knappar för enskilda objekt ska visas.
Sektionslayout
-
- Klicka på Redigera team knappen för att öppna sektionsredigeringspanelen och välja Layout fliken.
-
- Härifrån kan du enkelt ändra layouten för avsnittet även efter att du lagt till det på sidan.
När du ändrar layouten ser du de sektionsrelaterade layouterna överst.
Förutom dessa har du också möjlighet att välja en layout från andra sektioner under Fler layouter rubrik.
Sektion för stylinglag
Du kan anpassa olika aspekter av Teams-sektionen med olika stilalternativ. För att navigera till stilalternativen, klicka på Redigera team (1) -knapp.
- Välj Stil (2) flik.
- Efter att ha gjort anpassningar, Spara (3) ändringarna.
Du kommer att ha flera stilalternativ för avsnittet:
- Visningsalternativ
- Mobil display
- Justering
- Textstorlek
- Förband
- Avsnittsrubrik
- Bildalternativ
- Formmask
- Bildsvävningsalternativ
- Bildkant
- Kort
- skugga
- Knappar och länkar
Visningsalternativ
- Välj att Visa objekt in rader och kolumner / karusell / monter
- Om du har valt rader och kolumner alternativ kommer listobjekten att ordnas i rader och kolumner. I det här fallet måste du ange antalet rader och kolumner.
- Om du har valt Karusellen alternativ kommer listobjekten att presenteras som ett bildspel. Veta mer.
-
Demonstrera erbjuder en elegant och interaktiv karusellliknande layout för att visa dina bilder en i taget med smidiga övergångar och effekter. Denna layout ger en modern och uppslukande upplevelse till din webbplats. Läs mer.
- Ställ in Antal kolumner för bildlistan. Du kan välja mellan 1 till 10 kolumner.
- ange Mellanrum mellan kolumner av listobjekten.
- ange Mellanslag mellan rader av listobjekten.
Om karusellalternativet är valt i steg 1, kommer du att se följande ytterligare alternativ:
- Aktivera mjuk rullning: Möjliggör kontinuerlig rullning av objekt i karusellen för en sömlös och visuellt tilltalande upplevelse.
- Auto Slide: Roterar automatiskt genom bilder utan användarinteraktion.
- Visa förlopp för automatisk uppspelning: Visar en förloppsindikator medan autoplay är aktivt för bättre synlighet.
- Autoplay Delay: Ställer in tidsintervallet mellan varje bildövergång när automatisk uppspelning är aktiverad.
- Karusellslinga: Möjliggör kontinuerlig looping av diabilder, så att karusellen startar om sömlöst efter den sista bilden.
- Karusellkontroller: Välj den NavigationskontrollerDu kan välja mellan Inga kontroller, Pilar – Nederst i mitten/Överst till höger/Nederst till höger, Chevron, Punkter och Horisontell rullning.
- Tona kanter: Applicera en subtil blekningseffekt på karusellens kanter. Det förbättrar användarupplevelsen genom att blanda bilder mjukt när de går in i eller ur vyn.
Om alternativet Visa upp har valts i steg 1 ser du följande ytterligare alternativ:
- Effekter: Välj mellan fem animationseffekter: Tona, Vänd, Kort, Coverflow (Lutad) eller Coverflow (Platt) för att styra hur bilder övergår.
- Aktivera smidig rullning: Möjliggör kontinuerlig rullning av objekt i presentationen för en sömlös och visuellt tilltalande upplevelse.
- Automatisk glidning: Automatiskt växla mellan bilder utan användarinmatning.
- Visa autouppspelningsförlopp: Visar en förloppsindikator medan autouppspelning är aktiv för bättre synlighet.
- Fördröjning av autouppspelning: Ställ in tiden mellan bilderna när autouppspelning är aktiv. Du kan välja ett värde mellan 1 och 10 sekunder.
- Karusellslinga: Aktivera detta för att loopa karusellen oändligt, vilket möjliggör kontinuerlig uppspelning.
- Karusellkontroller: Med inställningen Karusellkontroller kan du välja hur användare navigerar genom bilderna, med alternativ som pilar (längst ner i mitten, uppe till höger, nere till höger), punkter eller inga kontroller alls.
Mobil display
- Ställ in antalet Rutnätkolumner för mobila enheter. Du kan ställa in den på maximalt 3 kolumner.
- Definiera Förband mellan rutnät (i pixlar).
Enhetsspecifik kolumnlayout baserat på Studioinställningar:
Justering
- Justera bilden horisontellt i Team-sektionen. Du kan ställa in dem så att de är vänster-, höger- eller centrerade.
- Justera texten horisontellt i Team-sektionen. Du kan ställa in dem så att de är vänster-, höger- eller centrerade.
- Justera innehållet vertikalt i Teamlistan. Du kan ställa in dem så att de är justerade upptill, i mitten och nedtill.
- Välj Innehållsordning dvs bilderna av listobjekten som ska visas först eller tillhörande text.
Avsnittsrubrik
- Justera horisontellt avsnittsrubrikens text. Du kan ställa in den på vänster, mitten och höger.
- Aktivera/inaktivera divider mellan avsnittsrubrik och avsnittsinnehåll.
- Ställ in avdelarens tjocklek (i px).
- ange Avdelningsfärg från färgväljaren.
- Välj ett Divider stil från rullgardinsmenyn.
Textstorlek
- Klicka på Ändra textstil knappen för att besöka Design avsnitt och hantera dina teckenstorlekar och stilar.
- Ställ in Titel teckensnittsstil för listobjekten i avsnittet.
- Ställ in Texta teckensnittsstil för listobjekten i avsnittet.
- Ställ in standard BESKRIVNING teckensnittsstil för listobjekten i avsnittet.
- Aktivera det här alternativet för att animera valfria siffror närvarande i Titel och Texta fält. När de är aktiverade visas numeriska värden med en dynamisk räkne-animation, vilket gör dem mer visuellt engagerande.
Förband
- ange bild~~POS=TRUNC för listobjekt.
- ange Innehållsbredd för listobjekten.
- ange Utrymme under avsnittsrubrik i px.
- ange Utrymme under bilder av listposterna (i %).
- ange Utrymme under titlarna av listposterna (i %).
- ange Mellanslag under undertexterna av listposterna (i %).
Avsnittsrubrik
- Justera horisontellt avsnittsrubrikens text. Du kan ställa in den på vänster, mitten och höger.
- Aktivera/inaktivera divider mellan avsnittsrubrik och avsnittsinnehåll.
- Ställ in avdelarens tjocklek (i px).
- ange Avdelningsfärg från färgväljaren.
- Välj ett Divider stil från rullgardinsmenyn.
Bilder
- Välj Image Crop för listobjekten. Du kan ställa in bilderna som fyrkantig, cirkel, horisontell, stående och original.
- Välj att ha en gemensam hörnradie eller annan hörnradie för varje sida av listobjekten och ange ett nummer (i px) för Celler radie av listobjektets bilder. Veta mer.
Använda hörnradie kan du skapa olika former av listobjektbilder. Om du anger 500 px här, kommer bilderna att visas i en cirkelform.
- Om du har valt delade hörn kan du ställa in olika hörnradie för varje hörn.
Formmask
- Formmask: Aktivera den här växlingsknappen för att tillämpa en formmask på bilderna i Teams-sektionen. När den är aktiverad kommer den valda formen visuellt att klippa bilden till det formuläret.
- Välj form: Välj bland olika fördefinierade former att tillämpa på dina bilder. Detta låter dig stilisera ditt innehåll på ett kreativt sätt genom att visa bilder i unika former som rundad, diamant, droppe, etc.
- Sträcka: Aktivera det här alternativet för att sträcka ut den valda formen så att den passar bildbehållaren bättre. Detta säkerställer att formen fyller det tillgängliga utrymmet proportionellt, vilket förbättrar visuell inriktning över olika skärmstorlekar.
- Alternativet Stretch är layoutberoende – Det kanske inte visas under vissa layouter. På layouter där text som titel eller undertext visas över bilden, visas Hela Shape Mask-alternativet kanske inte är tillgängligt.
- Stretch-inställningen beror på flera faktorer - Inklusive bildstorlek, uppriktningoch beskärningsinställningar definieras under fliken Stil.
- Om Bildbeskärning är inställd på Original, avgör bildens faktiska mått om den sträcks vertikalt eller horisontellt.
Bild Hover
- Välj Bild Hover Color att vara accentfärg eller att vara specificerade. Om du har valt accentfärg, ange sedan opacitet. Du kan ange accentfärgen för varje objekt från Redigera artikel panelen.
- Om du har valt ange färg alternativet ställ sedan in Överlagringsfärg och opacitet.
- Ställ in Överlagringstextfärg som dyker upp på svävaren.
- Välj att Animera listobjektets bilder vid muspekaren genom att klicka på Ja. Kontrollera den här funktionen på en livesida.
- Välj en Animation stil för bilder när markören svävar över dem.
- Välj om du vill tillåta övergång av bilder på sväv eller inte.
- Välj en Övergångsstil för svävningsövergång. Tillgängliga alternativ är Fade och Flip.
Bildkant
- Aktivera/inaktivera kantlinje runt bilderna genom att växla reglaget.
- Välj att ha en gemensam gräns på alla sidor av bilder eller så kan du ange gränser separat för varje sida.
- ange bredd av gränsen. Om den är inställd på 0, kommer gränsen inte att visas. Du har också möjlighet att ställa in rambredden individuellt för varje sida av bilden.
- Välj Gräns färg från färgväljaren.
- Välj en föredragen Gränsstil från rullgardinsmenyn.
- Bestäm kantbredd för mobil enheter, justera den med den bredd som valts för skrivbordet.
Kort
- Se hur att hantera kort.
skugga
- Skärmar – Välj att visa skuggan bakom listobjekten alltid eller endast när du håller muspekaren.
- Stil – Välj bland befintliga förinställningar eller skapa en anpassad skugga.
Om du har valt alternativet Anpassat, besök detta Box Shadow Generator för att skapa en anpassad skugga. Slutligen, kopiera och klistra in box skugga CSS. - Om du har valt förinställningsalternativet, då Välj Shadow Styles från rullgardinsmenyn.
Knappar och länkar
- Se hur att hantera stylingen av Knappar och länkar.
