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