Как за две минуты создать 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 у секции стоит не думал что высота есть такая огроменная
<html lang="ru>
<header>
<title>Underconstruction</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</header>
<body>
<h1>Underconstruction</h1>
</body>
</html>
Уложился в минуту, а если без шуток, то нужно правильно настраивать обработчик, чтобы редиректить на заглушку, не затрагивая будущего функционала сайта.