Sectie Afbeeldingen

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 de sectie Afbeeldingen?
2. Sectie Afbeeldingen toevoegen
3. Lijstitems toevoegen en bewerken
4. Sequentie van lijstitems
5. Lijstitems verwijderen
6. Elementen beheren
7. Sectie-indeling wijzigen
8. Stijlopties
9. De carrouselstijl
10. 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.

---

Sectie Afbeeldingen toevoegen

• 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 Beschrijving (1) categorie en klik op de Afbeeldingen tabblad (2) waar u uit kunt kiezen verschillende indelingen van de Afbeeldingslijst (3).

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

---

Lijstitems toevoegen en bewerken

Lijstitem toevoegen

Nadat u de sectie hebt toegevoegd:

• Klik op de Bewerk inhoud (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:

• Uploaden/verwijderen primaire en secundaire afbeelding (1)
  U kunt een Secundaire afbeelding samen met de Primaire afbeelding voor elk lijstitem. Wanneer een gebruiker met de muis over het item beweegt, wordt de secundaire afbeelding weergegeven, ter vervanging van de primaire afbeelding. Daarnaast kunt u de Accentkleur afbeelding, die wordt weergegeven als u met de muis over de afbeelding beweegt.
• Voeg een Onderwerp (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.

5. Actie bij klikken

U kunt het klikgedrag van afzonderlijke items in de Afbeeldingslijst sectie. Hieronder staan ​​de beschikbare opties:

• Ga naar een link
  Als u deze optie selecteert, wordt de Linkbuilder, waarmee u een hyperlink naar dit item kunt toevoegen. De link kan gebruikers naar een andere pagina binnen uw website of een externe URL leiden. Meer weten over Linkbuilder.
• Openen in Lightbox
  Met deze optie wordt het item vergroot weergegeven Lichtbak bekijken wanneer erop wordt geklikt. In deze modus is de Subtitel en Beschrijving De items die aan het item zijn gekoppeld, worden niet weergegeven in de rasterweergave, maar zijn wel zichtbaar in de Lightbox-modus.
• No action
  Kies deze optie om het item onklikbaar te maken. Wanneer geselecteerd, zal klikken op het item geen actie activeren.

6. Link openen in nieuw venster: Stel de koppeling in om te openen in een nieuw tabblad of in hetzelfde tabblad. Dit zal alleen zichtbaar zijn als Ga naar een link optie is geselecteerd onder de Actie bij klikken menu.

7. Knoppen en pictogrammen: Voeg elk type toe Link aan het lijstitem. U kunt een knop/afbeeldingslink/sociaal pictogram/tekstlink toevoegen. Ontdek.

8. Kaartstijl overschrijven

U kunt de globale kaartstijlinstellingen overschrijven vanuit de sectie Style-instellingen en pas de kaart van elk item individueel aan in de sectie Afbeeldingenlijst. Hiermee kunt u unieke stijlen toepassen op verschillende lijstitems voor betere aanpassing.

Ontdek over de optie Kaarten in de dynamische sectie.

9. Vormstijl overschrijven

Met de optie Overschrijven kunt u aan elke afbeelding afzonderlijk in de sectie Afbeeldingenlijst een andere vorm toewijzen. Zo krijgt u meer controle over de visuele stijl van elk item. Ontdek over Vormmasker.

10. Opslaan: Nadat u de aanpassingen hebt gemaakt, slaat u deze op.

---

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 Verwijdering pictogram naast het afbeeldingslijstitem.
• Tne, klik op de Verwijdering knop in de bevestigingspop-up.
• Tenslotte besparen uw wijzigingen.

Zie het verwijderen van een afbeeldingslijstitem in actie: 

---

---

Elementen van de afbeeldingenlijst beheren

Het gedeelte Afbeeldingenlijst bevat een Tabblad Elementen waarmee u de zichtbaarheid van verschillende elementen binnen de sectie eenvoudig kunt beheren. Met behulp van eenvoudige schakelaars kunt u specifieke elementen in- of uitschakelen zonder de elementen zelf te hoeven verwijderen of wijzigen.

• Klik op de Bewerk inhoud (1) knop.

• Kies de Elementen (2) tabblad.
• Nadat u de wijzigingen hebt aangebracht, klikt u op Opslaan (3) knop.

Sectie Opties

1. Koptekst weergeven: Schakel de zichtbaarheid van de kop voor de sectie Afbeeldingenlijst in of uit.
2. Toon knoppen: Bepaal of knoppen op sectieniveau worden weergegeven.

Artikelopties

1. Toon afbeelding: Schakel de zichtbaarheid van de afbeeldingen in of uit.
2. Toon titel: Bepaal of de titel wordt weergegeven.
3. Ondertitel weergeven: Ondertiteling in- of uitschakelen.
4. Laat beschrijving zien: Beheer de zichtbaarheid van itembeschrijvingen.
5. Toon knoppen: Bepaal of knoppen voor afzonderlijke items moeten worden weergegeven.

---

Sectie-indeling

• Klik op de Bewerk inhoud (1) knop.

• Kies de Layout (2) tabblad.
• kies een lay-out voor uw sectie en Opslaan (3) de veranderingen.

 

---

Style je sectie

• Klik op Inhoud bewerken (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: 

1. Weergaveopties
2. Mobiel display
3. Uitlijning
4. Lettergrootte
5. Spacing
6. Sectie Kop
7. Afbeeldingen Opties
8. Vormmasker
9. Opties voor het zweven van afbeeldingen
10. Afbeeldingsrand
11. Kaart opties
12. Schaduwopties
13. Knoppen & Links

---

Scherm 

1. Kies voor Artikelen weergeven in rijen en kolommen / carrousel / vitrine
   • 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.

   • Plaats biedt een strakke en interactieve lay-out in carrouselstijl om uw afbeeldingen één voor één weer te geven met vloeiende overgangen en effecten. Deze lay-out voegt een moderne, meeslepende ervaring toe aan uw site. Ontdek.

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.

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

1. Vloeiend scrollen inschakelen: Maakt het mogelijk om items in de carrousel continu te scrollen voor een naadloze en visueel aantrekkelijke ervaring.
2. Automatisch schuiven: Roteert automatisch door dia's zonder tussenkomst van de gebruiker.
3. Toon voortgang automatisch afspelen: Geeft een voortgangsindicator weer terwijl automatisch afspelen actief is voor betere zichtbaarheid.
4. Vertraging automatisch afspelen: Hiermee stelt u het tijdsinterval tussen elke diaovergang in wanneer automatisch afspelen is ingeschakeld.
5. Carrousel lus: Maakt het mogelijk om dia's continu te herhalen, zodat de carrousel naadloos opnieuw start na de laatste dia.
6. Carrouselbediening: Kies de Navigatiebediening. U kunt kiezen tussen Geen bedieningselementen, Pijlen – Middenonder/Rechtsboven/Rechtsonder, Chevron, Stippen en Horizontale scroll.
7. Vervaagde randen: Pas een subtiel vervagend effect toe op de randen van de carrousel. Het verbetert de gebruikerservaring door afbeeldingen zachtjes te blenden wanneer ze de weergave binnenkomen of verlaten.

Als de optie Showcase is geselecteerd in stap 1, ziet u de volgende aanvullende opties:

1. Effecten: Kies uit vijf animatie-effecten: Fade, Flip, Cards, Coverflow (gekanteld) of Coverflow (plat) om te bepalen hoe de afbeeldingen overgaan.
2. Vloeiend scrollen inschakelen: Hiermee kunt u items in de Showcase doorlopend scrollen voor een naadloze en visueel aantrekkelijke ervaring.
3. Automatisch schuiven: Schakel automatisch door afbeeldingen zonder dat de gebruiker iets hoeft te doen.
4. Voortgang automatisch afspelen weergeven: Geeft een voortgangsindicator weer terwijl automatisch afspelen actief is voor betere zichtbaarheid.
5. Vertraging automatisch afspelen: Stel de tijd tussen dia's in wanneer automatisch afspelen actief is. U kunt een waarde kiezen tussen 1 en 10 seconden.
6. Carrousellus: Schakel dit in om de carrousel oneindig te laten herhalen, waardoor continu afspelen mogelijk is.
7. Carrouselbediening: Met de instelling Carrouselbediening kunt u kiezen hoe gebruikers door dia's navigeren, met opties zoals pijlen (middenonder, rechtsboven, rechtsonder), stippen of helemaal geen bedieningselementen.

---

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

Apparaatspecifieke kolomindeling op basis van Studio-instellingen:

---

Uitlijning

1. richten de inhoud horizontaal in de afbeeldingenlijst. U kunt instellen dat ze links, rechts of in het midden uitgelijnd zijn.
2. richten de inhoud verticaal in de afbeeldingenlijst. U kunt instellen dat ze boven, midden en onder uitgelijnd zijn.
3. Kies de Inhoud bestelling dwz de afbeeldingen van de lijstitems die als eerste moeten worden weergegeven of de bijbehorende tekst.

---

Lettergrootte

1. Klik op de Tekststijl wijzigen knop om de Design sectie en beheer uw lettergroottes en -stijlen. 
2. Kies het Onderwerp letterstijl voor de lijstitems van de sectie.
3. Kies het Subtitel letterstijl voor de lijstitems van de sectie.
4. Stel de standaard in Beschrijving letterstijl voor de lijstitems van de sectie.
5. Schakel deze optie in om animeer willekeurige getallen Aanwezig in de Onderwerp en Subtitel velden. Wanneer deze functie is ingeschakeld, verschijnen numerieke waarden met een dynamische telanimatie, waardoor ze visueel aantrekkelijker worden.

---

Spacing

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

---

Sectie Kop

1. Horizontaal uitlijnen de sectiekoptekst. U kunt deze instellen op Links, Midden en Rechts.
2. Inschakelen/uitschakelen van de verdeler tussen de sectiekop en de sectie-inhoud.
3. Kies het dikte van de verdeler (in px).
4. Geef het Divider kleur van kleurenkiezer.
5. Kies een Scheidingsstijl in de vervolgkeuzelijst.
6. Kies het Breedte van de kop om te bepalen hoe breed de sectietitel wordt weergegeven, met een minimum van 50%.

---

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.

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

---

Vormmasker

1. Vormmasker: Schakel deze schakelaar in om een ​​vormmasker toe te passen op de afbeeldingen in de sectie Afbeeldingenlijst. Zodra ingeschakeld, zal de geselecteerde vorm de afbeelding visueel in die vorm knippen.
2. Selecteer vorm: Kies uit verschillende vooraf gedefinieerde vormen om toe te passen op uw afbeeldingen. Hiermee kunt u uw content creatief stylen door afbeeldingen weer te geven in unieke vormen zoals rond, diamant, druppel, etc.
3. Rekken: Schakel deze optie in om de geselecteerde vorm uit te rekken zodat deze beter in de afbeeldingscontainer past. Dit zorgt ervoor dat de vorm de beschikbare ruimte proportioneel vult, waardoor de visuele uitlijning op verschillende schermformaten wordt verbeterd.

---

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. U kunt de accentkleur voor elk item opgeven vanaf Item bewerken paneel.
2. Als u de kleur opgeven optie en stel vervolgens de Overlaykleur en dekking.
3. Kies het Overlay tekstkleur die bij het zweven zichtbaar is.
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.
6. Kies of u de overgang van beelden bij zweven of niet.
7. Selecteer een Overgangsstijl voor hover-overgang. Beschikbare opties zijn Fade en Flip.

---

Afbeeldingsrand

1. Rand in-/uitschakelen rond de afbeeldingen door de schakelaar om te zetten.
2. Kies ervoor om een gemeenschappelijke grens aan alle zijden van afbeeldingen of u kunt de grenzen apart voor elke kant.
3. Geef het Breedte van de grens. Als deze is ingesteld op 0, wordt de rand niet weergegeven. U heeft ook de mogelijkheid om de randbreedte voor elke zijde van de afbeelding afzonderlijk in te stellen.
4. Selecteer het Rand kleur van kleurenkiezer.
5. Selecteer een voorkeur Border Style in de vervolgkeuzelijst.
6. Bepalen randbreedte voor mobiel apparaten, waarbij het wordt uitgelijnd met de gekozen breedte voor het bureaublad.

---

Kaarten

• Zie hoe kaarten beheren.

---

Shadow

1. Scherm – 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.

---

Knoppen & Links

1. Zie hoe om de styling van te beheren Knoppen en koppelingen.
2. Opslaan 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: 

---

Gerelateerde artikelen:

• Soorten secties
• Voeg een afstandsstuk/verdeler tussen de secties toe
• Bouw je website