Pretty Buttons handleiding

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

• Installatie Pretty Buttons via de download
• Installatie Pretty Buttons via Installeren vanaf web
• Configuratie van Pretty Buttons
• Toekennen of aanpassen module positie / paginaweergave Pretty Buttons
• Updaten van Pretty Buttons
• Verwijderen Pretty Buttons

Installatie Pretty Buttons via de download

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

1. Download de module Pretty Buttons van GitHub (gratis en zonder account):
   
   Download Pretty Buttons
   
   Klik onder Assets op Source code (zip) (1). Het bestand wordt gedownload. Pak het zipbestand niet uit en onthoud waar je het hebt opgeslagen.
   
   
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).
   
   
3. Klik links in het menu op Systeem (1).
   
   
4. Klik in het blok Installeren op Extensies (1).
   
   
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.
   
   
6. De module wordt direct geïnstalleerd. De melding "Installeren module is geslaagd" verschijnt (1).
   
   
7. Je kunt de module nu instellen. Zie Configuratie van Pretty Buttons.

Installatie Pretty Buttons via Installeren vanaf web

Met deze stappen installeer je Pretty Buttons rechtstreeks vanuit de Joomla Extensions Directory, zonder een bestand te downloaden. Het tabblad Installeren vanaf web komt van de plugin Installer - Install from Web. Zie je het tabblad niet, klik dan op Systeem, daarna op Plugins, zoek op "Install from Web" en schakel de plugin in.

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 Installeren op Extensies (1).
   
   
3. Klik op het tabblad Installeren vanaf web (1). Typ Pretty Buttons in het zoekveld (2) en klik op het vergrootglas (3).
   
   
4. Klik in de resultaten op Pretty Buttons (1).
   
   
5. Klik op de groene knop Install (1).
   
   
6. Joomla toont de naam van de extensie en het adres waarvan deze wordt geïnstalleerd. Bevestig met de blauwe knop (1).
   
   
7. De module is geïnstalleerd. De melding "Installeren module is geslaagd" verschijnt (1).
   
   
8. Je kunt de module nu instellen. Zie Configuratie van Pretty Buttons.

Configuratie van Pretty Buttons

Met deze stappen stel je de module in nadat je deze met een van de handleidingen hierboven hebt geïnstalleerd. In het voorbeeld maken we een contactblok met drie knoppen.

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).
   
   
3. Bij de installatie is een module met de naam Pretty Buttons toegevoegd. Deze is nog niet gepubliceerd en heeft nog geen positie. Klik op de titel (1).
   
   
4. Op het tabblad Module:
   • Pas de Titel (1) aan, bijvoorbeeld naar Contact.
   • Met Titel aan de rechterkant (2) kies je of de titel op de website wordt getoond: Toon of Verberg.
   • Kies de Positie (3) van je template waar de knoppen moeten komen. In dit voorbeeld met het template Cassiopeia: Sidebar-right [sidebar-right].
   • Zet Status (4) op Gepubliceerd. Een nieuwe module is altijd gedepubliceerd.
   
   
   
5. Klik op het tabblad Knoppen (1). De eerste instellingen gelden voor alle knoppen van deze module:
   • Knoppen in Block kolomweergave (2): kies Ja om de knoppen onder elkaar over de volle breedte te tonen, of Nee om ze naast elkaar te tonen.
   • Aangepaste Buitenste Knoppen Div Class (3): CSS-classes voor het blok om de knoppen heen. De standaardwaarde py-3 geeft wat ruimte boven en onder.
   • Aangepast ARIA-label inschakelen (4): kies Ja als je elke knop een eigen omschrijving voor schermlezers wilt geven. Bij elke knop verschijnt dan een extra veld ARIA-label.
   • Met de groene plusknop (5) voeg je een knop toe.
   
   
   
6. Vul de velden van de knop in:
   • Knop Tekst (1): de tekst op de knop, bijvoorbeeld Stuur een e-mail. Laat het veld leeg voor een knop met alleen een icoon.
   • URL (2): waar de knop naartoe linkt. Dat kan een webadres zijn (https://...), een e-mailadres (mailto:Dit e-mailadres wordt beveiligd tegen spambots. JavaScript dient ingeschakeld te zijn om het te bekijken.), een telefoonnummer (tel:+31201234567), een WhatsApp-link (whatsapp:) of een pad op je eigen site (/contact).
   • Doel (3): open de link in een nieuw venster (BLANK) of in hetzelfde venster (SELF).
   • Icoon class (4): de class van een Font Awesome-icoon dat voor de tekst komt, bijvoorbeeld fa-solid fa-envelope voor een envelop. Laat het veld leeg als je geen icoon wilt.
   • ARIA-label (5): de omschrijving die schermlezers voorlezen. Dit veld is er alleen als je het in de vorige stap hebt ingeschakeld. Is het leeg, dan wordt de knoptekst gebruikt.
   • Bootstrap 5 Knop Classes (6): vink btn aan en een kleur, zoals btn-primary. Met btn-lg of btn-sm maak je de knop groter of kleiner, en met BS5 full width button (W-100) komt de knop over de volle breedte. Bij Custom Class verschijnt een extra veld voor je eigen CSS-class. De kleuren die je hier ziet zijn voorbeelden; je template bepaalt hoe de knoppen er op de website uitzien.
   • Met de groene plusknop (7) voeg je onder deze knop nog een knop toe en met de rode minknop (8) verwijder je deze knop. Met de pijltjes links verander je de volgorde.
   
   
   
7. Klik op het tabblad Extra Inhoud (1) als je tekst bij de knoppen wilt. De tekst van Inhoud voor de knoppen (2) komt boven de knoppen, de tekst van Inhoud na de knoppen (3) eronder. Beide zijn niet verplicht.
   
   
8. 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.
   
   
   
9. 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.
   
   
10. Het resultaat op de website (1):
    
    

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

Toekennen of aanpassen module positie / paginaweergave Pretty Buttons

Met deze stappen zet je Pretty Buttons 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 Buttons-module. In de kolom Type zie je welke modules van het type Pretty Buttons zijn.
   
   
3. Kies op het tabblad Module aan de rechterkant de nieuwe Positie (3).
   
   
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).
   
   
5. Klik op Opslaan & sluiten en controleer op je website of de module op de juiste pagina's staat.

Updaten van Pretty Buttons

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.
   
   
3. Vink het vakje voor Pretty Buttons aan (1) en klik op Update (2). In dit voorbeeld gaat de module van versie 1.2.0 naar 1.3.0.
   
   
4. De melding "Updaten module is geslaagd" verschijnt (1).
   
   
5. Controleer op je website of Pretty Buttons nog goed werkt.

Verwijderen Pretty Buttons

Als je Pretty Buttons niet meer wilt gebruiken, kun je de extensie de-installeren. Alle Pretty Buttons-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).
   
   
3. Typ Pretty Buttons in het zoekveld (1) en klik op het vergrootglas (2).
   
   
4. Vink het vakje voor Pretty Buttons aan (1), klik op Acties (2) en daarna op Deïnstalleren (3).
   
   
5. Joomla vraagt of je het zeker weet. Klik op Ja (1).
   
   
6. De extensie is verwijderd. Een melding bevestigt dat het de-installeren van de module is gelukt (1).
   
   

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

Probleem melden

Ben je tevreden? Laat dan een review achter op de Joomla Extensions Directory: https://extensions.joomla.org/extension/pretty-buttons/

Alvast bedankt daarvoor!