• Hoe maak ik een Call-to-Action knop in het menu van mijn website?

    december 7, 2021

  • Heb je een specifieke pagina op je website die je iets meer wilt laten opvallen dan de andere?
    In deze blog bespreek ik hoe je eenvoudig een call-to-action knop toevoegt aan het menu van je site .

    Wat is een call-to-action?

    Een call-to-action op een website is een knop dat is ontworpen om je sitebezoeker te verleiden om een bepaalde actie te ondernemen, of een bepaalde pagina te bezoeken.

    Stap 1

    Aan de voorkant van de website bezoek je de instellingen van het primaire/ hoofd menu onder:

    Aan de voorkant van de website bezoek je de instellingen van het primaire/ hoofd menu onder:

    Aanpassen -> Menu’s -> Primair/ Hoofd / Header menu
    of
    Customizer -> Menu’s -> Primair/ Hoofd / Header menu

    Aan de achterkant inhet CMS ga je naar:

    Weergave -> Menu’s -> selecteer je: Primair/ Hoofd / Header menu
    of
    Appearence -> Aan de achterkant inhet CMS ga je naar
    Weergave -> Menu’s -> selecteer je: Primair/ Hoofd / Header menu

    Stap 2

    Voeg de call-to-action knop toe aan de gewenste pagina knop van het menu bijvoorbeeld “contact”. Dat kan op twee manieren:
    1) Je voegt een bestaande pagina toe
    2) Je maakt een custom/ eigen link

    Bestaande pagina toevoegen
    Custom/ eigen link toevoegen

    Stap 3


    Zorg dat je bovenaan bij de scherminstellingen het css vakje aangevinkt hebt staan anders zie je niet waar je je css klasse / class in moet vullen.

    Zet bij je nieuwe nieuwe of al bestaande menu item in het vakje CSS Klassen/ Classes de tekst custom-button.

    Zorg ervoor dat je je aanpassingen opslaat!

    Stap 4

    Om ervoor te zorgen dat de custom-button klasse/class het contactmenu-knop zoals onderstaand eruit gaat zien, moeten de CSS-stijl worden aangemaakt in de het gebied Extra/ Additional CSS van de aanpasser/customizer.

    Voeg je je aangepaste stijlen toe voor de Call to Action button aan het gebied Extra/ Additional CSS van de aanpasser/ customizer. Wat precies de naam is kan per thema verschillen:

    Vervolgens zet je in de Extra CSS/ Additional CSS de gewenste styling, zie als voorbeeld hiernaast.

    De” background-color” en de “color” kan je natuurlijk je eigen kleur geven die past in je website kleuren.

    Zorg wel dat het een opvallende kleur is zodat het meteen de aandacht van de bezoeker van je website trekt!

    Je kan gebruik maken van een online colorpicker om de juiste kleur te vinden, bijvoorbeeld:
    https://www.w3schools.com/colors/colors_picker.asp

    .custum-button a{
    color:#ffffff!important;
    background-color: red!important;
    padding-top:20px;
    padding-left:20px;
    padding-right:20px;
    }
    .custum-button a:hover{
    color:black!important;
    }

    Stap 5

    Als alles goed is gegaan ziet de call-to-action knop in het menu er nu als onderstaande uit:

    Hou er wel rekening mee dat op mobiel deze call-to-action knop ook in het menu (de hamburger) staat en deze dus niet meteen zichtbaar is als de bezoeker op je website komt.

    Is dit wel de bedoeling dan kan je of een popup gebruiken (wel rekening houden met het feit dat sommige bezoekers popups hebben gedeactiveerd in hun browser) of je kan een tekst maken in een opvallend vlak dat als eerste item op je website staat meteen onder het menu.

    Succes!

    Zie je ertegen op om zelf de call-to-action aan te maken in je menu van je website of heb je wel wat beters te doen dan kan je deze webklus ook door Sophie laten doen!

    Maak meteen een afspraak 0651980713 of ga naar het contactformulier!