Секция "Настраиваемые карточки"
Last updated
Was this helpful?
Last updated
Was this helpful?
Секция "Настраиваемые карточки" в конструкторе сайтов создана для тех, кто хочет легко и быстро представить ключевую информацию о своих продуктах, услугах или отзывах клиентов. Данные блоки позволяют добавить на страницу сайта визуально привлекательные карточки, которые можно настроить под нужды вашего бизнеса.
Независимо от того, хотите ли вы представить подробное описание курса, отзывы довольных клиентов или рекомендации по использованию ваших услуг, "Настраиваемые карточки" и "Карточки курсов" помогут выделить информацию и сделать её более доступной и удобной для посетителей сайта.
Чтобы добавить секцию "Настраиваемые карточки", нажмите на "+" в режиме редактирования вашего сайта:
Далее найдите в открывшемся меню секцию "Настраиваемые карточки" и кликните на него, чтобы секция добавилась на сайт. Секция будет добавлена на сайт, а для вас откроется меню настроек контента:
В меню редактировании секции "Настраиваемые карточки" контента вы увидите различные разделы для настроек: и стиля карточек, и изображений, кнопок и пр.
Для вашего удобства можно сначала добавить карточки, чтобы увидеть, как настройки стиля применяются к карточкам.
Для этого пролистните вниз в меню настроек контента и найдите кнопку "Добавить карточку":
Кликнув по кнопке "Добавить карточку", вы увидите настройки для карточки с пустым полем для текста, плашкой для загрузки изображения для карточки и для иконки кнопки, а также для текста самой кнопки:
Поля настроек карточки не являются обязательными: то есть вы можете пропустить, например, загрузку изображения для самой карточки или для иконки кнопки, не вставлять текст - все по вашему усмотрению.
Если, например, вам не нужна кнопка с ссылкой в карточке, оставьте поля "Название кнопки" и "Ссылка" пустыми: тогда кнопки не будут отображены в карточке.
Для текста карточки существуют различные настройки, аналогично любому текстовому редактору, где вы можете настроить размер шрифта, его начертание, цвет, выделение, а также добавить ссылку и прочее.
Для этого выделите текст (часть текста) и примените необходимые настройки к тексту:
После того, как вы полностью настроили первую карточку, добавьте следующую: для этого нажмите на кнопку "Добавить карточку", которая расположена ниже плашки настроек первой добавленной карточки:
Карточки настраиваются в едином стиле: все настройки, которые вы используете в данном разделе, будут применены ко всем карточкам одной секции.
В конструкторе сайтов Сейлбот существует два стиля для карточек: простой и в виде слайдера.
При применении простого стиля, все карточки будут сразу отображены на одной странице секции сайта:
При применении стиля "Слайдер" карточки будут в виде карусели, тем самым вы добавите больше динамичности сайту:
Для стиля слайдер можно выбрать, где будут расположены стрелки и точки карточки:
Стрелки могут быть расположены внутри слайдера, снаружи или скрыты (например, если вы выставите таймер для автоматического перелистывания карточек):
Точки так же могут быть расположены внутри слайдера, снаружи или скрыты:
Чтобы карточки перелистывались автоматически, задайте временной интервал показа одной страницы:
Если значения таймера установлено 0, то автоматически карточки перелистываться не будут.
Обращаем внимание!
Время задается в миллисекундах, где одна миллисекунда равна 0.001 секунды. Это значит, если вам необходимо задать 7 секунд, то вводите значение в поле 7000.
Также можно выбрать вид карточки:
а) стандартный вид без заголовка внутри карточки:
б) вид с заголовком внутри карточки:
Чтобы кастомизировать карточки под свой стиль, воспользуйтесь настройками цвета:
Настройки цвета применяются ко всем карточкам одновременно. Если вам необходимо, чтобы цвет текста был разным в каждой карточке, то воспользуйтесь настройками в текстовом поле.
Для настройки цвета доступна обширная цветовая палитра:
А применить настройки цвета можно к любому элементу карточки:
Количество карточек в строке - текстовое поле, которое поможет установить необходимое количество карточек в одну строку (страницу):
Отступы - поля для ввода числовых значений, которые помогут увеличить или уменьшить горизонтальные/вертикальные отступы между карточек, а также отступы внутри карточек,
Для отступа внутри карточек можно установить общее числовое значение либо, кликнув на шестеренку в правом углу строки, установить для верхней, нижней, левой и правой границы отдельное значение:
Ориентация карточки может быть горизонтальной:
А также вертикальной:
а) по центру:
б) по левому краю:
в) по правому краю:
Поможет придать карточкам глубины и выделить их на фоне секции/страницы.
а) без тени:
б) легкая тень:
в) сильная тень:
Настройка изображений также применяется относительно всех изображений, которые вы добавили в карточку:
В настройках изображения необходимо задать:
а) ширину изображения:
Поле принимает числовое значение в пикселях, если не задано, то отображается автоматически соразмерно настоящей ширине изображения в пикселях.
б) высота изображения:
Поле принимает числовое значение в пикселях, если не задано, то отображается автоматически соразмерно настоящей высоте изображения.
в) скругление:
Поле, принимающее числовое значение в пикселях, - помогает скруглить углы изображения:
г) размер изображения:
Настройка применяется, если необходимо заполнить/растянуть/поместить изображение относительно заданных ширины и высоты для изображения.
д) чекбокс "Картинка после текста"
Если поставить галочку, то изображение будет расположено под текстом в карточке:
Текст, а также ссылка на страницу, по клику на которую должен перейти ваш посетитель сайта, настраивается в самой карточке:
Также помимо текста и ссылки вы можете установить иконку для кнопки, загрузив изображение в карточке:
Чтобы установить цвет текста и фона кнопки, воспользуйтесь настройками здесь:
Далее можно настроить размер, ширину, отступы для кнопки:
Ширина кнопки - поле, принимающее числовое значение как в пикселях, так и процентах:
Выравнивание кнопки - поможет установить кнопку в карточке относительно правого или левого края, а также центра:
а) по центру:
б) по левому краю:
в) по правому краю:
Скруление кнопки - поле, принимающее числовое значение в пикселях, для скругления углов кнопки:
Ширина обводки - поле, принимающее числовое значение в пикселях, для установки ширины обводки кнопки:
Отступы снаружи
Поможет настроить отступы для кнопки в карточке относительно верхнего, нижнего, левого и правого края:
Отступы внутри кнопки
Поможет настроить отступы внутри кнопки:
Иконка
Если вы загрузили иконку в кнопку в карточке, то к иконку можно настроить по размеру:
А также установить расположение иконки относительно текста слева или справа:
Тень для кнопки
Тень можно установить не только для карточки, но и отдельно для кнопки. Для этого достаточно в настройках кнопки найти выпадающее поле с названием "Тень" и выбрать степень интенсивности тени: легкую или сильную:
Анимация кнопки
Поможет привлечь внимание клиентов (пользователей сайта) к целевому действию по кнопке и добавит динамики сайту:
1) flash анимация кнопки:
2) ripper анимация кнопки:
Готово! Теперь вы знаете, как создавать и настраивать карточки на своем сайте с нуля.
