Skip to main content

Тизеры

Опубликовано: Konkin 26.05.2019 - 11:46
GruzService вёрстка тизеров модуля views
LESS/CSS
~1ч
~500р

Переопределение стилей тизера

Исходные данные:

  • Специфика - Сайт услуги грузчиков;
  • Цель - увеличить конверсию из контекстной рекламы;

Контент определенного типа материала, выводится тизерами, через views.

старый тизер ГрузСервис

Где, элементы с системными классами views, содержат в себе элементы тизеры, с системными классами node, которые мы и переопределим.

views

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

Задание выполним с помощью свойства элемента position. Родительский элемент принимает значение свойства position: relative, дочерние элементы принимают position: absolute.

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

Изображению задаем прозрачность opacity: 0.15, родительскому блоку .views-row в качестве background прописываем линейный градиент в соответствии с цветовой схемой из исходников и добавляем тени.

Продолжение: Посадочные страницы