В этой статье вы узнаете, как изменить внешний вид White Label Web старой версии: настроить цвета, логотип, шрифты и другие элементы интерфейса. Мы пошагово разберём, какие параметры доступны, где они находятся и как с их помощью адаптировать 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> в поле Хедер сайта и поместите в него код, указанный ниже;
-
вставить код на вкладке Стили в разделе Настроить стили в CSS.
Второй вариант удобен тем, что вы сможете хранить все стили в одном месте, а раздел Мои блоки не будет перегружен кодом. Также в этом варианте НЕ нужно добавлять тег <style>.
Код для вставки:
<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 */
</style>
Вы можете изменять стиль оформления по своему усмотрению. Если вам не хватает знаний 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> в поле Футер сайта и поместите в него код, указанный ниже;
-
вставить код на вкладке Стили в разделе Настроить стили в CSS.
Второй вариант удобен тем, что вы сможете хранить все стили в одном месте, а раздел Мои блоки не будет перегружен кодом. Также в этом варианте НЕ нужно добавлять тег <style>.
Код для вставки:
<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;
}
}
</style>
Вы можете изменять стиль оформления по своему усмотрению. Если вам не хватает знаний CSS — найдите разработчика на фрилансе, который сможет вам помочь.
Пример
Как добавить баннер или рекламу в поисковую выдачу
В White Label от Travelpayouts старой версии есть возможность добавлять различные инструменты в виде виджетов, баннеров, партнёрских ссылок от тревел-брендов. В этой статье мы расскажем о том, как добавить любой код в поисковую выдачу (между авиабилетами или отелями).
Чтобы вывести какой-нибудь текст, баннер или, например, рекламу от Яндекса в поисковой выдаче White Label:
1. Откройте настройки White Label в личном кабинете Travelpayouts;
2. Перейдите на вкладку Мои блоки;
3. Добавьте в самый низ блока Футер сайта сайта следующий код:
<!-- START подключаем библиотеку для обработки jquery -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- END подключаем библиотеку для обработки jquery -->
<div id="append-block"></div>
<script>
$(function(){
$("div#append-block").click(function(){
//проверяем, есть ли пятый блок в результатах авиа выдачи
if ($(".ticket:nth-child(5)").length > 0) {
if ($(".ticket--with-labels").length > 0) {
$("div.dpt-block-1").show();
$(".ticket--with-labels").before($("div.dpt-block-1"));
}
if ($(".ticket:nth-child(4)").length > 0) {
$("div.dpt-block-2").show();
$(".ticket:nth-child(4)").after($("div.dpt-block-2"));
}
if ($(".layout-manager").length > 0) {
$("div.dpt-block-3").show();
$(".layout-manager").append($("div.dpt-block-3"));
}
if ($(".ticket:nth-child(7)").length > 0) {
$("div.dpt-block-4").show();
$(".ticket:nth-child(7)").after($("div.dpt-block-4"));
}
} else {
if ($(".ticket--with-labels").length > 0) {
$("div.dpt-block-1").show();
$(".ticket--with-labels").before($("div.dpt-block-1"));
}
if ($(".ticket:nth-child(1)").length > 0) {
$("div.dpt-block-2").show();
$(".ticket:nth-child(1)").after($("div.dpt-block-2"));
}
if ($(".layout-manager").length > 0) {
$("div.dpt-block-3").show();
$(".layout-manager").append($("div.dpt-block-3"));
}
if ($(".ticket:nth-child(1)").length > 0) {
$("div.dpt-block-4").show();
$(".ticket:nth-child(1)").after($("div.dpt-block-4"));
}
}
//проверяем, есть ли пятый блок в результатах отелей
if ($(".search-results-cards-wrapper-card:nth-child(5)").length > 0) {
if ($(".search-results-cards-wrapper-card:first-child").length > 0) {
$("div.dpt-block-1").show();
$(".search-results-cards-wrapper-card:first-child").before($("div.dpt-block-1"));
}
if ($(".search-results-cards-wrapper-card:nth-child(4)").length > 0) {
$("div.dpt-block-2").show();
$(".search-results-cards-wrapper-card:nth-child(4)").after($("div.dpt-block-2"));
}
if ($(".search_results-wrapper").length > 0) {
$("div.dpt-block-3").show();
$(".search_results-wrapper").append($("div.dpt-block-3"));
}
if ($(".search-results-cards-wrapper-card:nth-child(7)").length > 0) {
$("div.dpt-block-4").show();
$(".search-results-cards-wrapper-card:nth-child(7)").after($("div.dpt-block-4"));
}
} else {
if ($(".search-results-cards-wrapper-card:first-child").length > 0) {
$("div.dpt-block-1").show();
$(".search-results-cards-wrapper-card:first-child").before($("div.dpt-block-1"));
}
if ($(".search-results-cards-wrapper-card:nth-child(1)").length > 0) {
$("div.dpt-block-2").show();
$(".search-results-cards-wrapper-card:nth-child(1)").after($("div.dpt-block-2"));
}
if ($(".search_results-wrapper").length > 0) {
$("div.dpt-block-3").show();
$(".search_results-wrapper").append($("div.dpt-block-3"));
}
if ($(".search-results-cards-wrapper-card:nth-child(1)").length > 0) {
$("div.dpt-block-4").show();
$(".search-results-cards-wrapper-card:nth-child(1)").after($("div.dpt-block-4"));
}
}
});
//эмулируем клик для инициализации показа объявлений
setTimeout(function(){
$("div#append-block").click();
}, 9000);
});
</script>
4. Чтобы изменить содержимое блока, отредактируйте код, расположенный между тегами div с классами dpt-block:
<div class="dpt-block-1" style="display:none">
//Здесь вы можете разместить любой свой код или текст
</div>
Вот так можно разместить код баннера со ссылкой на сайт тревел-бренда:
<div class="dpt-block-1" style="display:none">
<a target="_blank" href="https://c45.travelpayouts.com/click?shmarker=78606&promo_id=1300&source_type=banner&type=click"><img src="https://c45.travelpayouts.com/content?promo_id=1300&shmarker=78606&type=init" alt="728x90" width="728" height="90"></a>
</div>
Как добавить слайдер
Чтобы сделать ваш White Label от Travelpayouts более красивым и информативным — добавьте в его верхнюю часть слайдер с изображениями. В слайдере можно отображать баннеры с информацией о тревел-брендах и другие полезные вещи.
Подготовка к добавлению слайдера
Чтобы всё работало корректно, сначала добавьте код подключения библиотеки для обработки jquery. Для этого:
1. Откройте настройки White Label в личном кабинете Travelpayouts;
2. Перейдите на вкладку Мои блоки;
3. Добавьте в блок для ввода кода Футер сайта следующий код:
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
Обратите внимание! Код подключения библиотеки jquery добавляется только один раз. Когда вы будете добавлять другие дополнения на White Label (например, всплывающие окна или блоки с информацией), то повторно код вставлять не нужно.
Добавление слайдера
Чтобы добавить слайдер, в блок для ввода кода Хедер сайта поместите следующий код:
<div class="slider__block header__slider">
<div class="slide slide_1">
<div class="text__wrap_slider1">
<span class="title">Оформите<br/>туристическую страховку,<br/>не выходя из дома</span>
<a href="#" title="" class="btn__slider_one">Выбрать полис</a>
</div>
</div>
<div class="slide slide_2">
<div class="text__wrap_slider2">
<span class="img"><img src="http://sem-dev.co.ua/WLNEW/level-travel-logo.png" alt=""/></span>
<span class="title">Утомляет планирование отпуска?<br/>Пакетный тур - лучшее решение!</span>
<a href="#" title="" class="btn__slider_two">Посмотреть туры</a>
</div></div>
</div>
Каждый тег <div class=«slide slide_1»>…</div> — это отдельный слайдер, их может быть любое количество. Внутри этого тега находится содержимое слайдера: текст, изображение, ссылка.
- Чтобы добавить текст на слайдер, используйте тег span с классом title, например:
<span class="title">Оформите<br/>туристическую страховку,<br/>не выходя из дома</span>
- Чтобы добавить изображение в слайдер, используйте тег span с классом img и тег img со ссылкой на изображение, например:
<span class="img"><img src="http://sem-dev.co.ua/WLNEW/level-travel-logo.png" alt=""/></span>
Настройка внешнего вида
Вы можете добавить стили для слайдера одним из следующих способов:
- вставить код, указанный ниже, в блок Футер сайта на вкладке Мои блоки;
-
вставить код на вкладке Стили в разделе Настроить стили в CSS.
Второй вариант удобен тем, что вы сможете хранить все стили в одном месте, а вкладка Мои блоки не будет перегружен акодом.
В примере ниже приводится код для двух слайдеров, вы можете изменять его по своему усмотрению, использовать для дополнительных слайдеров или создать на основе этого примера свой код. Если вам не хватает знаний CSS и JS — найдите разработчика на фрилансе, который сможет вам помочь.
/* slyder */
.slider__block {
width: 1440px;
height: 402px;
background: #fff;
overflow: hidden;
margin: 0 auto;
}
/* the first slide */
.slider__block .slide_1 {
width: 100%;
background: url('https://cdn.travelpayouts.com/marketing/kit_travel/bg-slide-1.jpg') no-repeat;
height: 402px;
background-position: center;
position: relative;
}
/* the second slide */
.slider__block .slide_2 {
width: 100%;
background: url('https://cdn.travelpayouts.com/marketing/kit_travel/bg-slide-2.jpg') no-repeat;
height: 402px;
background-position: center;
position: relative;
}
.slider__block .slick-prev {
left: 134px;
z-index: 1;
width: 56px;
height: 56px;
}
.slider__block .slick-prev:before {
background: url('https://cdn.travelpayouts.com/marketing/kit_travel/arrow-slide-left.png') no-repeat;
height: 56px;
width: 56px;
background-position: center;
opacity: 1;
content: "";
display: block;
}
.slider__block .slick-prev, .slider__block .slick-next {
top: calc(50% - 29px);
}
.slider__block .slick-next {
right: 134px;
z-index: 1;
width: 56px;
height: 56px;
}
.slider__block .slick-next:before {
background: url('https://cdn.travelpayouts.com/marketing/kit_travel/arrow-slide-right.png') no-repeat;
height: 56px;
width: 56px;
background-position: center;
opacity: 1;
content: "";
display: block;
}
.text__wrap_slider1 {
position: absolute;
top: 63px;
left: 285px;
}
.text__wrap_slider1 .title {
color: #fff;
font-size: 38px;
line-height: 45px;
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
}
.text__wrap_slider1 .btn__slider_one {
font-size: 17px;
line-height: 23px;
font-family: Open Sans;
color: #fff;
border-radius: 8px;
border: 1px solid #fff;
padding: 11px 0;
text-decoration: none;
display: block;
width: 195px;
text-align: center;
margin-top: 36px;
}
.text__wrap_slider1 .btn__slider_one:hover {
opacity: .8;
}
.text__wrap_slider2 {
width: 100%;
text-align: center;
margin-top: 70px;
}
.text__wrap_slider2 span.img {
width: 100%;
text-align: center;
display: block;
}
.text__wrap_slider2 span.img img {
display: inline;
}
.text__wrap_slider2 span.title {
color: #fff;
font-size: 38px;
line-height: 45px;
font-family: 'Roboto';
font-style: normal;
font-weight: 900;
margin-bottom: 45px;
width: 100%;
display: block;
margin-top: 12px;
}
.btn__slider_two {
font-size: 17px;
line-height: 23px;
font-family: Open Sans;
color: #262626;
border-radius: 8px;
border: 1px solid #FFE600;
padding: 11px 25px;
text-decoration: none;
text-align: center;
margin-top: 36px;
background: #FFE600;
}
.text__wrap_slider2 .btn__slider_two:hover {
opacity: .8;
}
/* styles to adapt the slider */
@media (max-width: 1440px) {
.slider__block {
width: 100%;
}
}
@media (max-width: 1199px) {
.slider__block,
.slider__block .slide_1 {
height: 330px;
background-size: auto 100%;
}
.slider__block .slide_2 {
height: 330px;
}
.text__wrap_slider1 .title,
.text__wrap_slider2 span.title {
font-size: 32px;
line-height: 38px;
}
.slider__block .slick-prev {
left: 15px;
}
.slider__block .slick-next {
right: 15px;
}
}
@media (max-width: 991px) {
.slider__block {
margin-top: 60px;
}
.slider__block,
.slider__block .slide_1 {
height: 280px;
background-size: auto 100%;
}
.slider__block .slide_1 {
background-position-x: 70%;
}
.slider__block .slide_2 {
height: 280px;
}
.text__wrap_slider2 {
margin-top: 45px;
}
.text__wrap_slider1 {
left: 90px;
}
.slider__block .slick-prev, .slider__block .slick-next {
top: 50%;
}
}
@media (max-width: 767px) {
.slider__block .slick-prev:before, .slider__block .slick-next:before,
.slick-next:before {
height: 30px;
width: 30px;
background-size: 100% 100%;
}
.slider__block .slick-prev,
.slider__block .slick-next {
height: 30px;
width: 30px;
}
.slider__block .slide_1,
.slider__block .slide_2 {
padding: 0 50px;
display: flex !important;
align-items: center;
justify-content: center;
}
.slider__block .slide_1 {
background-position-x: 0;
background-size: 300% 150%;
}
.text__wrap_slider1 .title,
.text__wrap_slider2 span.title {
font-size: 26px;
line-height: 30px;
}
.text__wrap_slider1 {
/*margin-top: 40px;*/
position: static;
text-align: center;
}
.text__wrap_slider2 {
margin-top: 0;
}
.text__wrap_slider1 .btn__slider_one {
margin: 20px auto 0;
}
.text__wrap_slider2 span.title {
margin-bottom: 35px;
}
}
@media (max-width: 576px) {
.text__wrap_slider1 .title,
.text__wrap_slider2 span.title {
font-size: 21px;
line-height: 24px;
}
.slider__block {
height: 253px;
margin-bottom: 0 !important;
}
.slider__block .slide_1,
.slider__block .slide_2 {
display: block !important;
padding: 40px 28px 0;
}
.slider__block .slide_2 {
padding-top: 20px;
}
.text__wrap_slider2 span.title {
margin-bottom: 25px;
}
.text__wrap_slider1 .btn__slider_one,
.btn__slider_two {
margin: 24px auto 0;
padding: 12px 0;
width: 100%;
}
.btn__slider_two {
margin-top: 10px;
display: block;
}
.text__wrap_slider2 span.title {
margin-bottom: 0px;
}
.slider__block .slick-prev,
.slider__block .slick-next {
display: none !important;
}
.text__wrap_slider1 .title br {
display: none;
}
.text__wrap_slider1 .title span {
display: block;
text-transform: uppercase;
}
.text__wrap_slider1 .title, .text__wrap_slider2 span.title {
line-height: 26px;
font-weight: 700;
}
.text__wrap_slider2 span.title {
margin-top: 3px;
}
.header__slider .slick-dots {
bottom: 20px;
display: flex;
justify-content: center;
}
.header__slider .slick-dots li button {
display: none;
}
.header__slider .slick-dots li {
margin: 0 8px;
background: #333647;
border: 1px solid #333647;
border-radius: 42px;
width: 8px;
height: 8px;
transition: 0.4s;
}
.header__slider .slick-dots li.slick-active {
background: transparent;
}
}
Добавьте вызов стилей на вкладке Мета данные в каждый типы страницы (Главная, Авиа выдача, Отельная выдача, Страница отеля):
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css" />
Вы можете изменять стиль оформления и количество вкладок по своему усмотрению. Если вам не хватает знаний HTML, CSS и JS — найдите разработчика на фрилансе, который сможет вам помочь.
Отображение слайдера
Чтобы слайдер отображался, добавьте следующий код в блок Футер сайта:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" type="text/css">
<script src="https://kenwheeler.github.io/slick/slick/slick.js" crossorigin="anonymous"></script>
<script>
window.onload = function() {
//slick slider
$('.header__slider').slick({
dots: true,
arrow: true
});
if ($(window).width() < 577) {
$('html body .ducklett-widget .ducklett-widget-wrapper--slider').slick({
dots: true,
arrows: false,
slidesToShow: 1,
slidesToScroll: 1,
});
}
};
</script>
Пример слайдера можно найти здесь: http://kit.travel/
Как добавить логотип
Чтобы разместить свой логотип в шапке White Label:
1. Откройте настройки White Label в личном кабинете Travelpayouts;
2. Перейдите на вкладку Мои блоки;
3. Добавьте в поле Хедер сайта код вида <img src="URL"> вместо кода:
<span class="TPWL-header-content-logo__img"></span>
4. Вместо URL укажите ссылку на файл с вашим логотипом.
5. Нажмите на кнопку Сохранить и обновить.
Обратите внимание! Файл должен быть доступен в интернете с любого компьютера, а не находиться на вашем локальном компьютере. Вы можете использовать в качестве логотипа изоббражения (.png, .jpeg), а так же .gif.
Важно! Если необходимо, чтобы логотип отображался на разных языках, добавьте код во все языковые блоки.
Как изменить размер логотипа
Для изменения размеров лого добавьте в код атрибуты width (ширина) и height (высота):
<img src="URL" width="100" height="111">
Как добавить favicon
Чтобы добавить своему White Label favicon:
1. Откройте настройки White Label в личном кабинете Travelpayouts;
2. Перейдите на вкладку Мета данные;
3. В поле для редактирования HTML-кода добавьте следующую строку:
<link rel="shortcut icon" type="image/x-icon" href="ЗдесьСсылкаНаФавикон">
где вместо ЗдесьСсылкаНаФавикон укажите ссылку на файл с фавиконом.
4. Повторите добавление кода для каждого типа страницы (Главная, Авиа выдача, Отельная выдача, Страница отеля).
Обратите внимание! Изображение должно быть доступно в сети интернет, а не находиться на вашем локальном компьютере.
Как сделать изображение фоном
Чтобы сделать собственное изображение фоном в верхней части сайта (за формой поиска):
1. Откройте настройки White Label в личном кабинете Travelpayouts;
2. Добавить изображение можно сделать двумя способами:
- На вкладке Мои блоки добавьте тег <style> в поле Футер сайта и поместите в него код, указанный ниже;
-
Вставьте код на вкладке Стили в разделе Настроить стили в CSS.
Второй вариант удобен тем, что вы сможете хранить все стили в одном месте, а раздел Мои блоки не будет перегружен кодом.
Код для вставки:
body .TPWL-template-wrapper .TPWL-template-header,
body div.TPWL-header-content {
background: rgba(0, 0, 0, 0);
}
body {
background-image: url(https://cdn.travelpayouts.com/marketing/kit_travel/bg-slide-1.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
}
.TPWL-widget--serp .filters_layout {
background-color: #fff !important;
border: 1px solid rgba(0, 0, 0, .12) !important;
border-radius: 4px !important;
padding: 10px !important;
}
.TPWL-widget .search_results-wrapper #tpwl-subscription {
margin-bottom: 20px!important;
}
.TPWL-widget .filters .only-button {
background: 0 0!important;
}
.TPWL-widget .filters_layout>main,
.TPWL-widget .slider_substrate::after {
width: 200px!important;
}
.TPWL-widget .filters .right-text {
background: none!important;
}
где в скобках после url нужно разместить ссылку на изображение, которое будет использоваться в качестве фона (в примере ссылка выглядит так https://cdn.travelpayouts.com/marketing/kit_travel/bg-slide-1.jpg).
Обратите внимание! Изображение должно быть доступно в сети интернет, а не находиться на вашем локальном компьютере.
Как изменить высоту iframe
Если вы используете на своей странице iframe с кодом White Label, то по умолчанию он имеет высоту 500px. Это сделано для того, чтобы корректно отображались все контролы: выбор валюты и языка, выбор дат и количества путешественников.
Чтобы уменьшить высоту iframe, добавьте в код страницы, где он расположен, такой стиль:
<style>
#tpcwl_iframe {
min-height: 200px !important;
}
</style>
В настройках White Label на вкладке Мои блоки добавьте в поле Футер сайта тег <style> и поместите в него такой код:
body.TPWL--iframe .page {
min-height: 200px !important;
}
Обратите внимание! При этом контрол выбора языка и валюты будет частично обрезан снизу.
Как изменить шрифт
Чтобы изменить шрифт вашего White Label:
1. Откройте настройки White Label в личном кабинете Travelpayouts;
2. Вы можете изменить шрифт одним из следующих способов:
- Добавьте код, указанный ниже, на вкладку Мои блоки в cамом верху раздела Хедер сайта;
-
Вставьте код на вкладку Стили в разделе Настроить стили в CSS.
Второй вариант удобен тем, что вы сможете хранить все стили в одном месте, а раздел Мои блоки не будет перегружен кодом.
Код для вставки:
<style type='text/css'>
body, .mewtwo-modal, .mewtwo-widget, .TPWL-widget, .mewtwo-tabs-tabs_list__item span, .mewtwo-widget span, .mewtwo-placeholder-label {
font-family: Arial,sans-serif !important;
}
</style>
4. В font-family укажите шрифт, который хотите использовать на сайте.
Обратите внимание! Если у вас выбрано несколько языков, то код нужно добавить для каждого языка.
Как изменить ширину формы поиска
По умолчанию форма поиска в White Label от Travelpayouts адаптивна и автоматически подстраивается под разрешение экрана. При этом её максимальный размер ограничен настройками стилей. В этой статье приводится пример кода, с помощью которого можно изменить максимальную ширину формы поиска.
1. Откройте настройки White Label в личном кабинете Travelpayouts;
2. Перейдите на вкладку Мои блоки;
3. Добавьте в блок Футер сайта тег <style> и поместите в него следующий код:
.TPWL-widget .TPWL-template-header-content {
max-width: 768px !important;
}
.TPWL-widget--front_page .TPWL-template-header {
padding-bottom: 25px !important;
}
4. В параметре max-width задаётся максимальный размер формы поиска. В примере выше он составляет 768 пикселей. Вы можете ввести любое значение в пикселях или процентах — например, указать:
max-width: 100% !important;
В этом случае форма будет занимать весь экран, даже на самых широких мониторах: