EN
Søger...

Profil sektion

Profilsektionen er den perfekte måde at introducere folkene bag dit arbejde. Uanset om du er ved at opbygge en en om-side, en teamudstilling eller en biografi-sektion, dette layout giver dig mulighed for at præsentere individer med elegance og klarhed.

Fremhæv hver persons foto, navn, rolle og historie i et format, der føles personligt og engagerende. Fra kreative teams og samarbejdspartnere til talere, mentorer eller bidragydere hjælper profilsektionen dig med at skabe dybere forbindelser med dit publikum ved at sætte ansigter på dit brand eller projekt.

Med enkle tilpasningsmuligheder og et rent, responsivt design gør profilsektionen det nemt at præsentere de personer, der gør dit arbejde muligt.

I denne artikel:

  1. Hvad er profilsektionen?
  2. Tilføj profilsektion
  3. Tilføj og rediger listeelementer
  4. Rækkefølge listeelementer
  5. Sletning af listeelementer
  6. Administrer elementer
  7. Ændring af sektionslayout
  8. Stilmuligheder

Profil sektion

En profilsektion er en samling af individuelle profiler, hvor du kan tilføje et billede, navn, rolle eller betegnelse samt en kort beskrivelse. Du kan også tilføje et link eller en knap for at dirigere besøgende til detaljerede sider eller eksterne links relateret til hver profil.

Tilføj profilsektion

  • Et afsnit kan tilføjes til en side. Du kan enten tilføje et afsnit til en allerede eksisterende side eller oprette en ny side på din hjemmeside.
  • På din side, klik på blåt + ikon at tilføje en Ny afdeling til din side.

  • Du vil nu se sektionskategorier på venstre side.
  • Vælg den Profil og biolinks (1) kategori og klik på Profil fane (2), hvor du kan vælge imellem forskellige layouts af Profil (3) afsnit.

Bemærk

  1. Du kan styre sektionsbredden fra indstillinger sektion og indholdsbredden fra indholdsstil.
  2. Den ideelle billedstørrelse, som du skal uploade i dette afsnit, afhænger af antallet af kolonner. Vide mere.
  3. Hold titlerne, underteksterne og beskrivelserne korte og skarpe.
  4. I beskrivelsesfeltet skal du trykke på Indtast knappen for at give et linjeskift og Skift + Enter knappen for at starte fra den næste linje.

Tilføj og rediger listeelementer

Tilføj listeelement

Når du har tilføjet afsnittet:

  • Klik på Rediger billedliste (1) knappen for at åbne panelet med listeelementer.

  • Klik på Tilføj vare (2) knappen for at tilføje et nyt listeelement.
  • Du kan vælge at Dopliker eller slet (3) listepunkterne.

Rediger listeelement

Klik på det listeelement, du vil redigere. Det åbner de særlige redigeringsmuligheder for listeelementer.

Herfra kan du:

  • Upload/fjern primært og sekundært billede (1)
    Du kan uploade en Sekundært billede sammen med Primært billede for hvert listepunkt. Når en bruger holder markøren over elementet, vil det sekundære billede blive vist og erstatte det primære billede. Derudover kan du indstille Billedaccentfarve, som vil blive vist ved billedsvævning.
  • Føj til Emne (2), Undertekst (3)og Beskrivelse (4) på ​​listepunktet.
  • Du finder muligvis ikke muligheden for undertekst og beskrivelse i bestemte listeelementer afhængigt af det layout, du vælger.
    Inden du tilføjer beskrivelsen, skal du kontrollere denne artiklen.

5. Handling ved klik

Du kan tilpasse klikadfærden for individuelle elementer i Profil afsnit. Nedenfor er de tilgængelige muligheder:

  • Gå til et link
    Hvis du vælger denne indstilling, åbnes Link Builder, så du kan tilføje et hyperlink til dette element. Linket kan dirigere brugere til en anden side på dit websted eller en ekstern URL. Vide mere om Link Builder.
  • Åbn i Lightbox
    Denne indstilling viser elementet i en forstørret Lysbord se, når der klikkes. I denne tilstand er Subtitle og Beskrivelse knyttet til elementet vises ikke i gittervisningen, men vil være synligt i lysbokstilstand.
  • Ingen handling
    Vælg denne mulighed for at gøre elementet uklikbart. Når det er valgt, vil et klik på elementet ikke udløse nogen handling.

6. Åbn link i nyt vindue: Indstil linket til at åbne i en ny fane eller i samme fane. Dette vil kun være synligt når Gå til et link mulighed er valgt under Handling ved klik menu.

7. Knapper og ikoner: Tilføj enhver form for Link til listepunktet. Du kan tilføje et knap/billedlink/socialt ikon/tekstlink. Lær mere.

8. Tilsidesættelse af kortstil

Du kan tilsidesætte de globale kortstilindstillinger fra sektionens Stilindstillinger og tilpas hvert elements kort individuelt i profilsektionen. Dette giver dig mulighed for at anvende unikke stilarter på forskellige listeelementer for bedre tilpasning.

Lær mere om kort mulighed i dynamisk sektion.

9. Tilsidesættelse af formstil

Brug indstillingen Tilsidesæt til at tildele en forskellig form til hvert billede individuelt i profilsektionen, hvilket giver dig større kontrol over den visuelle stil for hvert element. Lær mere om Shape Mask.

10. Gem: Når du har foretaget tilpasningerne, skal du gemme ændringerne.

Bemærk

  • Aktiver Kort mulighed fra Stilindstillinger at tilsidesætte og tilpasse kort for individuelle varer.
  • Aktiver Form maske mulighed fra Stilindstillinger at style former separat for hvert element.

Se redigering af et billedlisteelement i aktion:

Sekvenslisteelementer

  • Du kan nemt trække og slippe listeelementerne for at ændre rækkefølgen.

Se rækkefølge af billedlisteelementer i aktion: 

Slet et listeelement

Når du har tilføjet et listeelement, kan du redigere og slette det.

  • Klik på Slette ikonet ved siden af ​​billedlisteelementet.
  • Tne, klik på Slette knappen i bekræftelses-popup'en.
  • Endelig spare dine ændringer.

Se sletning af et billedlisteelement i aktion: 

Bemærk

Listeelementer, når de er slettet, kan ikke gendannes.

Administrer elementer i sektionen Profil

Billedlisteafsnittet indeholder en Fanen Elementer der giver dig mulighed for nemt at administrere synligheden af ​​forskellige elementer i sektionen. Ved hjælp af simple vippekontakter kan du aktivere eller deaktivere specifikke elementer uden at skulle slette eller ændre selve elementerne.

  • Klik på Rediger billedliste (1) knap.

  • Vælg den Elements (2) faneblad.
  • Når du har foretaget ændringerne, skal du trykke på Gem (3) knap.

Sektionsmuligheder

  1. Vis overskrift: Aktiver eller deaktiver synligheden af ​​overskriften for afsnittet Billedliste.
  2. Vis knapper: Kontroller, om knapper skal vises på sektionsniveau.

Indstillinger for varer

  1. Vis billede: Skift synligheden af ​​billederne.
  2. Vis Titel: Kontroller, om titlen skal vises.
  3. Vis undertekst: Aktiver eller deaktiver undertekster.
  4. Vis beskrivelse: Administrer synligheden af ​​varebeskrivelser.
  5. Vis knapper: Beslut om knapper til individuelle elementer skal vises.

Sektionslayout

  • Klik på Rediger billedliste (1) knap.

  • Vælg den Layout (2) faneblad.
  • Type et layout til din sektion og Gem (3) ændringerne.

 

Pro Tip

For at oprette en sektion i fuld bredde / fanelistesektion skal du vælge ethvert layout, der spænder fra 25 til 29.

Noter

  • Du kan nemt tilføje et fanelistelayout til din side.
  • Du har mulighed for at vælge mellem et layout med horisontale faner/lodrette faner.
  • Det hjælper med at lave et sammenligningsbaseret afsnit.

Style dit afsnit

  • Klik på Rediger billedliste (1) .

  • Vælg den Stil (2) fane.
  • Skift stilen for sektionselementerne og Gem (3) dine ændringer.

Du vil have flere stilmuligheder for sektionen: 

  1. Display Options
  2. Mobil skærm
  3. Justering
  4. Tekststørrelse
  5. Mellemrum
  6. Sektionsoverskrift
  7. Billedindstillinger
  8. Form maske
  9. Indstillinger for billedhover
  10. Billedkant
  11. Kortindstillinger
  12. Skyggeindstillinger
  13. Knapper og links

Skærm 

  1. Vælg at Vis varer in rækker og kolonner or karrusel 
    • Hvis du har valgt rækker og kolonner valgmulighed, vil listeelementerne blive arrangeret i rækker og kolonner. I dette tilfælde skal du angive antallet af rækker og kolonner.
    • Hvis du har valgt karrusel valgmulighed, vil listeelementerne blive præsenteret som et diasshow. Vide mere.
  2. Indstil Antal kolonner for billedlisten. Du kan vælge mellem 1 til 10 kolonner.
  3. Angiv Mellemrum mellem kolonner af listepunkterne.
  4. Angiv Mellemrum mellem rækker af listepunkterne.

Hvis indstillingen Karrusel er valgt i trin 1, vil du se følgende yderligere muligheder:

  1. Aktiver jævn rulning: Muliggør kontinuerlig rulning af elementer i karrusellen for en problemfri og visuelt tiltalende oplevelse.
  2. Auto Slide: Roterer automatisk gennem dias uden brugerinteraktion.
  3. Vis autoplay-fremskridt: Viser en statusindikator, mens autoplay er aktiv for bedre synlighed.
  4. Autoplay forsinkelse: Indstiller tidsintervallet mellem hver diasovergang, når autoplay er aktiveret.
  5. Karrusel loop: Muliggør kontinuerlig sløjfe af dias, så karrusellen genstarter problemfrit efter det sidste dias.
  6. Karrusel kontrol: Vælg Navigationskontrol. Du kan vælge mellem Ingen kontrol, pile – nederst i midten/øverst til højre/nederst til højre, Chevron, Prikker og Vandret rulle.
  7. Fade kanter: Påfør en subtil fading-effekt på karrusellens kanter. Det forbedrer brugeroplevelsen ved at blande billeder blødt, når de kommer ind eller ud af visningen.

Mobil skærm

  1. Indstil antallet af Gitterkolonner til mobile enheder. Du kan indstille den til maksimalt 3 kolonner.
  2. Definer Mellemrum mellem gitter (i pixels).

Enhedsspecifik kolonnelayout baseret på Studio-indstillinger:

Justering

  1. Juster Indholdet vandret i billedlisten. Du kan indstille dem til at være venstre-, højre- eller centerjusterede.
  2. Juster indholdet lodret i billedlisten. Du kan indstille dem til at være top-, center- og bundjusterede.
  3. Vælg den Indholdsrækkefølge dvs. billederne af de listeelementer, der skal vises først, eller den tilhørende tekst.

Tekststørrelse

  1. Klik på Skift tekststil knappen for at besøge Design afsnit og administrere dine skriftstørrelser og stilarter. 
  2. Indstil Emne skrifttype for sektionens listeelementer.
  3. Indstil Subtitle skrifttype for sektionens listeelementer.
  4. Indstil standard Beskrivelse skrifttype for sektionens listeelementer.
  5. Aktiver denne indstilling for at animer alle tal til stede i Emne og Subtitle felter. Når de er aktiveret, vises numeriske værdier med en dynamisk optællingsanimation, hvilket gør dem mere visuelt engagerende.

Mellemrum

  1. Angiv Breddebillede for listepunkter.
  2. Angiv Indholdsbredde for listepunkterne.
  3. Angiv Plads under sektionsoverskrift i px.
  4. Angiv Plads under billederne af listepunkterne (i %).
  5. Angiv Plads under titlerne af listepunkterne (i %).
  6. Angiv Plads under underteksterne af listepunkterne (i %).

Sektionsoverskrift

  1. Juster vandret sektionens overskriftstekst. Du kan indstille den til Venstre, Center og Højre.
  2. Aktiver/deaktiver Divider mellem afsnitsoverskriften og afsnitsindholdet.
  3. Indstil tykkelse af skillevæg (i px).
  4. Angiv Opdelerfarve fra farvevælgeren.
  5. Vælg et Divider stil fra dropdown.
  6. Indstil Overskriftsbredde for at definere, hvor bred sektionstitlen vises, startende fra minimum 50 %.

Billeder 

  1. Vælg den Imagisk afgrøde for listepunkterne. Du kan indstille billederne som Firkantet, Cirkel, Vandret, Portræt og Original.
  2. Vælg at have en fælles hjørneradius eller en anden hjørneradius for hver side af listeelementerne, og indstil et tal (i px) for Corner Radius af listeelementbillederne. Vide mere.

Tip

Brug af hjørneradius felt, kan du oprette forskellige former for listeelementbilleder. Hvis du angiver 500 px her, vil billederne blive vist i en cirkelform.

  • Hvis du har valgt opdelte hjørner, kan du indstille forskellige hjørneradius for hvert hjørne.

Form maske

  1. Form maske: Aktiver denne kontakt for at anvende en formmaske på billederne i afsnittet Billedliste. Når den er aktiveret, vil den valgte form visuelt klippe billedet ind i denne formular.
  2. Vælg form: Vælg mellem forskellige foruddefinerede former til at anvende på dine billeder. Dette giver dig mulighed for kreativt at stilisere dit indhold ved at vise billeder i unikke former som afrundet, diamant, drop osv.
  3. Strække: Aktiver denne mulighed for at strække den valgte form, så den passer bedre til billedbeholderen. Dette sikrer, at formen fylder det tilgængelige rum proportionalt, hvilket forbedrer den visuelle justering på tværs af forskellige skærmstørrelser.

Noter

  • Indstillingen Stræk er layoutafhængig – Det vises muligvis ikke under visse layouts. På layouts, hvor tekst som titel eller undertekst vises over billedet, vises Hele Shape Mask-indstillingen er muligvis ikke tilgængelig.
  • Stræk-indstillingen afhænger af flere faktorer - inklusive billedstørrelse, tilpasningog beskæringsindstillinger defineret under fanen Stil.
  • Hvis Billedbeskæring er indstillet til Original, vil billedets faktiske dimensioner afgøre, om det bliver strakt lodret eller vandret.

På Image Hover 

  1. Vælg den Billede Hover Farve at være accentfarve eller at være specificeret. Hvis du har valgt accentfarve, og angiv derefter opacitet. Du kan angive accentfarven for hvert element fra Rediger element panel.
  2. Hvis du har valgt angiv farve indstilling og derefter indstille Overlay farve og opacitet.
  3. Indstil Overlay tekstfarve der dukker op på svæven.
  4. Vælg at Animer listeelementbillederne ved at trykke på Ja. Tjek denne funktion på en live-side.
  5. Vælg en Animation stil for billeder, når markøren svæver over dem.
  6. Vælg, om du vil tillade overgang af billeder på svæv eller ej.
  7. Vælg en Overgangsstil til svæveovergang. Tilgængelige muligheder er Fade og Flip.

Billedkant

  1. Aktiver/deaktiver kant rundt om billederne ved at skifte til/fra.
  2. Vælg at have en fælles grænse på alle sider af billeder, eller du kan angive grænser separat for hver side.
  3. Angiv bredde af grænsen. Hvis den er sat til 0, vises grænsen ikke. Du har også mulighed for at indstille kantbredden individuelt for hver side af billedet.
  4. Vælg Border Color fra farvevælgeren.
  5. Vælg en foretrukken Border Style fra dropdown.
  6. Bestem kantbredde til mobil enheder, justere den med bredden valgt til skrivebordet.

Kort

Shadow

  1. Skærm – Vælg at vise skyggen bag listeelementerne altid eller kun ved at svæve.
  2. stil – Vælg mellem eksisterende forudindstillinger eller opret en brugerdefineret skygge.
    Hvis du har valgt Custom-indstillingen, så besøg denne Box Shadow Generator for at skabe en brugerdefineret skygge. Til sidst skal du kopiere og indsætte box shadow CSS.
  3. Hvis du har valgt forudindstillinger, så Vælg Shadow Styles fra dropdown.

Knapper og links

  1. Se hvordan at styre stylingen af Knapper og links.
  2. Gem alle stilændringer.

Tagged:

Kan du ikke finde det, du leder efter?

Kom i kontakt med en Pixpa-ekspert.

Kontakt os