Как создать профессиональный блок навигации в Elementor: кнопки + счётчик посещений
Продолжаю серию практических материалов по созданию сайта MARINEX-MGT.
Сегодня мы сделали ещё один важный шаг — превратили обычную страницу DATA BASE в удобный навигационный центр.
Основная идея очень простая: посетитель должен видеть все основные разделы сразу и попадать в нужный раздел одним нажатием.
В результате на странице появились:
✅ корпоративный заголовок DATA BASE в фирменном золотом цвете;
✅ четыре кнопки навигации:
- COMPANIES
- CREWING AGENCIES
- SEAFARERS
- SHIPOWNERS
Каждая кнопка использует якорную ссылку (Anchor Link) и мгновенно переводит пользователя к соответствующему разделу страницы.
Следующим этапом стал счётчик посещений
Для этого использовался стандартный виджет Counter в Elementor.
После настройки:
- задаётся начальное значение;
- устанавливается конечное значение;
- включается анимация;
- добавляется заголовок;
- выбираются корпоративные цвета.
В нашем примере используется показатель:
24,738 WEBSITE VISITS
Такой элемент делает страницу более «живой» и сразу показывает посетителю активность проекта.
Почему это важно
Хорошая навигация экономит время пользователя.
Чем быстрее человек находит нужную информацию, тем выше вероятность, что он останется на сайте и продолжит знакомство с проектом.
Даже такие небольшие элементы, как кнопки и анимированные счётчики, заметно повышают профессиональный уровень сайта.
Практический совет
При работе в Elementor всегда придерживайтесь простой последовательности:
- Создайте структуру страницы.
- Разместите кнопки навигации.
- Добавьте якоря (Anchor IDs).
- Настройте выравнивание.
- Используйте единый корпоративный стиль.
- Добавьте счётчики только после завершения структуры страницы.
Именно такая последовательность позволяет избежать большинства ошибок.
📌 Технологии проекта
- WordPress
- Elementor
- Astra Theme
MARINEX-MGT
Your Personal Online Promotion Agent
Theory and Practice Are One.