Бесплатные HTML5 страницы «Скоро» (Coming soon) с адаптивным дизайном
В этот день я хочу представить Вам несколько бесплатных страниц под названием «Скоро», или как ещё их называют Coming soon. Это те страницы, которые обычно ставят перед каким нибудь событием, или же перед открытием нового сайта. И обычно такие страницы идут со счётчиком. В общем очень полезная и нужная вещь. Так же все страницы бесплатные и имеют адаптивный дизайн. Качайте на здоровье!
Спасибо http://www.freshdesignweb.com и рекомендую:
Бесплатный HTML шаблон «Скоро» со счётчиком
Демо Ι Скачать
Шаблон со счётчиком в HTML
Демо Ι Скачать
Страница coming soon в HTML и с адаптивным дизайном
Демо Ι Скачать
Бесплатная HTML страница «Скоро» со счётчиком и адаптивным дизайном
Демо Ι Скачать
Страница «Скоро» в голубом оформлении бесплатно
Демо Ι Скачать
Тёмная страница, плюс встроенный счётчик
Демо Ι Скачать
Страница coming soon для музыкальных сайтов
Демо Ι Скачать
Тёмная HTML страница с нужной информацией
Демо Ι Скачать
Стильная и крутая страница «Скоро» в HTML и CSS3
Демо Ι Скачать
Бесплатная страница «Скоро» с нужной информацией
Демо Ι Скачать
Очень голубая и стильная HTML страница
Демо Ι Скачать
Страница coming soon с подпиской
Демо Ι Скачать
HTML страница «Скоро» в тёмном оформлении
Демо Ι Скачать
Светлая страница в виде блокнота и со счётчиком
Демо Ι Скачать
Не плохая страница, плюс подписка
Демо Ι Скачать
Лёгкая и тёмная страница coming soon
Демо Ι Скачать
Бесплатная страница Скоро с адаптивным дизайном в HTML
Демо Ι Скачать
Жёлтая страница «Скоро»
Демо Ι Скачать
Coming soon страница с прогресс баром
Демо Ι Скачать
Чёрно белая страница со счётчиком
Демо Ι Скачать
Страница «Скоро» в Flat стиле
Демо Ι Скачать
Страница светлая с часами
Демо Ι Скачать
Страница coming soon в минималистическом стиле
Демо Ι Скачать
Страница с красивой тёмной фотографией
Страница сайта с техническими работами
Демо Ι Скачать
Голубая страница «Скоро»
Демо Ι Скачать
Светлая страница coming soon
Демо Ι Скачать
Страница с большой фотографией на фоне
Демо Ι Скачать
beloweb.ru
23 HTML шаблона адаптивных страниц-заглушек / HTML шаблоны / Постовой
Рано или поздно все сталкиваются с необходимостью переделывать свои сайты или создавать новые. В начале разработки многие игнорирую создание страниц-заглушек и оставляют просто пустую страницу, в лучшем случае. Конечно же так делать нельзя, пользователь зайдя на ваш сайт не может знать, что вы делаете для него новые плюшки или супер модный дизайн и нужно вернуться немного позже. Это влечет за собой потерю постоянных посетителей и негативно сказывается на репутации компании. Поэтому отличным способом рассказать вашим посетителям, что сайт не умер, а находится в процессе реконструкции или разработки, будет создание заглушки. На такой странице вы можете рассказать, что в данный момент делаете с сайтом, когда он будет готов и предложить пользователям оставить свой Email, чтобы оповестить их об открытии сайта. Все это хорошо, но как всегда на разработку дизайна, верстку еще одной дополнительной страницы нет ни средств, ни времени. В такой ситуации можно воспользоваться уже готовыми решениями —
1. Coming Soon
Прекрасная анимированная страница-заглушка с броским дизайном. SEO оптимизированна и интегрирована с MailChimp.
5. New Year – Responsive Melody HTML Template
Новый год — адаптивный HTML шаблон с фоновой музыкой. Присутствует таймер обратного отсчета и модальное окно в котором представлена информация о компании и форма обратной связи.
6. Sunrise
7. Kite
Полнофункциональный шаблон с множеством функций и вариантов реализации. Подойдет как для творческого коллектива так и для компании. Имеет 4 варианта фона, 8 цветовых схем и параллакс эффект.
8. Zoon
Полностью адаптивный, простой и чистый шаблон страницы-заглушки с поддержкой мобильных устройств. В шаблоне есть таймер обратного отсчета, Google карта и раздел о компании. Легко настраиваемый и совместим с большинством современных браузеров.
9. UX – Free Responsive Template
Очень похож на шаблон “New Year”. Отличается стилевым оформлением и отсутствием фоновой музыки, интегрирован с Mailchimp.
10. AfterWork
Одностраничный HTML Bootstrap шаблон, идеально подходит для заглушки сайтов программного обеспечения. Из особенностей: таймер обратного отсчета, адаптивный, два стиля оформления (параллакс и слайдер), Google Maps, интегрирован с Twitter, форма подписки.
11. Magnitude
Контент равняется по центру как по горизонтали так и по вертикали.
12. One Luke
13. Mentor
14. Gravity
15. Progress
Из особенностей, плавное появление элементов при прокрутке и слайдер контента.
16. See Soon
Профессиональный и творческий шаблон с элегантными эффектами появления элементов страницы. Адаптивный, основан на Twitter Bootstrap3.
17. Beta Landing
Поставляется в двух вариантах, со слайдером полноэкранных фоновых изображений и без. В архиве, после скачивания, доступна документация.
18. AGMANA
AGMANA это адаптированный под Retina-разрешение адаптивный шаблон с использованием HTML canvas для создания фоновой анимации.
19. WeBuild
20. Vento
21. MAGISTER
22. Notify
Из особенностей полноэкранный слайдер фоновых изображений.
23. Trendset
Вид страницы «Сайт на реконструкции»
И так шаблон заглушки для сайта, как я уже написал в кратком описании но, повторюсь ещё раз.Заглушку для сайта, можно использовать как для страницы » доступ запрещён » так и для » тех работ » и т.д. То есть ей можно закрыть доступ к определённой странице которая в данный момент в разработке или не доступна по другим причинам.
Страница выглядит в бело голубом формате, на фоне страницы изображены горы, которые движутся в левую сторону. А по центу изображена надпись информирующая пользователя о той или иной причине закрытия сайта или отдельной страницы. Внизу находится Ваш копирайт и копирайт создателя сего шаблона.
Установка страницы необычайно проста, и даже у не опытного пользователя займёт не больше 2х — 3х минут. А то и ещё меньше.
И так приступим непосредственно к самой установке:
1. Скачиваем архив и распаковываем его.
2. Файлы » css, fonts, js, sass » загружаем в корень вашего файлового менеджера (вашего сайта)
3. Открываем файл index.html через блокнот и находим такие строки:
Код
<header>
<h2>Сайт на реконструкции</h2>
<p>Скоро открытие • Игровые новости • Игровой портал</p>
</header>
В коде Вам необходимо заменить только » Сайт на реконструкции, Скоро открытие, Игровые новости, Игровой портал »
Код
<footer>
<span>© Art-uCoz.ru <a href=»#» target=»_blank»>Free Html5 Templates</a> by <a href=»#»>HTML5 UP</a>.</span>
</footer>
HTML5 UP стирать не нужно! Давайте будем уважать труд того кто написал сей шаблон.
5. Теперь копируем весь код целиком и вставляем его в любую страницу которую хотите скрыть от посторонних глаз.
На этом установка завершена.
Если хотите установить её как страницу тех работ, то вставляем код из index.html
art-ucoz.ru
Создаём страницы-«заглушки» для своих сайтов / Habr
Если вы купили домен, а сайт ещё не запустили, то решить, что делать с ним — это довольно непростая задачка. Оставить начальную страницу вашего регистратора или стандартную страницу хостинга? Оба варианта выглядят, по меньшей мере, непрофессионально. Особенно, если вы собираетесь попиарить свой новый проект, рассказать о нём. В то же время, вы не хотите тратить слишком много времени для создания временной страницы, т.к. вам нужно работать над самим проектом.Лучший выход из ситуации — создать простую страницу-«заглушку», которая будет рассказывать посетителям, что здесь, в конечном счёте, появится. Хорошая страница-«заглушка» может быть двух вариантов: информационная страничка, которая просто расскажет, что здесь будет после запуска; или страница, которая предлагает посетителям подписаться на уведомления или оставить запрос на бета (или альфа) тестирование. Ниже вы увидите несколько отличных примеров обоих типов, следуя которым, вы сможете создать свою такую страницу-«заглушку». Разумеется, среди них вы не увидите обычных страниц «В разработке» (с надоевшим дизайном), которых целая куча в сети.
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.: Буду рад услышать ваши замечания и пожелания насчёт перевода.
habr.com
Как создать красивую заглушку на сайт
Заглушка — это страница, которую размещают на сайт, когда он недоступен по той или иной причине. Например, когда вы дорабатываете или меняете дизайн сайта и в это время он недоступен или отображается как-то некорректно. Целесообразно будет поставить на это время страницу-заглушку, на которой будет написано, что сайт на обслуживании.
Итак, давайте приступим…
Мы будем делать несложную заглушку с фоновой картинкой и текстом, что сайт находится на обслуживании.
Создадим на компьютере папку, в которую будем помещать все необходимые файлы для нашей заглушки.
В этой папке создадим еще одну папку с названием images. В нее мы поместим нашу фоновую картинку и, возможно, еще и другие картинки, которые могут понадобиться в ходе работы.
Открываем программу Notepad++ (или аналогичную, например Блокнот). Создаем новый документ. Далее — Файл — Сохранить как, выбираем нашу папку с заглушкой и сохраняем документ с названием index.html
Вот что теперь должно быть в нашей папке:
Открываем в нашем редакторе файл index.html (после сохранения он должен быть у вас открыт). Теперь нам надо убедиться, что кодировка этого файла выставлена правильно. Для этого идем в пункт меню «Кодировки» и нажимаем на «Преобразовать в UTF-8″
Чтобы во время работы случайно не потерять достигнутый результат, рекомендую периодически сохранять документ во время работы. Это можно сделать в меню «Файл» или сочетанием клавиш «Ctrl + S».
Пишем в редакторе следующий код:
<html>
<head>
</head>
<body>
</body>
</html>Из этих тегов состоит любая веб-страница.
Теперь добавим к нашей странице заголовок, ведь будет не очень красиво, когда кто-то откроет ее и увидит в заголовке вкладки браузера index.html (можете открыть страницу в браузере и следить за тем, что получается). Для этого между <head> и </head> добавим следующий код:
<html>
<head>
<title>Сайт находится на обслуживании</title>
</head>
<body>
</body>
</html>Фоновая картинка
Теперь давайте подберем к нашей заглушке фоновую картинку, после чего вернемся к редактированию страницы.
Для этого заходим в Гугл Картинки и ищем интересную картинку, которая могла бы служить фоном для нашей страницы. Важно подбирать картинку шириной не менее 1920 пикселей, чтобы на больших экранах наша страница смотрелась хорошо. Я ввел в поисковую строку 1920 backgrounds и выбрал одну из картинок.
Открываем картинку в полном размере и сохраняем себе в папку images. Затем переименовываем ее. Назовем ее bg (не забываем о формате картинки, в моем случае это jpg).
Вот что я подобрал. Это фото города Чикаго. По-моему вполне подойдет для фонового изображения сайта.
Прикрепляем фоновое изображение к странице, для этого используем стили CSS:
<html>
<head>
<title>Сайт находится на обслуживании</title>
</head>
<body>
</body>
</html>Также выше я добавил стили для текста, а именно задал шрифт Ариал и белый цвет текста.
Далее создадим блок шириной 900 пикселей, в который поместим наш текст. Выровняем этот блок по центру.
Текст будет состоять из заголовка и, собственно, абзаца текста.
<html>
<head>
<title>Сайт находится на обслуживании</title>
</head>
<body>
<div>
<h2>Сайт на обслуживании, зайдите позже!</h2>
<p>В настоящее время на сайте ведутся технические работы. Зайдите пожалуйста позже или свяжитесь с нами одним из следующих способов:</p>
</div>
</body>
</html>Вот что получилось:
Теперь добавим наши контакты, чтобы посетители сразу могли связаться с нами, а не ждать пока на сайте закончатся работы.
Добавим 3 блока, в которых будут телефон, электронная почта и скайп.
<html>
<head>
<title>Сайт находится на обслуживании</title>
</head>
<body>
<div>
<h2>Сайт на обслуживании, зайдите позже!</h2>
<p>В настоящее время на сайте ведутся технические работы. Зайдите пожалуйста позже или свяжитесь с нами одним из следующих способов:</p>
<div>
<p>Тел.: 333-33-33</p>
</div>
<div>
<p>E-mail: [email protected]</p>
</div>
<div>
<p>Скайп: admsite_ru</p>
</div>
</div>
</body>
</html>Осталось поработать со стилями.
Увеличим заголовок, выровняем его по центру и опустим ближе к центру экрана.
Увеличим шрифт абзаца текста до двадцати пикселей и сделаем небольшой отступ от заголовка. Также сделаем границу внизу текста, которая отделит его от контактов.
Сделаем блоки с контактами в 3 столбца, увеличим шрифт, выровняем каждый блок по центру и изменим цвет текста.
<html>
<head>
<title>Сайт находится на обслуживании</title>
</head>
<body>
<div>
<h2>Сайт на обслуживании, зайдите позже!</h2>
<p>В настоящее время на сайте ведутся технические работы. Зайдите пожалуйста позже или свяжитесь с нами одним из следующих способов:</p>
<div>
<p>Тел.: 333-33-33</p>
</div>
<div>
<p>E-mail: [email protected]</p>
</div>
<div>
<p>Скайп: admsite_ru</p>
</div>
</div>
</body>
</html>В результате у нас получилась страница-заглушка, которую мы можем использовать, когда на сайте ведутся технические работы.
То, что получилось можно скачать по этой ссылке.
Попробуйте профессиональный хостинг для своего сайта
alexotinov.ru
🎁 HTML заглушки для сайта — WEB-EXITO.ru 🎁
В XXI веке очень важно, что бы у Вашего дела был свой персональный сайт, даже если он находится еще в разработке.
Для чего нужны html заглушки сайта?
Заглушки сайта в основном необходимы в двух случаях: когда производятся технические работы на сайте или когда сайт только разрабатывается. В основном она служит об информировании посетителей, что бы они не увидели банальную ошибку и вернулись к Вас снова, после окончания работ. Заглушки лучше всего не загромождать информацией, сделать её в идеале нужно в один экран.В заглушке можно указать следующую информацию:
- Логотип;
- Контактную данную;
- Дескриптор;
- Принести извинения за неудобства;
- Указать обратный отчет до открытия сайта;
- Подобрать красивое, тематическое изображение.
Заглушка для сайта с таймером выполнена на фоне изображения моря и заката. Если Ваш проект в разработке или на доработке, то заглушка Вам очень пригодится. Заглушка содержит: Адаптивную и кроссбраузерную …
Читать далее…
Заглушка для сайта со слайдером заголовка выполнена в нефритовом и оранжевом цвете. ШАБЛОННАЯ ИНФОРМАЦИЯ: Имя шаблона: — Настраиваемая заглушка Лицензия: Бесплатная лицензия Creative Commons Attribution 3.0 Unported. Неограниченное пользование. Дата создания: …
Читать далее…
Красивая заглушка сайта — на фоне заката. Имеет стандартную информацию, а именно: заголовок; описание; таймер обратного отчета; форма для подписки на уведомления; ссылки на социальные сети; шильдик сайта web-exito.ru. ИНФОРМАЦИЯ …
Читать далее…
Заглушка для сайта с анимацией выполнена на фоне звездного неба. Анимационные эффекты придают интерактивности заглушке и на время даже можно залипнуть. Заглушка для сайта с анимацией содержит: Главный заголовок страницы; …
Читать далее…
Простая заглушка для сайта выполнена на HTML5 и CSS3 на фоне красивого изображения. Заглушка полностью адаптивна на всех устройствах, а так же корректно отображается во всех популярных браузерах. Простая заглушка …
Читать далее…
Заглушка для сайта со слайдером выполнена на HTML5 и CSS3. Корректно отображается на всех устройствах, в том числе и мобильных. Заглушка для сайта со слайдером содержит: Главный дескриптор; Таймер …
Читать далее…
Заглушка — на сайте проводятся тех. работы выполнена в синем цвете на фоне расфокусированной фотографии. Заглушка сайта содержит: Главный дескриптор; Описание заглушки; Логотип; Таймер обратного отчета; Подписку на уведомление по …
Читать далее…web-exito.ru
WordPress заглушка — 3 способа закрыть сайт на реконструкцию
Бывает, что вам необходимо внести изменения в структуру сайта, которые потребуют некоторого времени для реализации. При этом вы не хотите, чтобы посетители видели страницы сайта в недоработанном состоянии. Правильным решением в этом случае будет закрыть сайт страницей-заглушкой, которая проинформирует пользователей, что на сайте проводятся технические работы.
Зачем нужна заглушка для сайта на время разработки или реконструкции
Заглушка – это временная домашняя страница, сообщающая посетителям, что ваш сайт находится в разработке. На странице-заглушке, как правило, отсутствует навигация, поэтому пользователи не смогут перейти к остальным страницам сайта. Вы можете оставить сообщение для посетителей, указав контактные данные и ориентировочную дату работы сайта, чтобы они вернулись позже.
Заглушку можно ставить не только на существующий сайт во время технических работ, но и для нового сайта, который пока еще находится в процессе разработки, для того чтобы не открывалась пустая страница или не выводилась ошибка сервера. Основные цели использования страницы-заглушки:
- скрыть сайт от посетителей, пока он находится в недоработанном состоянии;
- проинформировать целевую аудиторию на начальном этапе разработки сайта;
- закрыть доступ к контенту на время проведения технических работ;
- отображать контактную информацию компании во время разработки сайта.
Страница-заглушка настраивается по усмотрению владельца сайта. Вы можете просто извиниться перед посетителями и указать способ связи с администрацией. Разместите иконки социальных сетей, чтобы пользователи подписывались на обновления, или добавьте переадресацию на новостные разделы и архивную информацию компании.
Виртуальный хостинг сайтов для популярных CMS:
Чтобы не потерять целевую аудиторию сайта в период технических работ, полезно оснастить заглушку специальным полем подписки на уведомления по электронной почте или формой обратной связи для контакта с потенциальными клиентами. Для коммерческих сайтов лучше сделать хотя бы одну страницу о компании вместо повешенной на полгода заглушки, особенно если разработка сильно затягивается.
Создание заглушки без помощи плагина — как закрыть сайт от посторонних
Любые плагины тормозят загрузку сайта, поэтому в некоторых случаях оптимальным окажется создание заглушки без их использования. Технически этот процесс представляет собой переадресацию посетителей на страницу-заглушку. Настройка перенаправления потребует внесения изменений в код файла .htaccess. Этот способ не зависит от системы управления контентом, на которой установлен сайт, и подойдет для всех серверов с Apache.
- Подключитесь к серверу хостинга через файловый менеджер. В корневой директории сайта найдите файл .htaccess.
- Откройте файл .htaccess в режиме правки кода и найдите раздел WordPress между программными скобками #BEGIN и #END (строки 8–26 на скриншоте). После инструкции RewriteEngine On (строка 10) добавьте в код строки 12–17. Строки 13 и 14 потребуются только в случае, когда доступ к сайту возможен с нескольких IP-адресов, при этом нужно подставить именно ваши значения. В противном случае уберите эти IP-адреса из кода и оставьте только локальный хост 127.0.0.1 (строка 12).
- Сохраните исправленный файл .htaccess в корне сайта и туда же добавьте страницу перенаправления maintenance.html, на которой укажите всю необходимую информацию. Все пользователи, пришедшие с IP-адресов, которые отличаются от указанных в файле, будут перенаправлены на страницу-заглушку.
Заглушка ВордПресс с помощью плагина WP Maintenance Mode
Плагин для создания заглушки WP Maintenance Mode находится в официальном репозитории WordPress: https://wordpress.org/plugins/wp-maintenance-mode/. При активации плагина включается режим проведения технических работ на сайте, и только пользователи с достаточными правами смогут использовать внешний интерфейс.Из особенностей плагина WP Maintenance Mode можно отметить:
- Настраиваемый цвет шрифта и произвольный фон;
- Наличие формы подписки для уведомления о работе сайта, данные при этом экспортируются в CSV-файл;
- Таймер обратного отсчета времени, которое осталось до запуска сайта в работу;
- Отзывчивый (адаптивный) дизайн;
- Поддержка лэндингов и многостраничных сайтов;
- Иконки социальных сетей;
- Исключение определенных URL из обслуживания.
К минусам можно отнести отсутствие иконок популярных русскоязычных социальных сетей. Кроме того, WP Maintenance Mode может функционировать нестабильно, если для сайта включено кэширование страниц. Поэтому перед активацией плагина рекомендуется отключить режим кэширования.
Установите плагин WP Maintenance Mode и активируйте его, после этого в админке WordPress в меню «Настройки» появится пункт «Техническое обслуживание», в котором располагаются 3 вкладки для управления настройками плагина.
На вкладке «Общие» переключите статус заглушки в состояние «Включено». По желанию можно отключить индексирование сайта поисковыми роботами на время технических работ или проставить метатеги. Укажите пользователей, которые будут иметь доступ к сайту и панели управления. По умолчанию доступ всегда предоставлен для администраторов.
Можно задать адрес страницы, куда будут перенаправляться пользователи, не имеющие доступа к сайту, и указать исключения, например, разрешить доступ к новостям или архивному разделу сайта. При необходимости активируйте напоминание о включенном режиме заглушки и добавьте ссылку для входа в админку. Нажмите кнопку «Сохранить настройки» прежде чем перейти к другим вкладкам.
Вкладка «Дизайн» настраивает визуальное отображение страницы-заглушки.
- Введите название и заголовок страницы в соответствующие поля.
- Во встроенном мини-редакторе наберите нужный текст, который будет выводиться на страницу-заглушку. Для заголовка и текста можно поменять цвет шрифта.
Фон для страницы выбирается из предустановленных изображений либо разрешается загрузить собственную картинку размером 1920×1080 пикселей. Сохраните настройки, чтобы применить их к странице-заглушке.
На вкладке «Модули» к странице-заглушке можно подключить дополнительные функциональные модули. Включите отображение таймера обратного отсчета, если хотите, чтобы посетитель знал, когда сайт будет доступен. Для заинтересованных клиентов активируйте форму подписки на уведомления о работе сайта.
Если на сайте есть привязка к социальным сетям, можно включить отображение кнопок и переадресацию для них. Доступны только популярные западные соцсети: Facebook, Pinterest, Google+, Linkedin, Twitter, Dribble.
Допускается отображение формы обратной связи с кнопкой «Свяжитесь с нами» для контакта с посетителями. SEO-настройка плагина разрешает использование Google Analytics.
Так будет выглядеть страница-заглушка с произвольным фоном, настроенным таймером и формой подписки на уведомления о работе сайта.
Обратите внимание, что при деактивации плагина режим технических работ не выключается автоматически. Для возобновления работы сайта зайдите в настройки плагина и на вкладке «Общие» выберите опцию «Отключено».
Настройка заглушки WordPress с помощью плагина Maintenance
Еще один популярный плагин Maintenance для создания заглушки сайта расположен в официальном репозитории WordPress по адресу: https://wordpress.org/plugins/maintenance/.Плагин позволяет закрыть сайт на техническое обслуживание, включить 503-й ответ сервера «Сервис временно недоступен», установить временную страницу с авторизацией, которая редактируется с помощью настроек. Бесплатная версия плагина включает:
- Retina-ready HTML/CSS макет;
- Полноэкранный фон с настраиваемым эффектом размытия;
- Загрузка собственного логотипа;
- Настройка футера страницы-заглушки;
- Настраиваемые шрифты и фон;
- Вход пользователей и панель администратора прямо со страницы-заглушки;
- Генерация сервером ошибки 503;
- Подключение Google Analytics;
- Исключение URL из обслуживания.
Премиум-версия дополнительно включает таймер обратного отсчета, галерею фонов, иконки социальных сетей, возможность установки фонового видео из галереи или с Youtube/Vimeo и форму подписки на рассылку новостей по электронной почте.
Установите плагин Maintenance и активируйте его. В меню админки WordPress появится пункт с таким же названием для настройки заглушки.
- Активируйте режим заглушки переключателем On/Off.
- Задайте название и заголовок страницы-заглушки.
- В мини-редакторе наберите текст, который будет отображаться для посетителей.
В подвале страницы-заглушки удобно указать контактные данные для связи. Выберите картинку логотипа и загрузите ее в соответствующем поле, разрешается регулировать размер отображаемого логотипа. Для Retina-экранов можно задать альтернативное изображение повышенной четкости.
В бесплатной версии доступен только один встроенный фон, но вы можете загрузить собственное изображение. Укажите семейство шрифтов и задайте цвет текста на странице-заглушке.
По желанию можно отображать панель администратора на заглушке и подключить модуль Google Analytics. Для фона разрешается задать эффект размытия и регулировать его интенсивность.
При необходимости плагин допускает использование собственных CSS-стилей для отображения страницы-заглушки. Вы также можете указать, какие страницы сайта нужно исключить из режима технического обслуживания. Для применения настроек нажмите кнопку «Сохранить».
Так выглядит заглушка, созданная плагином Maintenance с применением логотипа и футера.
www.ipipe.ru