Как создать свои тизеры

Для создания блока тизеров выберете «Конструктор тизеров», перейдите на вкладку «Блоки тизеров» затем нажмите на кнопку «Новый»

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

Для этого кликните по вкладке «Группы тизеров» и отметьте галочкой нужную вам группу.

После выбора нужных тизерных объявлений, перейдём к настройке созданного блока. Вкладка «Общие настройки» позволяет задать варианты размещения тизеров внутри блока и расположения текста относительно картинки. В поле «Название конфигурации» нужно ввести название для нового блока. В поле «Описание конфигурации» можно оставить заметку к блоку.

Рассмотрим следующие варианты:

1) Размещение в линию, текст справа от картинки (По горизонтали – 4, по вертикали – 1)

2) Размещение колонкой, текст справа от картинки (По горизонтали – 1, по вертикали – 4)

3) Размещения в два ряда, текст под картинкой (По горизонтали – 2, по вертикали – 2)

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

Рассмотрим вкладку «Блок объявлений». Она позволяет задать ширину для блока тизеров, добавить рамку и выбрать фон для внутреннего отступа.

Ширина для блока объявлений задается в пикселях в поле «Ширина», по необходимости можно указать внутренний отступ от границы блока к тизерным объявлениям или к рамке, если такова задана, и залить нужным фоновым цветом (на примере красный фоновый цвет «#ff0000»).

Тизерный блок можно взять в рамку, выбрав её толщину (в пикселях), тип рамки и указав её цвет (на примере чёрный цвет «#000000»). Цвет можно задать кодом или выбрать из палитры нажатием на квадрат цвета.

Теперь перейдём на вкладку «Объявления», она позволяет задать внутренний отступ (в пикселях) каждого из объявлений в тизерном блоке от внешнего отступа, если он задан, если нет, то от границ тизерного блока в целом.

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

Для выделения объявления в блоке при наведении курсора нужно поставить галочку для «Использовать стиль по наведению», указать тип (сплошная, точка, пунктир) и выбрать нужный цвет.

Для изменения фона при наведении курсора на объявление в блоке (первый пример), нужно поставить галочку для «Использовать стиль по наведению» и задать «Фоновый цвет при наведении», выбрав из палитры цвета. Чтобы задать масштабирование для объявления, нужно поставить галочку для «Масштабирование картинки по наведению (:hover)», тогда объявление будет увеличиваться при наведении (пример второй).

Вкладка «Картинка» позволяет выбрать нужный формат для изображения (соотношение сторон), в ней можно задать ширину картинки относительно объявления в процентном соотношении переместив ползунок вправо/влево или задав конкретное значение, прописав его числом.

Для картинки тизерного объявления можно задать максимальное расширение поставив галочку для «Использовать Максимальную ширину картинки» и указать её ниже в пикселях, также по необходимости увеличить отступ картинки относительно текста объявления (можно выбрать от 1 до 10 пикселей).

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

Чтобы задать масштабирование для картинки, нужно поставить галочку для «Масштабирование картинки по наведению (:hover)», тогда картинка будет увеличиваться как на первом примере. Для того, чтобы границы картинки при масштабировании не изменялись, нужно поставить галочку для «При масштабировании не меняются границы картинки» (пример 2).

Отредактировать заголовок, текст, а также добавить мотивирующий текст можно во вкладке «Текст», разберём её подробнее.

Чтобы изменить размер шрифта для заголовка, выберете значение в пикселях в поле «Размер шрифта (px)», можно задать нужный для него цвет, выбрав из палитры цвета в графе «Цвет текста». Ниже под размером можно задать гарнитур шрифта.

Текст заголовка можно выделить при наведении курсора мыши на область тизерного объявления. Для этого нужно разрешить «Использовать стиль по наведению», применить изменения позволяется как для гарнитуры текста, так и цвета. Когда курсор будет наведён на одно из тизерных объявлений, текст заголовка изменит цвет или метод отображения (гарнитур), смотря какие изменения были внесены. Также есть возможность выровнять текст заголовка «по левому краю» и «по центру», для выбора нужно кликнуть по соответствующему значку.

Аналогичные изменения можно вносить и к тексту тизерного объявления.

Для добавления мотивирующего текста нужно поставить галочку для «Добавлять в объявления». В графе «Текст» можно выбрать текст с уже имеющихся вариантов или задать свой (для этого выбрать «Свой текст» и прописать его рядом в графе). Что бы использовать текст, как кнопку, поставьте галочку для «Использовать кнопку», её можно выровнять по горизонтали, относительно к тексту.

Также для кнопки есть возможность изменения цвета фона, для этого нужно выбрать желаемый из палитры, её можно взять в рамку, указав количество пикселей в графе «Толщина рамки» и задав цвет в графе ниже. При выборе стиля по наведению, фоновый цвет кнопки будет изменён, когда курсор мыши наведён на область кнопки, на тот, который задан в графе «Стиль по наведению». По желанию кнопку можно закрепить внизу объявления, поставив галочку для «Фиксация внизу объявления».

Чтобы изменить положение кнопки в тизерном объявлении, нужно задать необходимое количество пикселей для отступа в графе «Верхний отступ» и «Нижний отступ» для ей точного расположения внутри объявления. «Верхний отступ» – это расстояние от текста или заголовка (если в объявлении текст отсутствует) к самой кнопке, а нижний – от кнопки до границы тизерного объявления.

Чтобы изменить размер шрифта для кнопки, выберете значение в пикселях в поле «Размер шрифта (px)», можно задать нужный для него цвет, выбрав из палитры цвета в графе «Цвет текста». Ниже под размером можно задать гарнитур шрифта. По необходимости текст кнопки можно выделить, при наведении курсора мыши. Для этого нужно поставить галочку для «Использовать стиль по наведению», применить изменения позволяется как для гарнитуры текста, так и цвета. Когда курсор будет наведён на кнопку, её текст изменит цвет или метод отображения (гарнитур), смотря какие изменения были внесены. Так же есть возможность горизонтального выравнивания текста внутри кнопки, для этого нужно кликнуть по соответствующему значку.

Не забываем нажать на кнопку сохранить.

Была ли эта статья полезна?