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

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

На изображении Линк 1, Линк 2 и Линк 3 представлены в качестве примеров ссылок, которые могут быть добавлены в шапке White Label.

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

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

Чтобы добавить ссылки в шапку White Label:

1. Откройте настройки White Label в личном кабинете Travelpayouts;

2. Перейдите на вкладку Мои блоки;

3. Добавьте в поле Хедер сайта следующий код:

 <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>

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

5. Чтобы добавить оформление для пунктов меню в шапке, добавьте тег <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 — найдите разработчика на фрилансе, который сможет вам помочь.

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

1. Откройте настройки White Label в личном кабинете Travelpayouts;

2. Перейдите на вкладку Мои блоки;

3. Добавьте в поле Футер сайта следующий код:

<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>

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

5. Чтобы добавить оформление для пунктов меню в подвал, добавьте тег <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;
 }
 }

Пример