How to make a banner clickable. How easy it is to make a banner or make a picture a link, that is, clickable The best banner

Instruction

Make the banner clickable by placing it in a hyperlink. Use the HTML element A. Add a start tag with an href attribute whose value points to the target resource, as well as an end tag. For example: This is the easiest and most commonly used way to add banners to web pages. In fact, the image here is the anchor of the link.

Use custom maps to create multiple hotspot links on the banner image. In the document's HTML markup, add a MAP element with a name attribute that specifies the name of the map. In the MAP, place one or more AREA child elements, with the href, shape, and coords attributes set to the correct values. For example: On the IMG element that defines the banner, add a usemap attribute that refers to the client map. For example: This method allows you to use one banner to redirect the user to different resources, depending on which area was activated.

Use the ability to handle user input events by client scripts to initiate the transition process when clicking on a banner. Set the onclick handler to the corresponding document element. This can be done by adding the onclick attribute to the HTML markup: or directly from the script: This method allows you to flexibly manage the process of redirecting the user when clicking on the banner, however, when scripts are disabled in the browser.

Embed the banner in the web page using an INPUT element of type image included in the form to make it clickable. An INPUT element with a type attribute of image defines a graphical submit button. The address of the image resource is given by the src attribute. For example:

The use of this method of displaying a banner provides great opportunities. For example, it is possible to pass a fairly large amount of additional data to the server using hidden fields, especially using a POST request to submit a form. You can do something with the form before submitting it by assigning an onsubmit handler. A button image can be assigned a client-side map using the usemap attribute.

We've all seen bright, colorful streamers on the streets that grab the attention of potential customers. This type of publication on the Internet is also attractive and more informative for a person. Agree that we pay more attention to properly designed modules.

Banner sizes

Space on a web page is limited, so any content has its own place and appropriate dimensions. This point should be taken into account when designing. Ads of this type differ in their sizes in pixels:

• 468 x 60 - long or full banner. It is the most common, most often even when developing website design, a separate place is allocated for it;
• 392 x 72 - long banner with vertical navigation bar;
• 234 x 60 - these are usually arranged in groups of several pieces;
• 120 x 240 - this is more often used to advertise services and goods and is located vertically;
• 88 x 31 - buttons that range in size from square 125 x 125 to micro buttons.

Types of banner advertising on the Internet

According to the form and method of creation, banners are divided into graphic and text.

• Image ad image format is gif, jpeg, png. They can be either static, when the module is based on just one picture, or dynamic, i.e. multiple interchangeable images. Their main advantage is the simplicity and convenience of their creation. But their possibilities, unfortunately, are limited by slow loading. Search engines quickly index both static and animated publications, which has an undeniable advantage in the process of promoting any resource.
• Text blocks are banal text blocks without images or animations. It looks, of course, not very creative, but they load quickly and do not irritate the user.

More often you can see a text-graphic hybrid.

Related formats

1. The sister of banner advertising is teaser advertising. It is used to drive traffic to sites with pirated content, to sell miracle weight loss products, and so on. For her, they always use an unusual and shocking design to attract the largest possible number of people, this is something akin to yellow press.

Pop-up blocks. When you click on an advertising module, the page can open in a separate window above the one being viewed - this is the so-called pop-up or under the page - pop-under. The meaning of such a move is to switch the visitor's attention to yourself or to attract, but after closing the page of interest. This can be quite annoying, especially when using sound effects.

Online advertising may look like pop-up messages from social networks. They are located at the bottom left or right of the page. This view attracts with familiar content, but at the same time manipulates the user.

Advertisement over the page. Often there are modules on the net that can cover half of the page being read - these are float banners, they also belong to rich media. This method makes the ad more visible due to interactivity and provides a fairly high click-through rate. But despite this, they harm the site with their obtrusiveness.

Creation technologies

• The use of flash-technologies is now the most popular and allows you to make the design whatever you like.
• Application programs are written in Java and embedded in HTML documents. For the correct display of such banners in the browser window, special plug-ins are required. Now they are present in the packages of almost any software for working on the Internet. There are no special functional advantages of such modules. You can edit some elements, perform simple manipulations with objects, track when the user clicked the mouse or pressed keys on the keyboard, and so on. But they take a long time to load, and can often be displayed incorrectly due to a lack of any settings.
  Such objects can be attributed to the so-called rich media or advertising media, which are distinguished by their interactivity and attractiveness to the user, but are difficult to manufacture.

Purpose of banners

Banners can be divided according to the tasks that are set before their creation:

• Target. The point is to attract the attention of the target audience, provoke a desire to click on the ad and ensure a transition to the promoted site.
• Informational. They carry the goal of telling a potential client about goods and services that may be of interest to him. In addition, they can spur a desire to learn more about these products and eventually make a purchase.
• branded. They make the brand recognizable, increase the degree of trust in it.
• External. They aim to lead the user from one resource to another.
• Internal. They help to move from page to page within the same site.

Benefits of banner ads

• This type of promotion is suitable for large and well-known organizations, as well as for young, developing ones. Everyone is equal here
• This is a great opportunity to influence the reputation and image of the brand. Almost every Internet user visually or subconsciously evaluates the tools that a company uses to promote its products.
• Making, placing and editing an ad on the Internet is much cheaper than ordering a street version.
• You can always choose a place to stay. The advertiser knows his target audience, its social, demographic and geographical characteristics and sets the necessary parameters, taking into account these aspects. Due to this, only potential customers see his ads. For example, in Yandex contextual display advertising shows banners that match user requests. You can read about it in the article about ICD on the Semantics blog.
• You can always track the success of such a promotion strategy, and if the desired results are not achieved, you can change the promotion strategy.
• You can find out about the success of your actions in the near future. The result depends on the correctness of the ad settings, the choice of the site for placement and the visual design of the block.
• And you can always remove unnecessary publications and make changes to existing ones, add new elements and change the text.

Rules for working with banners

The high popularity of banners indicates the effectiveness of their use. But there is always a chance that visitors will become indifferent to the effects that you use to attract their attention. To prevent this from happening, it is important to consider the following points:

1. Define your target audience.
2. Formulate goals and objectives.
3. Consider design.
4. Write such text of the advertising message to arouse interest and desire to go to the resource.
5. Analyze the use of this tool and draw conclusions.
6. Make adjustments if needed.

If data analysis is not satisfactory:

• Examine the position of the block on the page and its design. This is necessary in order to exclude ignoring by the user (consciously or unconsciously - the so-called banner blindness).
• Play with the color scheme of the banner. Learn how color affects the perception of information.
• Try placing your ad in an unusual place on the page.
• Choose sites where the amount of advertising will not force the user to leave the resource.

Where to post and how to pay

You can pay for the placement of the published in two ways:

1. Static - this is when its cost will be calculated from the term of renting a place on the site.
2. Dynamic - when the payment will depend on the number of clicks.

The cost of placement will depend on several factors: where you plan to place banner advertising and who will see it on the Internet.

• Try to negotiate with the site owner. This will help to significantly reduce the cost of rent, in contrast to the placement on the stock exchange. There is always the possibility of posting online for free.
• If you want your ad to be seen by users in Moscow or St. Petersburg, be prepared to pay more.
• If a business has a lot of competition, its promotion will always be more expensive.
• Choose a long-term placement and you will get more traffic.

We see examples of banner advertising on the web all the time, on almost every information resource. If you approach development in the right way and choose a quality site for placement, you will quickly notice an increase in popularity. Always analyze the click-through rates of your publications and respond to changes in a timely manner.

Viewed: 1 139

Reading time: 5 min.

Banners on websites are very popular - especially on the home page. But an incorrectly designed banner can only spoil everything, not help. For example, fast flickering of banners is annoying and makes you want to leave the site as soon as possible. How to make a clickable banner to arouse interest, not anger of visitors?

How to make a banner

RCT principle for banners

All banners must be designed according to the EDP principle:

• "O", or offer. A specific offer for your client. Indicate in the banner what benefits your product brings.
• "D", or deadline. Limiting your promotion (by time, by quantity or by price)
• "P", or call to action (buy, learn more, etc.)

Remember: a good banner contains as much information as is enough for a click.

Let's take a closer look at 3 deadline options:

1. Time limit

A frequently used option in a banner is a special offer restriction. The bottom line is that you offer delicious conditions that are valid until such and such a date. Better yet, indicate in the banner that the promotion is valid for 24 hours or 3-4 days. The less time visitors have to think, the more clicks on your banner.

2. Price change

Demonstrate in the banner how much time is left to buy a product or service at a bargain price. Let the visitor understand that in N days the price of the product will change and how much he will have to overpay if he does not buy the product now.

3. Quantity limit

You need to show the customer that the product is running out. For example, indicate in the banner - "Only 17 copies left." For greater effect - 5 out of 17 are already booked. All this forces the buyer to hurry up with the decision.

2-3 banners in a slider

No need to create a large number of banners. It doesn't make sense because users don't spend much time on the homepage to see all of your promotions. As a rule, the first 2-3 banners will receive the main attention.

Instead of a slider, it is better to place one static banner. It will allow you to better remember your action without annoying visitors with flashing pictures.

But if you want to place 2-3 banners, then you should consider the following features.

1. Banner speed

Banners should not rotate quickly, otherwise the user will not have enough time to view the banner he is interested in. As a result, he will feel awkward, forced to wait for the banner he needs to appear in the slider again. Don't make your customers feel like they have no control over the situation - it's very annoying.

However, if the automatic banner rotation is too slow, the opposite effect will take place. Users will simply get tired of looking at banners that are of little interest to them.

Thus, try to find a middle ground. Adjust the rotation speed of banners so that it is not fast, but not slow either - just enough for viewing. 5-7 seconds is usually enough, provided there is no abundance of text in the banner.

2. Sequence of banners

Most users will not have time to see all the banners in the slider, even if you set automatic rotation. They just don't spend that much time on the front page. As a rule, they scroll or go to another page long before all the banners are shown.

Therefore, the sequence of banners in the slider is so important. The first banner gets more attention than all subsequent ones. If the banner does not interest the visitor, then it is likely that the rest will not be viewed at all. Thus, the sequence of banners must be carefully considered.

Fast rotation leads to the fact that users do not have time to view the offer. Therefore, auto-rotation should be temporarily suspended when the banner is in focus, i.e. when the mouse is hovering over it. At the same time, it is necessary to visually show the visitor that the carousel responds to his movements, so as not to mislead him that the banner has stopped working.

4. Manual interaction

Automatic rotation must be terminated after any active user interaction with the banner. For example when he clicks on the buttons (next/previous) to display a new banner in the carousel.

Conclusion

Some users ignore the carousel due to banner blindness. Others may simply not like such a design element. But stick to all of the above to get the best results when using banners. Visitors will find the banners more enticing and useful. And as a rule, the first impression is very important for the site to arouse the desire to further explore the site.

Article written for "LPGenerator"

Popular Articles

How to easily and simply make a banner or make an image a link, that is, clickable

Today I will tell you how I make a banner or any image in messages clickable. This can be done in two ways. The first way is using the code

link address" target="_blank"> image address " />

To do this, you need to upload a picture to any photo hosting and take link No. 1, i.e. the address of the picture. The URL of the link is the page that will open when you click on the image or banner.

Copy the code into a notepad on your PC and carefully paste the link addresses and pictures (do not confuse)

Paste into a post in the advanced editor when you click on SOURCE

Send a message to PREVIEW or DRAFT and check the result for clickability. I, for example, carry out all the manipulations with the picture in the DRAFT, and then each time I take the finished image code from the draft and insert it into the message.

And I made this banner in a regular Worde

The second method is very easy. With the help of simple manipulations, when loading a picture into an advanced editor directly from a computer, you can make any picture not only clickable, but with pop-up text when hovering over the picture. To do this, click on the IMAGE icon and load the picture from the PC. When the picture is loaded, go to the LINK tab

Click OK and admire the result.

For those who want to work with the code, for a clickable image with a pop-up text, I give the code, just do not forget to insert the image dimensions instead of width=100 height=100, where width is the width and height is the height of the image

URL of the page the banner will point to"target=_blank> The address of the picture from the Internet or from the Radical (link No. 1)"border="0" title="(!LANG: Text visible as tooltip when hovering over a link. " width=100 height=100> !}

Banners are one of the most common forms of online advertising to increase online traffic. Banners are clickable images on web pages that showcase a product or brand and link to the advertiser's website. Most companies use them in one form or another because they are an accessible, measurable, and effective medium for building brand awareness.

The design of web banners involves the creation of the most clickable advertising objects. There is a whole branch of web design that focuses on creating effective banner ads.

1. Use the most effective standard banner sizes

728 × 90 px - long banner banner, leaderboard (Leaderboard),
300 × 600 px - half page banner (Half Page),
300 × 250 px - medium-sized rectangle (Medium Rectangle),
336 × 280 px - large rectangle (Large Rectangle).

The most common banner sizes. Leaderboard on top, half page banner on the left, medium and large rectangles on the right

2. Place banners correctly

Buy space on the site above (Above The Fold) close to the main content of the page, then your design will be visible to everyone.

3. Maintain hierarchy

In banner ads, it's important to rely on balance within each ad, so keep an eye on the hierarchy. Effective banners increase brand awareness and drive traffic to your website. They contain three main components:

1. - promotes awareness. Should visually dominate, but slightly less than a value proposition or call to action.

2. (Value Proposition) - explains what product / service you offer and attracts attention with an attractive offer and prices. As a rule, here you can see phrases like " high quality”, “50% off” and “time-limited promotion”. This element occupies the main space, and it is this element that the audience should first notice.

3. (Call to Action, CTA) is text or a button that invites users to click it. Usually they write something like “Learn more”, “View” or “Get started”. The call should be the focus of the advertisement.

4. Keep it simple

Keep your graphic elements and content simple but memorable: most likely, visitors will only glance at the banner once - and this glance will not last more than a second.

5. Implement buttons wisely

Buttons increase click-through rates (Click-Through Rate, CTR). Place them after the text, closer to the lower right corner. Use a contrasting color and don't forget about taste! Buttons should have a consistent design throughout the set advertisements.

6. Frame your banners

Our eyes immediately rush to the objects in the frame. Effective banners use clear borders and graphics that extend beyond the edges of the square. If the background of the advertisement is white, then a one-pixel gray border is usually drawn around it.

7. Make text instantly readable

The title and body text should be different sizes. The entire text should not exceed four lines:

It is not recommended to use cursive or cursive fonts, very thin writing, write text only in capital letters, or use a font smaller than 10 pt (unless it is a disclaimer or copyright notice).

8. Use animation

Animated banners tend to perform better than static banners, but you need to make sure they don't detract from the main message of the ad:

Use a simple animation that is no longer than 15 seconds and loops no more than three times. Good idea- make the last frame a clear call to action.

9. Complement organically to stand out

10. Connect with the brand

11. Instill a sense of urgency

Visually, urgency is created by bold, contrasting colors. Banners should not be modest and inconspicuous.

12. Choose your media wisely

Graphics and photographs must be relevant to the product. Their goal is to get the message across better. No abstractions. Can't afford professional photographers and models? Pay for . You can find original illustrations or order graphics from a designer.

Images are generally optional. Masterfully composed text and good typography will create a similar effect.

13. Choose the right colors

Every color. It's important to think about what type of emotion you're evoking in your audience, as color is the first thing people notice in a design.

The science of color is subjective, and colors have different associations in different cultures. Explore target audience before choosing colors. Here are examples of emotions evoked by different colors in Western people:

• Red passion, rage, excitement and love. A powerful color that attracts many, but it is better to apply it carefully. Avoid red if you're aiming for a classic, mature, serious look.
• Orange- playfulness and enthusiasm. Unlike aggressive red, orange energizes. A great choice for a call to action button.
• Yellow Joy, sunshine, friendliness. Yellow attracts the eye and radiates energy, creates a feeling of youth and affordability.
• Green- health, freshness, wealth, Environment, growth, care and the beginning of something new. Our eyes are pleased to look at him.

• Blue- security, confidence, clarity, maturity, serenity, intelligence, formality, recuperation, coldness and masculinity. This color is present in more than half of all logos in the world.
• Violet- luxury, grandeur, extravagance, wisdom, magic, femininity and creativity. It has a calming effect on the audience.
• Pink- love, sympathy, femininity, youth and children. Usually pink is associated with something feminine, but it all depends on the tone and brightness.
• Black- exclusivity, mystery, modernity, power, prestige, luxury and formality. The traditional choice, in particular black text on a white background, is the most readable color combination.

• White- virginity, purity, modernity, sterility, simplicity, honesty and innocence. Creates a sense of economic justification and involvement in youth.
• Brown- nature, wood, leather, seriousness, masculinity, stubbornness / rigidity and modesty. Brown creates a balance between stronger colors and therefore works well as a background.
• Grey- neutrality and practicality. When used as a background, enhances other colors.

14. Keep file sizes small

The smaller the better - less than 150 kb, as recommended Google Adwords. You need the ad to load quickly, otherwise visitors will scroll down the page without noticing it.

15. Use the right file formats

JPG, PNG, GIF or HTML5 is what you should work with. Typically, designers create graphics in Adobe Illustrator or Photoshop and get JPG, PNG or GIF files, or they use Google Web Designer or Adobe Animate and have HTML5 output.

Conclusion

That's it. We have listed the basic rules, so you are ready to create quality banners. If you are not a professional designer (or are busy promoting a business), then it is better to hire a creative specialist who will create the perfect clickable ad just for you.

Also take care of where the user will go after clicking on your banner. The ideal strategy usually looks like this:

Offer in the form of a banner → transition to the landing page → subscription to the newsletter → Lead Nurturing

Yes, of course, you can send the user to pages actual goods, i.e. product landing pages of the store - not necessarily on the page with a subscription - but this is your choice.

You can create a landing page to match your banner in our . Take as a basis or start from scratch - the editor is available for both beginners and professionals.