Promotional banners on websites have become one of the most infallible tools when it comes to attracting customers and users. Since they are attractive and accessible from any platform on which they are used.
In addition, creating a promotion banner through HTML and CSS codes is one of the most complete ways that you can access. Since both code tools allow your promotion banner to look as attractive as it is original.
For this reason, we will show you the steps you must follow so that you can create a creative and visually attractive promotional banner with CSS and HTML codes. In this way, you will have the basic knowledge for the design of this element on your website.
Index( )
- Basic concepts of CSS and HTML code
- What should I keep in mind to design creative banners?
- Mistakes to avoid when designing a promotional banner
- Steps to create promotional banners with CSS and HTML codes
- Have navigation links
- Design the Banner Ribbon
- Add a layout style
- How to design a responsive banner with HTML or CSS
- What to do to create an animated banner using codes?
- Most used codes in CSS to make advertising banners
- For graphic elements
- For spaces or margins
- To add text
Basic concepts of CSS and HTML code
One of the most accessible ways to create promotional and creative banners for your website is through HTML and CSS codes. So it is necessary that you handle the basic concepts that each one has before you start programming your banner.
So HTML code is not a programming language , but rather a markup language. Well, it is used to define the concept of a web page, such as colors, images, texts, lists, among others. Hence, HTML documents can be used to create Web pages .
In this way, HTML and CSS codes are usually identified as an intermediate point between what is programming and design . Since CSS and HTML, together with JavaScrip, make up the visual part of a web page, also known as Front-End.
For its part, the CSS code is the complement for HTML, since CSS creates an emphasis on the style or aesthetic part of the web page.
Therefore, these two codes are one of the best alternatives to create professional web pages and include creative professional banners in the same through their functions.
What should I keep in mind to design creative banners?
When designing a banner, we must take into account a series of things so that it is attractive in the eyes of the public to whom we want to address and thus not go unnoticed like the rest of advertising on the network, in this article we will indicate the points on which you should focus your attention when creating a banner:
First you must be clear about the objective , that is, know what product you are going to offer and create an advertising campaign just for it. If you want to sell several products, work them separately. In this way, you will generate more traffic on the networks and you will reach more consumers.
You must know which audience you will focus the product on , knowing the customer is extremely important, for this you must take into account sex, age and nationality, knowing tastes that can be acquired by the majority will also help you create the most striking advertising banner.
The message that you are going to give in the banner should be short and direct, if you are not clear or you put a lot of text, people will stop reading it, since it will make them something tedious. Last, but not least, your banner must have an attractive design , there must be harmony between background and fonts, aestheticity is very important, you can also choose between animating it or making a static banner.
Mistakes to avoid when designing a promotional banner
You must be very careful when designing your advertising banner, since making some design mistakes far from calling customers could make a repellent for your product, these are some mistakes that you should avoid at all costs:
Not using the right fonts (typography) this part is very important because it conveys the message that we want to convey to the consumer, it must be a legible font with the right size, it is not recommended to use more than two fonts, this creates chaos in the image.
Do not use photos with too high a quality, this causes our banner ad to be slower to load, therefore ignored by most. Also try to use an appropriate color palette , very important not to exceed four colors in the banner.
Do not use a lot of text in the image, if you write a whole will in your advertising you will only bore the potential consumer, who will leave without reading a quarter of the ad. You should also always try to highlight the brand of the product .
Steps to create promotional banners with CSS and HTML codes
Promotional banners are currently one of the most attractive digital marketing tools . Since it is possible to add this promotional HTML and CSS banner to social networks or web pages to attract and attract the attention of users.
To begin, you must open the line of code of your web page and access the HTML section . Once there, you must give the title to your promotional banner, you can use a first level header. Then, you must use a subtitle or h2 to define the object or reason for your promotion.
Now, you can use a third-level heading or h3 to establish how much discount your promotion will be . Now, you can establish a paragraph to attract more users’ attention by defining that it is a limited promotion and inserting a tag anchor to redirect to the order of said promotion.
Later, to make the promotion look like a banner, you must insert a div content tag at the beginning and end of your HTML code.
Once you have created the promotional banner with HTML code, it is time for you to make the creative touches corresponding to said banner using the CSS code. To do this, you must use a tag cloud with CSS for your web page , in order to style it.
For this, it is ideal that you start with giving a background to your promotion banner, so you should start by entering the name of your banner. Being, in the case of the previous instruction, that of the container div. Now, to proceed to place the background of the banner, you must insert the ‘background’ property and the color with which you want your promotion banner to be seen.
On the other hand, in case you want your promotion banner to contain a background image, such as the original logo of your website, you must use the ‘background-image’ property. To use this, you must give it the value of a URL that contains the image you want to use as the background.
Likewise, by means of the code ‘background-size’ you can define the size of the image or color with which your promotion banner will be covered . In this way, when you have added the features of your preference, you will have successfully created a completely original promotional banner.
Have navigation links
It is very important to get a banner with a navigation link, since in this way it will go from being a simple image to advertising on the network, there are pages like Oleoshop that facilitate the process of obtaining a link , with step-by-step explanation and price very accessible. Take this as a small investment to grow your business.
Design the Banner Ribbon
If you want to create a modern banner quote, you can go to the use of HTML / CSS3 , CSS3 is one of the best options, since it is more solid, has a wide support, it has modern and aesthetic design options, virtually unlimited in addition of funny graphics.
Add a layout style
To create a banner design we must use the CSS programming language. With it we can apply an infinite number of effects, colors and design according to our idea through the code. If we don’t have a lot of ideas regarding design, we can search for ideas on platforms like Pinterest. We can also look for design or banner templates on the web that in some cases we will have the code available to have the basis of the design and then we can customize to our liking.
How to design a responsive banner with HTML or CSS
If what you want is to create an HTML banner, you can go to the Google Web Designer application. Once the program is installed on your computer, click on ‘ create new file’ then we add our images and create our banner. It only remains to export the result
On the other hand, to design a CSS banner we can also go to the Google Web Designer application or do a quick search in the browser to obtain the CSS-style code that we need to display the banner on our website, only replacing the spaces that indicate us. A good source of codes is TheDigitalMike page .
What to do to create an animated banner using codes?
Today there are a wide variety of applications for editing on the web, which can help us add animations to the code of our advertising banner. Creatopy is one of them, if you are a beginner and do not know about code management, you can still animate your own advertising .
Creatopy has its own HTML5 editor, we can find thousands of templates for creating professional animated ads, it also provides more tools for creating the code , you just have to follow these simple steps:
Enter the Creatopy platform, locate the available banner sizes in the menu, choose one and start designing, through the HTML 5 editor we can choose the animation that we like the most, we customize by adding the font and images , finally we provide animation the banner applying the previously selected template and download the result. Some types of promotional banners that you can design
There are several formats of banner advertising on the web, some more striking than others. Some of the most suitable to sell a product are the following:
Header style banners are those that are located at the top of the page . Being fully visible, they are the ones that generate the most traffic, that is, they reach the greatest number of people.
The rectangular banner at the foot of the page, these are the most common, although they do not move as many visits as the header ones, in the long run they reach a good number of people .
Banner in content, these are the banners that you can find in the middle of a page when, for example, you read the news, they are more likely to be seen because they suddenly burst in, being one of the ones that generates more traffic.
Most used codes in CSS to make advertising banners
The codes are the basis of the banner , there is a great variety of codes that edit certain aspects of it, be it typography, color or border. Below we will mention some of the most used in advertising banners:
The ‘font-family’ code , which establishes a typographic font, accompanied by the ‘font-style’ , which defines the style (normal, italic or oblique). We also have ‘font-variant ‘ which converts lower case to upper case, but smaller; ‘border: 1px solid # 000’ which adjusts the borders, ‘color: #fff’ for the text color and ‘width: 100px’ for the width in pixels, specifically 100 pixels.
For graphic elements
The most popular codes in CSS for modifying images are ‘width’ that modifies the width of an element or image, normally it is defined in pixels, ‘height’ defines the height of an element ‘background-color’ that changes the color of background of an element, ‘background-image ‘ which would be the background image for an element, finally ‘background-position’ which indicates the position of the image within the background.
For spaces or margins
The most popular in this category are: ‘margin-top’ which is margin up, ‘margin-right’ to move the margin to the right, ‘margin-bottom’ move margin down, ‘margin-left’ margin to the left, ‘letter-spacing’ to create spaces.
To add text
Finally, the codes that we use to edit the text of our banner are ‘font-family’ to set the typography, ‘font-style’ , ‘ font-variant ‘ and ‘font-weight ‘ that edits the thickness of the font.
