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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      main  
ГРЯДЯЕТ НОВЫЙ СТАРТ!
 
Наш сайт находится в стадии разработки, и мы почти готовы к работе! 
Мы готовим для вас нечто удивительное и захватывающее - специальный сюрприз для подписчиков
 
  

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

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

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

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

 RewriteCond % !/file.html$ RewriteCond % !^176\.111\.11\.21 RewriteCond % !^176\.111\.11\.22 RewriteRule $ /file.html [R=302,L] 

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

Плагины для CMS

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

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

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

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

Пример — 1

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

Пример — 2

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

Пример — 3

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

Пример — 4

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

Пример — 5

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

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

Источник

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

HTML заглушка для сайта на фоне заката

Отличная и современная HTML заглушка для сайта на фоне заката в красивом оформлении. Подойдет для любого типа сайтов. Скачать заглушку для сайта бесплатно. .

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

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

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

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

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

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

HTML заглушка для сайта — Coming Soon

Coming Soon — это красивая и полностью адаптивная HTML заглушка для сайта, выполнена на фоне извилиной дороги и красивых гор. Скачать заглушку для сайта .

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

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

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

Skyscrapers — это адаптивная и современная HTML заглушка для сайта, которая отлично подойдет для сайтов корпоративной или бизнес тематики. Шаблон .

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

Travel — это красивая и современная HTML заглушка для сайта, которая отлично подойдет для тур-агенства, сайта о путешествиях или любого другого сайта. .

Заглушка для сайта на HTML5 и CSS3

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

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

Construction — это современная и красивая HTML заглушка для сайта с фоновым изображением книжных полок. Абсолютно бесплатна для загрузки и использования в .

Источник