Пошаговая инструкция без софта, шаблонов, 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 с фоном добавить свойство
background-size: cover;там есть cover
<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>
Уложился в минуту, а если без шуток, то нужно правильно настраивать обработчик, чтобы редиректить на заглушку, не затрагивая будущего функционала сайта.
клонируем репозиторий с шаблоном заглушки, делаем заглушку на фреймворке, засовываем на вебпак и транспилируем через balel, и пока вселенная крутится, не забываем сделать заглушку на случай если заглушка не загрузилась из-за отключённого js, пишем и прогоняем тесты и убеждаемся, что котик загружается корректно, создаём репу на гитхабе для своей заглушки, пишем объёмный README по её использованию с проставлением лицензии и ссылкой на донат, заливаем на серв и запускаем через SSR, чтобы поисковики могли нормально заглушку проиндексировать и повысить наш сайт в рейтинге заглушек. И это всего за полторы минуты
Комментарий недоступен
Я в этой штуке прототипы делаю. Нравится.
почему на сайте-примере даже кнопки соцсетей не работают?
Комментарий недоступен
Это даже не кнопки, а просто картинка с изображением иконоц соц. сетей с прозрачным фоном.
это просто картинка, по быстренькому вставленная, там подключены шрифтовые иконки самые разные и соц сети есть, можно ставить менять им цвет размер и ссылку конечно же привязать без проблем можно, там не привязаны просто потому что не понятно на какие страницы сетей ссылку поставить это же пример
Фронтенд умирает, все больше работы отбирают у джунов
Вы всю жизнь джуном собрались быть?
До 2023 года, а что?
А потом что? Предпенсионер? )
Уеду в Казахстан, пасти коней
можете поискать на этом сайте https://sletaem.kz/
Удивительно то, что эта статья все еще в плюсе.
А, и еще непонятно, кто такой Вамми и зачем с ним связываться с моего сайта
Комментарий недоступен
почти нативная реклама сервиса esk.one от самих создателей.
вам что, регистраций пользователей не хватает для отчета ?
а "лайфхак" ваш все равно, что забивать гвоздь микроскопом
Комментарий удален модератором
Webflow
Чушь полная!
Добрый день! Спасибо за статью 👍. Нужна заглушка на сайт из презентации. Готов обсудить @it_nikita
Спасибо.
Комментарий удален модератором