Afbeeldingsmodules gebruiken

Je kunt de slider-module voor afbeeldingen gebruiken om meerdere afbeeldingen in dezelfde module weer te geven. Je kunt instellen dat afbeeldingen automatisch doorlopen, of je kunt bezoekers ondersteunen om handmatig tussen de afbeeldingen te schakelen.

Dia's toevoegen en bewerken in slider modules

1. Navigeer naar uw inhoud:

   • Website Pagina's: Ga in je HubSpot-account naar Inhoud > Websitepagina's.
   • Landingspagina's: Ga in je HubSpot-account naar Inhoud > Landingspagina's.
   • Blog: Ga in je HubSpot-account naar Inhoud > Blog.
2. Klik op de naam van uw inhoud.
3. Klik in de inhoudseditor op het pictogram add Toevoegen in de linkerzijbalk.
4. Klik op om de categorie Media uit te vouwen, klik vervolgens op de module Afbeeldingglijder en sleep deze naar de juiste positie.
5. Ga in de linker zijbalk met de muis over een dia en klik op het pictogram edit Bewerken om een afbeelding aan die dia toe te voegen:
   
   • Klik in het gedeelte Afbeelding op Uploaden om een afbeelding van je computer te selecteren of op Bladeren door afbeeldingen om een afbeelding te selecteren in de bestandentool. Om een afbeelding te genereren, klik je op Genereren met AI.
   • Voer in het veld Bijschrift een bijschrift in dat onder de afbeelding wordt weergegeven. Om de afbeelding zonder bijschrift weer te geven, verwijder je de standaardtekst.
   
   • Om een link aan de dia toe te voegen:
     • Klik op het vervolgkeuzemenu Koppeling naar en selecteer een type koppeling.
     • Geef de bestemming van de link op in het veld dat verschijnt. Meer informatie over het werken met koppelingen in HubSpot.
     • Om je inhoud open te houden en de link in een nieuw venster te laten openen, schakel je de schakelaar Link openen in nieuw venster in.
     • Schakel het selectievakje Niet volgen in om aan zoekmachines aan te geven dat de linkbestemming geen deel uitmaakt van je websites.
   • Klik op Wijzigingen toepassen om de wijzigingen in deze dia op te slaan.
6. Klik boven in de zijbalkeditor op Image slider om terug te keren naar het moduleoverzicht.

7. Als u meer dia's wilt toevoegen, houdt u de muis boven een andere dia en klikt u op het pictogram edit Bewerken .
8. Om je wijzigingen af te ronden, klik je op Wijzigingen toepassen.

Instellingen voor slider modules bewerken

1. Navigeer naar uw inhoud:

   • Website Pagina's: Ga in je HubSpot-account naar Inhoud > Websitepagina's.
   • Landingspagina's: Ga in je HubSpot-account naar Inhoud > Landingspagina's.
   • Blog: Ga in je HubSpot-account naar Inhoud > Blog.
2. Klik op de naam van uw inhoud.
3. Klik in de inhoudseditor op de module Afbeeldingenslider.
4. Klik in de zijbalkeditor op Instellingen om de instellingen van de module te bewerken.
5. Klik op om de sectie Dia's uit te vouwen om de dia-opties te bewerken:
   • Voer in het veld Dia's per pagina het aantal dia's in dat tegelijk in je slider met afbeeldingen wordt weergegeven. Je kunt maximaal vijf dia's per keer weergeven. Als je meerdere dia's tegelijk selecteert, worden bijschriften en miniaturen niet weergegeven.
   • Selecteer in het veld Afbeeldingsgrootte een optie voor de beeldverhouding. Standaard worden de afbeeldingen weergegeven in hun geüploade beeldverhouding. Om één beeldverhouding te standaardiseren voor alle afbeeldingen, selecteer je Beeldverhouding forceren. Hierdoor kunnen sommige afbeeldingen vervormd verschijnen.
   • Om bijschriften aan dia's toe te voegen of te verwijderen, schakel je het selectievakje Bijschriften tonen in. Standaard is het selectievakje Bijschriften tonen ingeschakeld.
   • Selecteer in het vervolgkeuzemenu Positie bijschriften de positie van de bijschriften.

6. Klik om de sectie Beweging uit te vouwen om de diaovergangsopties te bewerken:
   • Om in te stellen hoe dia's overgaan, selecteer je een overgangsoptie (bijvoorbeeld Fade).
   • Om de dia's te laten herhalen wanneer de laatste dia is bereikt, schakelt u het selectievakje Dia's in lus in.
   • Schakel het selectievakje Automatisch afspelen in om de dia's automatisch te laten afspelen. Als je minder dia's hebt dan de instelling Dia's per pagina , kunnen er geen dia's worden afgespeeld.
7. Klik op om de sectie Navigatie uit te vouwen en de navigatieopties te bewerken:
   • Om pijlen weer te geven waarmee bezoekers handmatig tussen dia's kunnen schakelen, schakelt u het selectievakje Navigatiepijlen weergeven in .
   • Om miniaturen van afbeeldingen onder de navigatie weer te geven, schakel je het selectievakje Miniaturen weergeven in .
   • Om stippen onder de afbeeldingen weer te geven die het totale aantal dia's weergeven en bezoekers een specifieke afbeelding laten selecteren, selecteer je Navigatie met stippen weergeven.
8. Klik op Wijzigingen toepassen als je klaar bent.

Stijlen bewerken voor slider modules

Je kunt stijlen bewerken voor slider modules, inclusief de stijlen voor de dia's, navigatie en de slider.

1. Navigeer naar je inhoud:

   • Website Pagina's: Ga in je HubSpot-account naar Inhoud > Websitepagina's.
   • Landingspagina's: Ga in je HubSpot-account naar Inhoud > Landingspagina's.
   • Blog: Ga in je HubSpot-account naar Inhoud > Blog.
2. Klik op de naam van je inhoud.
3. Klik in de inhoudseditor op de module Afbeeldingenslider.
4. Klik in de zijbalkeditor op het tabblad Stijlen.
5. Om verder te gaan met het bewerken van stijlen voor de sliderafbeeldingsmodule, klik je op Dia's, Navigatie of Slider.

Stijlen voor dia's bewerken

Stijlen bewerken voor hoe afbeeldingen in dia's worden weergegeven:

1. Klik op Dia's.
2. Klik op om de sectie Afbeeldingen uit te vouwen.
3. Voer pixelwaarden in het veld Hoekradius in. Hoe hoger de waarde, hoe ronder de hoeken.
4. Klik op Wijzigingen toepassen als je klaar bent.

Om stijlen te bewerken voor hoe bijschriften worden weergegeven in dia's:

1. Klik op Bijschriften.
2. Klik op om de sectie Achtergrond uit te vouwen.
   • Om marges boven of onder uw bijschriften toe te voegen, voert u pixelwaarden in de velden Marge boven en Marge onder in.
   • Om opvulling aan uw bijschriften toe te voegen, voert u een pixelwaarde in het veld Opvulling in . Om afzonderlijke waarden voor elke kant toe te voegen, klik je op Apart bewerken en voer je pixelwaarden in de velden in.
   • Om een achtergrondkleur aan je bijschriften toe te voegen, voer je een hexadecimale waarde in het eerste veld in de sectie Kleur in of klik je op de kleurenkiezer en selecteer je een kleur. Aangepaste kleuren kunnen worden toegevoegd op het tabblad Geavanceerd .
   • Om de transparantie van een achtergrondkleur in te stellen, voer je een procentuele waarde in het tweede veld in de sectie Kleur in. Een transparantie van 100% is ondoorzichtig, terwijl een transparantie van 0% niet zichtbaar is.
3. Klik om de Tekstsectie uit te vouwen.
   • Om het lettertype te wijzigen, klik je op het keuzemenu Lettertype selecteren en selecteer je een lettertype.
   • Om de lettergrootte te wijzigen, klik je op het vervolgkeuzemenu Grootte en selecteer je een lettergrootte.
   • Om de kleur van het lettertype te wijzigen, klik je op de kleurenkiezer en selecteer je een kleur. Aangepaste kleuren kunnen worden toegevoegd op het tabblad Geavanceerd .
   • Om het lettertypegewicht te wijzigen, klikt u op het pictogram bold voor vetgedrukte, italicIcon gecursiveerde of underlineIcon onderstreepte tekst.
4. Klik op Wijzigingen toepassen als u klaar bent.

Stijlen voor navigatie bewerken

Je kunt stijlen bewerken voor navigatie, inclusief de schuifbalkpijlen, stippen en autoplay-knop, en miniatuurnavigatie. De beschikbare stijlen zijn afhankelijk van de instellingen voor navigatie van de slider module.

Pijlen schuifbalk

1. Klik op Navigatie.
2. Klik op om de sectie Schuifpijlen uit te vouwen.
3. Voer een hexadecimale waarde in bij Achtergrondkleur. Je kunt ook op de kleurenkiezer klikken en een kleur selecteren. Aangepaste kleuren kunnen worden toegevoegd op het tabblad Geavanceerd.
4. Om de transparantie van de achtergrondkleur in te stellen, voer je een procentuele waarde in het tweede veld in de sectie Achtergrondkleur in. Een transparantie van 100% is bijvoorbeeld ondoorzichtig, terwijl een transparantie van 0% niet zichtbaar is.
5. Om de pictogrammen voor de linker- en rechterpijl te vervangen, klik je op Vervangen boven de velden Pictogram links en Pictogram rechts. Selecteer een pictogram in het rechterpaneel.
6. Om de kleur van je pictogrammen voor links en rechts in te stellen, voer je een hexadecimale waarde in in het eerste veld in de sectie Icoonkleur. Je kunt ook op de kleurenkiezer klikken en een kleur selecteren. Aangepaste kleuren kunnen worden toegevoegd op het tabblad Geavanceerd.
7. Om de transparantie van de achtergrondkleur van het pictogram in te stellen, moet je een percentage invoeren in het tweede veld van de sectie Icoonkleur. Een transparantie van 100% zal bijvoorbeeld ondoorzichtig zijn, terwijl een transparantie van 0% niet zichtbaar zal zijn.
8. Klik op Wijzigingen toepassen als u klaar bent.

Stippen en knop voor automatisch afspelen

1. Klik op om de sectie Stippen en knop voor automatisch afspelen uit te vouwen.
2. Voer een hexadecimale waarde in het eerste veld in de sectie Kleur in of klik op de kleurenkiezer en selecteer een kleur. Aangepaste kleuren kunnen worden toegevoegd op het tabblad Geavanceerd.
3. Klik op Wijzigingen toepassen als u klaar bent.

Navigatie met miniaturen

1. Klik op om de navigatiesectie Thumbnail uit te vouwen.
2. Om de achtergrondkleur te bewerken, voer je een hexadecimale waarde in het eerste veld in de sectie Achtergrondkleur pijl in of klik je op de kleurenkiezer en selecteer je een kleur. Aangepaste kleuren kunnen worden toegevoegd op het tabblad Geavanceerd .
3. Om de transparantie van de achtergrondkleur te bewerken, voer je een procentuele waarde in het tweede veld in het gedeelte Pijl achtergrondkleur in. Een transparantie van 100% is ondoorzichtig, terwijl een transparantie van 0% niet zichtbaar is.
4. Om de pictogrammen te vervangen die worden gebruikt voor de linker- en rechterpijl, klik je op Vervangen boven de velden Pijl links pictogram en Pijl rechts pictogram . Selecteer een pictogram in het rechterpaneel.

5. Om de kleur van je linker- en rechterpijlpictogrammen te bewerken, voer je een hexadecimale waarde in in het eerste veld van de vulkleur van het pijlpictogram. Je kunt ook op de kleurenkiezer klikken en een kleur selecteren. Aangepaste kleuren kunnen worden toegevoegd op het tabblad Geavanceerd .
6. Om de transparantie van de pijl in te stellen, voer je een percentage in in het tweede veld in de sectie Icoonkleur . Een transparantie van 100% zal bijvoorbeeld ondoorzichtig zijn, terwijl een transparantie van 0% niet zichtbaar zal zijn.
7. Om de verhouding, breedte en afgeronde hoeken van de miniatuurafbeeldingen te bewerken:
   • Klik om de sectie Miniatuurafbeeldingen uit te vouwen.
   • Om de beeldverhouding in te stellen voor alle miniatuurafbeeldingen, klik je op het keuzemenu Beeldverhouding en selecteer je een beeldverhouding.
   • Om de breedte in te stellen die voor alle miniatuurafbeeldingen wordt gebruikt, voert u een pixelwaarde in het veld Breedte in.
   • Om de afronding van de hoeken van de miniatuurafbeeldingen in te stellen, voer je een pixelwaarde in het veld Straal in. Hoe hoger de waarde, hoe ronder de hoeken.
8. Klik op Wijzigingen toepassen als je klaar bent.

Stijlen voor de slider bewerken

1. Klik op Schuifbalk.
2. Klik op om de sectie Afstand uit te vouwen.
3. Om marges boven en onder de schuifbalk toe te voegen, voer je pixelwaarden in de velden Marge boven en Marge onder in.
4. Om opvulling aan de schuifregelaar toe te voegen, voer je een pixelwaarde in het veld Opvulling in . Om afzonderlijke waarden voor elke kant toe te voegen, klik je op Apart bewerken en voer je pixelwaarden in de velden in.
5. Klik op Wijzigingen toepassen als je klaar bent.