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

Эта настройка доступна только для White Label с типом «Страница». Если вы используете тип «Виджет», вы не сможете применить эту настройку.

Подробнее о разнице между типами White Label Web можно узнать здесь.

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

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

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

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

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

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

2. Перейдите на вкладку Кастомный HTML;

3. В поле код white-label страницы добавьте следующий код в тег <head> :

<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 укажите ссылку на нужный сайт и текст ссылки (вместо Ссылка 1, Ссылка 2, Ссылка 3);

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

Код для вставки:

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

6. Сохраните изменения.

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

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

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

2. Перейдите на вкладку Кастомный HTML;

3. В поле код white-label страницы добавьте следующий код в тег <footer>:

 <div class="footer__inner">
 <nav>
 <ul class="footer__menu">
 <li><a href="#">Ссылка 1</a></li>
 <li><a href="#">Ссылка 2</a></li>
 <li><a href="#">Ссылка 3</a></li>
 </ul>
 </nav>
 </div>

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

5. Для оформления пунктов меню в подвале добавьте код, представленный ниже, в тег <style>.

Код для вставки:

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

6. Сохраните изменения.

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

Пример: