mojwp.ru
Генератор рекламных блоков »
Назад

Как украсить любой сайт к Halloween за пару минут

Опубликовано: 22.10.2020
0
1471

Не нужно лезть и ковырять тему сайта и не нужно устанавливать всякие плагины. Решение подходит абсолютно для любого сайта и на любой CMS. Благодаря подсказкам реализовать сможет даже человек без опыта. Только CSS.

Пример с Компьютера » и пример с Телефона »

На телефоне размер картинок меньше, чтобы не перекрывать контент, т.к. сам блок фиксирован и нельзя закрыть.

Шаг 1. Скачиваем заготовки или делаем свои

Качаем мои заготовки картинок и закачиваем себе на сайт.

Скачать картинки

Можете свои картинки сделать в Photoshop. Главное чтобы с прозрачным фоном, а это формат .png или .svg для иконок.

Шаг 2. Задаем параметры стилей

Теперь нужно вставить параметры стилей представленные ниже в файл стилей вашего сайта (обычно style.css или css.css). Если у вас WordPress, то самый просто способ через админку сделать (Смотреть » или Внешний вид > Настроить > Дополнительные стили).

Поясняю

  • Вам нужно будет изменить название class вашей области контента. У меня в примере это .left-content_vn. Ниже поясняю как определить у вас на сайте.
  • Пропишите правильный путь до картинок у себя на сайте.
  • Цифры 140px, 280px, 420px и т.п. Таким образом мы задаем отступ слева для каждой следующей картинки. Шаг в 140px - это ширина одной картинки в версии для PC.
  • А на мобильниках мы картинку сделали меньше в 2 раза и поэтому шаг у нас будет пропорционально меньше, т.е. 70px.
  • Сами картинки можете менять очередность и их количество. Если количество изменится, то не забудьте добавить соответствующие записи в строки background-position: в двух местах.
  • Как раз на мобильниках я убрал несколько картинок и оставил более подходящие для маленького размера. Все не влезут в узкий экран и поэтому пришлось выбирать.

Шаг 3. Определим область контента

Данный пункт читать дольше, чем сделать даже новичку. Не пугайтесь.

У меня в примере сделано для темы WP Romb. Если она у вас установлена, то менять название не нужно.

Если используете другую тему, то делаем следующее:

  1. Открываем любую статью на своем сайте и нажимаем в браузере F12 или правой клавишей мыши и Просмотреть код.
  2. В углу нажимаем на иконку курсора в квадрате (Смотреть »).
  3. Теперь не нажимая кнопок мышки просто подведите курсор на область вашего блока с контентом. Он должен подсветиться как на примере (Смотреть »).
  4. А теперь нажмите на левую клавишу мышки, чтобы прошла фиксация выделенного. Снизу мы увидим подсвеченной название нашего блока, которое можно выделить и скопировать (Смотреть »).
  5. Остается заменить название в коде выше на только что вычисленное вами.

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

Вроде ничего сложного 😉 Дёшево и сердито. Если что пишите в комментариях, помогу.

P.S.: не забывайте чистить кеш в плагине (если такой есть) и кеш браузера (CTRL+F5 или SHIFT+F5).

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
Будь первым и получишь респект от меня!
Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.