Промо-карточки как в демо
Здравствуйте, прочитал статью о промо карточках. К сожалению я не дизайнер и сам не знаю как лучше настроить промо карточки в разделе самое интересное. Скиньте пожалуйста коды которые вставлять в (Подзаголовок промо-карточки) всех четырех промо карточек которые в оригинальной теме, которую вы сами делали. Я хочу и идеале сначала именно так как было все) а потом уже что то менять. Спасибо.
Добавить ответ
и подскажите код цвета на фоне так чтобы цвет был именно такой)
фон промокарточки
еще подскажите размер png картинок чтобы так же вписывались в промо карточку красиво как у вас
Здравствуйте!
В первую очередь промо-карточки нужно переключить в режим Изображение на сплошном фоне.
Размеры промо-карточек
Также в демо-версии я использую высоту промо-карточек равную 280 пикселям, и высоту блока с изображением равную 160 пикселям.
Чем больше разница между первым и вторым значением, тем больше текста помещается в промо-карточке.
Изображения промо-карточек
В режиме Изображение на сплошном фоне изображение промо-карточки должно быть без фона, в формате .png.
Либо с тем же фоном, что и используется в настройке промо-карточки. Первая промо-карточка (женщина в купальнике) как раз используется в данном режиме. Фон изображения белый (#FFFFFF) и в настройке промо-карточки также используется белый (#FFFFFF).
Размер картинок может быть любым – изображения будут вписываться в блок.
Однако, здесь важно соблюдать балланс между разрешением изображения и его размером. Т.к. на большие изображения гугл будет ругаться, что они сильно большего размера, чем умещаются в блоке на сайте. Даже если вы загрузите изображение шириной 1920px (такого делать не нужно), оно всё равно будет отображаться по ширине пикселей в 250.
Поэтому выбирать нужно размер по ширине не больше 250px.
По этой ссылке можно скачать изображения 4-х промо-карточек из демо-версии.
Текст промо-карточек
Первая промо-карточка: там нет html-тегов. Всё просто.
Цвет фона: #FFFFFF, цвет текста: #51536A
Вторая промо-карточка:
Цвет текста: #FFFFFF, цвет фона: #24AEED
Третья промо-карточка
Обратите внимание! Здесь используется атрибут style="color:#6de476;" c зелёным цветом для выделения слова.
Четвёртая промо-карточка
Цвет текста: #FFFFFF, цвет фона: #D74444.
большое спасибо!
еще можно один вопрос. как текст выровнять по середине? у меня получается слева.
Чуть ниже настроек режимов промо-карточек:
Ещё забыл указать, что к заголовкам промо-карточек применён дополнительный шрифт.
Код селекторов из поля:
помогите найти ответ, пытаемся загрузить один длинный баннер - какой все таки размер баннера должен быть 1920х310px , но вы не рекомендует а поле под баннер именно таких размеров?
Загрузили баннер размером 1920х310px но он больше поля.
Сделали баннер меньше, но получили обратный эффект-баннер снова больше поля но теперь стал размытым(растянутым) .
У вас максимальная ширина блока под баннер – 1366px.
Но суть в том, что на более узкой ширине баннер будет образаться.
Вам нужно либо загружать в качестве баннера картинку с красивым фоном, а текст наносить через описание промо-карточки.
Либо переключиться в другой режим отображения промо-карточек. Тогда баннеры будут масштабироваться.
Если мы делаем масштабируемое изображение , то каких размеров баннер нам необходимо загрузить что бы он влился без обрезания?
Сейчас при данной настройке наш баннер размером 870х310px сползает в лево и с правой стороны у нас остается пространство.
1366 px в ширину.