Макет страницы режима обслуживания для сайта Weebly

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

  • Показать страницу в стадии разработки.
  • Отобразите страницу режима обслуживания.
  • Отображение времени запуска продукта.
  • Показать время запуска события.

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

Ознакомьтесь с демонстрацией страницы в стадии разработки на сайте Weebly.

Проверить демо

Файлы, необходимые для макета режима обслуживания

Ниже приведены файлы, необходимые для создания макета страницы пользовательского режима обслуживания в Weebly. Нажмите кнопку загрузки, чтобы получить zip-файл. Мы используем демонстрационное изображение «bg.jpg» в качестве фона, которое вы можете заменить своим собственным изображением (убедитесь, что в качестве имени файла используется тот же «bg.jpg»).

  1. countdown.js
  2. init.js
  3. bootstrap-responseive.css
  4. bootstrap.css
  5. Maintenance.html
  6. bg.jpg

Скачать файлы

Создайте папку с именем «Обслуживание» в разделе «Тема> Редактировать HTML / CSS> Активы». Разархивируйте загруженный файл и загрузите все отдельные файлы в папку «Обслуживание». кроме файла «Maintenance.html».

Пользовательские CSS

Добавьте приведенный ниже CSS в файл main_style.css:

*{ 
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}

html{background:url('/files/theme/Maintenance/bg.jpg') no-repeat fixed center center; min-height:100%; background-size:cover;}
body{font: 12px/1.5em Arial, Helvetica, sans-serif, "Arial Narrow";color:#646663;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: 100%;min-height:100%; background:none;}

.wrapper{
background:#fff;
padding:20px 0;
margin-top:10%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);
}

.title{text-align:center;}

/* ---------- TIMER ---------- */
ul#countdown{text-align:center;}
ul#countdown li {
color:#fff;
display: inline-block;
margin-right:18px;
width: 80px;
height:80px;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: rgb(127, 186, 10);
background: -moz-linear-gradient(90deg, #7FBA0A 50%, #7CB30B 50%);
background: -webkit-linear-gradient(90deg, #7FBA0A 50%, #7CB30B 50%);
background: -o-linear-gradient(90deg, #7FBA0A 50%, #7CB30B 50%);
background: -ms-linear-gradient(90deg, #7FBA0A 50%, #7CB30B 50%);
background: linear-gradient(180deg, #7FBA0A 50%, #7CB30B 50%);
-webkit-box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3);
-moz-box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3);
box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3);
}
ul#countdown li span {
font-size: 42px;
font-weight: bold;
color: #fff;
position: relative;
text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
}

ul#countdown li p.timeRefDays,
ul#countdown li p.timeRefHours,
ul#countdown li p.timeRefMinutes,
ul#countdown li p.timeRefSeconds {
text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
}

.bottom-row{margin-top:30px;}
.sub-block{
padding:20px;
min-height:180px;
background:#ffffff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
ul#countdown li {
width: 55px;
height: 70px;
margin-bottom: 10px;
}

ul#countdown li span {
font-size: 26px;
}
}

Создание типа заголовка

Загрузите файл «Maintenance.html» в «Тип заголовка», это будет имя макета страницы, отображаемое на вкладке «Страницы».

Настройка таймера

Предположим, вы хотите запустить сайт 31 декабря 2016 года. Установите эту дату в файле «init.js», как показано ниже:

Целевая дата для таймера обратного отсчета

Теперь все настроено … сохраните изменения и перейдите в редактор сайта Weebly.

Создание страницы режима обслуживания

Создайте новую страницу, назовите ее «Обслуживание» и выберите макет типа заголовка как «Обслуживание» из раскрывающегося списка. Вы можете увидеть некоторые текстовые данные, как показано на рисунке ниже, под которым вы можете перетаскивать собственный контент.

Страница режима обслуживания Weebly

Страница режима обслуживания Weebly

Опубликуйте свой сайт и посмотрите, как работает макет режима обслуживания.

Ознакомьтесь с демонстрацией страницы в стадии разработки на сайте Weebly.

Проверить демо

Обработка уже опубликованного сайта

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

  • Отмените публикацию существующего сайта.
  • Настройте макет режима обслуживания на новом сайте.
  • Опубликуйте новый сайт с исходным URL.

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

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

Похожие записи

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *