Handleiding Joomla 3.x Hoe maak ik een call to action button? Geschreven: Sandra van der Heijden (2015) AdviesMies
Introductie Het wordt regelmatig geroepen. Je hebt call to action buttons nodig op je website. Ze zijn belangrijk om conversie te realiseren. Ga maar even terug naar je jeugd. In ieder mens zit een kind en wat is er voor een kind nu spannender dan op een knopje drukken en kijken wat er gebeurt. Op je website wil je bereiken dat bezoekers een actie uitvoeren en omdat te doen zul je Call to Action Buttons moeten toevoegen. Ben je niet zo handig met Adobe illustrator, dan is dit de ideale tool. Het heet Da Button Factory. Ga naar de website http://dabuttonfactory.com/. Je ziet dan het volgende scherm: Call to Action Button aanmaken Het heet Da Button Factory. Ga naar de website http://dabuttonfactory.com/. Je ziet dan het volgende scherm: In het midden zie je een button staan en links en rechts zie je verschillende aanpassingsmogelijkheden. Waar Text staat typ je jouw eigen tekst in. Bijvoorbeeld: Afspraak maken. 2
Vermeld teksten als 'klik hier' maar kies voor een tekst die zegt wat de bezoeker gaat doen. Bij Font kies je een passend lettertype. Je kan het lettertype dik of schuingedrukt maken en tevens de grote en kleur aanpassen. Hou wel rekening met de leesbaarheid. Lichte letters op donkere achtergrond en donkere letters op lichte achtergrond. Ook is er een mogelijkheid om schaduw achter de letters te zetten in een afwijkende kleur of gewoon in zwart of grijs als je van eenvoud houdt. Onder zie jouw gemaakte button png staan. Hiermee krijg je bij het downloaden jouw gemaakte button in.png formaat. PNG formaat geeft een transparante achtergrond zodat de button op elke achtergrond geïmplementeerd kan worden. Met de aanpassingen die je maakt, zie je ook de button veranderen. Aan de rechterkant van de button zie je Style staan. Kies de stijl die past bij de website. Strakke hoeken of ronde hoeken, je kan een beetje spelen met de afrondingen. Vervolgens kies je bij de achtergrond de opmaak. Wil je een egale kleur of moet er verloop inzitten. Misschien vind je het leuk om 2 kleuren te gebruiken. Ook hier moet je mee spelen. Je kan 3
er nog voor kiezen om een rand om de button te maken en een schaduw te kiezen. Door gebruik van een schaduw te maken, creëer je de illusie van een drukknop. En last but nog least is de grootte van de button aan te passen. Dit doe je aan de linkerkant van de button bij SIZE. Heb je een korte tekst, maak je button smaller. Heb je een langere tekst, maak dan de button iets breder zodat de tekst goed uitkomt. Het enige wat je nu nog hoeft te doen is de plaatjes van jouw buttons uploaden naar je website. Plaats ze op de juiste plekken en zorg dat je er een link aan koppelt naar de juiste pagina, filmpje, formulier of wat er ook maar nodig is om jouw bezoeker die actie te laten maken. Wil je nu een button laten bewegen ( mouse rollover), dan maak je 2 keer dezelfde button met contrast kleuren. In het geval van afspraak maken, maak ik een 2e button met een witte achtergrond. Buttons Uploaden Om de buttons zichtbaar te krijgen op je website, log je eerst in op je website. Ga naar Inhoud en klik op Mediabeheer. 4
Zoals je kan zien zijn er aan de linkerkant een aantal mappen aangemaakt. Dit zijn de standaardmappen die in de template meegekomen zijn. Om overzicht te houden, adviseer ik om eigen mappen aan te maken en daarin foto s en documenten te uploaden. Maak een map aan door naast de groene knop op Nieuwe map aanmaken te klikken. Noem deze map buttons. Vervolgens klik je op Uploaden en zoek je de buttons op die je hebt opgeslagen. Wanneer je een rollover wilt doen, is het handig om de buttons op te slaan met een 1 en een 2 erachter. Als je beide plaatjes hebt opgeslagen. Ga dan terug naar het artikel waar je de button in wilt zetten. Ga naar Inhoud - > Artikelen Klik op het artikel en ga naar de positie waar je de button wilt hebben. Klik onderaan op het knopje afbeelding, je komt dan terecht in het mediabeheer. In de media beheer ga je naar het mapje buttons waar je de plaatjes in hebt gezet. Klik op het plaatje van de button die jij op de site wilt hebben. Ik kies in dit geval voor de groene button. Vervolgens kies je rechtsboven voor invoegen. Je krijgt dan het plaatje van de button te zien in je artikel. 5
Als je wilt dat het knopje beweegt en zorgt dan bezoekers erop gaan klikken, dan maak je er een rollover van. Dit doe je door op de button te klikken en dan zie je dat het volgende symbool oplicht in de werkbalk. Klik hierop om vervolgens in het volgende scherm terecht te komen: Boven zie je een 3 tal tabladen, waarvan de middelste rollover is. Je ziet ook dat de het gebruikte plaatje dikgedrukt staat in de middelste kolom. Klik eerst op het dikgedrukte plaatje en daarna op rollover. Je ziet dan dat Joomla de plaats van de groene button al heeft ingevuld. 6
Vervolgens klik je op de tweede button, daarom is het handig om bij het opslaan een nummertje mee te geven en als je dat gedaan hebt, dan klik je op refresh/update en voilà je hebt een bewegende button. Link hem nu nog naar het juiste artikel of formulier en de bezoeker kan contact met je opnemen of welke andere actie je gedaan wilt krijgen. Veel succes met het onderhouden van jouw website. Mocht je vragen hebben, kan je altijd bellen naar 06-11716861 of mail naar sandra@adviesmies.nl Copyright 2015 AdviesMies deze handleiding is gemaakt door AdviesMies. Kopiëren of delen is niet toegestaan zonder toestemming. 7