Розділ «Налаштовувані картки» в конструкторі сайтів призначений для тих, хто хоче легко та швидко представити ключову інформацію про свої продукти, послуги або відгуки клієнтів. Ці блоки дозволяють додавати візуально привабливі картки на сторінку сайту, які можна налаштувати відповідно до потреб вашого бізнесу.
Незалежно від того, чи хочете ви надати детальний опис курсу, відгуки задоволених клієнтів або рекомендації щодо використання ваших послуг, «Налаштовувані картки» та «Картки курсів» допоможуть виділити інформацію та зробити її більш доступною та зручною для відвідувачів сайту.
Як додати блок?
Щоб додати розділ «Налаштовувані картки», натисніть на «+» у режимі редагування вашого сайту:
Далі знайдіть розділ «Налаштовувані картки» в меню, що відкриється, і натисніть на нього, щоб додати розділ на сайт. Розділ буде додано на сайт, і для вас відкриється меню налаштувань вмісту:
Як додати картку?
У меню редагування розділу «Налаштовувані картки» ви побачите різні розділи для налаштувань: стиль карток, зображення, кнопки тощо.
Для вашої зручності ви можете спочатку додати картки, щоб побачити, як налаштування стилю застосовуються до карток.
Для цього прокрутіть вниз у меню налаштувань вмісту та знайдіть кнопку «Додати картку»:
Натиснувши кнопку «Додати картку», ви побачите налаштування картки з порожнім текстовим полем, панеллю для завантаження зображення для картки та для іконки кнопки, а також для тексту самої кнопки:
Поля налаштувань картки є необов'язковими: це означає, що ви можете пропустити, наприклад, завантаження зображення для самої картки або для іконки кнопки, не вставляючи текст — все на ваш розсуд.
Якщо, наприклад, вам не потрібна кнопка з посиланням у картці, залиште поля «Назва кнопки» та «Посилання» порожніми: тоді кнопки не відображатимуться в картці.
Існують різні налаштування для тексту картки, подібно до будь-якого текстового редактора, де ви можете налаштувати розмір шрифту, контур шрифту, колір, виділення, а також додати посилання тощо.
Для цього виділіть текст (частину тексту) та застосуйте необхідні налаштування до тексту:
Після того, як ви повністю налаштували першу картку, додайте наступну: для цього натисніть кнопку «Додати картку», яка знаходиться під панеллю налаштувань першої доданої картки:
Налаштування карток
Картки налаштовуються в єдиному стилі: всі налаштування, які ви використовуєте в цьому розділі, будуть застосовані до всіх карток у цьому ж розділі.
Стиль карток
У конструкторі сайтів Mavibot доступні два стилі для карток: простий та у вигляді слайдера.
При використанні простого стилю всі картки відразу відображатимуться на одній сторінці розділу сайту:
При використанні стилю «Слайдер» картки будуть у вигляді каруселі, що додасть більше динаміки сайту:
Для стилю слайдера ви можете вибрати, де будуть розташовані стрілки та точки картки:
Стрілки можуть розташовуватися всередині слайдера, зовні або бути прихованими (наприклад, якщо ви встановили таймер для автоматичного перегортання карток):
Точки також можуть розташовуватися всередині слайдера, зовні або бути прихованими.
Для автоматичного перегортання карток встановіть часовий інтервал відображення однієї сторінки:
Якщо значення таймера встановлено на 0, картки не будуть автоматично перегортатися.
Зверніть увагу!
Час встановлюється в мілісекундах, де одна мілісекунда дорівнює 0,001 секунди. Це означає, що якщо вам потрібно встановити 7 секунд, введіть значення в поле 7000.
Ви також можете вибрати тип картки:
Налаштування кольору для елементів картки
Щоб налаштувати картки під свій стиль, використовуйте налаштування кольору:
Налаштування кольору застосовуються до всіх карток одночасно. Якщо вам потрібно, щоб колір тексту був різним у кожній картці, використовуйте налаштування в текстовому полі.
Для налаштування кольору доступна широка палітра кольорів:
І ви можете застосувати налаштування кольору до будь-якого елемента картки.
Налаштування меж та відступів
- Кількість карток у рядку - текстове поле, яке допоможе встановити необхідну кількість карток в одному рядку (сторінці).
- Відступи - поля для введення числових значень, які допоможуть збільшити або зменшити горизонтальні/вертикальні поля між картками, а також поля всередині карток,
Ви можете встановити загальне числове значення для відступу всередині карток або, натиснувши на шестерню в правому кутку рядка, встановити окреме значення для верхньої, нижньої, лівої та правої меж:
Орієнтація картки
Орієнтація картки може бути горизонтальною, а також вертикальною.
Вирівнювання
Може бути по центру, по лівому або правому краю.
Налаштування тіні
Допоможе додати глибину карткам і виділити їх на фоні розділу/сторінки.
Налаштування зображення
Налаштування зображення також застосовуються до всіх зображень, які ви додали до картки.
У налаштуваннях зображення потрібно встановити:
а) ширину зображення:
Поле приймає числове значення в пікселях, якщо не вказано, відображається автоматично відповідно до фактичної ширини зображення в пікселях.
б) висоту зображення:
Поле приймає числове значення в пікселях, якщо не вказано, відображається автоматично пропорційно до фактичної висоти зображення.
в) заокруглення:
Поле, яке приймає числове значення в пікселях, допомагає заокруглити кути зображення:
г) розмір зображення:
Налаштування застосовується, якщо необхідно заповнити/розтягнути/позиціонувати зображення відносно вказаної ширини та висоти для зображення.
д) прапорець «Зображення після тексту»
Якщо встановити прапорець, зображення буде розташоване під текстом у картці.
Як налаштувати кнопки
Текст, а також посилання на сторінку, на яку має натиснути відвідувач вашого сайту, налаштовуються в самій картці:
Також, окрім тексту та посилання, ви можете встановити іконку для кнопки, завантаживши зображення в картку:
Щоб встановити колір тексту та фону кнопки, використовуйте налаштування тут:
Далі ви можете налаштувати розмір, ширину та відступи для кнопки:
- Ширина кнопки - поле, яке приймає числове значення як у пікселях, так і у відсотках:
- Вирівнювання кнопки - допомагає встановити кнопку в картці відносно правого або лівого краю, а також центру.
- Радіус межі кнопки - поле, яке приймає числове значення в пікселях для заокруглення кутів кнопки:
- Ширина межі - поле, яке приймає числове значення в пікселях для встановлення ширини контуру кнопки:
- Зовнішній відступ
Допомагає налаштувати відступи для кнопки в картці відносно верхнього, нижнього, лівого та правого країв.
- Внутрішній відступ
Допомагає налаштувати відступи всередині кнопки.
- Іконка
Якщо ви завантажили іконку на кнопку в картці, то іконку можна налаштувати під розмір:
А також встановити положення іконки відносно тексту ліворуч або праворуч:
- Тінь для кнопки
Тінь можна встановити не тільки для картки, але й окремо для кнопки. Для цього достатньо знайти в налаштуваннях кнопки випадаюче поле з назвою «Тінь» і вибрати ступінь інтенсивності тіні: легка або сильна:
- Анімація кнопки
Допомагає привернути увагу клієнтів (користувачів сайту) до цільової дії на кнопці та додати динаміки сайту:
1) анімація кнопки «спалах»:
2) анімація кнопки «пульсація»:
Готово!
Тепер ви знаєте, як створювати та налаштовувати картки на своєму сайті з нуля.