---
url: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D1%81%D1%82%D0%B8%D0%BB%D1%96-%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BA'
title: 'Стилізуйте свої картки | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:25:36+00:00'
updated: '2026-10-24T20:08:10+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Надайте своїм карткам вигляд, що пасує вашому сайту: кольорову схему з Type картки, заокруглені кути й тінь з панелі Style. Наприкінці ви матимете картку, яку можна повторювати в рядку для функцій, членів команди або цін. Як спершу розмістити картку на сторінці, див. Додавання картки.'
tags:
  - 'Design guides'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T20:08:10+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Стилізуйте свої картки'
      description: 'Надайте своїм карткам вигляд, що пасує вашому сайту: кольорову схему з Type картки, заокруглені кути й тінь з панелі Style. Наприкінці ви матимете картку, яку можна повторювати в рядку для функцій, членів команди або цін. Як спершу розмістити картку на сторінці, див. Додавання картки.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T19:25:36+0000'
      dateModified: '2026-10-24T20:08:10+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D1%81%D1%82%D0%B8%D0%BB%D1%96-%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BA'
      articleSection: 'Посібники з дизайну'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D1%81%D1%82%D0%B8%D0%BB%D1%96-%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BA'
      description: 'Надайте своїм карткам вигляд, що пасує вашому сайту: кольорову схему з Type картки, заокруглені кути й тінь з панелі Style. Наприкінці ви матимете картку, яку можна повторювати в рядку для функцій, членів команди або цін. Як спершу розмістити картку на сторінці, див. Додавання картки.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/uk'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: uk
---
[Help Center](/uk/hc)/[Documentation](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F) /[Вивчення DXPR Builder](/uk/hc/documentation/learn-dxpr-builder) /[Створення сторінок](/uk/hc/documentation/learn-dxpr-builder/build) /[Стилізація елементів](/uk/hc/documentation/learn-dxpr-builder/element-settings) /[Посібники з дизайну](/uk/hc/documentation/learn-dxpr-builder/design/overview) # Стилізуйте свої картки.

 Вивчення DXPR BuilderСтворення сторінокСтилізація елементівПосібники з дизайну

   ## In this guide

 Related guides

- [Додавання картки](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%BA%D0%B0%D1%80%D1%82%D0%BA%D0%B0)
- [Змусьте елементи реагувати на наведення](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B5%D1%84%D0%B5%D0%BA%D1%82%D0%B8-%D0%BD%D0%B0%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%BD%D1%8F)
- [Використовуйте кольори свого бренду](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%BA%D0%BE%D0%BB%D1%8C%D0%BE%D1%80%D0%B8-%D1%82%D0%B0-%D0%B1%D1%80%D0%B5%D0%BD%D0%B4)

Надайте своїм карткам вигляд, що пасує вашому сайту: кольорову схему з **Type** картки, заокруглені кути й тінь з панелі **Style**. Наприкінці ви матимете картку, яку можна повторювати в рядку для функцій, членів команди або цін. Як спершу розмістити картку на сторінці, див. [Додавання картки](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%BA%D0%B0%D1%80%D1%82%D0%BA%D0%B0).

Відео повторює кроки нижче: воно надає картці світлого вигляду, круглих кутів і м’якої тіні.

  ## Стилізація картки

1. Наведіть курсор на картку, відкрийте **More** і виберіть **Settings**.
2. У розділі **Type** виберіть **Light**.
3. Відкрийте панель **Style**.
4. Установіть **Border radius** у значення 8.
5. Установіть **Drop shadow** у значення 2.
6. Натисніть **Save**.

## Що ви бачите

Картка має світлий фон, заокруглені кути й м’яку тінь. Її смуга **Header** розташована вгорі, її **Title** відкриває тіло, а додані всередину елементи йдуть нижче.

Параметр **Type** фарбує всю картку, а не лише шапку. **Primary**, **Secondary**, **Success**, **Info**, **Warning**, **Danger** і **Dark** заповнюють картку цим кольором теми й роблять текст білим. **Light** дає світлий фон зі звичайним текстом. **Default** залишає картку вашій темі.

## Налаштування

| Налаштування | Де | Що робить |
|---|---|---|
| **Header** | **General** | Текст у смузі вгорі картки; залиште порожнім, щоб смуги не було |
| **Title** | **General** | Заголовок угорі тіла картки |
| **Type** | **General** | Кольорова схема всієї картки; типово **Default** |
| **Background**, **Font color** | **Style** | Ваші власні кольори, коли **Type** має значення **Default** |
| **Border radius** | **Style** | Заокруглені кути, у пікселях |
| **Drop shadow** | **Style** | Глибина, від 1 до 5 |
| **Border** (блокова модель), **Border style**, **Border color** | **Style** | Рамка з одного або кількох боків |

## Шаблони карток

- **Плоска картка**: **Border style** **Solid**, світлий **Border color**, **Border radius** 4, без тіні.
- **Піднята картка**: **Drop shadow** 2, **Border style** **None**, **Border radius** 8.
- **Виділена картка**: установіть лівий бік **Border** у блоковій моделі в значення 4, **Border style** **Solid** і акцентний **Border color**.
- **Картка, що піднімається**: **Drop shadow** 1 у **Style** і 4 у **Hover style**; див. [Змусьте елементи реагувати на наведення](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B5%D1%84%D0%B5%D0%BA%D1%82%D0%B8-%D0%BD%D0%B0%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%BD%D1%8F).

## Картки в ряд

Для сітки карток функцій, членів команди або цін:

1. Додайте рядок і виберіть макет із трьома або чотирма рівними колонками.
2. Додайте картку до кожної колонки й надайте кожній картці однакові значення **Type** і **Style**.
3. Відкрийте меню **More** рядка, виберіть **Settings** і ввімкніть **Equal-height columns**.

Колонки вирівнюються, але кожна картка лишається заввишки зі свій вміст. Тримайте текст кожної картки приблизно однакової довжини, щоб картки закінчувалися на однаковій висоті. Для таблиці цін виділіть рекомендований план іншим **Type** або глибшим **Drop shadow**.

## Якщо ви не бачите стилю

- **Background або Font color на панелі Style не діють.** **Type**, відмінний від **Default**, установлює кольори картки класами теми, які перемагають панель **Style**. Установіть **Type** у значення **Default** і виберіть власні кольори.
- **Білий текст на кольоровій картці важко читати.** Кольори **Warning** і **Info** багатьох тем бліді, а ці типи завжди встановлюють білий текст. Виберіть темніший **Type** або **Light**, який зберігає звичайний колір тексту.
- **Тінь не показується.** **Drop shadow** має значення 0, що означає відсутність тіні. Установіть 1 або більше.

## Що далі?

- [Додавання картки](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%BA%D0%B0%D1%80%D1%82%D0%BA%D0%B0): додайте картку й наповніть її елементами.
- [Змусьте елементи реагувати на наведення](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B5%D1%84%D0%B5%D0%BA%D1%82%D0%B8-%D0%BD%D0%B0%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%BD%D1%8F): нехай картки піднімаються, коли відвідувачі наводять на них курсор.
- [Використовуйте кольори свого бренду](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%BA%D0%BE%D0%BB%D1%8C%D0%BE%D1%80%D0%B8-%D1%82%D0%B0-%D0%B1%D1%80%D0%B5%D0%BD%D0%B4): тримайте кольори карток у злагоді з рештою сайту.