Что такое заглушка для сайта

Как за две минуты создать HTML-заглушку для сайта

Пошаговая инструкция без софта, шаблонов, css, программирования и выпиливания кода из конструкторов сайта.

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

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

Что размесить на заглушке

• Логотип;
• Контактные данные для связи с вами;
• Описание компании, сферу деятельности, УТП;
• Причину появления этой страницы;
• Принести извинения за неудобства, если таковые есть;
• Указать дату открытия сайта;
• Разместить красивое, тематическое изображение.

Чтобы сделать страницу-заглушку нам понадобится сервис для проектирования сайтов esk.one

1 — Входим в esk.one от соц. сети или регистрируемся, кому как удобнее. Быстрее вход от соц. сети. Заходим в личный кабинет и создаем новый проект с названием «Прототип сайта». Открываем его для редактирования.

2 — Добавляем фон. Включаем заливку цветом и задаём общую прозрачность заливки, чтобы тест лучше читался. Можно включить градиент и настроить ему цвет прозрачность и направление.

3 — Перетаскиваем виджеты заголовок и текст. Выбираем шрифт. Если не знаете какой ставить, ставьте Roboto (дизайнер мне так сказал). Тексту применяем тот же шрифт что и заголовку.

4 — Адаптируем под экраны. Включаем все версии (вверху иконки девайсов). Кликаем версии, меняем положение элементов, размер шрифта, проверяем что все смотрится так как надо, сохраняем.

вот ссылка на то что получилось заглушка

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

Важно! Проект по умолчанию создается с 3 страницами, и когда курсор подъезжает к краю страницы, выезжает панелька со списком страниц. В заглушке она нам не нужна, чтобы эта панелька не выезжала, нужно оставить в проекте только 1 страницу а остальные удалить.

5 — Выгружаем проект в HTML. Скачиваем. Распаковываем.

Можно открыть index.html проверить в браузере как все работает.

В выгрузке идет robots.txt в нем стоит Disallow: / чтобы заглушка не индексировалась. Если нужно чтобы индексировалась замените Disallow на Allow.

6 — Загружаем содержимое папки себе на хостинг в корневую папку.

Вот и все. Теперь можно за 2 минуты создать заглушку, и спокойно делать сайт не теряя клиентов.

Заморачиваемся с хостингом, выясняем, что такое корневой каталог и где он находится. Потом покупаем домен, привязываем его к каталогу. Загружаем в каталог код. Загрузил архив и он почему-то не работает. А че, надо было по-другому ? Как распаковать архив на хостинге ?
И другие вопросы от новичков.

Все равно заморачиваться с конструктором, css, редактированием кода. А если это делает новичок первый раз ? Больше вопросов, чем ответов.

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

@ «Заглушка будет смотреться нормально на всех экранах»
@ На FHD здоровая белая полоса внизу

можно высоту любую сделать и не будет полос, сейчас 900px у секции стоит не думал что высота есть такая огроменная

Всё равно странно выходит. В full HD выглядит как увеличенная картинка.
https://esk.one/p/WjUHf1n2KJnmE6d/

А можно к div с фоном добавить свойство

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

Лучший выход из ситуации — создать простую страницу-«заглушку», которая будет рассказывать посетителям, что здесь, в конечном счёте, появится. Хорошая страница-«заглушка» может быть двух вариантов: информационная страничка, которая просто расскажет, что здесь будет после запуска; или страница, которая предлагает посетителям подписаться на уведомления или оставить запрос на бета (или альфа) тестирование. Ниже вы увидите несколько отличных примеров обоих типов, следуя которым, вы сможете создать свою такую страницу-«заглушку». Разумеется, среди них вы не увидите обычных страниц «В разработке» (с надоевшим дизайном), которых целая куча в сети.

1. Советы по созданию страниц-«заглушек»

Далее вы найдёте несколько отличных примеров и советов, которые нужно помнить при создании таких страниц.

Расскажите, чего нам ожидать

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

Дайте нам немного информации о направленности сайта. Это не значит, что вы должны самым подробным образом всё рассказать; наоборот, некоторую интересную информацию пока приберегите. Например, если вы будет предлагать приложение для рационального управления временем, созданное специально для веб-дизайнеров, то вы можете написать, что сайт поможет упростить рабочий процесс веб-дизайнеров. Это даст некоторую информацию о сайте, но в то же время оставит некую пелену загадочности.

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

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

Anipals
Anipals встречает нас приличным количеством информации об особенностях проекта, но не рассказывает слишком много.

Novalistic
Здесь страничка рассказывает о чём будет проект, когда будет готов и также даёт возможность посетителям подписаться на обновления.

Нужна ли подписка на обновления?

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

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

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

MyNiteLife
MyNiteLife позволяет посетителям подписываться на обновления по e-mail.

DesignSvn
DesignSvn даёт возможность посетителям выбрать: подписаться по e-mail или следить на Твиттере.

Remindness
Remindness позволяет посетителям подписываться на обновления по e-mail.

Сделайте вашу страницу-«заглушку» запоминающейся

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

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

Silverback
Silverback использует на странице изображение гориллы и дизайн, которые будут использоваться на сайте.

Foundation Six
Foundation Six используют, по-видимому, конечный вариант цветовой схемы и логотипа.

Создайте небольшую интригу

Задача страницы страницы-«заглушки» заставить людей рассказывать о ней и потом вернуть их на ваш сайт. Даже если вы просто хотите рассказать о чём будет проект, то создать немного загадочности не помешает. Любопытство — это сильный мотиватор и оно может заставить большое количество посетителей подписаться на рассылку обновлений. Это также заставляет людей рассказывать друг другу о сайте, т.к. посетители будут спрашивать у своих друзей любую информацию о намеченном запуске. Такие разговоры могут дать проекту начальный трафик и даже привлечь внимание различных медиа.

Better Blogger
Better Blogger даёт нам начальную информацию о сайте, но не рассказывает слишком много.

Good Morning
Good Morning не даёт какой-либо информации о том, что это за приложение будет, но из названия можно предположить, что оно будет связано с управлением своим временем или продуктивностью работы.

uoOo
uoOo даёт понять, что как-то связан с видео, но больше нет никакой информации…

Помните о SEO

Хотя «заглушки» не играют большой роли в ранжировании сайта поисковиками, это не значит, что не надо оптимизировать их для поисковых систем. Используйте ключевые слова и правильные мета теги, и поощряйте оставляющих ссылки на вас использовать нужный текст в анкорах. И если вы грамотно подойдёте к SEO, то не будете пессимизированы поисковыми системами (а возможно даже получите некое доверие у поисковиков), которое означает, что когда сайт запустится, то продвижение в поисковиках будет намного быстрее.

2. Информационные страницы

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

Boagworld
Великолепный дизайн с информацией о возвращении к жизни популярного подкаста.

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

After Some Words
Особенная «заглушка», ведущая на страницу на MySpace.

Holey Coww
На этой страничке можно найти довольно объёмное пояснение к сайту, а также ссылки на Твиттер и Facebook.

Zombie Corp
Ещё одна простенькая страница с контактной информацией владельцев.

Moses Mehraban
Простая страница, которая рассказывает о текущих делах владельца.

Leaf Ordinary
Минималистская страница с ссылкой на дополнительную информацию.

I heart spaceships
Забавная страничка с контактной информацией разработчиков.

Smart Pixel
Очень простой дизайн, но с прикольной картинкой.

Human Binary
Ещё одна забавная страничка с достаточным количеством информации, чтобы понять, что здесь будет в итоге.

fcukstar
Более сложная страница с ссылкой на предпросмотр сайта и с информацией по ценам.

Zenbou
Ещё одна простая «заглушка» с большим количеством подсказок о том, что будет на сайте, также есть ссылка на Твиттер.

Shabith Ishan
Хорошо продуманная страничка с ссылками на разные социальные медиа.

3. Страницы для подписки на обновления или для запроса инвайта

Такие страницы позволяют посетителям подписаться на обновления или попросить приглашение для бета или альфа тестирования. Они больше всего популярны у онлайн приложений, но и другие сайты с удовольствием их используют. Формы подписки обычно очень просты, строка для почты и, возможно, строка для имени. Страницы также часто содержат информацию о сайте, хотя главной целью всё-равно остаётся подписка на рассылку.

FavMovie
Название даёт достаточно информации о будущем сайте, и форма простенькая.

Statnip
Простая страница с формой в одну строку для подписки.

ClockMeIn
Обычная страница с однострочной формой для запроса приглашения.

investobiz
Страница предлагает к ознакомлению немного информации, а также имеет форму для подписки на рассылку.

PackageTrail
Страница с уникальным дизайном имеет форму для запроса инвайта на бета тестирование.

Addressful
«Заглушка», на которой есть информация и форма для подписки.

Hello Human Icons Icon Collection One
Этот сайт предлагает подписаться на рассылку обновлений, а также рассказывает немного о себе.

The Upstate Design Collective
Ещё одна страница, на которой есть элементы как информационной страницы, так и страницы для подписки, также есть ссылка на группу в Твиттере.

MealNation
Страница с формой для подписки.

Hosteeo
Стандартная страница, на которой красуется вопрос, для привлечения интереса.

Gigdom
Информационная страница с ссылкой для регистрации на бета тестирование.

ClassOwl
Простая форма с двумя полями для подписки.

ChkChkBoom
«Заглушка» даёт возможность посетителям выбрать способ получения обновления: RSS или e-mail.

SCIPLEX
Очень простая страничка с парой строчек о том, что скоро здесь будет и с формой для подписки.

Inhouse Grind
Простая страница с информацией и формой.

Zipliner
Ещё одна очень простая страница с формой для запроса приглашения на тестирование.

Designatr
Красивая страница с простенькой формой и небольшим количеством информации о сути сайта.

P.S.: Буду рад услышать ваши замечания и пожелания насчёт перевода.

Делаем страницу «Сайт в разработке» интересной

«У вас никогда не будет второго шанса произвести первое впечатление» Собираетесь обновить сайт до новой 18-ой версии 1С-Битрикс: Управление сайтом?

Планируете регулярные доработки? Или только готовите к запуску, и пока не собираетесь пускать клиентов? Самое время задуматься о создании и оформлении страницы “Сайт в разработке” (или заглушки сайта).

Причины использования заглушки « Сайт на реконструкции»

• информацию о проекте;
• ознакомительный контент (фотографии ассортимента, видео и т.п.);
• таймер обратного отсчёта до полноценного открытия;
• форму обратной связи;
• ссылки на соцсети;
• промокод на первую покупку.

Стандартная страница “Сайт временно закрыт”

В Битриксе такая страница уже предусмотрена. Активация происходит через административный интерфейс в Настройки | Настройки продукта | Настройки модулей | Главный модуль. Когда доступ к публичной части закрывается, всем посетителям (кроме администраторов) будет показана ну оооочень простая и чудовищно некрасивая страница “Site under construction”.
К слову: страница, которую показывает Битрикс при возникновении критической ошибки выглядит практически идентично.
Такой минимализм — почти гарантированный способ испортить впечатление у нового покупателя. Клиент убежит на сайт конкурента и больше не вернется. В случае если вскоре планируется открытие сайта, то с такой страницей не удастся заинтересовать пользователей и разрекламировать сайт.

Почему 1С-Битрикс до сих пор не облагородил эту страницу науке не известно. Мы просили об этом много раз еще с 2011-го года.

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

1. создать файл site_closed.php;
2. создать обработчик события;
3. использовать готовое решение из Marketplace.

Способ 1. Создать файл Site Closed

Способ подразумевает кастомизацию стандартной заглушки, которая включается в главном модуле, кнопкой “Закрыть публичную часть сайта”.

Стандартная заглушка заменяется посредством создания файла site_closed.php в «/bitrix/php_interface/include» или «/local/php_interface/include».

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

Способ 2. Создать обработчик события

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

Способ 3. Установить решение из Marketplace

В Marketplace есть готовые решения для заглушки сайта. В том числе и бесплатные, например “ Продвинутая заглушка”. Модуль позволяет контент-менеджеру быстро настроить желаемый контент для страницы: время до запуска, предварительную регистрацию пользователей, ссылки “поделиться” для соцсетей.

Выводы

Заглушка сайта — не такой важный фактор успеха проекта, как увеличение скорости работы после проведения технического аудита, удобство работы пользователя и оптимизация для поискового продвижения. Но на время обновлений, пусть это хоть 15 минут раз в неделю, это единственный способ показать посетителям, что всё в порядке, что сайт “живой”. Мы считаем, что разработка заглушки на современном, сложном сайте — правильный и закономерный шаг. Тем более что это простая задача, которую решит даже не-программист.

HTML заглушки для сайта

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

Для чего нужны html заглушки сайта?

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

В заглушке можно указать следующую информацию:

• Логотип;
• Контактную данную;
• Дескриптор;
• Принести извинения за неудобства;
• Указать обратный отчет до открытия сайта;
• Подобрать красивое, тематическое изображение.

Читать текст далее.

Заглушка для сайта с таймером

Заглушка для сайта с таймером выполнена на фоне изображения моря и заката. Если Ваш проект в разработке или на доработке, то заглушка Вам очень пригодится. Заглушка содержит: Адаптивную и кроссбраузерную …

Заглушка для сайта со слайдером заголовка

Заглушка для сайта со слайдером заголовка выполнена в нефритовом и оранжевом цвете. ШАБЛОННАЯ ИНФОРМАЦИЯ: Имя шаблона: — Настраиваемая заглушка Лицензия: Бесплатная лицензия Creative Commons Attribution 3.0 Unported. Неограниченное пользование. Дата создания: …

Заглушка сайта — на фоне заката

Красивая заглушка сайта — на фоне заката. Имеет стандартную информацию, а именно: заголовок; описание; таймер обратного отчета; форма для подписки на уведомления; ссылки на социальные сети; шильдик сайта web-exito.ru. ИНФОРМАЦИЯ …

Заглушка для сайта с анимацией

Заглушка для сайта с анимацией выполнена на фоне звездного неба. Анимационные эффекты придают интерактивности заглушке и на время даже можно залипнуть. Заглушка для сайта с анимацией содержит: Главный заголовок страницы; …

Простая заглушка для сайта

Простая заглушка для сайта выполнена на HTML5 и CSS3 на фоне красивого изображения. Заглушка полностью адаптивна на всех устройствах, а так же корректно отображается во всех популярных браузерах. Простая заглушка …

Заглушка для сайта со слайдером

Заглушка для сайта со слайдером выполнена на HTML5 и CSS3. Корректно отображается на всех устройствах, в том числе и мобильных. Заглушка для сайта со слайдером содержит: Главный дескриптор; Таймер …

Заглушка — на сайте проводятся тех. работы

Заглушка — на сайте проводятся тех. работы выполнена в синем цвете на фоне расфокусированной фотографии. Заглушка сайта содержит: Главный дескриптор; Описание заглушки; Логотип; Таймер обратного отчета; Подписку на уведомление по …

10 принципов эффективной страницы-заглушки

Мы ведем наш дайджест с 2012 года, и обладаем главной базой приемов по продвижению интернет-проектов.

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

Можно ли использовать какие-то элементы маркетинга еще до того, как проект со всем функционалом появится на свет? Безусловно! Один из первых этапов маркетинга — это коммуникация с посетителем ещё не работающего сайта с помощью страниц-заглушек или так называемых splash-страниц.

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

Принципы эффективной страницы-заглушки

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

1. Знайте пределы для упрощения страницы

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

У посетителя возникает логичный вопрос, куда я попал и зачем мне нужно совершить то или иное действие, о котором меня просят (например, связаться по телефону). Добавьте чуть больше информации на страницу, делая её максимально полезной как для посетителя, так и для вас.

2. Предоставьте информацию о себе

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

3. Можно делать видеообзор

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

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

4. Используйте логотип или другие изображения, ассоциирующиеся с вашей областью деятельности

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

А здесь хорошо отображен дизайнерский креатив, правда, не сразу понятно, что сайт будет посвящен дизайну.

5. Расскажите, что нам ожидать

Это хорошо, что вы существуете и планируете стать ближе к пользователям интернета, но расскажите также, зачем люди должны возвращаться на ваш сайт позже? Какие у вас планы на проект или на его функционал? А может быть, что-то еще?

Добавьте интригу для возбуждения любопытства. Например, в качестве интриги может использоваться сообщение, что ваш сервис будет являться технологическим прорывом или что компания первым зарегистрировавшимся клиентам предоставит скидки или бесплатные дополнительные услуги. Ниже пример, как создавали интригу ребята из Netpeak перед организацией конференции 8p, играя на всеми обсуждаемом конце света в 2012. Эта идея многим показалась креативной, и они делились ссылкой на страницу-заглушку со своими друзьями в соцсетях.

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

6. Оставьте контактную информацию

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

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

7. Добавьте ссылки на социальные профили

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

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

8. Разместите форму подписки на обновления

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

Помимо формы для отправки email, можно использовать и другие каналы коммуникации с клиентами/аудиторией, например, блог, добавив его на поддомен или в подпапку и установив там стандартный WordPress. Возможно, этот блог в будущем не только скажется положительно как инструмент входящего маркетинга, но и поможет повысить авторитетность ресурса в глазах поисковых систем.

9. Добавьте призыв к действию

Ваша первая цель — собрать начальную аудиторию и заставить человека вернуться, как только сайт начнет функционировать. Призывая пользователя к действию, вы говорите о своих намерениях и напоминаете посетителю о его возможностях. «Подписывайтесь», «Посмотрите первым», «Возвращайтесь», «Свяжитесь с нами», «Почитайте о нас подробней», «Фоловьте нас в соцсетях» и т.д. Используйте один или несколько призывов к действию в зависимости от размера страницы-заглушки. Если вы просто напишете, что сайт находится в разработке, то мало кто из текущих посетителей вернется на него в будущем.

На приведенном ниже примере призыв к действию расположен сверху справа со стрелочкой, а также повторно внизу страницы уже вместе с формой подписки на уведомления.

10. Не оптимизируйте страницы-заглушки для поисковых систем

Конечно же, страницы-заглушки хороши и для SEO, так как можно начинать продвигать сайт ещё не имея его. Как минимум ресурс уже будет в индексе, как максимум на него уже можно размещать ссылки как на форумах или в соцсетях, так и в печатных СМИ.

И несмотря на то, что страницы-заглушки могут использоваться для SEO, они выполняют больше маркетинговую задачу. Настоятельно не рекомендуется портить первое впечатление о ресурсе SEO-текстом.

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

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

Что такое страница-заглушка для сайта и как ее сделать?

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

Что такое заглушка для сайта и зачем ее создавать?

Если вам когда-то приходилось переходить по ссылкам и попадать на страницы с надписью по типу «Сайт временно недоступен. Приносим свои извинения за неудобства, в скором времени проблема будет устранена», то это и есть та самая страница-заглушка.

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

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

Основные компоненты страницы-заглушки для сайта

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

Рекомендуется прибегнуть к реализации следующих методов:

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

10 шаблонов адаптивных заглушек для сайта

Один из самых простых способов обзавестись хорошей заглушкой для сайта – воспользоваться готовым решением, то есть шаблоном. Они могут быть реализованы в разных стилях, каждый вебмастер выберет оптимальный для себя вариант. Ниже мы рассмотрим 10 актуальных шаблонов страниц-заглушек:

Coming Soon

Этот вариант придется по нраву всем ценителям современного дизайна и анимированных элементов. Произведена качественная SEO-оптимизация.

AfterWork

Шаблон, который будет уместно использовать для проектов, посвященных тематике программного обеспечения. Имеется хороший таймер, два отдельных стиля оформления. Интегрирована форма подписки. Дизайн яркий и привлекательный.

Heartbeat

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

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

Moon Free

Еще один бесплатный шаблон страницы заглушки для сайта, где были применены HTML5 и CSS3. Имеет адаптивный слайдер и качественный таймер. Присутствует форма обратной связи.

New Year

Это качественный новогодний шаблон страницы-заглушки с хорошей музыкой. Имеется таймер обратного отсчета. Есть возможность указать сведения о компании. Присутствует форма обратной связи.

Layla

Этот шаблон станет отличным решением для всех ценителей элегантного внешнего вида. Есть форма для размещения видеоролика.

Sunrise

Стильное решение, проверенное тысячами вебмастеров. Дизайн выполнен в классическом стиле.

Incidentally

Адаптивный шаблон с таймером обратного отсчета и формой подписки.

Launch Soon

Стильный шаблон с изображением большого города ночью и анимированным эффектом Canvas.

Создание заглушки для сайта с помощью кода HTML

Заглушку для сайта можно сделать и самому. Никаких специальных инструментов для этого не потребуется — достаточно простого текстового редактора.

На большинстве хостингов есть свой онлайн-редактор для создания html-файлов, но чтобы не разбираться с его настройками и функциями, мы воспользуемся обычным «Блокнотом» из стандартного набора программ Windows.

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

Запускаем программу «Блокнот» на компьютере и вставляем в неё следующий код:

Это код пустой html-страницы. Сохраняем созданный файл, присвоив ему название «index». Важно помнить, что «Блокнот» присваивает файлам расширение *txt. В данном случае нужно заменить его на *html.

Если сохранённый файл загрузить на хостинг, то при обращении к сайту браузер покажет пустую страницу. Можно оставить так, а можно код доработать.

Между тэгами title вписываем название сайта, которое должно отображаться в заголовке страницы. А между тэгами body — любой текст, который хотим показать посетителям. Текст можно отформатировать с помощью тэгов. Например, с помощью тэгов h1, h2 и align=«center» превратить его в заголовок, подзаголовок и выровнять по центру.

Теперь код будет выглядеть так:

Сайт на реконструкции

Теперь пользователь, зайдя на вашу страницу, увидит надпись «Сайт на реконструкции».

При желании можно добавить на страницу-заглушку фоновую картинку. Для этого в папку с картинками (images) нужно загрузить заранее скачанное изображение (шириной 1920px, формат jpg). Допустим, картинка называется fon.jpg.

Чтобы закрепить картинку за страницей-заглушкой, в коде нужно прописать путь к фоновому изображению и задать стили отображения текста (ширина, шрифт, цвет):

Плагины для создания страниц-заглушек для сайта

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

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

Рассмотрим два популярных плагина для создания страницы-заглушки:

Fancy Coming Soon & Maintenance Mode

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

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

• активация и деактивация страницы-заглушки в один клик;
• замена фонового изображения, возможность выбора фона определенного тона;
• возможность использования собственного CSS-кода;
• редактирование контента на странице без использования языка HTML;
• включение подписки на новостную рассылку;
• подключение трех социальных сетей для распространения новостей.

Как быстро и просто создать и установить заглушку для сайта с помощью WordPress-плагина Fancy Coming Soon & Maintenance Mode, смотрите в этом видеоролике:

Страница плагина.

Maintenance Mode

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

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

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

В блоке написания сообщения следует ввести текст, который будут видеть посетители сайта. Здесь прописывается отдельно заголовок и текст. Есть возможность использования языка HTML, так что сделать страницу оригинальной и красивой не составит труда.

Изначально на этапе оформления визуального вида веб-страницы будет доступно три отдельных шаблона:

• Шаблон по умолчанию.
• Страница входа в админку сайта, но вместо данных для авторизации будет вводиться текст сообщения, которое адресуется пользователям.
• Страница 503 – лучший вариант, если цель стоит в создании уникальной страницы. Создайте страничку с таким названием и переместите в папку шаблона. Здесь не допускается применение базовых функций вызова Word Press

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

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

Как сделать страницу-заглушку для сайта: способы и примеры

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

Зачем создавать страницу-заглушку?

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

Целей, ради которых устанавливается подобная страница, может быть несколько:

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

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

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

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

Основные элементы страницы-заглушки для сайта

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

• Первое, что нужно понимать – недостаточно разместить надпись «На сайте ведутся технические работы» или «Сайт в разработке». Здесь важно уведомить посетителя о том, на какой именно ресурс он попал, указав название и логотип компании.
• Второе, это контактная информация, ее также обязательно следует указывать. Возможно, на сайт пришел потенциальный клиент и попал на заглушку. В этом случае, если нет контактов, он, вероятнее всего, покинет ресурс и обратиться за помощью к конкурентам. Поэтому на заглушку следует опубликовать контактные данные.
• Не лишней будет публикация краткой информации о том, чем занимается компания. Здесь главное не перегружать страницу данными, а указывать только ключевые направления.
• Говоря о предыдущем пункте, кроме текстовой и графической информации, можно опубликовать видеоролик о компании. В некоторых случаях, это будет уместнее, к примеру, если информации много.
• На заглушку можно поставить форму для email-рассылки, но тогда следует замотивировать посетителя оставить свой контакт. Кроме прочей информационной рассылки, данную функцию часто используют для оповещения аудитории о том, когда сайт снова будет доступным для посещения. Но этот вариант больше подходит для известных компаний, у которых уже имеются постоянные посетители.
• Уведомление пользователей о сроках проведении технических работ. Можно подойти к этому элементу креативно, указав не просто дату активации ресурса, а сделать анимированный счетчик, отсчитывающий время в обратном порядке.
• Заглушку можно использовать для решения маркетинговых задач, например, указав на ней информацию о проведении конкурса, итоги которого будут подводиться уже на работающем сайте. Таким образом, можно замотивировать посетителя вернуться на ресурс.
• Говоря о контактных данных, отдельным элементом хотелось бы выделить ссылки на группы и страницы проекта в социальных сетях. Это позволит не потерять потенциальных клиентов, к тому же есть шанс, увеличить число подписчиков на других платформах.

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

Как создать и установить заглушку на сайт?

Вариантов создания страницы-заглушки несколько. Выбор зависит, например, от того, работает ли сайт на готовой CMS, есть ли под нее соответствующие плагины и т.д.

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

Создание заглушки на сайт из готового HTML-шаблона

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

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

Одним из популярных сайтов, на которых можно скачать, и в дальнейшем отредактировать шаблоны в удобном графическом редакторе, является Nicepage.com . Здесь представлены десятки готовых страниц-заглушек , перед скачиванием которых, необходимо установить графический редактор.

Графический редактор Nicepage.com

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

Выбор шаблона на сайте

Поиск шаблона по идентификатору

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

Редактируем шаблон

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

Экспортируем в нужном нам формате

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

Проверка адаптивности

Более подробно о тарифных планах и условиях использования шаблонов можно ознакомиться на сайте .

Примеры заглушек на основе готовых шаблонов

Мы собрали наиболее удачные, на наш взгляд, готовые HTML-шаблоны заглушек.

Пример заглушки для сайта — 1

Пример заглушки для сайта — 2

Пример заглушки для сайта — 3

Пример заглушки для сайта — 4

Пример заглушки для сайта — 5

Создание заглушки с помощью кода-HTML

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

Создаем файл заглушки, который содержит в себе HTML-верстку с блоками , и .

Таким образом собирается вся страничка заглушки.

Далее размещаем созданный HTML-файл в корень сайта через FTP.

Находим там же файл .htaccess, открываем его текстовым редактором (возможно, потребуется для редактирования скопировать его на компьютер, а после заменить).

В самом вверху файла прописываем:

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

Плагины для CMS

Большинство популярных CMS, таких как Вордпресс и Битрикс, имеют готовые плагины, позволяющие активировать и устанавливать страницы-заглушки. Это сильно упрощает работу для неопытных вебмастеров.

Например, для WordPress популярен плагин WP Maintenance Mode , который имеет более 800 тыс. активных установок в репозитории. Он позволяет создавать красивые и современные дизайны заглушек, в том числе интегрировать анимированные счетчики, контактные формы. При этом шаблоны все адаптированы под мобильные устройства.

Для Битрикса также можно найти готовые плагины, например, одноименный « Заглушка: технические работы, сайт находится в разработке ». Компания-разработчик оказывает всю техническую поддержку для платных версий плагина.

Примеры оформления заглушек для сайтов

Пример — 1

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

Пример — 2

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

Пример — 3

Уведомление об обслуживании сайта и контактная информация, в ряде случаев этого достаточно.

Пример — 4

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

Пример — 5

Указано название проекта, таймер с обратным отсчетом до запуска и форма подписки.

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