Высота слайдера на главной
Добрый день! В слайдере на главной сначала отображаются промокарточки, а затем список товаров. Все супер, но в момент смены промокарточек на список товара происходит увеличение слайдера по высоте и все, что ниже слайдера смещается немного вниз и если в этот момент кликнуть по категории товара слева, то промахиваешься. Очень неприятно. Как исправить?
Добавить ответ
Создается впечатление, что сайт прыгает. В настройках не нашел ответа
Посмотрел ваш сайт... не сказал бы, что, прям, прыгает. Так... чуть-чуть "подпрыгивает". =)
Разница 30px.
Высота слайдов с товарами на вашем сайте равна 340px.
Т.е. вам нужно с 310 поменять на 340.
Вижу, что вы уже попробовали изменить высоту.
Только сейчас обратил внимание, что у вас слайдер промо-карточек стоит в режиме масштабирования.
В этом режиме высота слайдера не регулируется, т.к. всё зависит от пропорций изображений. Ведь в данном режиме самое главное – это уместить изображение на экране полностью. Т.е. на узких экранах оно будет широким, но при этом маленьким в высоту, а на широких экранах – нормальным в высоту.
В вашей ситуации два варианта:
1. Изменить размер самих изображений, сделав так, чтобы высота у них была 340 px.
Но на узком экране эффект "прыганья" всё равно останется, т.к. (опять же повторюсь) в данном режиме изображение должно уместиться полностью, т.е. его нельзя обрезать для того, чтобы выровнять высоту. Из-за этого оно масштабируется и изменяет высоту в сторону уменьшения.
2. Выбрать режим с обрезкой по бокам, подобрать красивые фотографии ваших товаров или просто красивый фон, а сами надписи добавить через текст промо-карточек.
Режимы выбираются здесь:
Подгоняйте высоту промо-карточек под высоту слайдов с товарами.
Здравствуйте, Владимир.
Подскажите, почему в слайдере на фото, текст получается размытым, а если я открываю на компьютере это фото, то текст четкий (текст написан в графическом редакторе на фото). Также попробовал сделать режим отображения промо-карточек "масштабируемым", текст стал отображаться четко. Я так понимаю, что в режиме фиксированной высоты слайдера он как-то изменяется, если размер менее какого-то заданного, только я не могу понять в какую сторону (растягивается или сжимается). Размер фото делаю 960х310 (слайдер внутри контента на главной). Есть какие-то универсальные размеры слайдера, чтобы сделать под них промо-карточки и на любом устройстве они были бы видны четко? Вот ссылка - https://equipmentforactivity.r... (для примера промо-карточка одна, последняя).
Спасибо.
Здравствуйте, Антон!
Потому что в обычном режиме на изображение промо-карточки накладывается фоновый слой, который указывается в настройках промо-карточки.
Чтобы его отключить, выставьте в соответствующем поле вместо кода цвета – none.
"Масштабируемый" режим был как раз придуман по просьбе одного из покупателей, который размещал фотографии точно так же как и вы – с нанесённым текстом прямо на изображение в графическом редакторе.
В обычном режиме изображения "обрезаются" по-центру т.е. "обрезаются" края с одной и с другой стороны.
Если вы хотите использовать изображения с нанесённым текстом, то вам нужно использовать мастабируемый режим.
Если вы хотите использовать обычный (с обрезкой) режим, то я рекомендую добавлять изображения без текста и чтобы ключевой сюжет изображения был по середине. А текст поверх изображения уже наносить через поля промо-карточки.
Только в таком случае цвет фона лучше всё-таки задать, т.к. в некоторых случаях он сливается с цветом изображения и становится нечитаемым.
В вашем случае (для режима с обрезкой) ширина изображения составляет примерно 1070px.
Спасибо за ответ. А можно ли там, в полях промо-карточки, использовать html-теги, т.к. текст мне нужен разного цвета и размера? И можно ли его там можно "двигать" по горизонтали?
И главный вопрос - если текст писать через поля промо-карточки, то он на всех экранах будет читаемым и видным полностью?
Еще раз благодарю за пояснения.
Антон.
Можно. Я и сам так делаю в демо-версиях. Обратите внимание на мой последний скриншот – поле "подзаголовок промо-карточки".
Если только через встроенные атрибуты стилей. Атрибут style я имею в виду.
Да. В демо-версии можете проверить.
Попробовал убрать код цвета в поле задающем цвет фона в промо-карточке и написать там "none", ничего не изменилось, текст на фото по прежнему размыт. Скорее всего происходит растягивание/сжатие изображения, по другому объяснить не могу. Есть ли какие-то конкретные размеры фото для слайдера, которые точно не будут изменяться при загрузке?
Второй момент, почему-то в режиме "фиксированной высоты с обрезкой по краям" при переключении промо-карточки с товаром на промо-карточку с фотографией происходит скачок высоты слайдера? Т.е. сайт дергается. Разве промо-карточки с товарами не подгоняются под размер слайдера, заданный в настройках темы? (у меня стоит минимальная высота слайдера 310)
Я не вижу никаких расхождений в отображении текста в слайдере.
Что в слайдере, что в отдельном изображении – везде одинаково.
Вот в слайдере:
Вот исходное изображение:
Я уже писал. В вашем случае: 1070px в ширину и 310 в высоту.
Но в режиме обрезки края фотографии будут обрезаться.
В режиме масштабирования – пропорционально изменяться.
Там указана минимальная высота.
Если информация о товаре не вмещается в слайд, то слайд увеличивается в высоту.
Если сделать высоту фиксированной, то на разной ширине экрана (тем более на мобильных устройствах) часть информации о товаре будет выходить за пределы слайда и её просто не будет видно.
Замерьте высоту слайда с максимальной высотой и выставьте эту высоту в настройках темы в качестве минимальной.
Для замера высоты можно воспользоваться вот этим расширением для Chrome.
Попробовал вставлять текст в слайдер в полях промо-карточек, на компьютере получается хорошо, но на мобильных устройствах текст расползается и фото не влезает в экран. Пример на компе и на мобильном устройстве на скринах ниже.
Как выглядит на компе:
Как выглядит на смартфоне:
Я видимо что-то не понял, как же сделать так, чтобы и на десктопах и на смартфонах фото в слайдере отображались корректно?
Вам лучше использовать режим масштабирования и использовать привычный метод работы с изображениями.
Концепция режима с обрезкой – это красивая фотография + отформатированный текст через поле промо-карточки.
Заходите на unsplash.com ищите там фото по слову backpack. Выбираете красивую фотографию, без большого кол-ва деталей. Заливаете в промо-карточку, и пишите текст промо-карточки.
Я вижу это примерно так:
Можете "пощупать" эту промо-карточку на демо-сайте (второй слайд).
Нет, это вообще не вариант, т.к. для гармоничного отображения фото в слайдере на мобильном устройстве, оно должно быть квадратным, а при этом на десктопе оно либо просто огромное (высотой 500), либо маленькое и с левой стороны (при высоте в пределах комфортного уровня 310-350 px).