Инструкция по созданию и изменению шапки сайта для пользователей конструктора «Нубекс»
Шапкой называется верхняя часть страницы сайта, на которой обычно размещают название компании, логотип и другую важную информацию (контакты, время работы, слоган и т.д.).
Изменить шапку Вашего сайта в «Нубексе» очень легко: для этого зайдите в админку, в меню управления (слева) выберите раздел «Оформление», а в нем — пункт «Шапка страницы».
Перед Вами появится список доступных шапок. Положитесь на свой художественный вкус и выбирайте: в Вашем распоряжении несколько десятков готовых шаблонов. Для выбора шапки просто кликните на понравившийся вариант: система автоматически сохранит изменения, и шапка на сайте отобразится в новом дизайне.
Также Вы можете выбрать пустую шапку (без фона), если хотите сконцентрировать внимание пользователей на логотипе и текстовой информации.
Если ни один из готовых шаблонов Вам не подошел, можно создать шапку самостоятельно.
В первую очередь нужно загрузить на сайт изображение, которое Вы хотите использовать в качестве шапки. Для этого нажмите кнопку «Загрузить», выберите на своем компьютере нужный файл и нажмите «Открыть».
Обратите внимание: допустимые форматы файла для загрузки — jpeg, jpg, gif, png, ico; максимальный размер — 10 Мб; в высоту изображение должно иметь не меньше 90 пикселей. Верхней границы для высоты шапки нет, но не стоит грузить слишком большие изображения. Иначе шапка займет большую часть экрана, не оставив места для информации самих страниц. Как правило, высоты в
250-300 пикселей достаточно для размещения логотипа, слогана, адреса и контактных данных.
После загрузки изображения настройте выравнивание шапки: по центру, слева или справа. Особенно это важно, когда ширина загруженного изображения сильно превышает ширину колонки (940 пикселей). В этом случае от выравнивания будет зависеть, какие части картинки отобразятся в шапке, а какие — нет.
Если ширина изображения, наоборот, меньше ширины колонки, особое внимание следует обратить на галочку «Показывать шапку с повторениями». На скриншоте ниже показано, как активность этой галочки влияет на отображение шапки на сайте.
Не забудьте сохранить сделанные изменения: шапка готова, а Вы — восхитительны! Для дальнейшей работы над дизайном Вашего сайта советуем изучить статьи о том, как изменить логотип и добавить важную информацию в шапку сайта.
- Как создать сайт самостоятельно
- Работа со страницами
- Наполнение страниц
- Работа с изображениями и файлами
- Фотогалереи
- Новости
- Каталог товаров
- Интернет-магазин
- Формы обратной связи
- Виджеты
- Функции продвижения
- Доступ в систему управления
- Внешние сервисы
- Дизайн
Шапка сайта.
Типовое решение «GS: Atelier- Главная
- Документация
- Типовое решение «GS: Atelier — Сайт ателье»
Большая часть элементов в шапке сайта представлена включаемыми областями. Исключение: кнопка «Записаться на сервис», Форма поиска, Заказать звонок.
Включаемые области
1. Адрес компании
2. Email
3. Картинка логотипа
4. Текст логотипа
5. Текст о компании
6. Телефон
7. График работы
Редактирование включаемых областей
Для редактирования включаемой области можно воспользоваться нашей инструкцией: Редактирование включаемых областей
1.
Адрес компании2. Email
Email необходимо изменить в двух местах.
3. Картинка логотипа
Вместо данного кода вы можете прописать путь к своему изображению. Предварительно изображение необходимо подготовить (оптимизировать, подобрать размер) и загрузить на сайт. Все изображения рекомендуется загружать в корень сайта в папку
Предположим у вас есть изображение логотипа с именем logo.png
Во включаемой области вместо <i aria-hidden=»true»></i> вы можете прописать следующий код:
<img src=»/images/logo.png» alt=»Ваша компания» title=»Ваша компания»>
Для загрузки изображения:
1. Переходим во вкладку Администрирование
2. Контент — Структура сайта — Файлы и папки — images (если папки images нет, её необходимо создать)
3. Загружаем файл logo.png в папку images
Отредактировать размер и расположение картинки логотипа относительно других элементов в шаблоне можно в файле стилей style. css.
4. Текст логотипа
Если в логотипе предполагается только картинка, то текст логотипа можно удалить.
5. Текст о компании
6. Телефон
7. График работы
Элементы шапки редактируемые через шаблон
1. Кнопка «Оставить заявку»
2. Ссылка «Заказать звонок»
3. Форма поиска на сайте
1. Кнопка «Оставить заявку»
Отредактировать кнопку можно в коде шаблона сайта.
Вместо <?=GetMessage(«HEADER_ZAYVKA»)?> вы можете указать свой текст ссылки.
2. Ссылка «Заказать звонок»
Вместо <?=GetMessage(«CALLBACK»)?> вы можете указать свой текст ссылки.
3. Форма поиска на сайте
Отредактировать форму поиска можно в коде шаблона сайта.
15 потрясающих примеров шапки веб-сайта, на которых стоит поучиться
Дизайн веб-сайта требует многого, но заголовок вашего веб-сайта должен быть одним из ваших самых важных соображений. Заголовок веб-сайта — это самое первое, что видит большинство посетителей, и вы хотите, чтобы он сразу информировал их о том, чем занимается ваш бизнес, и побуждал их к действию.
Исследования показывают, что 94% первых впечатлений о веб-сайте связаны с его дизайном, поэтому важно приложить достаточно усилий к дизайну, чтобы посетители веб-сайта не переходили на сайт конкурента.
В этой статье мы углубимся в то, что такое заголовок веб-сайта, что должен включать в себя хороший заголовок веб-сайта, а также рассмотрим 15 лучших примеров для изучения.
Приступаем к делу.
Создавайте потрясающие макеты с помощью Visme
- Выберите один из множества различных типов макетов
- Загрузите свои собственные макеты, чтобы перетащить их на элемент макета
- Продемонстрируйте, как ваш веб-сайт или продукт будет выглядеть в действии
Зарегистрироваться. Это бесплатно.
Содержание
Что такое заголовок веб-сайта?
Элементы хорошего заголовка веб-сайта
15 примеров заголовка веб-сайта, на которых стоит поучиться
Создайте свой собственный потрясающий заголовок веб-сайта . Обычно это сочетание текста и изображений, которые помогают посетителям с первого взгляда понять, чем занимается ваш бизнес.
Вот пример (и настраиваемый шаблон) того, как это может выглядеть на вашем веб-сайте:
Настройте этот шаблон и сделайте его своим собственным! потому что он должен давать ответы с самого начала. Какое твое дело? Что он делает или обеспечивает? Как клиенты могут действовать?
На каждый из этих вопросов нужно немедленно ответить в шапке вашего веб-сайта, иначе потенциальный клиент может решить, что ваш бизнес не может ему помочь, и уйти к конкуренту.
На самом деле, 75% потребителей оценивают общую надежность компании по дизайну своего веб-сайта. Если у вас плохо спроектированный веб-сайт, вы теряете деньги.
Хорошей новостью является то, что мы здесь, чтобы помочь вам создать потрясающий заголовок веб-сайта, который взаимодействует с вашей аудиторией и побуждает ее к действию.
Элементы хорошего заголовка веб-сайта
Область заголовка вашего веб-сайта состоит из двух основных частей: верхней панели и изображения заголовка. Стратегическое использование этих разделов упрощает использование вашего веб-сайта, одновременно демонстрируя ваши продукты или услуги.
Давайте разберем каждый элемент, который может содержать заголовок вашего веб-сайта, в зависимости от его расположения на экране.
Верхняя панель
Верхняя панель вашего веб-сайта должна включать любой из наиболее подходящих вариантов ниже:
- Логотип: Ваш логотип должен быть в центре или в верхнем левом углу заголовка вашего сайта.
- Навигация: Поместите самые важные веб-страницы на панель навигации. Вы даже можете подумать о создании выпадающих меню, чтобы разместить больше страниц, не загромождая навигацию.
- Строка поиска: Упростите посетителям вашего веб-сайта поиск страниц, услуг или продуктов, которые они ищут.
- Корзина: Каждый сайт электронной коммерции должен иметь ссылку или значок корзины в верхней панели.
- Вход/регистрация: Если у вашей компании есть веб-сайт на основе учетной записи, убедитесь, что ссылки для входа/регистрации легко доступны на верхней панели.
- Значки социальных сетей: Значки социальных сетей должны быть включены в верхнюю панель или нижний колонтитул, чтобы клиенты могли легко подписаться на вас.
- Уведомления: Если применимо, включите ссылку для клиентов или пользователей, чтобы просмотреть свои уведомления в верхней панели вашего веб-сайта.
Изображение заголовка веб-сайта
Прямо под верхней панелью вам нужно разместить изображение заголовка вашего веб-сайта. Обычно это включает в себя:
- Основное изображение или видео: Включение некоторого типа изображений, будь то краткий обзор программного обеспечения, фотография продукта или иллюстрация.
- Уникальная торговая точка (USP): Ваш заголовок или текст, который также должен давать четкое представление о том, чем занимается ваша компания и почему она лучше конкурентов.
- Копия: Под заголовком включите подзаголовок или небольшой фрагмент текста, который более подробно поясняет, чем занимается ваш бизнес.
- Кнопка/ссылка призыва к действию: Побудите посетителей веб-сайта к действию рядом с заголовком вашего веб-сайта. Это может быть ссылка «Зарегистрироваться», «Купить сейчас» или «Узнать больше».
Теперь, когда у вас есть хорошее представление о том, что вы должны включить в заголовок своего веб-сайта, давайте рассмотрим несколько лучших примеров от крупных брендов, которые знают, что делают.
1. Включите пустое пространство
Вам не нужно создавать перегруженный, загроможденный дизайн, демонстрирующий миллион продуктов или функций. Вместо этого добавьте пустое пространство, вырвав страницу из книги Mixtiles и разместив несколько высококачественных фотографий продукта на белом фоне.
Создайте аналогичный заголовок веб-сайта, настроив шаблон ниже:
2. Плавающие элементы дизайна
Мы не могли не упомянуть наш собственный дизайн главной страницы (тот, к которому мы особенно неравнодушны)! Мы также использовали минималистичный стиль в нашем собственном дизайне с большим количеством пустого пространства.
Но мы хотим сосредоточиться на использовании плавающих элементов дизайна. Включив элементы, доступные прямо внутри нашего инструмента, мы смогли разработать заголовок, который заинтересует посетителей при погружении в наш инструмент.
3. Раздвоенный заголовок
Для простого дизайна создайте разделенный заголовок. На одной половине вы можете продемонстрировать продукт или программное обеспечение. Затем с другой стороны вы можете разместить свой заголовок/УТП, копию и кнопку призыва к действию.
Легко настройте свой собственный разделенный заголовок с помощью шаблона, подобного приведенному ниже:
4. Покажите свое программное обеспечение
Если вы управляете компанией SaaS, используйте заголовок своего веб-сайта, чтобы продемонстрировать некоторые из лучших частей вашего программного обеспечения. Это поможет заинтересованным клиентам решить, подходит ли им ваш инструмент.
Используйте 1-3 скриншота или макеты наиболее часто используемых функций вашего программного обеспечения как часть заголовка вашего веб-сайта.
5. Сосредоточьтесь на своем УТП
Иногда все, что вам нужно сделать, это сосредоточиться на своем уникальном торговом предложении (УТП). Ahrefs — хорошо известный SEO-инструмент (даже их директор по маркетингу написал «не может быть, что вы занимаетесь SEO и не слышали о нас 🙃» в своей биографии в Твиттере), поэтому у них очень простая, но эффективная линия. как центральный элемент заголовка их веб-сайта.
Если вы хотите попробовать что-то подобное, воспользуйтесь этим шаблоном:
6. Выделите ваши продукты
Иногда лучше всего выделить ваши продукты с помощью профессиональных фотографий продуктов и использовать эти изображения в качестве первого, что увидят новые посетители веб-сайта. Это сразу же привлечет их и побудит искать на вашем веб-сайте еще больше вариантов продуктов.
И чем больше вариантов товара просматривает посетитель веб-сайта, тем больше вероятность того, что он найдет то, что ему нравится, и совершит покупку. Но вам нужно сначала привлечь их великолепной фотографией продукта и соответствующей кнопкой призыва к действию.
7. Продвижение скидок и распродаж
У вас распродажа? Рекламируйте его прямо в шапке своего веб-сайта, чтобы увеличить общее количество клиентов, которых вы конвертируете за этот период времени. Если вы проводите распродажи к каждому крупному празднику или сезону, это прекрасная возможность обновить заголовок вашего веб-сайта, чтобы посетители знали, что они могут немного сэкономить.
Создайте свой собственный заголовок веб-сайта для следующей распродажи или скидки с помощью приведенного ниже шаблона:
8. Используйте видео заголовка
Сделайте шапку своего веб-сайта еще более заметной, создав или используя фоновое видео. Вы можете сделать то же самое, что и Obé Fitness, используя в качестве фона немую часть одного из их тренировочных видеороликов, или вы можете использовать одно из стоковых видеороликов Visme.
Это отличный способ заставить посетителей оставаться на вашем сайте. Видео привлечет их внимание и заставит смотреть, а видео — еще лучший способ продемонстрировать, чем именно занимается ваш бизнес.
9. Создать коллаж
Одной фотографии недостаточно? Совершенно нормально — создайте коллаж из нескольких фотографий, демонстрирующих ваши лучшие работы, самые популярные продукты или весь спектр ваших услуг. Коллаж достаточно красочный, чтобы привлечь внимание, и в то же время дать понять клиентам, чем вы занимаетесь.
Воспользуйтесь преимуществами шаблона, подобного приведенному ниже, для своего собственного веб-сайта:
10. Продвигайте несколько товаров с помощью слайдера
Если коллаж вам не подходит, рассмотрите возможность использования слайдера для заголовка вашего веб-сайта. Это позволяет вам создавать по одному слайду для каждого продукта или услуги, которую вы хотите продвигать, не чувствуя, что вы загромождаете дизайн своего веб-сайта.
11. Используйте макеты
Если у вас есть мобильное или настольное приложение как часть продуктов или услуг вашей компании, использование макета может быть отличным способом его визуализации. Мокап телефона или компьютера сразу сообщает посетителям веб-сайта, что у вас есть загружаемый продукт.
Вы можете легко создать свой собственный макет с помощью Visme, используя шаблон, подобный приведенному ниже:
12. Включите поле регистрации
Упростите для новых посетителей регистрацию на ваш продукт или даже на ваш список адресов электронной почты, включив поле регистрации прямо в шапке вашего сайта.
Заинтересованные клиенты могут немедленно ввести свой адрес электронной почты, нажать кнопку и начать новую подписку. Кроме того, кнопка «Начать бесплатную пробную версию» — отличный способ побудить людей пойти дальше и погрузиться в мир без риска.
13. Используйте крупный, жирный текст
Сделайте текст заголовка центром заголовка вашего веб-сайта, как это сделал Ritual выше. Тем не менее, они проделали большую работу по включению этого в потрясающий и гиперрелевантный дизайн продукта. Это объединяет весь заголовок веб-сайта и помогает ему плавно перетекать в остальную часть дизайна домашней страницы.
Вы можете легко создать такой же эффект с помощью шаблона, подобного приведенному ниже:
14. Включить рейтинги и отзывы
У вас есть довольные клиенты? Сообщите посетителям веб-сайта об этом с самого первого посещения вашей домашней страницы. Включив свои 5-звездочные рейтинги, вы можете с самого начала предоставить социальное доказательство, помогая клиентам чувствовать себя более комфортно при покупке в вашем бизнесе.
15. Пусть ваши визуальные эффекты говорят сами за себя
Несмотря на то, что слоган ClickUp и панель регистрации являются частью заголовка веб-сайта, именно визуальные эффекты и смелые цвета действительно привлекают посетителей веб-сайта. Скриншоты своего инструмента, они могут сразу заинтересовать потенциальных клиентов.
Рассмотрите возможность использования шаблона, подобного приведенному ниже, который поможет вам рассказать свою историю с помощью визуальных средств:
Когда дело доходит до дизайна заголовка вашего веб-сайта, не существует универсального шаблона. Как видите, существует несколько способов создать работающую шапку веб-сайта. Вам просто нужно подумать, каков ваш главный призыв к действию и как лучше всего представить свой бизнес с первого взгляда.
Чтобы создать свой собственный потрясающий заголовок веб-сайта, не ищите ничего, кроме Visme. С полностью настраиваемыми шаблонами, миллионами ресурсов дизайна и несколькими форматами загрузки вы можете создать заголовок веб-сайта, который конвертируется за считанные минуты.
11 советов по созданию отличного заголовка веб-сайта
Заголовок веб-сайта — это первое, что видят посетители при посещении сайта, и он появляется на каждой странице сайта. Хороший заголовок веб-сайта сочетает в себе чистый дизайн и кристально четкую навигацию к более глубоким страницам веб-сайта. Таким образом, важно сосредоточиться на передовых методах разработки заголовка веб-сайта для ваших клиентов, который поможет их клиентам быстро получить необходимую им информацию. Вот 11 советов, которые помогут вам создавать отличные заголовки для ваших сайтов.
- Совет №1. Подчеркните самые важные элементы
- Совет №2. Используйте четкие, читаемые шрифты
- Совет №3. Используйте прозрачные заголовки для сайтов с впечатляющими изображениями
- Совет №4. Уменьшайте заголовок при прокрутке, чтобы основная информация оставалась видимой
- Совет № 5. Есть магазин? Поставь наверх!
- Совет №6. Используйте эффекты, чтобы показать посетителям, где они находятся и куда идут
- Совет № 7. Выберите макет, который подходит логотипу
- Совет № 8. Используйте элементы дизайна, которые выражают индивидуальность компании
- Совет № 9. Используйте расширяемые меню, чтобы изображения сияли
- Совет № 10. Рассмотрим боковую панель — подходит ли она для вашего сайта?
- Совет №11. Измените их, чтобы ваши веб-сайты оставались свежими
ВО-ПЕРВЫХ, ЧТО ТАКОЕ ЗАГОЛОВОК ВЕБ-САЙТА?
Для тех, кто совсем не знаком с дизайном веб-сайтов, как мы уже упоминали, заголовок веб-сайта — это первое, что вы видите на странице, и представляет собой полосу контента, которая часто прикрепляется к верхней части сайта для обеспечения единообразия.
В конечном счете, заголовок — это то, что задает тон и ощущение веб-сайта и гарантирует, что брендинг всегда актуален, и что люди точно знают, что представляет собой ваш бренд, что вы делаете и за что вы выступаете. Вот почему это так важно и почему существуют определенные методы и тактики, которые вы должны применять.
Совет №1. Подчеркните самые важные элементы
Учитывайте главное, что вы хотите, чтобы посетители сайта делали на сайте, и убедитесь, что этот элемент хорошо виден в шапке. Например, для некоммерческих сайтов используйте значок «Пожертвовать сейчас»; для сайтов ресторанов используйте значок «Забронировать столик».
Как правило, заголовки содержат информацию, облегчающую взаимодействие посетителей с сайтом, в том числе:
- Навигационные ссылки
- Логотип компании
- Призыв к действию (Забронируйте столик, Пожертвуйте, Позвоните нам)
- Контактная информация
- Значки социальных сетей
- Слоган
- Многоязычный переключатель
- Корзина
Навигационные ссылки: Это позволяет пользователям совершенно непринужденно перемещаться по вашему веб-сайту, а также всегда иметь базу, к которой можно вернуться, чтобы выполнить такое перемещение.
Логотип компании: всегда будет укреплять ваш бренд. Очень важно, чтобы ваш логотип был на шапке.
Призыв к действию (Забронировать столик, Пожертвовать, Позвонить нам): Это в конечном итоге побудит браузеры использовать вас и увеличить конверсию на вашем сайте.
Контактная информация: Пользователям не придется искать информацию на сайте, чтобы связаться с вами. Опять же, это улучшит конверсию и общее обслуживание клиентов.
Иконки социальных сетей: Предлагая легкий доступ к социальным каналам, вы увеличите количество подписчиков и вовлеченность в них.
Слоган: Здесь вы можете укрепить ценности своего бренда.
Многоязычное переключение: улучшите взаимодействие с пользователем, позволяя пользователям легко переключать языки.
Корзина: Это упростит процесс перехода к кассе и, таким образом, улучшит конверсию и увеличит количество транзакций на вашем сайте.
Подумайте, какие из них наиболее важны для ваших сайтов, и подчеркните их.
Родственный: Duda против WordPress: сравнение бок о бок
Совет №2. Используйте четкие, удобочитаемые шрифты в заголовке вашего веб-сайта
Текст в заголовке должен быть читаемым с первого взгляда. По возможности используйте короткие слова и выбирайте четкие шрифты с относительно большим размером шрифта. Заголовки обычно не место для стилизованных шрифтов, так как их труднее читать.
Заголовки должны быть читаемы с первого взгляда, поэтому используйте четкие, читаемые шрифты.
Совет №3. Используйте прозрачные заголовки для сайтов с впечатляющими изображениями
Для сайтов с ослепительными изображениями попробуйте использовать прозрачный заголовок. Это обеспечивает максимальную экспозицию изображений, но при этом показывает важные ссылки.
Если вы использовали липкий заголовок, его прозрачность при прокрутке может немного отвлекать, поскольку при перемещении изображений фон заголовка также будет перемещаться. Чтобы избежать этого, добавьте цвет фона, чтобы прокручиваемые изображения не отвлекали пользователей от ссылок.
Для сайтов с ослепительными изображениями попробуйте прозрачный заголовок.
Совет №4. Уменьшить заголовок веб-сайта при прокрутке, чтобы основная информация оставалась видимой
сжимающийся заголовок — это отличный способ свести к минимуму количество места, которое занимают заголовки, когда пользователи прокручивают страницу, сохраняя при этом ключевую информацию сайта доступной. Они особенно удобны, если вы разработали действительно большой эффектный заголовок. Уменьшающийся заголовок может отображать основные элементы навигации и логотип, а также менять цвет по мере прокрутки страницы.
Совет №5. Есть магазин? Поставь наверх!
В Сайты электронной коммерции, поместите значок корзины в заголовок. Это позволяет посетителям сайта легко совершить покупку одним щелчком мыши, независимо от того, где они находятся на сайте. Делая это, вы уменьшите количество брошенных корзин, поскольку пользователи всегда будут в одном шаге от покупки. Хорошим дополнением является добавление функции наведения в корзину, чтобы пользователи также могли видеть, что находится в их корзине, не нажимая на нее.
Чтобы узнать больше, проверьте Основы веб-дизайна в Университете Дуда.
Совет №6. Используйте эффекты, чтобы показать посетителям, где они находятся и куда они идут. Выбирайте эффекты, достаточно заметные, чтобы привлечь внимание, но не настолько заметные, чтобы отвлекать внимание.
Обратите внимание, что некоторые эффекты видны только на компьютере, поэтому обязательно выберите эффекты (например, изменение цвета или подчеркивание), которые будут видны на мобильных устройствах.Наведение / выбранные эффекты показывают пользователям, где они находятся на сайте.
Совет №7. Выберите макет заголовка сайта, который подходит к логотипу
Заголовки часто являются первым, что видят посетители сайта, поэтому важно иметь логотип компании. Когда при создании нового веб-сайта выберите макет заголовка, который лучше всего соответствует форме и стилю логотипа. В целом лучше всего смотрятся круглые и квадратные логотипы. в центре; прямоугольные хорошо смотрятся справа или слева.
Круглые и квадратные логотипы отлично смотрятся посередине.
Совет №8. Используйте элементы дизайна, которые выражают индивидуальность компании
Вы можете использовать цвета и эффекты, чтобы выразить индивидуальность компании. Например, если бренд беззаботный, эффект плавания, когда посетители наводят курсор на навигацию, может поддержать это ощущение. Напротив, плавающий эффект может быть менее подходящим для клиентов, предлагающих профессиональные услуги, таких как юристы и агенты по недвижимости.
Используйте дизайнерские эффекты, демонстрирующие индивидуальность компании.
Совет № 9. Используйте расширяемые меню, чтобы изображения сияли
Расширяемые меню отлично подходят для веб-сайтов с большим количеством изображений, таких как портфолио, поскольку они оставляют много места для изображений. Многие предприятия, когда создающие мобильные веб-сайты внедрили их, и они все больше и больше растет и на настольных компьютерах. например, навигация по сайту) можно открыть одним щелчком мыши.
Для современного вида, который позволяет изображениям и кнопкам сиять, попробуйте расширяемый заголовок.
Совет №10. Рассмотрим боковую панель — подходит ли она для вашего сайта?
Заголовки боковой панели позволяют хранить ключевую информацию на сайте, пока пользователи прокручивают страницу и не отвлекаются.