Как добавить телефон и email с иконками в шапку Astra: готовый HTML и CSS с адаптивом
Клиенты теряют ваши контакты? Готовое HTML и CSS решение для темы Astra: выводим кликабельный телефон, email и часы работы в шапку для роста конверсии.
Тема Astra из коробки не даёт удобно вывести в шапке телефон и email с иконками и дополнительной подписью вроде «Принимаем звонки: Пн–Пт, 9:00–18:00 мск».
Стандартный элемент Header Builder → HTML позволяет вставить произвольный HTML-код, но разметку и стили для такого блока придётся добавить самостоятельно.
Ниже — готовое решение: HTML-блок и CSS для десктопной и мобильной версии, с учётом размеров кликабельных областей и видимого состояния фокуса.
Что получим в итоге
- Телефон и email в одну строку на десктопе.
- Кликабельные ссылки
tel:иmailto:. - Иконки перед телефоном и email.
- Под номером телефона — небольшая серая подпись с часами приёма звонков.
- На мобильных устройствах контакты выстраиваются в столбец.
- Подпись с часами на мобильных переходит в обычный поток документа, чтобы не перекрывать соседние элементы.
- Кликабельные области увеличиваются для более удобного управления пальцем.
- Для клавиатурной навигации сохраняется видимый фокус без необходимости использовать стандартную браузерную пунктирную обводку.
Шаг 1. Куда вставлять HTML-код
В Astra откройте:
Внешний вид → Настроить → Header Builder
Добавьте элемент HTML в нужную область шапки — например, в Above Header или Primary Header — и вставьте в него разметку ниже.
Если шапка сайта создана в Elementor Pro, тот же HTML-код можно использовать в элементе HTML внутри шаблона шапки.
Шаг 2. HTML-разметка
<div class="astra-top-contacts">
<div class="astra-contact-phone">
<a class="astra-contact-link" href="tel:+79999999999">
<img class="astra-contact-icon" src="/wp-content/uploads/icons/phone-solid-full.svg" alt="Как добавить телефон и email с иконками в шапку Astra: готовый HTML и CSS с адаптивом">
+7 999 999-99-99
</a>
<span class="astra-contact-hours">Принимаем звонки: Пн–Пт, 9:00–18:00 мск</span>
</div>
<a class="astra-contact-link" href="mailto:info@example.com?subject=Вопрос%20с%20сайта">
<img class="astra-contact-icon" src="/wp-content/uploads/icons/envelope-solid-full.svg" alt="Как добавить телефон и email с иконками в шапку Astra: готовый HTML и CSS с адаптивом">
info@example.com
</a>
</div>Почему у иконок стоит alt=""
Пустой атрибут alt="" здесь — осознанное решение, а не забытый атрибут.
Иконки телефона и конверта декоративные: рядом уже находится текст, который полностью передаёт смысл ссылки. Пустой alt сообщает скринридеру, что изображение нужно пропустить, а не читать имя файла вслух.
Если текст рядом с иконкой отсутствует и действие представлено только самой иконкой, доступное имя должно быть задано другим способом — например, через aria-label у ссылки или кнопки.
Например:
<a href="tel:+79953154854" aria-label="Позвонить">
...
</a>Для интерактивного элемента это корректнее, чем пытаться использовать alt изображения как единственный источник его доступного имени.
Не копируйте чужие URL иконок
Пути в примере:
/wp-content/uploads/icons/phone-solid-full.svgи
/wp-content/uploads/icons/envelope-solid-full.svg- условные.
Загрузите SVG-файлы на свой сайт и используйте собственные URL. Не стоит подключать изображения напрямую с чужого домена: такой файл может быть удалён, перемещён или заблокирован.
Где брать иконки для сайта
Для такого блока контактов удобнее всего брать SVG-иконки из открытых библиотек, где можно скачать файл и загрузить его в медиатеку или в отдельную папку сайта.
В примере выше используются иконки из библиотеки Font Awesome:
На странице иконки можно скачать SVG-файл, затем загрузить его на свой сайт и заменить путь в HTML-разметке на собственный.
Например, если файл телефона загружен в папку /wp-content/uploads/icons/, путь может выглядеть так:
src="/wp-content/uploads/icons/phone-solid-full.svg"А для иконки email:
src="/wp-content/uploads/icons/envelope-solid-full.svg"Важно: не вставляйте в шапку сайта прямую ссылку на SVG с чужого сайта. Лучше скачать иконку, загрузить её к себе и использовать локальный путь. Так блок контактов не будет зависеть от доступности стороннего ресурса.
Можно ли поменять цвет скачанной SVG-иконки
Если SVG подключается через тег <img>, как в базовом примере, цвет такой иконки обычно нельзя надёжно изменить через CSS. Цвет уже записан внутри самого SVG-файла.
Есть два практических варианта.
Первый вариант — открыть SVG-файл в редакторе кода и заменить значение fill на нужный цвет:
fill="#2f7d32"Например, для более тёмного зелёного можно использовать:
fill="#1f5f24"После этого SVG нужно сохранить и снова загрузить на сайт.
Второй вариант — использовать inline SVG вместо <img> и задать:
fill="currentColor"Тогда иконка будет наследовать цвет ссылки, а её цвет можно будет менять обычным CSS через свойство color.
Как правильно записывать mailto:
В примере используется:
href="mailto:info@example.com?subject=Вопрос%20с%20сайта"Пробелы в параметрах URL должны быть закодированы. Здесь вместо пробелов используется %20.
Если тема письма содержит сложный текст, кириллицу или специальные символы, безопаснее заранее закодировать значение параметра средствами URL-кодирования.
Шаг 3. CSS для десктопа
/* ===== Контакты в шапке ===== */
.astra-top-contacts {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 24px;
margin: 0;
padding: 0;
line-height: 1;
white-space: nowrap;
}
.astra-top-contacts a {
display: inline-flex;
align-items: center;
gap: 8px;
color: #2f7d32;
font-size: 16px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
.astra-top-contacts a:hover {
color: #1f5f24;
text-decoration: underline;
}
.astra-top-contacts .astra-contact-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
display: block;
}
/* ===== Телефон + подпись о часах приёма звонков ===== */
.astra-contact-phone {
position: relative;
display: inline-flex;
align-items: center;
}
.astra-contact-hours {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin: 2px 0 0 !important;
padding: 0 !important;
font-size: 12px;
font-weight: 400;
color: #6b7280;
line-height: 1.2;
white-space: nowrap;
}Зачем используется position: absolute
На десктопе подпись с часами приёма звонков не должна увеличивать высоту строки с контактами и нарушать вертикальное выравнивание остальных элементов шапки.
Поэтому для .astra-contact-hours используется:
position: absolute;Подпись визуально располагается под номером телефона, но не участвует в расчёте размеров соседних элементов.
Это удобно для компактной десктопной шапки, но на мобильных устройствах такой подход может привести к наложению элементов. Поэтому в мобильной версии абсолютное позиционирование отключается.
Шаг 4. Адаптив для мобильных устройств
@media (max-width: 921px) {
#ast-mobile-popup .ast-header-html-1 .ast-builder-html-element,
.ast-mobile-header-wrap .ast-header-html-1 .ast-builder-html-element {
padding-left: 20px !important;
padding-right: 20px !important;
margin-left: 0 !important;
text-align: left !important;
}
#ast-mobile-popup .ast-header-html-1,
.ast-mobile-header-wrap .ast-header-html-1 {
padding-left: 0 !important;
margin-left: 0 !important;
}
.astra-top-contacts {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.astra-top-contacts a {
font-size: 14px;
line-height: 2.4 !important;
padding: 6px 0;
}
.astra-contact-phone {
flex-direction: column;
align-items: flex-start;
}
.astra-contact-hours {
position: static;
transform: none;
margin-top: 2px !important;
font-size: 12px;
}
}На мобильных устройствах происходят три принципиальных изменения.
Во‑первых, контакты располагаются вертикально:
flex-direction: column;Во‑вторых, подпись с часами возвращается в обычный поток документа:
position: static;Теперь она занимает собственное место и не может наехать на email или другие элементы мобильного меню.
В-третьих, у ссылок появляется дополнительный вертикальный отступ:
padding: 6px 0;Он увеличивает кликабельную область, что особенно важно для сенсорных экранов.
Важное замечание о селекторах Astra
В мобильных стилях используется селектор:
#ast-mobile-popup .ast-header-html-1Здесь ast-header-html-1 означает конкретный HTML-элемент в Header Builder Astra.
Если ваш HTML-блок второй или третий по счёту, класс может быть другим:
ast-header-html-2 ast-header-html-3Точный класс нужно проверить на своём сайте через инструменты разработчика браузера:
F12 → Elements
Не следует копировать номер HTML-элемента вслепую.
Размер кликабельной области на мобильных
В мобильных интерфейсах важно учитывать не только визуальный размер текста, но и фактическую область, по которой пользователь может нажать пальцем.
Apple Human Interface Guidelines рекомендует достаточно крупные области взаимодействия — типичный ориентир составляет не менее 44 × 44 pt. Material Design использует ориентир около 48 × 48 dp.
Это разные единицы измерения, поэтому не следует механически приравнивать их к CSS-пикселям. Практический принцип один: интерактивный элемент не должен требовать от пользователя ювелирной точности попадания пальцем.
В нашем коде дополнительная область создаётся правилом:
.astra-top-contacts a {
padding: 6px 0;
}При необходимости размер кликабельной области следует проверять в реальном мобильном браузере, а не только в режиме эмуляции DevTools.
Видимый фокус вместо стандартного пунктира
Стандартная браузерная или заданная темой пунктирная обводка действительно может выглядеть неаккуратно. Но полностью убирать визуальный фокус через:
outline: 0;без какой‑либо замены не рекомендуется.
Фокус нужен пользователям, которые перемещаются по сайту с клавиатуры. Нажимая Tab, человек должен видеть, какой интерактивный элемент сейчас активен.
Поэтому стандартную обводку можно заменить собственным стилем:
/* ===== Видимый фокус для телефона и email ===== */
.astra-top-contacts .astra-contact-link:focus {
outline: none;
}
.astra-top-contacts .astra-contact-link:focus-visible {
outline: 2px solid #2f7d32;
outline-offset: 4px;
border-radius: 6px;
}Здесь есть существенная разница между :focus и :focus-visible.
:focus применяется, когда элемент получает фокус вообще.
:focus-visible предназначен для ситуаций, когда браузер определяет, что визуальный индикатор фокуса действительно нужен — прежде всего при клавиатурной навигации.
В результате обычный пользователь не получает лишнюю рамку при каждом клике мышью, а пользователь клавиатуры сохраняет понятную навигацию.
Это соответствует общей логике Apple HIG и Material Design 3, а для веб-доступности непосредственным ориентиром является WCAG 2.2, в частности критерий 2.4.7 Focus Visible.
Полный итоговый CSS
Если не хочется собирать отдельные фрагменты, вот весь CSS целиком:
/* ===== Контакты в шапке ===== */
.astra-top-contacts {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 24px;
margin: 0;
padding: 0;
line-height: 1;
white-space: nowrap;
}
.astra-top-contacts a {
display: inline-flex;
align-items: center;
gap: 8px;
color: #2f7d32;
font-size: 16px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
.astra-top-contacts a:hover {
color: #1f5f24;
text-decoration: underline;
}
.astra-top-contacts .astra-contact-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
display: block;
}
/* ===== Телефон + подпись о часах приёма звонков ===== */
.astra-contact-phone {
position: relative;
display: inline-flex;
align-items: center;
}
.astra-contact-hours {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin: 2px 0 0 !important;
padding: 0 !important;
font-size: 12px;
font-weight: 400;
color: #6b7280;
line-height: 1.2;
white-space: nowrap;
}
/* ===== Видимый фокус для телефона и email ===== */
.astra-top-contacts .astra-contact-link:focus {
outline: none;
}
.astra-top-contacts .astra-contact-link:focus-visible {
outline: 2px solid #2f7d32;
outline-offset: 4px;
border-radius: 6px;
}
/* ===== Мобильный попап Astra ===== */
@media (max-width: 921px) {
#ast-mobile-popup .ast-header-html-1 .ast-builder-html-element,
.ast-mobile-header-wrap .ast-header-html-1 .ast-builder-html-element {
padding-left: 20px !important;
padding-right: 20px !important;
margin-left: 0 !important;
text-align: left !important;
}
#ast-mobile-popup .ast-header-html-1,
.ast-mobile-header-wrap .ast-header-html-1 {
padding-left: 0 !important;
margin-left: 0 !important;
}
.astra-top-contacts {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.astra-top-contacts a {
font-size: 14px;
line-height: 2.4 !important;
padding: 6px 0;
}
.astra-contact-phone {
flex-direction: column;
align-items: flex-start;
}
.astra-contact-hours {
position: static;
transform: none;
margin-top: 2px !important;
font-size: 12px;
}
}Продвинутый вариант: inline SVG и currentColor
В базовом варианте иконки подключаются через «. Это просто и удобно, но имеет одно ограничение: цвет SVG-файла обычно не меняется автоматически вместе с цветом текста ссылки.
Если вставить SVG непосредственно в HTML и использовать:
fill="currentColor"иконка будет наследовать цвет ссылки.
Например:
<a class="astra-contact-link" href="tel:+79953154854">
<svg
class="astra-contact-icon"
viewBox="0 0 512 512"
fill="currentColor"
aria-hidden="true"
>
<path d="..."></path>
</svg>
+7 995 315-48-54
</a>А CSS остаётся простым:
.astra-contact-link {
color: #2f7d32;
}
.astra-contact-link:hover,
.astra-contact-link:focus-visible {
color: #1f5f24;
}SVG автоматически наследует текущий цвет текста.
Если иконка декоративная, для inline SVG стоит использовать:
aria-hidden="true"Нужна ли микроразметка Schema.org
Поскольку телефон и email могут выводиться в шапке каждой страницы сайта, возникает вопрос о добавлении структурированных данных.
Технически можно использовать микроразметку:
<div
class="astra-top-contacts"
itemscope
itemtype="https://schema.org/Organization"
>
<div class="astra-contact-phone">
<a
class="astra-contact-link"
href="tel:+79953154854"
itemprop="telephone"
>
<img
class="astra-contact-icon"
src="/wp-content/uploads/icons/phone-solid-full.svg"
alt=""
>
+7 995 315-48-54
</a>
<span class="astra-contact-hours">
Принимаем звонки: Пн–Пт, 9:00–18:00 мск
</span>
</div>
<a
class="astra-contact-link"
href="mailto:info@example.com"
itemprop="email"
>
<img
class="astra-contact-icon"
src="/wp-content/uploads/icons/envelope-solid-full.svg"
alt=""
>
info@example.com
</a>
</div>Однако здесь есть важная оговорка: добавление Organization непосредственно к блоку контактов в шапке — не всегда лучший способ реализации структурированных данных.
Если на сайте уже используется полноценная разметка Organization или LocalBusiness через SEO-плагин, тему или JSON-LD, создание ещё одной сущности Organization в шапке может привести к дублированию или появлению нескольких несвязанных сущностей.
Поэтому более надёжный подход такой:
- если структурированных данных организации на сайте ещё нет — добавить полноценную разметку
OrganizationилиLocalBusiness, предпочтительно через JSON-LD; - если такая разметка уже существует — телефон и email лучше включить в существующую сущность;
- не создавать отдельный
Organizationв шапке автоматически только потому, что там находятся контакты.
Микроразметка сама по себе не гарантирует повышения позиций в поисковой выдаче. Её задача — помочь поисковым системам точнее интерпретировать данные о компании.
Если часы работы часто меняются
В текущем варианте часы приёма звонков записаны статически:
<span class="astra-contact-hours">
Принимаем звонки: Пн–Пт, 9:00–18:00 мск
</span>Если график меняется редко, этого достаточно.
Если расписание регулярно меняется или нужно показывать динамический статус вроде:
- «Сейчас работаем»;
- «Сейчас закрыто»;
- «Откроемся сегодня в 9:00»,
потребуется отдельная логика на JavaScript или серверной стороне. При этом необходимо учитывать часовой пояс компании, а не только локальное время устройства пользователя.
Итог
Для обычной шапки Astra достаточно трёх компонентов:
- HTML-разметки с
tel:иmailto:. - CSS для десктопного и мобильного расположения.
- Видимого
:focus-visibleдля клавиатурной навигации.
Абсолютное позиционирование подписи удобно на десктопе, где важно сохранить компактную высоту шапки. На мобильных устройствах подпись лучше возвращать в обычный поток.
А стандартный браузерный пунктир можно заменить собственным аккуратным стилем — важно не то, как именно выглядит рамка, а то, чтобы пользователь клавиатуры мог видеть текущий активный элемент.
Была ли статья полезной?
😎 Скажите, пожалуйста, что вам понравилось?! Читаю ваши отзывы
🤨 Что не понравилось? Пожалуйста, разделите свою печаль вместе со мной))