Как сделать страница заглушка

22.04.202322.04.2023 admin 0 Комментариев

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

Сайтостроение, WEB-дизайн, SEO-оптимизация

Как сделать заглушку на сайт с помощью кода html

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

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

Поэтому в сегодняшней статье мы будем выяснять, как сделать на сайт заглушку с помощью html.

С чего начать

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

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

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

Делать страницу мы будем в Блокноте.

Для этого мы создаем новый документ и сохраняем его в созданной на предыдущем этапе папке.

Документу даем название index.html и сохраняем его: «все файлы» с кодировкой UTF-8.

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

Теперь мы переходим непосредственно к созданию заглушки.

После сохранения файла index.html, а он у нас открыт, надо написать следующий код:

Чтобы случайно не потерять результаты, советую периодически сохранять изменения в файле через кнопки в меню «файл» или с помощью клавиш Ctrl + S.

Любая web–страница состоит из тегов, которые мы написали.

Теперь между тегами мы можем написать заголовок, добавив код:

После этого можно открыть страницу в браузере и посмотреть на результат.

Добавляем фоновую картинку

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

Важно: ширина картинки должна быть не менее 1920 px.

Для этого в поисковую строку вводим 1920 backgrounds и выбираем нужную картинку.

После этого мы ее открываем в полном размере и сохраняем ее (в формате jpg и называем bg) в нашу папку с картинками (images).

В качестве фонового изображения сайта я выбрала эту картинку:

Теперь надо к странице прикрепить фоновое изображение, для чего придется воспользоваться стилями CSS:

В код я добавила стили: задала шрифт Arial и белый текст.

Напишем заголовок и сам текст:

Таким образом, получилось следующее:

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

А пока добавим несколько блоков: для телефона, скайпа, эл. почты.

Поработаем со стилями

В результате мы получили красивую страницу-заглушку.

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

Что делать с файлом

И теперь все запросы будут перенаправляться на closed.html

Похожие статьи:

Комментарий о “ Как сделать заглушку на сайт с помощью кода html ”

А если надо сделать заглушку на 2-х языках и более как этот момент реализовать?

Добавить комментарий Отменить ответ

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

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

Источник

Cтраница-заглушка на сайт WordPress

Всем привет!

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

Зачем нужна заглушка на сайт

Применение в сайтостроении «заглушек» с важной для посетителей информацией – явление распространенное. Страница-заглушка необходима web-ресурсу по следующим причинам:

Какой должна быть заглушка для сайта

Распространенный вариант заглушки для сайта – картинки и текст, сообщающие посетителю о старте нового проекта или содержащие извинения за неудобства и сообщение об устранении проблем в работе действующего сайта в самое ближайшее время.

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

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

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

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

WordPress-плагин WP Maintenance Mode

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

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

Вкладка Общие содержит пункт включения/отключения показа заглушки на сайте. Здесь же можно прописать, каким категориям пользователей панель управления сайта и сам сайт должны быть доступны в любое время. Можно, при желании, оставить посетителям доступ к выбранным страницам (новостным лентам, архивам и т.д.), список которых указывается в специальном поле, или же настроить доступ по IP. Есть опции для включения/запрета индексации контента в то время, когда сайт WordPress находится на техническом обслуживании (Индексация роботами и Метатэг для роботов).

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

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

Вкладка Модули отвечает за включение и настройку блоков (компонентов), о которых шла речь выше: таймера отсчета, формы подписки, кнопок социальных сетей. Для таймера обратного отсчета задается дата начала события и цвет цифр. Настройки всех компонентов интуитивно понятны. Есть возможность подключения к странице кода отслеживания Google Analytics.

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

Создание заглушки без использования плагинов

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

На первом этапе в корневой директории сайта на хостинге создается файл .maintenance со следующим кодом:

Затем в папку wp-content сайта добавляется, собственно, сама страница-заглушка, которой присваивается имя maintenance.php. Внутри этого текстового файла могут находиться PHP инструкции, например:

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

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

Заключение

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

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

Источник

Создаём страницы-«заглушки» для своих сайтов

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

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

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
Ещё одна страница, на которой есть элементы как информационной страницы, так и страницы для подписки, также есть ссылка на группу в Твиттере.