Menu
homeAndroid

How to create a link in the landing page menu - step-by-step instructions. Full-screen scrolling landing page - landing page design

Hello friends, colleagues! How are you doing? I hope everyone is doing great :) Today we will do something simple responsive menu for ours landing page. People are asking about this more and more often, and I write down such questions in and try to free time write articles on these topics.

Thank you for giving me new ideas in this way and helping to develop the blog. By the way, what topic would you like to read about? next article? Please write in the comments, this is very important to me. Now, let's begin...

How to make a responsive menu for a website

Google has confirmed that from mid-April one of the ranking factors will be website adaptability. mobile devices. In this regard, all materials on how to make your landing page adaptive- more relevant than ever. Today I won’t explain anything complicated, but on the contrary, I’ll tell you how to make a very simple adaptive menu with a minimum of time.

Basically it will be html + css, but you will need a very small script to process the click. So…

Responsive horizontal menu

Let's start with html. First of all, let's connect jquery library. You've probably been using it for a long time, so make sure you don't connect it a second time:

Now the markings. A regular unordered list, and a small div that contains a menu icon. It will be visible only at low resolutions.

  • Download price
  • Contacts
  • Reviews

    • As you can see, it’s not complicated, I think you can improve it yourself as needed.
    Now let's add styles:

    #menu ( background: #2ba9c0; width: 100%; padding: 10px 0; text-align: center; ) #menu a ( color: #fff; text-decoration: none; padding: 12px 12px; ) #menu a: hover ( border-bottom: 4px solid #fff; background: #078ecb; ) .itemsMenu li ( display:inline; padding-right: 35px; width:100%; margin: 0 auto; ) .itemsMenu li img( vertical-align : middle; margin-right: 10px; .iconMenu ( color: #fff; cursor: pointer; display: none; ) .showitems ( display:block !important; ) @media screen and (max-width: 600px) ( # menu a( padding-bottom: 13px; ) #menu a:hover ( border-bottom: none; ) .iconMenu ( display:block; ) .itemsMenu ( display:none; ) .itemsMenu li ( display:block; padding:10px 0; ) )

    Now, when you reduce the browser window, you will see the following picture:

    I would really not like to describe every line, because the blog is not about layout as such. Let me just try to explain.

    First, we set the display:inline property to the li elements to make them appear horizontally next to each other. I could have used float:left, but I decided to do it this way. And hide the menu icon with the display:none property. When the screen resolution is less than 600 pixels, remove the inline from the li elements, hide them, and show the icon. In a nutshell - yes.

    Now we need a simple script that would process a click on the menu icon and show its elements:

    $(function() ( $(".iconMenu").click(function() ( if($(".itemsMenu").is(":visible")) ( $(".itemsMenu").removeClass(" showitems"); ) else ( $(".itemsMenu").addClass("showitems"); ) )); ));

    Like this. I took it to separate file and included it before the closing body tag.

    That's all. This way you can quickly create a simple adaptive menu for your landing page.

    Of course there are disadvantages. Indents are specified in pixels, but you can set all distances in percentage. There was simply no need for it. If this were a full-fledged site, then I would use svg or font icons, not png, and I would recalculate the indents as a percentage. And so, it was a little impromptu :) I hope everything is clear? Bye.

    Today we will look at how you can use the plugin to create a full-screen scrolling landing page. That is, your landing page consists of certain blocks, and these same blocks will change only when scrolling with a slight delay. Very famous companies create their landing pages in this style. And today you will learn how easy it is to create such a landing page design yourself.

    Articles on scrolling effects:

    The essence of the effect: there is a slight delay before scrolling to the next block, and then the page moves to the next block. Animation also occurs when scrolling in reverse direction. It seems small.

    Try scrolling this landing page to the end, and then using the menu:

    Download

    Block changing process:

    How to make such a landing page design?1 HTML structure

    First, let's create a menu so that we can not only scroll through the blocks, but also use the general menu.

    The menu structure is standard:

    1 2 3 4 5 6 Block 1 Block 2 Block 3 Block 4

    Let me explain the attributes:

    • data-menuanchor - the attribute is required to create a menu.
    • href is a link attribute that goes to the corresponding anchor with the same ID.

    Now let’s create the structure of all blocks:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14

    There is a general block with the identifier "fullpage" in which there are blocks with content. There is one attribute here that is unfamiliar to you:

    • data-anchor - this attribute is for the functioning of the menu, which we will make work a little later.
    2 CSS Styles

    There are no special styles here, so here I will only place the styles for the menu:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 #menu ( height : 60px ; left : 0 ; margin : 0 ; padding : 0 ; position : fixed ; top : 0 ; width : 100% ; z-index : 70 ; text-align : right ; background : #fff ; ) #menu li ( background : rgba(255 , 255 , 255 , 0.5 ) ; border-radius : 4px ; color : #000 ; display : inline-block; margin : 10px ; ) /*Link style when the corresponding block is active*/ # menu li a , #menu li.active a ( display : block ; padding : 9px 18px ; text-decoration : none ; color : #ccc ; ) /*List item style when the corresponding block is active*/ #menu li.active ( background : rgba(0 , 0 , 0 , 0.5 ) ; color : #fff ;

    All that remains is to connect the script and write a small JS code.

    3 JS part

    Required libraries:

    • jQuery.min.js

    Let's connect them:

    1 2

    Navigation gives a feeling of control, which in itself is not bad. But what about the “one page, one goal” rule? There is no clear answer to this question (like most optimization questions), but there are some great case studies that can help you make your decision.

    Landing Page Optimization

    Landing is an integral part of the strategy to increase profits. On average, lead volume increases by 55% when companies increase the number of landing pages. However, research shows that only 22% of companies are satisfied with their .

    See all these elements above? They distract attention and take you away from the landing page. Navigation that takes you away from your landing page defeats the purpose of its existence.

    A landing page is an autonomous page that a visitor reaches via an advertising link or from search results. Its task is to encourage the user to take an action. For example, get a product demo or register for a webinar.

    It is clear that navigation here does not make much sense, but only 16% of landing pages do not contain it. It is believed that links to go to other sections are needed in the landing page layout. Let's see what split tests show.

    Case "for" navigation
    • understand your location;
    • Easily navigate to other sections.

    There are three types of navigation:

    • main;
    • local;
    • contextual.

    This type represents the main menu of the site. Each element in it leads to a specific section of the resource. The header on the Edgar page is an example of the main navigation:

    Local navigation

    These are subsections of the main navigation in a drop-down menu format that structure the information. There is such a menu on the Zoho landing page mentioned above.

    Contextual navigation

    All three types are necessary to view a resource and organize content on it. They make it easy to move from page to page and get to know the company deeper.

    According to WordStream, as many as 96% of landing pages contain at least one link that takes the visitor away. The numbers say:

    • only 4% of landing pages have no links at all;
    • 81% of pages contain from 1 to 9 links;
    • 14% use more than 10 navigation elements.

    Placing links allows you to solve problems other than the main purpose of the landing page. For example, social buttons. networks increase the number of subscribers.

    Let's take the Meltwater page as an example.

    The landing page not only introduces the product by clicking the CTA button, but also opens the way to other sections through navigation. For those who are not interested in the main purpose of the page, something else may be suitable. It turns out that even if the links lead the visitor away, in the end they work for the result.

    Case against navigation

    Navigation links don't work on a landing page because it's not one of the pages on your site and should be distinct from it. Links on the first window of the resource help you study information by moving from one page to another. On the landing page they simply take the user away.

    It doesn't matter how attractive the headline is, how cleverly the information is presented, or how good the . The navigation link takes you away from the conversion goal, and it is impossible to predict whether the visitor will come back. The user's attention span is limited, so you need to captivate them from the start and remove distractions along the way.

    This also applies to the footer (the footer of the page), filled with links. Imagine a visitor viewing your landing page and about to click on your CTA button, but suddenly gets distracted by the links below. This affects your conversion.

    For example, on Better Homes and Gardens’ sweepstakes landing page, there is a high chance that the visitor will want to learn more about Meredith Corporation and will deviate from the path leading to clicking the CTA button.

    There are enough examples, now let’s see what split tests say about the impact of links on conversion. A test is the best way to find out what is effective on a landing page and what is destructive. To see the positive impact of removing navigation links, just study the AmeriFirst example.

    Marketers wanted to improve performance, but were hesitant to redesign the entire page for fear of losing customer trust. The decision was made to remove the navigation bar, which made the page more organized and led to a 30-40% increase in conversions. Here are the differences between the two pages:

    Similarly, Hubspot tested five landing pages with a high volume of traffic. Version A, unlike version B, had a top and bottom navigation bar and social media buttons.

    The data shows that removing all navigation links increased conversions.

    It is especially interesting that excluding navigation from the middle of the conversion funnel resulted in an increase of 16% and 28%, and from the top of the funnel - 0-4%.
    When the Minders team tested their landing page and removed the navigation bar, within a month the conversion increased from 9.2% to 17.6%.

    Test number four. Yuppiechef is a leading online retailer of premium kitchenware based in South Africa. They tested removing the navigation bar to prevent visitors from being distracted from the main conversion task of registering to create an online wedding gift list.

    This is what happened after removing the navigation bar:

    This option increased the conversion to 100%.

    When there are no extraneous links on the landing page (except for the CTA button), nothing distracts the user from the main task. A landing page without links is focused on one action, which means the visitor will pay attention to it. But navigation links are not just a distraction—they are fraught with material losses.

    If you use a landing page to promote, then you pay for each visitor. And if the page does not lead to the conversion goal, you are simply losing money. Regardless of how you create a landing page - using a template or from scratch, navigation links take visitors away from the main task, switching to secondary ones.

    It is worth clarifying that it is quite normal to place links that make it easier to navigate and work on the page. Long landing pages practice placing movable navigation panels, which helps move from one block of information to another.

    The Conversion XL agency page has a menu that allows you to move around the landing page without scrolling.

    If there is a lot of information on the page, the menu in the header will allow you to immediately go to the required section. This is more convenient than endless scrolling of sections.

    This is how the Google App page works:

    Conclusion

    Unlike a website, a landing page should lead to a specific action and focus attention on it. When you add links, the chance of losing visitors increases.

    On a regular resource, navigation is necessary. It is also worth providing the visitor with a site map, because he needs to view several pages with different offers. But it’s pointless to put links on a landing page, because it’s unlikely to get lost on a single page created for a specific task.

    So the data is relentless. A landing page should serve one purpose. You shouldn’t give your visitors a whole menu of reasons to leave you.

    How to create a link in the landing menu? Yes, very simple! Just copy part of the code (a couple of lines) and paste it in the right place. Now let's look at all this. But let’s explain first. Initially, it is assumed that the landing page does not lead anywhere (meaning to other pages), it is a one-page site. Therefore, all links in theory should only lead to sections of the LP() itself. Sometimes it is necessary to put a link to another page, for example, to the privacy policy. We have already described all these details in the article “”. Let's consider both options for adding hyperlinks to a one-page page.

    As an example, we will use our resource “”. Follow the link to the page and press the key combination Ctrl + U (no need to switch the keyboard to English). The html code of the page will open.

    Landing page HTML code

    Hyperlinks on websites are enclosed in special HTML tags. Tag has an href attribute = followed by a legal address, a link to a page (another) or an anchor to a part of the document with a # sign and a title, something like this Bonus


    Menu code

    Now you need to forward to the desired part of the landing, for this you use the identifier id = “the name that was used in the menu with the # sign”, in our case “screen”, see the picture


    ID from menu

    Now let's create additional link on the footer (footer). For this purpose in some way html editor, for example NotePad++, simply copy one of the existing menu links and paste below after the cost. Next, after the # icon, replace it with futer and the word after the bird >Footer. This is what you should get.


    added new link on the menu

    Start your business on the Internet - open affiliate internet shop. In the article "", given step-by-step instruction upon launch, without investment. And by subscribing, you will receive a whole course on this topic and absolutely free. Also see “”, the article gives real cases and principles for bringing a resource to the TOP of search results.


    Menu before added link
    Menu after adding code

    Next, you need to put the id in the right place. To do this, go to the bottom of the document and look for a div with the name footer, I deliberately made a mistake in the new menu name and put footer, since the id must be unique. This is what the result should be, see screenshot.


    Setting an identifier from the menu Replacing a link to another page

    With the help of our miracle editor and cool templates, you can easily edit all texts, sections and create a cool selling landing page.