Модификация пакетов услуг. Фотограф Константин Шамин

Модификация пакетов услуг

Модификация блока с ценами на пакеты услуг с помощью CSS/JS:
— выравнивание высоты блоков с пакетами услуг в версии для десктопа и планшета;
— блок с пакетом выделен фоном и имеет окантовку с закруглёнными углами (чтобы не сливались в мобильной версии)
— есть возможность выделения цветом «хитового/рекомендованного» пакета услуг (вариант 1);
— Есть возможность выделени чётных/не чётных пакетов цветом (вариант 2)


Вариант ценовых пакетов на основе третьего варианта из раздела «Услуги» в предварительно подготовленных шаблонах!


Почасовой заказ

Даже всемогущая пунктуация не имеет власти

  • даже всемогущая пунктуация не имеет власти 
  • над рыбными текстами, ведущими безорфографичный образ жизни.
  • однажды одна маленькая строчка рыбного текста по имени Lorem ipsum 
  • решила выйти в большой мир грамматики

100$

Пакет

Даже всемогущая пунктуация не имеет власти

  • даже всемогущая пунктуация не имеет власти 
  • над рыбными текстами, ведущими безорфографичный образ жизни.
  • однажды одна маленькая строчка рыбного текста по имени Lorem ipsum 
  • решила выйти в большой мир грамматики
  • великий Оксмокс предупреждал ее о злых запятых

300$

Целый день

Даже всемогущая пунктуация не имеет власти

  • даже всемогущая пунктуация не имеет власти 
  • над рыбными текстами, ведущими безорфографичный образ жизни.
  • однажды одна маленькая строчка рыбного текста по имени Lorem ipsum 
  • решила выйти в большой мир грамматики
  • великий Оксмокс предупреждал ее о злых запятых
  • диких знаках вопроса и коварных точках с запятой

500$


Как это сделано?

Добавляем HTML-блок на страницу. В него добавляем стили и немного JS:

<style>
#section-1447547 .row > div {
   margin: 24px;
   padding: 10px;
   border: 1px solid #e7e6e6; /* цвет окантовки блока услуги */
   border-radius:10px;        /* радиус скругления углов */
   background-color: #f4f4f4; /* цвет фона */
}

/*выделяем "важный", "модный" или "хитовый" вариант пакета (черным).
  nth-child(2) - цифра 2 - это порядковый номер этого пакета. В данном примере второй (по центру) */
#section-1447547 .row > div:nth-child(2),
#section-1447547 .row > div:nth-child(2) h1,
#section-1447547 .row > div:nth-child(2) h2,
#section-1447547 .row > div:nth-child(2) h3 {
   color: white; /* цвет текста в выделенном блоке */
}
#section-1447547 .row > div:nth-child(2) { /* тоже относится к выделенному черным пакету */
   margin: 24px;
   padding: 10px;
   border: 1px solid #383838; /* цвет окантовки выделенного блока услуги */
   border-radius:10px;        /* радиус скругления углов выделенного блока */
   background-color: #272727; /* цвет фона выделенного блока */
}

</style>

<script>

/* скрип по выравниванию высоты блоков с пакетом. Выравнивает только на десктопной версии и версии для планшетов, на мобильной - убираются лишние порбелы */

if( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) === false ) {
   var section = $("#section-1447547 .row > div");
   var h=0;
   $.each(section, function(){
      if ($(this)[0].offsetHeight > h) { h = $(this)[0].offsetHeight; }
   });
   section.css('height',h);
}
</script>

Везде, где вы видите в примере #section-1447547 — это ID блока с пакетами. Выяснить свой номер можно кликнув по шестеренке в углу блока (см. скриншот).


Вариант 1

Выделение цветом только одного блока. Этот вариант рассмотрен выше.

Вариант 2а

Выделение цветом четных блоков: в стилях заменяем nth-child(2) на nth-child(even)

Вариант 2б

Выделение цветом НЕ четных блоков: в стилях заменяем nth-child(2) на nth-child(odd)

Моды для Wfolio.ru

Модификация пакетов услуг. Фотограф Константин Шамин

Модификация мультиссылок (taplink)

Модификация страницы с мультиссылкой с помощью CSS: — изменение отступов между кнопками; — изменение размера текста...
Модификация пакетов услуг. Фотограф Константин Шамин

Удаление сообщения о Cookie на отдельной странице

Если вы включили Cookie на сайте (Настройки — Разные настройки — Уведомление об использовании cookie (GDPR)),...
Модификация пакетов услуг. Фотограф Константин Шамин

Изменение цвета кнопок на отдельной странице

Модификация пакетов услуг. Фотограф Константин Шамин

Скрываем блок от Инстаграм

Модификация пакетов услуг. Фотограф Константин Шамин

Добавлние кнопок к форме обратной связи

Модификация пакетов услуг. Фотограф Константин Шамин

Виджет обратного отсчета

Модификация пакетов услуг. Фотограф Константин Шамин

Меняем светлую тему на темную (или любую другую)

Модификация пакетов услуг. Фотограф Константин Шамин

Запрет индексации отдельной страницы

Модификация пакетов услуг. Фотограф Константин Шамин

Скрытие пунктов меню в зависимости от языка сайта

Модификация пакетов услуг. Фотограф Константин Шамин

Генератор случайных цифр

Виджет генератора случайных чисел. — задается диопазон «от» и «до»; — старт в один клик; — перебор других значений...
Модификация пакетов услуг. Фотограф Константин Шамин

Виджет. Кнопка сохранения контактов

Данный виджет генерирует vCard — электронную визитку и её QR-код. Визитка поддерживает: — ФИО, — род...
Модификация пакетов услуг. Фотограф Константин Шамин

Модицикация: выделение заголовка другим цветом

Иногда бывает необходимо выделить один или несколько заголовков другим цветом.