Beautiful breadcrumbs using CSS. Breadcrumb design based on CSS3 Breadcrumbs design
Breadcrumb navigation helps site visitors navigate the hierarchical structure of documents and find their way to top level. Therefore, if the site contains a large number of documents, then it must be provided with “bread crumbs”. This lesson will present CSS code for creating various design options for such a necessary navigation tool.
HTML markup
The markup is simple and minimal. It is based on an unordered list.
CSS
First, let's do a little CSS reset for our unordered list:
Ul( margin: 0; padding: 0; list-style: none; )
We will use pseudo-elements to design our breadcrumbs.
First example
IN in this example A very simple technique is used. A triangle is created on the frame on the right using pseudo-elements placed one above the other. The dark triangle is offset to create a frame effect.
#breadcrumbs-one( background: #eee; border-width: 1px; border-style: solid; border-color: #f5f5f5 #e5e5e5 #ccc; border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0,0,.2); overflow: hidden; width: 100%; ) #breadcrumbs-one li( float: left; ) #breadcrumbs-one a( padding: .7em 1em .7em 2em; float: left; text- decoration: none; color: #444; position: relative; text-shadow: 0 1px 0 rgba(255,255,255,.5); background-color: #ddd; background-image: linear-gradient(to right, #f5f5f5, # ddd); ) #breadcrumbs-one li:first-child a( padding-left: 1em; border-radius: 5px 0 0 5px; ) #breadcrumbs-one a:hover( background: #fff; ) #breadcrumbs-one a ::after, #breadcrumbs-one a::before( content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em; ) #breadcrumbs-one a::after( z-index: 2; border-left-color: #ddd; ) #breadcrumbs-one a::before( border-left-color: #ccc; right: -1.1em; z-index: 1; ) #breadcrumbs-one a:hover::after( border-left-color: #fff; ) #breadcrumbs-one .current, #breadcrumbs-one .current:hover( font-weight: bold; background: none; ) # breadcrumbs-one .current::after, #breadcrumbs-one .current::before( content: normal; )
CSS shapes are built using pseudo-elements placed before and after an element.
#breadcrumbs-two( overflow: hidden; width: 100%; ) #breadcrumbs-two li( float: left; margin: 0 .5em 0 1em; ) #breadcrumbs-two a( background: #ddd; padding: .7em 1em ; float: left; text-decoration: none; color: #444; text-shadow: 0 1px 0 rgba(255,255,255,.5); position: relative; ) #breadcrumbs-two a:hover( background: #99db76; ) #breadcrumbs-two a::before( content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-width: 1.5em 0 1.5em 1em; border-style: solid; border- color: #ddd #ddd #ddd transparent; left: -1em; ) #breadcrumbs-two a:hover::before( border-color: #99db76 #99db76 #99db76 transparent; ) #breadcrumbs-two a::after( content : ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid #ddd; right: -1em; ) #breadcrumbs-two a:hover::after( border-left-color: #99db76; ) #breadcrumbs-two .current, #breadcrumbs-two .current:hover( font-weight: bold; background: none; ) #breadcrumbs-two .current::after, #breadcrumbs-two .current::before( content: normal; )
The border-radius property rounds the corners of rectangles and squares. The square is turned to make a diamond.
#breadcrumbs-three( overflow: hidden; width: 100%; ) #breadcrumbs-three li( float: left; margin: 0 2em 0 0; ) #breadcrumbs-three a( padding: .7em 1em .7em 2em; float: left; text-decoration: none; color: #444; background: #ddd; position: relative; z-index: 1; text-shadow: 0 1px 0 rgba(255,255,255,.5); border-radius: .4em 0 0 .4em; ) #breadcrumbs-three a:hover( background: #abe0ef; ) #breadcrumbs-three a::after( background: #ddd; content: ""; height: 2.5em; margin-top: -1.25em ; position: absolute; right: -1em; top: 50%; width: 2.5em; z-index: -1; transform: rotate(45deg); border-radius: .4em; ) #breadcrumbs-three a:hover: :after( background: #abe0ef; ) #breadcrumbs-three .current, #breadcrumbs-three .current:hover( font-weight: bold; background: none; ) #breadcrumbs-three .current::after( content: normal; )
Using pseudo-elements, two rectangles are added. Then they round the corners.
#breadcrumbs-four( overflow: hidden; width: 100%; ) #breadcrumbs-four li( float: left; margin: 0 .5em 0 1em; ) #breadcrumbs-four a( background: #ddd; padding: .7em 1em ; float: left; text-decoration: none; color: #444; text-shadow: 0 1px 0 rgba(255,255,255,.5); position: relative; ) #breadcrumbs-four a:hover( background: #efc9ab; ) #breadcrumbs-four a::before, #breadcrumbs-four a::after( content:""; position:absolute; top: 0; bottom: 0; width: 1em; background: #ddd; transform: skew(-10deg ); ) #breadcrumbs-four a::before( left: -.5em; border-radius: 5px 0 0 5px; ) #breadcrumbs-four a:hover::before( background: #efc9ab; ) #breadcrumbs-four a ::after( right: -.5em; border-radius: 0 5px 5px 0; ) #breadcrumbs-four a:hover::after( background: #efc9ab; ) #breadcrumbs-four .current, #breadcrumbs-four .current :hover( font-weight: bold; background: none; ) #breadcrumbs-four .current::after, #breadcrumbs-four .current::before( content: normal; )
Benefits of CSS3 Breadcrumb Design
- No images, so easy to update and maintain.
- Easily scalable.
- Backwards compatible with older browsers.
In this lesson, you will learn the process of creating breadcrumbs in Bootstrap 3 and 4.
Breadcrumb markings
Breadcrumbs (“breadcrumbs”) are a navigation scheme that shows the user’s current position on the site. They are used to display hierarchically organized information. For example, in an online store, breadcrumbs are usually a chain of sections. With their help, the user can determine which section he is in now, and they also allow him to move to sections more high levels, i.e. provide another opportunity to navigate through the site structure.
Breadcrumbs in Bootstrap are a regular ordered list with a breadcrumbs class. The list item separator is automatically added with using CSS(bootstrap.min.css) via the following class:
Breadcrumbs > li + li:before ( color: #cccccc; content: "/"; padding: 0 5px; )
An example of creating breadcrumbs using Bootstrap.
Designing breadcrumbs in Bootstrap
One more example:
Breadcrumbs for navigating through archived information
Not a standard design option for bread crumbs
Let's look at an example of creating next option decorating bread crumbs:
Example of designing breadcrumbs on a website
The process of creating breadcrumbs consists of developing HTML structure and styling (CSS).
Breadcrumb CSS:
/* breadcrumbs */ #breadcrumb ( list-style: none; display: inline-block; padding-left: 0px; ) #breadcrumb .icon ( font-size: 14px; ) #breadcrumb li ( float: left; ) # breadcrumb li a ( color: #fff; display: block; background: #cc2eaa; text-decoration: none; position: relative; height: 34px; line-height: 34px; padding: 0 10px 0 5px; text-align: center ; margin-right: 23px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; ) #breadcrumb li:first-child a ( padding-left: 15px; -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px; border-radius: 4px 0 0 4px; ) #breadcrumb li:first-child a:before ( border: none; ) #breadcrumb li:last-child a ( padding-right: 15px; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0; border-radius: 0 4px 4px 0; ) # breadcrumb li:last-child a:after ( border: none; ) #breadcrumb li a:before, #breadcrumb li a:after ( content: ""; position: absolute; top: 0; border: 0 solid #cc2eaa; border-width: 17px 10px; width: 0; height: 0; ) #breadcrumb li a:before ( left: -20px; border-left-color: transparent; ) #breadcrumb li a:after ( left: 100%; border-color: transparent; border-left-color: #cc2eaa; ) #breadcrumb li a:hover ( background-color: #a22587; ) #breadcrumb li a:hover:before ( border-color: #a22587; border-left-color: transparent; ) #breadcrumb li a:hover:after ( border -left-color: #a22587; ) #breadcrumb li a:active ( background-color: #a22587; ) #breadcrumb li a:active:before ( border-color: #a22587; border-left-color: transparent; ) # breadcrumb li a:active:after ( border-left-color: #a22587; ) #breadcrumb li.current a ( pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box -shadow: none; box-shadow: none; opacity: .65; )
Color changes are made by editing the values of the corresponding CSS properties.
HTML markup:
Maintaining the current element (if it will be used in the chain) is done by adding the class current to the li element.
A beautiful and original selection of bread crumbs, made in a flat design, using CSS3, in a different palette of shades. Of course, the visibility of navigation, in the form of buttons, greatly helps both the site user and guests, this is to navigate the Internet resource where you can navigate key phrases, what will be shown to us. But it also suits the style perfectly; more and more you can see that some people install it on the forum module, not to mention modern design.If you think you have a lot of material, then it is recommended to enable this functionality. The list style will not be to avoid the list black dot or other style that is the default. Since it distributes it into categories and certainly modules, starting from the main page, and all this is presented in a stylish way. In this material you see a selection that is made in a similar style, it is in a flat style.
They are completely different in shape, which someone won’t even need to edit to fit their design, since it will fit perfectly into it. Now we will use css code to make the first list anchor and set the last child anchor to make it default so that the tringle does not appear in the first child anchor for the left side anchor and the last child anchor for the right side.
Making bread crumbs
1. In a light yellow shade:
2. Light palette with green tones:
3. In raspberry color
4. Made in a blue palette:
This will be a simple straight list with background and padding and some other styles. After that, I'll create a triangular structure on the right side of each list anchor using CSS, playing with the broder properties.
As you can see in the demo version, when we point any list anchor at the breading chests, it gives the effect that will mean visited or are in this section.
Or we can think of its effect as making it active as an active breadcrumb. You can say these breadcrumbs css are only breadcrumbs because I will only use css and css3 to make these breadcrumbs.
Let's start installation:
CSS
The list style will not be to avoid the list black dot or other style that is the default. Each list inline div will be list-inline to make it horizontal list using css display: list-inline.
#breadcrumb-isanchogives1 (
text-align: center;
margin-top:30px;
}
#breadcrumb-isanchogives1 ul (
list-style: none;
display: inline-table;
}
#breadcrumb-isanchogives1 ul li (
display: inline;
}
#breadcrumb-isanchogives1 ul li a (
display: block;
float: left;
height: 50px;
background: #ffd928;
text-align: center;
padding: 30px 40px 0 80px;
position: relative;
margin: 0 10px 0 0;
Font-size: 20px;
text-decoration: none;
color: #fff;
}
#breadcrumb-isanchogives1 ul li a:after (
content: "";
border-left: 40px solid #ffd928;
z-index: 1;
#breadcrumb-isanchogives1 ul li a:before (
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
}
#breadcrumb-isanchogives1 ul li:first-child a (
}
#breadcrumb-isanchogives1 ul li:first-child a:before (
display: none;
}
#breadcrumb-isanchogives1 ul li:last-child a (
padding-right: 80px;
}
#breadcrumb-isanchogives1 ul li:last-child a:after (
display: none;
}
#breadcrumb-isanchogives1 ul li a:hover (
background: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum(
background: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a:hover:after (
border-left-color: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum:after (
border-left-color: #ff9a2d;
}
#breadcrumb-isanchogives2 (
text-align: center;
margin-top:30px;
}
#breadcrumb-isanchogives2 ul (
list-style: none;
display: inline-table;
}
#breadcrumb-isanchogives2 ul li (
display: inline;
}
#breadcrumb-isanchogives2 ul li a (
display: block;
float: left;
height: 50px;
background: #56e9ae;
text-align: center;
padding: 30px 40px 0 80px;
position: relative;
margin: 0 10px 0 0;
Font-size: 20px;
text-decoration: none;
color: #fff;
}
#breadcrumb-isanchogives2 ul li a:after (
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #56e9ae;
position: absolute; right: -40px; top: 0;
z-index: 1;
#breadcrumb-isanchogives2 ul li a:before (
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #f2f2f2;
position: absolute; left: 0; top: 0;
}
#breadcrumb-isanchogives2 ul li:first-child a (
}
#breadcrumb-isanchogives2 ul li:last-child a (
padding-right: 80px;
}
#breadcrumb-isanchogives2 ul li a:hover (
background: #49c593;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum (
background: #49c593;
}
#breadcrumb-isanchogives2 ul li a:hover:after (
border-left-color: #49c593;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum:after (
border-left-color: #49c593;
}
#breadcrumb-isanchogives3 (
text-align: center;
margin-top:30px;
}
#breadcrumb-isanchogives3 ul (
list-style: none;
display: inline-table;
}
#breadcrumb-isanchogives3 ul li (
display: inline;
}
#breadcrumb-isanchogives3 ul li a (
display: block;
float: left;
height: 50px;
background: #ff818b;
text-align: center;
padding: 30px 40px 0 80px;
position: relative;
margin: 0 10px 0 0;
Font-size: 20px;
text-decoration: none;
color: #fff;
}
#breadcrumb-isanchogives3 ul li a:after (
content: "";
height:80px;
width:40px;
background: #ff818b;
position: absolute; right: -40px; top: 0;
z-index: 1;
#breadcrumb-isanchogives3 ul li a:before (
content: "";
height:80px;
width:40px;
border-radius:0px 40px 40px 0px;
background:#f2f2f2;
position: absolute; left: 0; top: 0;
}
#breadcrumb-isanchogives3 ul li:first-child a (
border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
#breadcrumb-isanchogives3 ul li:first-child a:before (
display: none;
}
#breadcrumb-isanchogives3 ul li:last-child a (
padding-right: 80px;
border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
#breadcrumb-isanchogives3 ul li:last-child a:after (
display: none;
}
#breadcrumb-isanchogives3 ul li a:hover (
background: #ea606b;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum (
background: #ea606b;
}
#breadcrumb-isanchogives3 ul li a:hover:after (
background: #ea606b;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum:after (
background: #ea606b;
}
#breadcrumb-isanchogives4 (
text-align: center;
margin-top:30px;
}
#breadcrumb-isanchogives4 ul (
list-style: none;
display: inline-table;
}
#breadcrumb-isanchogives4 ul li (
display: inline;
}
#breadcrumb-isanchogives4 ul li a (
display: block;
float: left;
height: 50px;
background: #2b97cc;
text-align: center;
padding: 30px 40px 0 80px;
position: relative;
margin: 0 10px 0 0;
Font-size: 20px;
text-decoration: none;
color: #fff;
}
#breadcrumb-isanchogives4 ul li a:after (
content: "";
height:80px;
width:40px;
border-radius:0px 40px 40px 0px;
background:#2b97cc;
position: absolute; right: -40px; top: 0;
z-index: 1;
#breadcrumb-isanchogives4 ul li a:before (
content: "";
height:80px;
width:40px;
background:#f2f2f2;
border-radius:0px 40px 40px 0px;
position: absolute; left: 0; top: 0;
}
#breadcrumb-isanchogives4 ul li:first-child a (
border-top-left-radius: 0px; border-bottom-left-radius: 0px;
}
#breadcrumb-isanchogives4 ul li:last-child a (
padding-right: 80px;
border-top-right-radius: 0px; border-bottom-right-radius: 0px;
}
#breadcrumb-isanchogives4 ul li a:hover (
background: #207ca8;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum (
background: #207ca8;
}
#breadcrumb-isanchogives4 ul li a:hover:after (
background: #207ca8;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum:after (
background: #207ca8;
}
First of all create html structure based on div and ul li tags. The div contains an id, each id will contain a different style in the stylesheet to represent a separate design. Where we use numbering like one, two, three, four.
These identifiers have the same internal structure, divided different styles according to their ID.
Collection of free HTML and CSS breadcrumb navigation code examples: simple, responsive, multiline, collapsed, etc. Update of February 2018 collection. 3 new items.
Related Articles
About the code
Simple CSS.
About the code
Feel free to customize it to your own way. Colors, sizes, shadows, borders, etc. Made with Bootstrap.
About the code
Breadcrumbs with "Smart" Ellipsis (Flex)
Play with the browser size to see how the behave when there"s no room left for them.
About the code
This example shows what happens as a user gets closer to the back button. The breadcrumbs expand and allow the user to navigate to almost anywhere else in the course while only having minimal impact on space.
Breadcrumbs with CSS custom properties as API.
Made by Stas Melnikov
June 15, 2017
Adaptive multi-line pure CSS breadcrumb arrows.
Made by Glynn Smith
May 30, 2017
Demo GIF: Breadcrumbs
HTML and CSS breadcrumbs.
Made by Dany Santos
July 15, 2016
Material Design breadcrumb, progress tracker.
Made by Shyam Chen
July 30, 2015
A list of breadcrumbs collapsed down to show only preview text for all but the current page, with full text shown on hover/focus.
Made by Skye
March 4, 2015
Pure CSS responsive breadcrumbs.
Made by Oliver Knoblich
April 2, 2014
Good day, dear readers!
How breadcrumbs affect search engine optimization and how to make them on a WordPress site. This is exactly what will be discussed in today's article. Looking ahead, I will say that breadcrumbs help your users navigate the site. They also have a positive impact on SEO.
Breadcrumbs are tips on a website that show the user where he is. A kind of chain that was created for navigation.
They are clickable, which means that the visitor can move to a higher “level” at any time - to a subcategory or heading. As a rule, breadcrumbs have the following form: main – heading – subcategory – article. The last element is very often removed in the belief that it creates unnecessary duplication.
It is believed that this name is a reference to a fairy tale where children, when going into the forest, left a trail of bread crumbs behind them for navigation. They had to return along this path. A chain of links is also a path; the further you go into the site, the more elements it contains. And in fact, along this chain you can go back - to home page. Just like in a fairy tale.
How they affect SEO
Using a navigation ribbon is considered good manners in the world search engine optimization.
Firstly, it improves behavioral factors. And this, as you know, is almost the most basic indicator of the quality of a site. If the usability is at a good level, use and navigation are clear and convenient, then visitors will definitely appreciate it and stay on the resource longer. In addition, the better the behavioral factors, the higher your resource will be in the search results.
Secondly, the presence of breadcrumbs is already considered a good factor for a search engine. Robots see that the project has a navigation system and structure, and this has a good effect on ranking.
Naturally, the navigation bar alone will not bring your resource to the top. This works in conjunction with other aspects of good SEO.
To summarize, breadcrumbs help:
- improve behavioral factors and usability,
- make the site structure clear and accessible,
- easy to navigate through pages,
- improve SEO technically,
- make a link.
That is, the use of a navigation ribbon is strictly necessary for those who want their project to be convenient, practical and visited.
Types of bread crumbs
Yes, yes, they have varieties. There are not many of them, but it is still worth considering this point.
Linear
A regular strip that shows the path from the main page to the article. The most common type of breadcrumbs... We have just a linear type of navigation bar.
Back button
A very inconvenient type of navigation, which is very common in online stores. As a rule, users are not particularly happy with this and use a similar button in the browser itself. For an information site, this option is practically useless.
Hybrid
This option combines the previous two. That is, the resource has both linear navigation and a “Back” button. We can say that this is a compromise that helps to please everyone. But, as I said above, people rarely use the “Back” button, preferring the button in the browser itself - fortunately, all modern applications have them.
Typically, the navigation bar is located on all pages except the main page. In WordPress these are categories, tags, articles and other taxonomies.
How to Create Breadcrumbs in WordPress
The easiest way to create a navigation feed on WordPress and other sites is through html. More precisely, it will be a hybrid of html and php - otherwise you will have to write each navigation chain manually, and this is not a very pleasant task.
Using a template
It would be wise to choose a template with bread crumbs right away. If you are just thinking about your next website and have not yet started creating it, it’s worth checking out some store WordPress templates and look there for a topic with this function (I recommend Root).
This will be the most practical option because you won't have to install additional plugins. At the same time, you don’t have to manually add or edit anything; everything will work, as they say, out of the box (immediately after installation).
Plugins
You can install the navigation feed along with the plugin. But keep in mind that each plugin can load your CMS even more. If there are already so many plugins, then one more new one can simply ruin everything, slowing down the site.
Yoast SEO – detailed instructions for setting up crumbs
If you use it as an SEO plugin, I have great news for you. Breadcrumbs are present in the functionality, so all you have to do is configure them.
This general instructions, which should suit most users. It is based on the information provided by the plugin authors themselves.
So, in order for the navigation feed in Yoast SEO to work, we must place the following PHP code in our template files:
Usually this code is inserted into common page templates - single.php or page.php. Also, some users insert this code into header.php - at the very end. Whether this will work specifically in your case or not, I don’t know, but you can try.
Common page templates can be edited through the built-in WordPress tools. Let's go to " Appearance” – “Editor”, we find required file on the list.
Here is the PHP code and HTML markup. An untrained user may get confused, but you need to get together and try to understand what and where.
Specifically, in my theme, breadcrumbs are already provided; immediately after the header there is a function that calls the native breadcrumbs. Your code will be different, but the general meaning remains the same.
It is best to place the breadcrumbs directly under the header - the get_header() function; – just serves to call him. Therefore, it is correct to place the code from Yoast SEO directly below it.
But keep in mind that to customize the navigation bar, you may have to work with CSS styles. They are provided by the plugin itself, but may not be suitable.
You can even use breadcrumbs in articles. You just need to leave in in the right place this shortcode: .
But neither the code nor the shortcode will work if the breadcrumb functionality is disabled in the plugin itself. To enable it, you must go to the plugin settings (SEO tab) - display in search results - breadcrumbs.
Switch the slider to “Enabled,” then scroll down the page and click “Save Changes.” From this point on, the bread crumbs will start working.
You can customize them if you wish. For example, set a separator between elements, specify the text of the link to the main page, prefixes for taxonomies, etc.
You can also highlight the last page (or title of the material) in bold. To do this, switch the corresponding slider.
If Yoast SEO is not particularly suitable for you, then you can pay attention to other plugins that allow you to create breadcrumbs on your site. There are a lot of free ones in the catalog, but I will highlight the most popular options.
Breadcrumb NavXT
A simple plugin that can create breadcrumbs for your project. On this moment it has more than 800 thousand active users. The plugin has its own control panel and is suitable for most WordPress sites.
Almost everything can be customized in Breadcrumb NavXT. Appearance, displayed elements and their order. There are many more possibilities here than in the same Yoast SEO (specifically regarding setting up the navigation chain).
This extension can be installed absolutely free from the WordPress directory. You can find it using keywords.
Breadcrumb
Another extension that can be installed directly from the directory. Unlike the previous one, this plugin does not have such a large audience. Total 10,000 active users. But if you consider that many people prefer other options for creating breadcrumbs, then this is quite a good result.
The plugin is simple and lightweight. It has a beautiful design (see screenshot), you can change colors. For use on small projects it is more than enough.
There are other plugins too. They are less popular, but you can still try them. Just go to the plugins directory and enter keyword breadcrumbs. WordPress will immediately give you several dozen suitable options.
Conclusion
Breadcrumbs are a great way to navigate a website. They improve SEO, increase behavioral factors and enable users to navigate site pages.
Almost all modern sites try to pay attention to this. Web designers are not lagging behind; now the absence of breadcrumbs in a template is considered a very significant drawback. Someone will even refuse to buy such a template just because of this seemingly insignificant detail. Be sure to take this fact into account and try to make your site user-friendly.
If you want to learn more about creating information projects for income, then I advise you to look at. The author talks about creating a website on WordPress, competent technical and search engine optimization, and most importantly, about current methods of monetization.
