Selecteer de taal

Hieronder vind je de volgende handleidingen voor "Pretty Slider":

Ter informatie:
  • De handleidingen zijn geschreven met Joomla 6.1 en Pretty Slider 1.1.0. Pretty Slider heeft Joomla 5.4 of nieuwer nodig, en een template dat Bootstrap 5 laadt, zoals Cassiopeia. In Joomla 5 kunnen sommige schermen er iets anders uitzien.
  • De rode cijfers in de afbeeldingen horen bij de cijfers tussen haakjes in de stappen.
  • Klik op een afbeelding om deze te vergroten. De afbeelding opent in een pop-upvenster; klik naast het venster om terug te gaan naar dit artikel.
  • Let op: de moduleposities hangen af van je Joomla-template en kunnen dus anders zijn. Meer informatie: https://docs.joomla.org/Finding_module_positions_on_any_given_page/nl

Installatie Pretty Slider via de download

Met deze stappen download je Pretty Slider en installeer je de module in Joomla door het bestand te uploaden.

  1. Download de module Pretty Slider van GitHub (gratis en zonder account):

    Download Pretty Slider

    Klik onder Assets op het zipbestand mod_prettyslider-1.1.0.zip (1). Bij een nieuwere versie staat er een hoger versienummer in de naam. Het bestand wordt gedownload. Pak het zipbestand niet uit en onthoud waar je het hebt opgeslagen.

    Download Pretty Slider van GitHub
  2. Open de back-end (het beheergedeelte) van Joomla, meestal op https://<jouwdomein>/administrator/. Vul de Gebruikersnaam (1) en het Wachtwoord (2) van een Super User-account in en klik op Inloggen (3).

    Joomla 6 inloggen op de back-end
  3. Klik links in het menu op Systeem (1).

    Joomla 6 controlepaneel, menu-item Systeem
  4. Klik in het blok Installeren op Extensies (1).

    Joomla 6 Systeem controlepaneel, Installeren, Extensies
  5. Het tabblad Upload pakketbestand (1) staat open. Sleep het zipbestand naar het kader (2), of klik op de groene knop Of blader naar het bestand (3), selecteer het bestand en klik op Openen.

    Joomla 6 Upload pakketbestand
  6. De module wordt direct geïnstalleerd. De melding "Installeren module is geslaagd" verschijnt (1).

    Joomla 6 melding: installeren module is geslaagd
  7. Je kunt de module nu instellen. Zie Configuratie van Pretty Slider.

Configuratie van Pretty Slider

Met deze stappen stel je de module in nadat je deze met de handleiding hierboven hebt geïnstalleerd. In het voorbeeld maken we een slider met drie slides die we zelf invullen.

  1. Log in op de back-end (het beheergedeelte) van Joomla met een Super User-account. Meestal vind je die op https://<jouwdomein>/administrator/. Klik daarna links in het menu op Systeem, zoals in stap 2 en 3 van de eerste handleiding.
  2. Klik in het blok Beheren op Website modules (1).

    Joomla 6 Systeem controlepaneel, Beheren, Website modules
  3. Bij de installatie is een module met de naam Pretty Slider toegevoegd. Deze is nog niet gepubliceerd en heeft nog geen positie. Klik op de titel (1).

    Joomla 6 Website modules met de nieuwe module Pretty Slider
  4. Op het tabblad Module:
    • Pas de Titel (1) aan, bijvoorbeeld naar Slider.
    • Met Titel aan de rechterkant (2) kies je of de titel op de website wordt getoond: Toon of Verberg. Bij een slider is Verberg meestal het mooist.
    • Kies de Positie (3) van je template waar de slider moet komen. In dit voorbeeld met het template Cassiopeia: Primair-bovenkant [main-top].
    • Zet Status (4) op Gepubliceerd. Een nieuwe module is altijd gedepubliceerd.


    Module Pretty Slider: titel, positie en status
  5. Klik op het tabblad Slides (1) en kies bij Slides uit (2) waar de slides vandaan komen:
    • Artikelen: elk gepubliceerd artikel uit de gekozen categorieën wordt een slide. De instellingen daarvoor staan in stap 7.
    • Handmatige slides: je maakt de slides zelf aan in de module. In dit voorbeeld kiezen we deze.
    Met de groene plusknop (3) voeg je een slide toe.

    Module Pretty Slider: tabblad Slides, de bron van de slides
  6. Vul de velden van de slide in:
    • Afbeelding (1): klik op Selecteren en kies een afbeelding. Dit veld is verplicht.
    • Beschrijving afbeelding (alt-tekst) (2): beschrijft de afbeelding voor bezoekers die haar niet kunnen zien. Laat je het veld leeg, dan wordt de titel gebruikt.
    • Titel (3): de tekst op de slide. Heeft de slide een link, dan is de titel de link.
    • Omschrijving (4): platte tekst onder de titel.
    • Link (5): niet verplicht. Dit kan een webadres zijn (https://...), een pad op je eigen site (/contact), of een mailto:- of tel:-link. Heeft de slide geen titel, dan wordt de afbeelding de link.
    • Knoptekst (6): toont een knop met deze tekst onder de omschrijving. De knop gebruikt de link van de slide en verschijnt dus alleen als je een link hebt ingevuld.
    • Bootstrap 5 knop-classes (7): vink btn aan en een kleur, zoals btn-primary. Met btn-lg of btn-sm maak je de knop groter of kleiner. Bij Eigen class verschijnt een extra veld voor je eigen CSS-class. De kleuren die je hier ziet zijn voorbeelden; je template bepaalt hoe de knop er op de website uitziet.
    • Link in een nieuw venster openen (8): kies Ja om de link in een nieuw venster te openen.
    • Met de groene plusknop (9) voeg je onder deze slide nog een slide toe en met de rode minknop (10) verwijder je deze slide. Met de pijltjes links verander je de volgorde. De slides worden getoond in de volgorde van deze lijst.


    Module Pretty Slider: de velden van één slide
  7. Kies je bij Slides uit (1) voor Artikelen, dan zie je in plaats van de slides deze instellingen:
    • Categorie (2): de categorieën waaruit de artikelen komen. Kies je niets, dan worden artikelen uit alle categorieën gebruikt.
    • Maximaal aantal slides (3): hoeveel slides er maximaal worden getoond.
    • Slides (artikelen) sorteren op (4) en sorteerrichting (5): de volgorde van de slides, bijvoorbeeld op titel, op aanmaakdatum of willekeurig.
    • Prioriteit artikelafbeelding (6): welke afbeelding wordt gebruikt als een artikel er twee heeft: de afbeelding introtekst of de afbeelding volledig artikel. Ontbreekt de gekozen afbeelding, dan wordt de andere gebruikt. Artikelen zonder afbeelding worden overgeslagen.
    • Bron omschrijving (7): de tekst onder de titel: het begin van de artikeltekst, de alt-tekst van de afbeelding of het bijschrift van de afbeelding.
    • Maximale lengte omschrijving (8): het maximale aantal tekens. Langere tekst wordt na een woord afgekapt.
    • Knop tonen (9): kies Ja voor een knop op elke slide die naar het artikel linkt. Bij Knoptekst (10) vul je de tekst in; laat je het veld leeg, dan staat er "Lees meer". De knop-classes (11) werken zoals in de vorige stap.
    De titel van een artikelslide linkt altijd naar het artikel.

    Module Pretty Slider: de instellingen voor slides uit artikelen
  8. Klik op het tabblad Instellingen (1). Deze instellingen gelden voor de hele slider:
    • Element voor de titel (2): het HTML-element van de slidetitel. Kies een kopniveau (h2 tot h6) dat past bij de koppen op de pagina, of Alinea als de titels geen koppen moeten zijn.
    • Class hoofd-div (3), Class titel (4) en Class omschrijving (5): eigen CSS-classes voor het blok om de slider, de titel en de omschrijving, bijvoorbeeld h3 of display-6 voor een grotere titel.
    • Omschrijving verbergen op kleine schermen (6): bij Ja is de omschrijving op telefoons verborgen. De titel, link en knop blijven zichtbaar.
    • Verticale positie van de tekst (7): de tekst boven, in het midden of onder op de afbeelding.
    • Horizontale uitlijning van de tekst (8): de tekst links, in het midden of rechts.
    • Donker verloop achter de tekst (9): houdt de witte tekst leesbaar op lichte afbeeldingen.
    • Slider automatisch afspelen (10): bij Ja verschijnt vanzelf de volgende slide, na het aantal Seconden per slide (11). Bij bezoekers die verminderde beweging hebben ingeschakeld start het afspelen niet vanzelf.
    • Pauzeren bij aanwijzen (12): de slides wachten zolang de muisaanwijzer op de slider staat.
    • Pauzeknop tonen (13): een knop waarmee bezoekers de slides kunnen pauzeren en weer afspelen. Laat deze aan staan als de slider automatisch afspeelt; de toegankelijkheidsrichtlijnen (WCAG) vragen om een manier om te pauzeren.
    • Voortgangslijn tonen (14): een lijn boven in de slider die volloopt tot de volgende slide verschijnt.
    • Bolletjes tonen (15): onder in de slider een bolletje per slide, waarmee bezoekers naar een slide gaan.


    Module Pretty Slider: tabblad Instellingen
  9. Klik op het tabblad Menutoewijzing (1) en kies bij Moduletoewijzing (2) op welke pagina's de module wordt getoond:
    • Op alle pagina's: op elke pagina van de website.
    • Geen pagina's: op geen enkele pagina.
    • Alleen op de geselecteerde pagina's: alleen op de menu-items die je in de lijst (3) aanvinkt.
    • Op alle pagina's behalve de geselecteerde: op elke pagina, behalve op de menu-items die je aanvinkt.


    Module Pretty Slider: tabblad Menutoewijzing
  10. Klik op Opslaan (1) om op te slaan en de module open te houden, zodat je het resultaat op je website kunt bekijken en nog kunt aanpassen. Klik op Opslaan & sluiten (2) als je klaar bent.

    Module Pretty Slider: Opslaan en Opslaan & sluiten
  11. Het resultaat op de website (1):

    Pretty Slider op de website met het template Cassiopeia

Voorbeelden vind je hier: https://extensions.tlwebdesign.nl/pretty-slider

Toekennen of aanpassen module positie / paginaweergave Pretty Slider

Met deze stappen zet je Pretty Slider op een andere modulepositie of verander je op welke pagina's de module wordt getoond.

  1. Log in op de back-end (het beheergedeelte) van Joomla met een Super User-account. Meestal vind je die op https://<jouwdomein>/administrator/. Klik daarna links in het menu op Systeem, zoals in stap 2 en 3 van de eerste handleiding.
  2. Klik in het blok Beheren op Website modules en klik daarna op de titel van je Pretty Slider-module. In de kolom Type zie je welke modules van het type Pretty Slider zijn.

    Joomla 6 Website modules met de module Pretty Slider
  3. Kies op het tabblad Module aan de rechterkant de nieuwe Positie (3).

    Module Pretty Slider: titel, positie en status
  4. Klik op het tabblad Menutoewijzing (1) en kies bij Moduletoewijzing (2) op welke pagina's de module wordt getoond. Bij "Alleen op de geselecteerde pagina's" en "Op alle pagina's behalve de geselecteerde" vink je de menu-items aan in de lijst (3).

    Module Pretty Slider: tabblad Menutoewijzing
  5. Klik op Opslaan & sluiten en controleer op je website of de module op de juiste pagina's staat.

Updaten van Pretty Slider

Als er een nieuwe versie is, toont Joomla dat in de back-end, net als bij updates van andere extensies. Belangrijk: maak altijd een back-up van je website voordat je gaat updaten!

  1. Log in op de back-end (het beheergedeelte) van Joomla met een Super User-account.
  2. Klik op het controlepaneel in het blok Notifications op Er zijn updates beschikbaar! (1). Je kunt ook op Systeem klikken en daarna in het blok Update op Extensies.

    Joomla 6 controlepaneel: er zijn updates beschikbaar
  3. Vink het vakje voor Pretty Slider aan (1) en klik op Update (2). In dit voorbeeld gaat de module van versie 1.0.0 naar 1.1.0.

    Joomla 6 Extensies: Updaten met Pretty Slider aangevinkt
  4. De melding "Updaten module is geslaagd" verschijnt (1).

    Joomla 6 melding: updaten module is geslaagd
  5. Controleer op je website of Pretty Slider nog goed werkt.

Verwijderen Pretty Slider

Als je Pretty Slider niet meer wilt gebruiken, kun je de extensie de-installeren. Alle Pretty Slider-modules die je hebt gemaakt worden dan ook verwijderd.

  1. Log in op de back-end (het beheergedeelte) van Joomla met een Super User-account. Meestal vind je die op https://<jouwdomein>/administrator/. Klik daarna links in het menu op Systeem, zoals in stap 2 en 3 van de eerste handleiding.
  2. Klik in het blok Beheren op Extensies (1).

    Joomla 6 Systeem controlepaneel, Beheren, Extensies
  3. Typ Pretty Slider in het zoekveld (1) en klik op het vergrootglas (2).

    Joomla 6 Extensies: Beheren, zoeken naar Pretty Slider
  4. Vink het vakje voor Pretty Slider aan (1), klik op Acties (2) en daarna op Deïnstalleren (3).

    Joomla 6 Extensies: Beheren, Acties, Deïnstalleren
  5. Joomla vraagt of je het zeker weet. Klik op Ja (1).

    Joomla 6 waarschuwing: weet je zeker dat je wilt de-installeren
  6. De extensie is verwijderd. Een melding bevestigt dat het de-installeren van de module is gelukt (1).

    Joomla 6 melding: de-installeren van de module is gelukt


Loop je tegen een probleem aan? Laat het ons weten met de knop hieronder. Alleen zo kunnen we deze extensie verder verbeteren.

Probleem melden