Как добавить меню в шапку и подвал White Label

После создания и настройки White Label от Travelpayouts вы можете добавить в его шапку и подвал ссылки на другие страницы вашего сайта (или на сайты тревел-брендов).

Обратите внимание! Если у вас выбрано несколько языков, то код нужно добавлять для каждого языка.

Как добавить меню в шапку

Чтобы добавить ссылки в шапку White Label, откройте вкладку Мои блоки в настройках White Label и добавьте в поле Хедер сайта следующий код:

 <header itemscope="" itemtype="http://schema.org/WPHeader" role="banner">
<div class="header__inner">
<nav>
<ul class="header__menu">
<li><a href="#">Линк 1</a></li>
<li><a href="#">Линк 2</a></li>
<li><a href="#">Линк 3</a></li>
</ul>
</nav>
</div>
</header>

В параметре href укажите ссылку на нужный сайт и текст ссылки.

Чтобы добавить оформление для пунктов меню в шапке, добавьте тег <style> и поместите в него следующий код:

 /* START стили для header */
header .header__inner {
width: 960px;
margin: 15px auto;
}
header ul.header__menu{
margin: 0;
padding: 0;
}
header .header__menu li{
list-style: none;
display: inline-block;
margin-right: 30px;
}
header .header__menu li a{
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
text-decoration: none;
color: #00AFDD;
}
header .header__menu li a:hover{
opacity: 0.8;
}
@media (max-width: 960px) {
header .header__inner {
width: 100%;
margin: 15px;
}
}
/* END стили для header */

Вы можете изменять стиль оформления по своему усмотрению. Если вам не хватает знаний CSS — найдите разработчика на фрилансе, который сможет вам помочь.

Как добавить меню в подвал

Чтобы добавить меню в подвал, разместите в блоке Футер сайта следующий код:

<footer>
<div class="footer__inner">
<nav>
<ul class="footer__menu">
<li><a href="#">Линк footer 1</a></li>
<li><a href="#">Линк footer 2</a></li>
<li><a href="#">Линк footer 3</a></li>
</ul>
</nav>
</div>
</footer>

В параметре href укажите ссылку на нужный сайт и текст ссылки.

Чтобы добавить оформление для пунктов меню в подвал, добавьте тег <style> и поместите в него следующий код:

 footer .footer__inner {
width: 950px;
margin: 15px auto;
}
footer ul.footer__menu{
margin: 0;
padding: 0;
}
footer .footer__menu li{
list-style: none;
display: inline-block;
margin-right: 30px;
}
footer .footer__menu li a{
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
text-decoration: none;
color: #00AFDD;
}
footer .footer__menu li a:hover{
opacity: 0.8;
}
@media (max-width: 960px) {
footer .footer__inner {
width: 100%;
margin: 15px;
}
}

Вы можете изменять стиль оформления по своему усмотрению. Если вам не хватает знаний CSS — найдите разработчика на фрилансе, который сможет вам помочь.

Пример

tab_with_wl_menu.gif