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

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

Приветствую тебя, уважаемый читатель! Скоро новогодние праздники. Везде рождественские украшения и новогодняя суета. Как создать новогоднее настроение для читателей вашего сайта? В этой статье я расскажу, как украсить свой сайт WordPress к новому году.

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

Как сделать падающий снег на сайте?

Сделать это чудо логичнее всего при помощи плагина.

Для этого открываем Консоль управления своего сайта и добавляем новый плагин (  Плагины — Добавить новый). В строке поиска набираем слово snow. В качестве результат будет выдано несколько плагинов, генерирующих снежинки на вашем сайте. Выбираем плагин WP Snow Effect. Устанавливаем.  Активируем.

В принципе это всё. Можете проверить — снежинки полетели на вашем экране.

При желании можно выполнить ряд настроек. Выбираем  пункте Настройки настройку WP Snow Effect. Смысл настроек этого плагина очевиден из их описания, правда описание на английском.

Можете сделать перевод страницы. И тогда станет совсем очевидно.

Вы можете легко изменить размеры, цвет, скорость падения снежинок просто установив нужные параметры в окне настроек. Я оставила большинство параметров как есть. Поменяла только Цвет хлопьев снежинок, т.к. белые снежинки были не видны  на белом фоне. Можно поставить галочку Mobile Devices (мобильные устройства) и снег полетит также и в мобильной версии вашего сайта. Сохраняем изменения. Смотрим результат.

С падающим снегом разобрались. Идём дальше.

Как добавить картинку Деда Мороза на сайт?

1. Для начала нам потребуется картинка Деда Мороза или другого новогоднего персонажа, например поросёнка — символа наступающего года. Картинка должна быть хорошего качества и обязательно на прозрачном фоне. Сохраняем эту картинку на свой компьютер и загружаем в библиотеку медиафайлов на свой сайт. Сделать это можно через консоль управления сайта: пункт Медиафайлы , команда Добавить новый. 

2. Теперь подготовим фрагмент кода, который впоследствии загрузим на сайт.

Скопируйте данный фрагмент себе в блокнот

<div style="position: fixed; top: 40%; left: 0;">
<img src="https://opinfo.ru/wp-content/uploads/2018/12/moroz.png"
title="С Новым годом">
</div>

Здесь надо во второй строке поставить ссылку на свою картинку. Для этого открываем наше загруженное изображение в медиабиблиотеке и копируем его URL ссылку.

Заменяем во второй строке кода ссылку на вашу URL ссылку.

<img src=»здесь будет ваша ссылка«

Первая строка кода

<div style=»position: fixed; top: 40%; left: 0;»>

указывает расположение вашей картинки на экране. Поясню: top: 40% — положение по высоте, left — слева экрана. Если хотите расположить картинку выше или ниже меняйте цифру рядом с top: 10% — это почти вверху, 50% — посередине, и т.д. Можно расположить картинку справа, если заменить left  на right. Фрагмент кода готов.

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

3. Далее добавляем подготовленный фрагмент кода на сайт.

Для добавления кода в панели управления сайта в пункте Внешний вид  выбираем команду Редактор и открываем страницу html кода. Справа выбираем Заголовок (header). В окне редактора появился код заголовка вашего сайта.

Внимание! Будьте внимательны при работе с текстом программного кода. Ваши ошибки могут привести к неработоспособности сайта. Предварительно можно сделать резервную копию вашего сайта.

Теперь заходим в блокнот, копируем заранее подготовленный фрагмент кода и вставляем  его на свой сайт перед закрывающим тегом /head. Сохраняем. Готово.

Если вы всё сделали правильно, Дед Мороз появится на вашей странице.

И в завершении, одна полезная фишка.

морозТ.к. я занимаюсь партнёрским маркетингом, то я с пользой для себя использовала картинку Деда Мороза, сделав её кликабельной.

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

Получилось вот так:

<div style="position: fixed; top: 40%; left: 0;">
<a href="https://opinfo.ru/lp/voronka-sale/?utm_medium=blog&utm_source=moroz">
<img src="https://opinfo.ru/wp-content/uploads/2018/12/moroz.png"
title="С Новым годом">
  </div>

Здесь

<a href=»https://opinfo.ru/lp/voronka-sale/?utm_medium=blog&utm_source=moroz»>     —   моя ссылка, вместо которой вы можете поставить свою.

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

Удачи вам! До скорых встреч на страницах блога InfoMix

Успехов вам и новогоднего настроения!

Спасибо, что поделились статьёй в соцсетях!

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

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