Как создать ссылку на главную страницу своего сайта

Главная страница сайта: как сделать и оформить — лучшие примеры

Главная страница сайта – это витрина, «парадный вход», на котором посетители:

  • знакомятся с вашей компанией;
  • узнают, о чем этот сайт;
  • узнают, чем вы можете быть им полезными.

Это отправная точка, с которой можно продолжать навигацию по сайту. Это презентация вашего бизнеса.

  • Бюджет от 3000 евро – это гораздо дешевле, чем работать напрямую.
  • Для юрлиц и физлиц – юрлица могут получить закрывающие документы, возместить НДС. Физлица могут запустить рекламу без общения с менеджерами.
  • 3 способа оплаты – оплачивайте рекламу картой физического лица, с расчетного счета организации, электронными деньгами.

Потому главной странице сайта при разработке нужно уделить максимум внимания. Какие элементы должны быть на главной, какие из них позволят достичь маркетинговых целей – разберем в этой статье, с примерами и рекомендациями.

Элементы главной страницы

Если смотреть с точки зрения веб-разработки, то на главной странице должны быть следующие элементы (они обязательны для большинства сайтов, хотя в зависимости от ниши и типа сайта структура главной страницы может отличаться).

Как правильно оформить главную страницу сайта? #101

1. Шапка сайта (или хедер). Это самая верхняя часть страницы, на которой обычно размещен логотип и название компании (в правом верхнем углу). Может включать в себя телефоны компании, рабочие часы, кнопку обратного звонка, адрес электронной почты, кнопки социальных сетей – все зависит от ваших целей.

2. Меню. Оно может быть горизонтальным, вертикальным, комбинированным, но главная цель – дать посетителю понять, как перейти в другие разделы сайта. Сейчас модно прятать меню под значок-гамбургер или в боковую панель. Главное правило, о котором нельзя забывать — красота не должна вредить функциональности вашего сайта.

Если пользователям не будет понятно, как пользоваться вашим новомодным меню – лучше сделать выбор в пользу простой классики.

3. Баннер или слайдер. На нем обычно размещают фотографии работ из портфолио, перечисляют услуги или преимущества работы с компанией. Основная функция слайдера – привлечь внимание пользователя.

4. Блоки контента. Он может быть один или несколько. Обычно на главной странице размещается текст, который объясняет, что это за сайт, и что пользователь может здесь найти. Также размещают уникальное торговое предложение, примеры работ, перечень услуг, фотографии рабочего процесса или фото команды.

5. Виджеты и кнопки социальных сетей. Виджет покажет, насколько активно ваше сообщество в социальной сети, позволит перейти в него и подписаться. Кнопки тоже перенаправят посетителя на ваши официальные странички.

6. Призыв к действию или форма обратной связи . Позволит посетителю сразу же связаться с вами. Вообще каждая страница сайта должна содержать в себе призыв к действию, чтобы направить посетителя по правильному пути.

7. Подвал сайта, или футер. Это завершающий блок страницы, в который обычно выносят полезные ссылки (например, на пользовательское соглашение), копирайт, иногда – карту проезда и контакты, могут перечислить филиалы и т.п.

Как запустить сайт на by

Как в html сделать ссылку

При разработке сайта не старайтесь обязательно разместить все эти элементы. Опирайтесь в первую очередь на свою цели, каждая составляющая должна нести в себе какую-то практическую пользу. Некоторые элементы могут оказаться лишними, или наоборот, вы захотите что-то добавить. Одному сайту подходит минимальный набор блоков, другому же нужно как можно больше элементов, чтобы страница выглядела убедительнее. Все зависит от ниши и продукта.

Что должно быть на главной странице сайта с точки зрения маркетинга

Помните, что каждый элемент страницы должен доносить основную идею сайта. Только так вы сможете вступить с пользователем в полноценный диалог. Для этого главная страница должна содержать (с точки зрения маркетинга) следующие элементы:

Вот здесь кратко и просто указали в одном предложении все выгоды от использования сервиса (бесплатно и просто).

2. Текст или другой контент , который понятно разъясняет:

  • кто вы;
  • что предлагаете;
  • что пользователь может сделать на этом сайте;
  • ваше уникальное торговое предложение (УТП), которое пояснит, чем вы отличаетесь от других подобных компаний.

Если пользователю все это будет не понятно, он просто закроет ваш сайт.

Здесь преимущества описаны сразу на первом экране. Подробная демонстрация возможностей на видео. Этот контент усиливает заголовок и подробно объясняет, как использовать сервис. Пошаговая инструкция, стрелочки ведут в кнопке СТА.

Текст на главной странице

3. Призыв к действию (CTA). Это может быть лид-форма, кнопка CTA, отправляющая на страницу с более подробной информацией, и т.п. Самая главная цель этой страницы – удержать посетителя и провести его до следующего этапа воронки продаж. На главной странице лучше всего размещать не один, а два призыва к действию – первичный и вторичный.

Например, для уже зарегистрированных пользователей – кнопка «Войти», которая не так ясно выделяется; для тех, кто зашел впервые – кнопка «Регистрация».

У Дропбокс на главной странице два призыва к действию – войти или попробовать решение для бизнеса.

Призыв к действию на главной странице

4. Выгоды клиента . Обратите внимание – именно выгоды, а не ваши преимущества. Укажите, почему клиенту будет хорошо с вами, какие его проблемы вы можете решить.

Это можно оформить по-разному: слайдером; отдельными блоками; списком. Главное – чтобы это было легко заметить и просто прочесть.

Хороший пример – страница Evernote. Тут очень хороший заголовок, но и перечисление выгод очень хорошо оформлено. Завершает это все четкий призыв к действию.

Выгоды клиента

5. Демонстрация продукта или лучшие работы . Это могут быть фото, или видео, или фотогалерея. Покажите, что вы делаете, убедите не словом, а делом. Картинка (а тем более видео) стоит тысячи слов.

Этот конструктор лендингов предлагает посмотреть на лучшие шаблоны прямо на главной странице, и приглашает в раздел с шаблонами – два зайца одним выстрелом.

Выполненные работы

6. Социальные доказательства . Это могут быть отзывы клиентов или перечень компаний, с которыми вы сотрудничали (если компании известны, их имена сработают сами по себе). Не делайте частую ошибку – не берите стоковые фото и не пишите отзывы сами. Лучше постепенно соберите обратную связь от своих клиентов.

Как открыть сообщение на электронной почте на телефоне

Очень хорошо работает размещение сканов благодарственных писем, на которых эти отзывы были размещены изначально. Это доказывает, что отзыв – подлинный, настоящий. Чтобы читать было удобнее, его можно набрать простым текстом (тем более, он будет индексироваться). Как здесь:

Отзывы клиентов

7. Новости компании или статьи из блога . Это еще один элемент, который приглашает посетителя в путешествие по сайту. А еще – показывает, что сайт живой, что компания живет и тут происходит много интересного. Для этого публикации в блоге или в разделе новостей должны быть регулярными.

Вот яркий пример подобного подхода – на главной видны свежие публикации из блога. Высока вероятность, что посетитель заинтересуется и перейдет дальше. Плюс к просмотрам страниц и среднему времени пребывания на сайте.

Статьи блога

8. Статистика. Ничто не убеждает лучше, чем факты, выраженные цифрами. Покажите, сколько проектов вы выполнили, скольких клиентов обслужили, сколько продали своего товара. Это еще и работает как психологический трюк – раз так много людей обращается к вам, чем я хуже?

Вот пример вывода такой статистики:

Статистика

Основная задача вашей главной страницы – познакомить посетителя с вами и «затянуть» его дальше в воронку продаж. Продуманный дизайн и юзабилити, цепляющий заголовок и хороший контент – залог вашего успеха.

Примеры главных страниц под разные цели

Текстовая информационная страница

Это страница, главная цель которой – с помощью текста донести до читателя суть продукта или сайта. Пример – сайт движка интернет-магазина Аспро, точнее, курсов обучения работы с ним. Текст просто и понятно описывает, чем полезен данный сайт. Боковая навигация поможет выбрать подходящий курс. Со своей задачей – донести информацию до посетителя – страница справляется на отлично.

Пример главной страницы

Главная страница-лендинг

Если главная ваша цель – получить максимум конверсий уже с главной страницы, то можете сделать ее по типу лендинга. То есть, построить ее из блоков, каждый из которых, один за другим, доносит ценность и особенности вашего предложения. Кто захочет узнать больше – через меню сможет перейти дальше, и изучить другие разделы сайта. Кто склонен к импульсивным покупкам — совершит целевое действие, не уходя с главной.

По такому типу построена главная страница LPGenerator. Цепляющий заголовок, призыв к действию, который повторяется по ходу страницы несколько раз, видео с демонстрацией продукта, описание преимуществ – все работает на увеличение конверсии.

Лучший пример главной страницы

Голос бренда и эмоциональный настрой

Если ваша цель — задать определенный тон и настроение, настроить посетителя на нужный лад – вам поможет оригинальное оформление, правильный дизайн главной страницы. Обычно для таких целей используются большие фотографии или фоновое видео. Правильный, стилизованный интерфейс поможет передать дух вашего заведения или компании.

Яркий пример – Бургер Кинг. Большие и яркие изображения вкусных бургеров на главной странице – как можно не захотеть? Но обратите внимание на шрифт, цвета оформления. Они как нельзя лучше отвечают духу бренда – жизнерадостному, немного насмешливому, позитивному. Все вместе задаёт нужное настроение.

Главная страница бургер кинг

К акую главную страницу вы бы не задумали сделать на своем сайте, помните о главном. Она должна в первую очередь показать посетителю, почему он должен остаться на этом сайте, и связаться с вами, или продолжить изучать его. Что вам конкретно для этого нужно, вы можете решить, исходя из особенностей своего бизнеса.

Как убрать с сайта свои персональные данные

Не пропусти обновление! Будь в курсе новых функций соцсетей и рекламных платформ — подпишись на наш Телеграм-канал. С нас самые актуальные новости, с тебя — подписка: Посмотреть, что за канал Реклама

Источник

Основные блоки и элементы сайта — для чего нужны и как правильно оформить

Вы решили создать свой сайт. Прежде чем планировать его дизайн, стоит подумать о типе сайта и расположении функциональных блоков: меню, контактов, условий доставки и остальных.

Если вы еще сомневаетесь, какой именно сайт вам нужен — сайт-визитка, корпоративный или лендинг, то сперва загляните в статью «Как понять, какой сайт вам нужен» или посмотрите видео на эту тему на нашем канале в «Ютубе».

Узнать подробнее о структуре сайта можно в этой статье: от иерархии страниц зависит успешное SEO-продвижение, удобство для посетителей и продажи.

Для тех, кто уже определился с типом сайта и его структурой, в этой статье мы расскажем про функциональные блоки и элементы сайта: как их обычно используют и на что обратить внимание, когда будете собирать контент для них.

Создать полноценный сайт без знания кода можно с помощью « Конструктора сайтов RU-CENTER ». Конструктор поддерживает готовые шаблоны, темы и шрифты — останется только придумать текст и подобрать фотографии.

Первый экран

Главная страница — это первое, что видит посетитель сайта. За несколько секунд он решает: остаться или уйти. Задача этого блока — сделать так, чтобы клиент остался и посмотрел, что еще есть на сайте, или сразу же перешел к целевому действию.

Основные элементы

Что продается — одежда, бренд — «О, май». Источник: ohmy.ru

Фоновое изображение: фотография, видео, иллюстрация, цвет или градиент. Картинка может иллюстрировать то, что человек в итоге получит, или задавать атмосферу. Если у вас нет собственных фотографий, можно прочитать нашу статью «Как законно использовать чужие изображения на вашем сайте».

Кнопка. Можно добавить целевое действие сразу на обложку: те, кто искал именно вас или уже заходил к вам, смогут сразу оформить заказ или перейти к новинкам и акциям.

На что обратить внимание

Не обязательно использовать все и сразу: фоновое изображение, заголовок и кнопку. Часто на главном экране — только картинка.

Пример первого экрана: меню (о нем дальше будет отдельный блок), изображение кольца из последней коллекции, слоган в виде закольцованной бегущей строки и кнопка. Источник: jewelry-in-august.com

Как выглядит сайт на разных устройствах. Во многих конструкторах сайтов можно посмотреть, что увидят посетители, если зайдут с ноутбука, смартфона или компьютера с большим экраном. Либо можно воспользоваться для этого расширением Window Resizer. Фрилансеры и дизайн-студии обычно проверяют этот момент, но лучше прописать его в ТЗ.

Меню и навигация

Понятные меню и навигация помогут посетителю сайта легко найти нужную информацию.

Основные элементы

Кликабельный логотип. Нажав на него, посетитель перейдет в начало главной страницы. Блок «Главная» можно удалить из меню.

Хедер (шапка сайта). Можно добавить меню, контакты, поле для поиска, выбора языка или города. Стоит выносить сюда то, что важно для вашего бизнеса: например, разделы «Доставка» и «Возврат».

Источник

Как задать главную страницу сайта?

В аккаунте GetCourse вы можете на своё усмотрение назначить главную страницу сайта в разделе «Сайт» на вкладке «Настройки».

Как сделать сайт по обмену

Можно настроить отдельно стартовую страницу для гостей (неавторизованных пользователей) и стартовую страницу для авторизованных пользователей.

Кроме того, если к аккаунту привязано несколько доменов, то для каждого из них можно назначить свои стартовые страницы с помощью меню «Особые настройки домена».

Как настроить главную страницу в GetCourse

По умолчанию, для гостей открывается системная страница входа с адресом: ваш_аккаунт/cms/system/login.

Для авторизованных пользователей — страница со списком тренингов: ваш_аккаунт/teach/control/stream.

Чтобы изменить их, укажите адрес той страницы, которую хотите сделать главной. Например, лендинг /home.

Правила указания страниц:

  • если указать адреса без слэша (например, home) — страница будет открываться без указания полного адреса страницы (например, ваш_аккаунт.getcourse.ru);
  • если указать адреса со слэшем (например, /home) — страница будет открываться с указанием полного адреса (например, ваш_аккаунт.getcourse.ru/home).

Для каждого привязанного к GetCourse домена или поддомена можно задать свои стартовые страницы для гостей и авторизованных пользователей.

У школы есть домен.ru, школа хочет на англоязычную публику добавить 2-й — домен.com
Про рассылки понятно и про страницы сайта понятно.
А вот страницы авторизации и страница оплаты будут также для них открывать по домен.com?
И страницы тренингов тоже по домен.com?

Лариса,
Системные страницы, в том числе страница авторизации, также будет открываться по привязанным доменам домен.com и домен.ru. Также страница со списком тренингов и уроками будут открываться по тому домену, по которому перейдет пользователь. Обратите внимание, что в системных уведомлениях и письмах с авторизующими ссылками будет использоваться основной домен аккаунта.

Источник

Пример создания html страницы в блокноте

В первом уроке мы уже рассмотрели маленький пример создания html-страницы. Теперь создадим более сложную страничку. Хочу отметить, что я буду объяснять как это сделать без применения специальных программных средств. Все, что понадобится для работы — это обычный блокнот от Windows.

Для более удобной работы рекомендую скачать Notepad++ (продвинутый блокнот с возможностью подсвечивания html-тегов). Итак, начнем.

Откройте блокнот и скопируйте в него следующее:

Далее нажмите «сохранить как», в поле тип файла выберите «все файлы», а в названии напишите index.html . Обязательно в конце названия должно быть расширение .html (не .txt), иначе браузеры не будут интерпретировать его как веб-документ.

Сохранение документа с расширением html

Если по каким-то причинам у Вас не получается создать html страницу, то Вы можете скачать предыдущий пример по ссылке: index.rar.

Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу.

Описание html тегов из примера

1. — эти теги должны присутствовать на каждой веб-странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница.

Любая html страница имеет следующую структуру:

2. — между этими тегами заключается весь видимый контент страницы.

3. — внутри этих тегов должны располагаться все заголовочные теги. Этот раздел можно опустить, но я не советую это делать, поскольку это важная часть документа, особенно для поисковых систем. Более подробно про читайте в описание заголовочных тегов

4. — между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег часто сокращенно называют «тайтлом». Советую ознакомиться со статьей: как составить тег

Как скопировать персонажа в птс варфейс с официального сайта

Теперь перейдем к тегам, которые находятся в теле html страницы (внутри и ).

5. — эти теги выравнивают все, что находится внутри них по центру. В данном случае центром будет — центр экрана. В будущем рекомендуется отказаться от использования этих тегов.

6. — это один из класса тегов заголовочных тегов .. , обычно в него заключают название страницы. Например, у этой странице заголовочный тег «Пример создания html страницы».

эти теги имеют большой вес в ранжировании сайта, поэтому ими необходимо пользоваться аккуратно и с умом.

При составлении html-кода нужно придерживаться простого правила: сначала должен идти заголовочный тег , а дальше могут идти уже , и т.д. Главное, чтобы не было сначала , потом , потом и т.п. Должна быть строгая иерархия. Заголовков , и т.п. может быть много.

Более подробно про эти теги читайте в уроке 14 HTML теги — — заголовочные теги внутри страницы

7.
— это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.

подсказка

8. — это одиночный тег, который выводит изображение.

    src — обязательный параметр, в котором указывается адрес изображения (вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение).
    Примечание:
  • Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения, иначе нужно прописывать либо абсолютный или относительный URL;
  • Не забудьте указать расширение изображения. Например, .jpg , .gif , .jpeg .

Более подробно про читайте в специальном уроке: html тег

9. — эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно настроить в одном теге. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке.

Примечание: — аналогичный тег.

Есть также свойство CSS font, в котором можно задавать все эти параметры.

10. — выделить жирным. Все, что заключено между и будет выделено жирным. Например, если Вы напишите его в самом начале контента, а закроете в самом конце, то весь текст на странице будет выделен жирным. Это довольно часто встречающийся тег, аналогом которого является .

Поисковые системы обращают внимание на этот тег в плане усиления влияение ключевых слов. Но нужно быть аккуратным, поскольку выделять каждый раз жирным ключевые слова будет воспринято за спам.

11. — одиночный тег, который выводит горизонтальную линию. Имеет несколько параметров, о которых будет сказано позднее.

href=»URL» — этому параметру необходимо присвоить URL ссылки, на которую ведет ссылка. Является обязательным параметром.

Если документ, на который Вы хотите перейти, находится в одной папке с Вашей html-страницей, то достаточно написать название этого документа. Например:

Этому важному тегу посвящен специальный урок: HTML тег .

Более подробное описание этих и других тегов читайте в следующих уроках.

Уважаемый читатель, теперь Вы уже умеете создавать элементарные страницы с изображениями и ссылками. Описанные выше теги встречаются довольно часто и у них есть много различных параметров, о которых Вы узнаете далее. Целью этого урока было ознакомление с простыми тегами html страниц. Теперь советую перейти к следующим урокам.

Источник
Рейтинг
Загрузка ...