[Resolved] How to create a CTA Button in Mobile Nav

Home Forums Support How to create a CTA Button in Mobile Nav

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #941661
    Maarten

    Dear support,

    I know Google likes to ‘see’ the same layout for desktop as mobile but to increase CTR and CRO I would still like to create a small button nest to the hamburger drop-down menu.

    The sample place when you add a search icon to mobile view.

    It would also be great to know if I could interchange it using a CTA hyperlink to the product I am recommending my visitors.

    What kind of button I like and also increase conversions is the one used on the GeneratePress site.

    Black border (same color as GP default) the button should be a square and text inside i should be 18-20 px and the background should be white

    When a user clicks on it it would be nice to have a pop-out effect but that is not very important.

    Most important is that this button is sticky in mobile header and always visible when the user reads the review page scrolling down.

    Also if my seo / cro test optimization I am doing seem to effect drop-off rate in Analytics when this mobile button is not in the desktop menu, than I also like to have this button on the desktop menu.

    It would have 100% the same effect as the search icon when turned off and on and the mobile header/menu is sticky it will always display on the same place and be visible.

    If I need to use hooks that is ok, I have GP premium latest version installed – But if I also could use a small functions.php code and use some CSS in my Child Theme, that would be great as well.

    If the settings can be exported like elements in JSON that would also solve this.

    Thanks a lot!

    P.S The submit button for this forum topic, looks what I like to build. Also has color effect that I like, however on mobile users will not notice that a lot

    #941889
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to your site so we can see what elements we are dealing with and to make sure we can fit the button in.

    You can edit your original topic and use the Site URL field to share the link privately.

    #941947
    Maarten

    Hi David,

    Thanks for your reply.

    As I am developing my websites most of the time offline using Xampp Server, I cannot share a link to a public site yet (If needed I will setup a special unlisted domain)

    What I did do is take a piece of paper and put there the perfect design I like to build.

    I can not find the source of this but I read somewhere plus looking at more than 30 Crazy Egg mouse recordings from users to websites, that I found the perfect setup.

    All Western users have there eyes move from:

    Upper-left corner (that is why logo is always there) to upper-right corner than eyes will move 0.5 to 2 cm below what is in the menu bar at upper-right, so they will most of the time see on desktop a sticky sidebar with an image and sales proposition ending below that with a call to action.

    After this if they still are not sure it was what they were looking for in Google, the eyes wil move to inner of the page to read your sales proposition from left to right of the page.

    That is why you better of having an image on the left-middle side if you want to increase sales and the proposition right next to it and below these bullet points a CTA button.

    This must always be above the fold. Below the fold can be testimonials or in my case a product review that again has CTA at the end of the document. Some more CTA is good to have if your article is longer than 400 words.

    And below that I just have a bottom footer bar like this site using it for Copyright and all the legal pages to disclaimer, privacy and terms.

    Why I am telling you this?

    Because first I found this WILL increase sales by 200% in my case and seems to be backed up by science how the eyes move. No idea about colors… I like the clean colors Tom made for GP a lot and this site is also good to the eyes.

    But if you check Analytics you will see how many of your users come from Mobile and as you know the screen is very small.

    Now we can show a top bar yes and we can make the menu bar sticky on scroll down and that looks very clean, but we cannot have it show the sidebar that includes our sales proposition (reasons to buy) ending with a CTA as the screen is to small.

    How I do this now for desktop is using the plugin: sticky-menu-or-anything-on-scroll

    It is trust-able and easy to setup you just need to make sure it does not show below a certain pixel format (for mobile) otherwise it will mess with the screen.

    So now we have the perfect page and a clean looking mobile page as this sidebar will scroll to the bottom above the footer and looks great as it also ends with a CTA.

    But it is to far away if you make a review and users are on mobile. They need to scroll to much down and maybe leave your site when they have no clear CTA

    And as you may know bounce back to google is not what we want.

    So than I found out we can have a cta button in the mobile menu to the far right-side.

    Left next to this would be the Hamburger drop-down menu on mobile.

    When users land on your site they see in 2 seconds a button when the eyes move to that spot and if they click it you have terminated the search request = Ranking higher in google.

    Of course I did test GP’s top bar but I could not hide it on desktop as I need this notice only on mobile.

    Of course I have tested the 2 best plugins for notification bar and these are:

    top-bar
    wp-notification-bars

    All other WordPress plugins seem to have some problems when scrolling down the page.

    Top-bar is the only that does work but is very limited in options and the premium version also has no options to show it only on mobile.

    wp-notification-bars has more options and is one of the lightest and best to use but it scrolls down the screen on mobile (meaning, it does not stick on top and moves when scrolling down, this might irritate your users a lot)

    So the best option is still having a small button stick in the main navigation on mobile and set the navigation to sticky on mobile so it will be always visible.

    When they now read your page and scroll down they can always click that button.

    Result? You have effectively terminated their search and google thinks the user has found what it wanted resulting in your website or that page going up in the rankings.

    I know this for a fact as I have seen this happen so many times.

    The reason to use Crazy Egg or Hotjar service is to see what users on your page do and then optimize for what they want so you can give them wat you want as fast as possible.

    As Google-bot likes to see the same design or layout on mobile as on desktop (except hamburger as that does not matter) we need to have as close / same layout as desktop design.

    I am not 100% sure it is needed of course. But design-wise it is good to have the same feeling in style.

    If I now press Submit button on this post for this topic here I see the button that would be just perfect to make for the mobile navigation on the upper-right side of the navigation.

    If your site needs login, this button placement there is also perfect.

    I am no doctor but did some studies in how the brain works and know this will up your conversion rate.

    It is a longer story and maybe not needed for this topic but wanted to share why and what I like to build.

    The nice submit button on this forum is just perfect, just need to have smaller size.

    Thanks!

    P.S I did look at that I need to build a function and inside it have it show on mobile navigation and maybe using Elements in GP, but I have no experience with Elements yet. Of course I did look at the docs but find it difficult to understand what I need to do to get the design I need to build

    #942025
    David
    Staff
    Customer Support

    Thanks for sharing 🙂

    So we can use the Hook Element:

    https://docs.generatepress.com/article/hooks-element-overview/

    1. Create new Hook Element
    2. Add your HTML for your button e.g

    <a class="custom-mobile-cta" href='#'>My CTA</a>

    3. In the Hook List select: inside_mobile_header

    4. In Display Rules set this to the Entire Site and Publish.

    5. In Customizer > Layout > Header activate Mobile Header and add your logo and Enable Sticky.

    6. Then add this CSS which you can tweak the colors etc to suit:

    #mobile-header .inside-navigation {
        align-items: center;
    }
    
    a.custom-mobile-cta {
        padding: 5px;
        border: 1px solid #fff;
        background-color: orange;
        color: #000;
        border-radius: 5px;
        order: 4;
        margin-right: 10px;
    }
    #943142
    Maarten

    Thanks a lot!

    #943323
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.