Как украсить сайт на новый год?

Приветствую вас, дорогие читатели!

В данной статье я покажу вам несколько простых способов, как можно украсить свой сайт к новогодним праздникам. Для чего это нужно?
На мой взгляд, основных причины здесь несколько:

• Первая причина — это, хоть и не значительное, но все-таки влияние на поведенческие факторы. То есть, когда человек в преддверии новогодних праздников попадает на ваш сайт и видит, что вы заморочились и украсили его, то у него складывается ощущение, что этот сайт не заброшенный, и администратор занимается его развитием, а значит здесь может быть актуальная полезная информация.
• Так же пользователь может задержаться на лишние 5-10 секунд на странице вашего сайта для того, что бы просто по рассматривать какие-то украшения./li>
• Если вы очень постараетесь и сделаете какое-то очень оригинальное украшение, то наверняка посетителю может захотеться добавить ваш сайт в закладки или поделиться ссылкой на сайт в социальных сетях.
• Последняя причина заключается в том, что вы создаете новогоднее настроение, как посетителям своего сайта, так и самому себе. То есть, когда вы украшаете свой дом к новому году, ставите ёлку, вешаете на нее украшения, то это, так или иначе, создает определенную атмосферу и настроение. Так вот, украшение сайта может точно так же создавать такое праздничное настроение, как вам, так и вашим посетителям.

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

Теперь давайте перейдем непосредственно к вариантам украшения сайта.

Добавление дополнительных графических элементов

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

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

Устанавливается он из репозитория.

1. 1.Переходим в раздел «Плагины» = > «Добавить новый». Находим плагин в поиске, устанавливаем и активируем его.
2. 2.Сразу же после активации, на странице вашего сайта появляется мерцающая гирлянда в шапке.

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

Делается это следующим образом:

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

   Как определить ID и класс элемента на странице?

2. 2.После этого, я открываю файл стилей установленной темы style.css, и в самом конце файла дописываю необходимые css-свойства.
3. 3.Однако, перед тем как это дописывать, мне необходимо поставить здесь комментарий. Комментарий ставиться следующим образом:
   CSS

   /* Текст комментария*/

   1	/* Текст комментария*/

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

4. 4.Пишем название идентификатора или класса одного из блоков, находящихся в шапке сайта, и затем прописываю для него свойство padding-top со значением 100 пикселей, а затем сохраняю файл.
   CSS

   /*Новогодние украшения*/ #masthead{ padding-top:70px; } /****/

   1 2 3 4 5

   /*Новогодние украшения*/ #masthead{ padding-top:70px; } /****/

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

После установки и активации плагина XmasDecoration в шапке сайта появляется вот такая гирлянда:

Добавление эффекта падающего снега

Для этого существуют как отдельные специальные скрипты, которые подключаются через код, так и специальные плагины.

Одним из наиболее популярных плагинов для создания эффекта падающего снега является «Snow, balloons and more». Он не обновлялся на протяжении последних четырех лет, однако, это не мешает ему отлично работать с новыми версиями WordPress.

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

После его установки и активации, в разделе настройки появляется пункт «Snow and more».
Здесь все настройки разделены на несколько блоков.

1. 1.В самой первой строке мы можем регулировать количество падающих снежинок, шаров, либо каких-то других элементов.
2. 2.В следующем блоке вы можете выбрать, какие графические элементы у вас будут падать. Можно выбрать как один, так и несколько. При чем, как видите, помимо снежинок, здесь есть еще воздушные шары, листья, сердечки, елки и капли.
   
3. 3.Далее, в разделе «Use the balloon mode» вы можете выбрать направление, как у вас будет происходить падение выбранных графических элементов.

   Если мы используем снежинки, то у нас они будут падать сверху вниз. Если же мы будем использовать воздушные шары, то здесь будет направление снизу вверх, то есть в этом случае нужно будет выбрать «Yes».

4. 4.Далее, мы можем сразу же сохранить изменения и посмотреть, что у нас получиться. Если этих настроек окажется мало, то можно вернуться к настройкам плагина и прокрутить до блока «Pro settings».
5. 5.Прежде всего, здесь можно задать время, после которого у вас перестанут падать снежинки. То есть, пользователь зашел на сайт, скажем, первые 10 секунд снежинки падают, а потом они перестают падать.
   
6. 6.Так же, вы можете задать интервал в миллисекундах между движениями.
   Далее, здесь задается максимальная сила ветра, то есть, насколько они будут у вас смещаться в том или ином направлении, и максимальная скорость падения.
   
7. 7.Можно сделать здесь так, что бы эти снежинки падали не на всех страницах сайта, а только на определенных страницах.
8. 8.Так же в самом низу здесь есть пункт «Hide the «Powered by» message in the footer», выбираем здесь «Yes» и сохраняем настройки нажатием на кнопку «Save changes». Это позволит нам убрать ссылку на сайт автора плагина в подвале сайта.
   

Следующий плагин для создания эффекта падающего снега называется «Snow Flurry». Мне этот плагин понравился немножко больше потому, что он, во-первых, более легкий в плане нагрузки на сайт, а во вторых он позволяет создать эффект такого легкого падающего ненавязчивого снега.

Перед его установкой мы, конечно же, диактивируем предыдущий установленный плагин и устанавливаем этот.

1. 1.После его установки и активации, у нас слева в меню появиться пункт «Snow Flurry». Так же как и у предыдущего, у него все настройки на английском.
2. 2.Здесь мы можем задавать максимальный размер снежных хлопьев в пикселях.
3. 3.Так же вы задаете здесь количество снежинок, минимальную скорость движения снежинки сверху вниз, максимальную скорость движения, и, при желании, вы можете задать цвет снежинок в шестнадцатеричном формате.
   
4. 4.Здесь есть очень полезная, на мой взгляд, функция – это отключение эффекта падающего снега по истечению определенного промежутка времени. Поставим здесь, к примеру, 10 секунд, и после того, как пользователь попадает на сайт, у него первые десять секунд снег по тихонечку падает, а после 10 секунд он прекращает падать и таким образом уже не отвлекает посетителя от контента вашего сайта.
   
5. 5.Нажимаем на кнопку «Save settings», переходим на наш сайт и обновляем страницу.

Изменение его фонового изображения

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

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

Возможность изменения фона доступна не для всех тем.

1. 1.Что бы понять, поддерживает ли ваша тема смену фонового изображения или нет, вы можете либо зайти в настройки темы, либо перейти в административной части сайта в раздел «Внешний вид» = > «Настроить».
   
2. 2.В моем случае здесь сразу же есть пункт «Фоновое изображение». Нажимаю на него и затем загружаю нужный мне фон.
   Все эти картинки вы можете найти в интернете, единственное, ширина изображения должна быть где-то в районе 1200 – 1600 пикселей. Слишком большие картинки загружать нет смысла, а слишком маленькие будут выглядеть размытыми и не очень красивыми.
   
3. 3.После того, как вы выбрали нужное вам изображение, в разделе «Повтор фона» выбираем «Не повторять».
4. 4.Позицию фона вы можете менять здесь на свое усмотрение: «Слева», «По центру», «Справа».
5. 5.И в «Привязка фона» ставим «Зафиксировать», что бы при прокрутке у вас картинка оставалась на месте. После чего нажимаем на кнопку «Сохранить и опубликовать».
   

Размещение праздничных баннеров

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

Создание дочерней темы

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

Видеоинструкция

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

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

С уважением Юлия Гусарь