В данном руководстве пойдёт речь об этих ссылках.
Отредактировать ссылки можно в настройках темы в секции: Настройки шапки –> Ссылки в шапке
Код по умолчанию
По умолчанию код для этого блока выглядит так:
<!-- Первая ссылка -->
<div class="uk-padding-small uk-padding-remove-vertical uk-display-inline-block">
<a href="mailto:[email protected]" class="uk-button uk-button-text">
<i class="fa fa-envelope-square"></i> [email protected]
</a>
</div>
<!-- Вторая ссылка -->
<div class="uk-padding-small uk-padding-remove-vertical uk-display-inline-block">
<a href="/address/" class="uk-button uk-button-text ajax-me">
<i class="fa fa-map"></i> Как проехать
</a>
</div>
<!-- Третья ссылка -->
<div class="uk-padding-small uk-padding-remove-vertical uk-display-inline-block">
<a href="#" class="uk-button uk-button-text">
<i class="fa fa-question-circle"></i> Покупателю
</a>
<!-- Удалите код ниже, если не нужно подменю -->
<div class="uk-dropdown" data-uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">
<li><a href="#">Как сделать заказ</a></li>
<li><a href="#">Доставка и оплата</a></li>
<li><a href="#">Возврат товара</a></li>
<!-- Разделитель меню -->
<li class="uk-nav-divider"></li>
<li><a href="#">Таблица размеров</a></li>
<li><a href="#">Полезная информация</a></li>
</ul>
</div>
<!-- Удалите код выше, если не нужно подменю -->
</div>
<!-- Четвёртая ссылка -->
<div class="uk-padding-small uk-padding-remove-vertical uk-display-inline-block">
<a href="#" class="uk-button uk-button-text">
<i class="fa fa-address-book"></i> Контакты
</a>
</div>
<!-- Горизонтальный отступ для иконок -->
<div class="uk-width-1-1 uk-visible-touch uk-hidden@s"></div>
<!-- Иконкa whatsapp -->
<a href="whatsapp://send?phone=7xxxxxxxxxx" class="uk-link-reset pl-5 pr-5 pt-15 uk-display-inline-block uk-hidden-notouch">
<i class="icon-whatsapp ratio2x" style="color:#35B548"></i>
</a>
<!-- Иконкa Viber -->
<a href="viber://add?chat=7xxxxxxxxxx" class="uk-link-reset pl-5 pr-5 pt-15 uk-display-inline-block uk-hidden-notouch">
<i class="icon-viber ratio2x" style="color:#7A539B"></i>
</a>
<!-- Иконкa Telegram -->
<a href="tg://resolve?domain=vash-nickname" class="uk-link-reset pl-5 pr-5 pt-15 uk-display-inline-block uk-hidden-notouch">
<i class="fa fa-telegram ratio2x" style="color:#2F9BD1"></i>
</a>
Это код можно добавить в блок super.header_links_html.
Тогда его будет легче редактировать и он не будет зависеть от сброса настроек темы (со сбросом настроек темы вы его не потеряете). Если соберётесь создавать блок super.header_links_html, прочтите инструкцию о том для чего нужны блоки и где их создавать.
Настройка кода
Ссылка на почту
Первая ссылка – это ссылка на ваш email адрес, выглядит так:
<!-- Первая ссылка -->
<div class="uk-padding-small uk-padding-remove-vertical uk-display-inline-block">
<a href="mailto:[email protected]" class="uk-button uk-button-text">
<i class="fa fa-envelope-square"></i> [email protected]
</a>
</div>
Код:
<div class="uk-padding-small uk-padding-remove-vertical uk-display-inline-block"> <a> ... </a> </div>
– общий для всех ссылок, он задаёт отступы и общий стиль ссылок.
А вот то, что внутри этого кода <a> ... </a> – это уже сама ссылка.
Здесь и далее речь будет идти именно о коде этих ссылок.
Код ссылки на почту выглядит так:
<a href="mailto:[email protected]" class="uk-button uk-button-text"> <i class="fa fa-envelope-square"></i> [email protected] </a>
Прежде всего вам нужно заменить адрес почты.
Замените [email protected] на свой адрес в двух местах.
<i class="fa fa-envelope-square"></i> – это HTML-код иконки. Вы можете заменить иконку на другую.
Читайте отдельную инструкцию по работе с иконками.
Обычная ссылка
Вторая ссылка – это обычная ссылка на другую страницу.
<a href="/address/" class="uk-button uk-button-text ajax-me">
<i class="fa fa-map"></i> Как проехать
</a>
В этом коде нас будут интересовать 4 момента:
- Сама ссылка – это то, что находится внутри атрибута href="".
- Класс ajax-me – делает так, чтобы содержание ссылки открывалось во всплывающем окне.
- Текст ссылки – в данном случае слова «Как проехать».
- Иконка.
Сначала замените ссылку – /address/ на свою ссылку.
Класс ajax-me делает так, что ссылка открывается не на отдельной странице, а во всплывающем окне.
Но должно соблюдаться два условия:
- Ссылка должна вести на тот же домен, на котором используется тема.
- Страница, на которую ведёт ссылка должна работать на теме Super.
Если вы не хотите, чтобы ссылка открывалась во всплывающем окне, а просто как обычная страница – удалите ajax-me из кода ссылки. Читайте подробнее о всплывающих окнах в этой инструкции.
Затем замените текст ссылки «Как проехать» на свой текст.
И замените иконку. Читайте отдельную инструкцию по работе с иконками.
Выпадающее подменю
Самый интересный момент в блоке этих ссылок – это выпадающее меню.
Код меню выглядит следующим образом:
<!-- Третья ссылка -->
<div class="uk-padding-small uk-padding-remove-vertical uk-display-inline-block">
<a href="#" class="uk-button uk-button-text">
<i class="fa fa-question-circle"></i> Покупателю
</a>
<!-- Удалите код ниже, если не нужно подменю -->
<div class="uk-dropdown" data-uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">
<li><a href="#">Как сделать заказ</a></li>
<li><a href="#">Доставка и оплата</a></li>
<li><a href="#">Возврат товара</a></li>
<!-- Разделитель меню -->
<li class="uk-nav-divider"></li>
<li><a href="#">Таблица размеров</a></li>
<li><a href="#">Полезная информация</a></li>
</ul>
</div>
<!-- Удалите код выше, если не нужно подменю -->
</div>
Первая ссылка – «Покупателю» может быть «пустой». Т.е. не вести на какую-то страницу.
Если вас устраивает такое поведение ссылки, можете в атрибуте href оставить знак #решётки.
Если вам нужна ссылка в этом месте, то замените # на свою ссылку.
Но нужно учитывать, что на мобильных устройствах нет понятия наведения на ссылку. Поэтому первое касание ссылки будет открывать подменю, второе касание – переход по ссылке.
Содержание подменю выводится между этими тегами (вместо ... ):
<!-- Удалите код ниже, если не нужно подменю -->
<div class="uk-dropdown" data-uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">
...
</ul>
</div>
<!-- Удалите код выше, если не нужно подменю -->
Здесь ссылки выглядят таким образом:
<li><a href="#">Как сделать заказ</a></li>
В этом коде отредактируйте саму ссылку – #.
И текст ссылки – «Как сделать заказ»
Вы можете также добавить иконку ссылке.
Тогда код ссылки будет выглядеть так:
<li>
<a href="#">
<i class="nav-icon класс иконки"></i> Как сделать заказ
</a>
</li>
Замените слова «класс иконки» на класс иконки =), nav-icon не удаляйте.
Где узнать класс иконки читайте в этой инструкции.
Если хотите, чтобы ссылка отрывалась во всплывающем окне, добавьте ссылке class="ajax-me", код ссылки будет выглядеть следующим образом:
<li>
<a href="#" class="ajax-me">
<i class="nav-icon класс иконки"></i> Как сделать заказ
</a>
</li>
Разделитель подменю
В подменю есть её один интересный элемент, который позволит вам разделять ссылки по смыслу между собой – разделитель.
Код разделителя выглядит так:
<li class="uk-nav-divider"></li>
Просто добавьте его между кодом двух ссылок.
Например так:
<li><a href="/delivery/" class="ajax-me"><i class="nav-icon fa fa-truck"></i> Доставка</a></li> <li><a href="/payment/" class="ajax-me"><i class="nav-icon fa fa-money"></i> Оплата</a></li> <!-- Разделитель меню --> <li class="uk-nav-divider"></li> <li><a href="/warranty/" class="ajax-me"><i class="nav-icon fas fa-shield-alt"></i> Гарантия</a></li> <li><a href="/moneyback/" class="ajax-me"><i class="nav-icon fas fa-undo-alt"></i>Возврат</a></li>
Иконки мессенджеров
Также в код ссылок были добавлены иконки мессенджеров WhatsApp, Viber и Telegram.
Поскольку мессенджеры используются в большинстве случаев на смартфонах (а это устройства, реагирующие на касания), иконки были скрыты для устройств, не реагирующих на касания (ПК и ноутбуки).
На ПК очень редко устанавливаются приложения мессенжеров, а если приложения мессенджера не будет обнаружено, то ссылка будет «битой».
Код иконок мессенджеров выглядит так:
<!-- Горизонтальный отступ для иконок -->
<div class="uk-width-1-1 uk-visible-touch uk-hidden@s"></div>
<!-- Иконкa whatsapp -->
<a href="whatsapp://send?phone=7xxxxxxxxxx" class="uk-link-reset pl-5 pr-5 pt-15 uk-display-inline-block uk-hidden-notouch">
<i class="icon-whatsapp ratio2x" style="color:#35B548"></i>
</a>
<!-- Иконкa Viber -->
<a href="viber://add?chat=7xxxxxxxxxx" class="uk-link-reset pl-5 pr-5 pt-15 uk-display-inline-block uk-hidden-notouch">
<i class="icon-viber ratio2x" style="color:#7A539B"></i>
</a>
<!-- Иконкa Telegram -->
<a href="tg://resolve?domain=vash-nickname" class="uk-link-reset pl-5 pr-5 pt-15 uk-display-inline-block uk-hidden-notouch">
<i class="fa fa-telegram ratio2x" style="color:#2F9BD1"></i>
</a>
Если вы хотите, чтобы иконки были видны и на ПК, уберите класс uk-visible-touch во всём коде, который указан выше.
Теперь вам нужно поменять контакты для мессенджеров.
В ссылках на WhatsApp и Viber замените код 7xxxxxxxxxx на свой номер (включая код страны, без знака +).
В ссылке на Telegram поменяйте vash-nickname на ваш ник в телеграме или номер телефона.
Внимание!
Если вы добавляли ссылки на мессенджеры рядом с номерами телефонов (по этой инструкции), то удалите код мессенджеров, добавленный здесь.
1 комментарий
небольшое уточнение:
надо убрать класс uk-hidden-notouch напротив каждой иконки мессенджера, насколько у меня получилось.