EN
Zoeken...

Sectie met afbeeldingenlijst

Gebruik het gedeelte Afbeeldingenlijst als u een reeks afbeeldingen en relevante tekst wilt weergeven.

Met behulp van deze sectie kunt u eenvoudig verschillende pagina's binnen de website koppelen of links toevoegen waar u ook een afbeelding en beschrijving voor elke link wilt toevoegen.

In dit artikel:

  1. Wat is een afbeeldingenlijst?
  2. Een sectie Afbeeldingenlijst toevoegen aan de pagina
  3. Lijstitems toevoegen en bewerken
  4. Sequentie van lijstitems
  5. Lijstitems verwijderen
  6. Sectie-indeling wijzigen
  7. Stijlopties
  8. De carrouselstijl
  9. Live voorbeeld

Afbeeldingslijst

  • Een afbeeldingenlijst is een verzameling afbeeldingen waaraan u een beschrijving voor de afbeelding kunt toevoegen en een link of knop kunt toevoegen om deze te verbinden met een andere pagina op de website of een andere link.

Voeg de sectie Afbeeldingenlijst toe

  • Aan een pagina kan een sectie worden toegevoegd. U kunt een sectie toevoegen aan een reeds bestaande pagina of maak een nieuwe pagina aan binnen uw website.
  • Op jouw pagina, Klik op de blauw + icoon om een ​​toe te voegen Nieuwe sectie naar uw pagina.

  • U ziet nu de sectie categorieën aan de linkerkant.
  • Kies de Lijst (1) categorie en klik op de Afbeeldingslijst tabblad (2) waar u uit kunt kiezen verschillende indelingen van de afbeeldingenlijst (3).

  • Kies een sectielay-out en klik erop om deze aan uw pagina toe te voegen.
Opmerking:

  1. U kunt de sectiebreedte beheren vanuit de sectie instellingen en de inhoudsbreedte van de inhoud stijl.
  2. De ideale afbeeldingsgrootte die u in deze sectie moet uploaden, is afhankelijk van het aantal kolommen. Meer weten.
  3. Houd de titels, ondertitels en beschrijvingen kort en duidelijk.
  4. Klik in het beschrijvingsveld op de Enter knop om een ​​regeleinde te geven en de Shift + Enter knop om vanaf de volgende regel te beginnen.

Lijstitems toevoegen en bewerken

Lijstitem toevoegen

Nadat u de sectie hebt toegevoegd:

  • Klik op de Bewerk de afbeeldingenlijst (1) om het Lijstitempaneel te openen.

  • Klik op de Artikel toevoegen (2) knop om een ​​nieuw lijstitem toe te voegen.
  • U kunt ervoor kiezen Ddupliceren of verwijderen (3) de lijstitems.

Lijstitem bewerken

Klik op het lijstitem dat u wilt bewerken. Het opent de specifieke bewerkingsopties voor lijstitems.

Vanaf hier kunt u:

  • Afbeelding uploaden/verwijderen (1) voor het lijstitem. U kunt ook de Accentkleur afbeelding vanaf hier, die wordt weergegeven bij het aanwijzen van de afbeelding.
  • Voeg een Titel (2), Ondertitel (3), en Beschrijving (4) van het lijstitem.
  • Mogelijk vindt u de optie voor ondertiteling en beschrijving niet in bepaalde lijstitems, afhankelijk van de lay-out die u kiest.
    Controleer voordat u de beschrijving toevoegt dit artikel.

  • Klik op het Link Builder-pictogram van de Titellink (5) om de linkbuilder te openen om de titel van het lijstitem aan een willekeurige pagina te koppelen. Meer weten over ons Linkbuilder.
  • Stel de koppeling in om te openen in een nieuw tabblad of op hetzelfde tabblad (6).
  • Voeg elk type toe Link (7) naar het lijstitem. U kunt een knop/afbeeldingslink/sociaal pictogram/tekstlink toevoegen. Kom meer te weten.
  • Bespaar (8) uw wijzigingen.

Bekijk het bewerken van een afbeeldingslijstitem in actie:

Sequentie lijstitems

  • U kunt de lijstitems eenvoudig slepen en neerzetten om de volgorde te wijzigen.

Bekijk de volgorde van de afbeeldingslijstitems in actie: 

Een lijstitem verwijderen

Nadat u een lijstitem hebt toegevoegd, kunt u het bewerken en verwijderen.

  • Klik op de Verwijder pictogram naast het afbeeldingslijstitem.
  • Tne, klik op de Verwijder knop in de bevestigingspop-up.
  • Tenslotte besparen uw wijzigingen.

Zie het verwijderen van een afbeeldingslijstitem in actie: 

Note

Lijstitem dat eenmaal is verwijderd, kan niet worden hersteld.

Sectie-indeling

  • Klik op de Beheer afbeeldingenlijst (1) knop.
  • Kies de Layout (2) tabblad.
  • kies (3) de lay-out van uw sectie en Bespaar (4) de veranderingen.

 

Pro Tip

Om een ​​sectie met volledige breedte/lijstsectie met tabbladen te maken, kiest u een lay-out variërend van 25 tot 29.

Opmerkingen

  • U kunt eenvoudig een lijstindeling met tabbladen aan uw pagina toevoegen.
  • U heeft de mogelijkheid om te kiezen uit een lay-out met horizontale tabbladen/verticale tabbladen.
  • Het helpt bij het maken van een op vergelijkingen gebaseerde sectie.

Style je sectie

  • Klik op Afbeeldingenlijst beheren (1) knop.
  • Kies de Stijl (2) Tab.
  • Wijzig de stijl voor de sectie-elementen en Opslaan (3) uw wijzigingen.

Je hebt meerdere stijlopties voor de sectie: 

Item 

  1. Kies voor Artikelen weergeven in rijen en kolommen or carrousel 
    • Als u de rijen en kolommen optie, worden de lijstitems gerangschikt in rijen en kolommen. In dit geval moet u het aantal rijen en kolommen opgeven.
    • Als u de carrousel optie, worden de lijstitems gepresenteerd als een diavoorstelling. Meer weten.
  2. Kies het Aantal columns voor de afbeeldingenlijst. U kunt kiezen uit 1 tot 10 kolommen.
  3. Geef het Ruimte Tussen Kolommen van de lijstitems.
  4. Geef het Ruimte Tussen Rijen van de lijstitems.
  5. Kies de Inhoud bestelling dwz de afbeeldingen van de lijstitems die als eerste moeten worden weergegeven of de bijbehorende tekst.
  6. richten de inhoud horizontaal in de afbeeldingenlijst. U kunt instellen dat ze links, rechts of in het midden uitgelijnd zijn.
  7. richten de inhoud verticaal in de afbeeldingenlijst. U kunt instellen dat ze boven, midden en onder uitgelijnd zijn.

Als de Carrousel-optie is geselecteerd in stap 1, ziet u de volgende extra opties:

  1. Kies voor Lus de carrousel of niet.
  2. Kies in het geval van de carrousel de Navigatiebediening. U kunt kiezen tussen Geen bedieningselementen, Pijlen - Middenonder/Rechtsboven/Rechtsonder, Chevron of Punten.

Mobiel display

  1. Stel het aantal in Rasterkolommen voor mobiele apparaten. Je kunt dit instellen op maximaal 3 kolommen.
  2. Definieer de Spacing tussen rasters (in pixels).

Afbeeldingen 

  1. Kies de Imagiër gewas voor de lijstitems. U kunt de afbeeldingen instellen als Vierkant, Cirkel, Horizontaal, Portret en Origineel.
  2. Kies voor een gemeenschappelijke hoekradius of een andere hoekradius voor elke zijde van de lijstitems en stel een getal in (in px) voor de Cor straal van de lijstitemafbeeldingen. Meer weten.

Tip

De hoekradius veld, kunt u verschillende vormen van afbeeldingen van lijstitems maken. Als u hier 500 px opgeeft, worden de afbeeldingen in een cirkelvorm weergegeven.

  • Als u gesplitste hoeken heeft gekozen, kunt u voor elke hoek een andere hoekradius instellen.

Op afbeelding zweven 

  1. Kies de Afbeelding zwevende kleur om de ... te zijn accent kleur of te zijn gespecificeerd. Als je hebt gekozen voor de accent kleuren specificeer vervolgens het ondoorzichtigheid.
  2. Als u de kleur opgeven optie en stel vervolgens de Basis zweefkleur en dekking voor de lijstitems.
  3. Kies het Elementen kleur voor de lijstitems van de sectie.
  4. Kies voor Animeer de afbeeldingen van de lijstitems zweven door op Ja te klikken. Bekijk deze functie op een live pagina.
  5. Kies een Animatiestijl voor afbeeldingen wanneer de cursor erboven zweeft.

Grootte & ruimte 

  1. Geef het Breedte afbeelding voor lijstitems.
  2. Geef het Inhoudsbreedte voor de lijstitems.
  3. Geef het Ruimte onder sectiekop in px.
  4. Geef het Ruimte onder afbeeldingen van de lijstitems (in %).
  5. Geef het Ruimte onder de titels van de lijstitems (in %).
  6. Geef het Ruimte onder de ondertitels van de lijstitems (in %).

Tekst 

  1. Klik op de Tekststijl wijzigen knop om de Design sectie en beheer uw lettergroottes en -stijlen. 
  2. Kies het Titel letterstijl voor de lijstitems van de sectie.
  3. Kies het Subtitel letterstijl voor de lijstitems van de sectie.
  4. Stel de standaard in Omschrijving letterstijl voor de lijstitems van de sectie.

Kaarten 

  1. Zie hoe kaarten beheren.

Shadow

  1. Display – Kies ervoor om de schaduw achter de lijstitems altijd weer te geven of alleen bij zweven.
  2. Style - Kies uit bestaande voorinstellingen of maak een aangepaste schaduw.
    Als je de optie Aangepast hebt gekozen, ga dan naar deze Box schaduwgenerator om een ​​aangepaste schaduw te creëren. Kopieer en plak ten slotte het vak schaduw CSS.
  3. Als je de presets-optie hebt gekozen, dan Kies Schaduwstijlen in de vervolgkeuzelijst.

  1. Zie hoe om de styling van te beheren Knoppen en koppelingen.
  2. Bespaar alle stijlveranderingen.

De carrouselstijl

De Carousel-stijl toont lijstitems als een diavoorstelling, dwz de lijstitems worden achter elkaar gefietst.

Bekijk hoe de carrouselstijl werkt: 

Hier is een live afbeeldingenlijst: 

Bekijk een live demosite. 

Zie hoe de hoekradius werkt: 

Tagged:

Kun je iets niet vinden?

Neem contact op met een Pixpa Expert.

Contact