---
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%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%BD%D1%8F'
title: 'Додавання зображення | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:58:40+00:00'
updated: '2026-10-24T20:08:10+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Додайте фото або ілюстрацію, що заповнює свій стовпець і масштабується разом з екраном.'
tags:
  - 'Text and media'
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: 'Додайте фото або ілюстрацію, що заповнює свій стовпець і масштабується разом з екраном.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T19:58:40+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%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%BD%D1%8F'
      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%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%BD%D1%8F'
      description: 'Додайте фото або ілюстрацію, що заповнює свій стовпець і масштабується разом з екраном.'
      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/elements) /[Текст і медіа](/uk/hc/documentation/learn-dxpr-builder/elements/text-and-media) # Додавання зображення.

 Вивчення 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%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0-%D1%81%D1%82%D0%B8%D0%BB%D1%8E)

Додайте фото або ілюстрацію, що заповнює свій стовпець і масштабується разом з екраном.

## Додавання зображення

Відкрийте свою сторінку, увійшовши до сайта: елементи керування конструктором з’являються, коли ви наводите вказівник на область вмісту. Основи показує сторінка [Ваша перша сторінка](/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%BF%D0%BE%D1%87%D0%B0%D1%82%D0%BE%D0%BA-%D1%80%D0%BE%D0%B1%D0%BE%D1%82%D0%B8/%D0%BF%D0%B5%D1%80%D1%88%D0%B0-%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%B0).

1. Наведіть вказівник на стовпець і натисніть **+** на його панелі керування або натисніть **Додати елементи** на порожній сторінці. Відкрийте вкладку **Вміст** і натисніть **Зображення**. Воно з’явиться вгорі стовпця, і відкриється діалог його налаштувань.
2. У розділі **Зображення** натисніть **Вибрати зображення**. У **Браузері медіа** за бажанням відфільтруйте за назвою, позначте фото й натисніть **Вставити вибране**.
3. Натисніть заголовок **SEO**, щоб розгорнути його. Замініть текст у полі **Атрибут Alt** коротким описом фото.
4. Натисніть **Зберегти** у діалозі. Потім натисніть **Зберегти** на панелі інструментів угорі області вмісту, щоб зберегти сторінку.

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

Стандартна **Ширина зображення** становить 100%. Програми читання з екрана озвучують ваш альтернативний текст. Щоб перевірити масштабування, задайте для параметра **Режим перегляду** значення **Попередній перегляд** і звузьте вікно браузера. Відвідувачі побачать ваші зміни після збереження й публікації.

## Налаштування зображення

Наведіть вказівник на елемент і відкрийте **Більше > Налаштування** на його панелі керування. Параметри:

- **Зображення:** виберіть зображення з браузера медіа чи файлів вашого сайта, завантажте файл або вставте зовнішню URL-адресу.
- **Ширина зображення:** ширина CSS, наприклад `100%` або `300px`. Стандартно 100%.
- **Висота зображення:** фіксована висота, наприклад `400px`. Залиште порожньою, щоб зберегти пропорції фото.
- **Посилання зображення:** робить зображення клікабельним. Введіть URL-адресу або виберіть сторінку.
- **Ціль посилання зображення:** Те саме вікно або Нове вікно. Показується, коли ви додаєте посилання.
- **Атрибут Alt:** у розділі **SEO** опис для програм читання з екрана й пошукових систем.
- **Атрибут Title:** у розділі **SEO** додаткова інформація, що показується як підказка під час наведення.

## Завантаження зображень і швидкість сторінки

DXPR Builder автоматично керує завантаженням нових зображень, щоб сторінки залишалися швидкими, а вміст не стрибав. Зображення на початку сторінки й усередині вкладок, каруселей та біжучих рядків залишаються готовими до показу. Зображення нижче можуть завантажуватися, коли відвідувачі прокручують.

Зображення можуть надходити з вашої медіабібліотеки, завантажених файлів або зовнішніх URL-адрес. Дайте зображенням завантажитися в редакторі перед збереженням, щоб DXPR Builder міг зарезервувати потрібний обсяг місця. Заміна зображення оновлює його розміри, не змінюючи вибраного вами розміру показу.

Зображення, уже наявні на вашому сайті, автоматично не оновлюються. Швидкість сторінки також залежить від розміру файлів зображень та іншого вмісту. Перевірте свою опубліковану сторінку на вузьких і широких екранах.

## Якщо ви його не бачите

- **Зображення немає на вкладці «Вміст».** Ваш профіль користувача його приховує. Попросіть адміністратора увімкнути його в розділі [Профілі користувачів](/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%B0%D0%B4%D0%BC%D1%96%D0%BD%D1%96%D1%81%D1%82%D1%80%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D0%BF%D1%80%D0%BE%D1%84%D1%96%D0%BB%D1%96-%D0%BA%D0%BE%D1%80%D0%B8%D1%81%D1%82%D1%83%D0%B2%D0%B0%D1%87%D1%96%D0%B2).
- **Воно зникло після перезавантаження.** Сторінку не було збережено. Додайте його знову й натисніть **Зберегти** на панелі інструментів угорі області вмісту.
- **Елемент зображення порожній.** У полі **Зображення** не задано малюнка. Наведіть вказівник на елемент і відкрийте **Більше > Налаштування**, потім натисніть **Вибрати зображення**.
- **З’являється значок пошкодженого зображення.** Файл видалено або переміщено в медіабібліотеці. Наведіть вказівник на елемент і відкрийте **Більше > Налаштування**, приберіть вибір і виберіть нове зображення.
- **Зображення розтягнуте або стиснуте.** **Ширина зображення** і **Висота зображення** містять фіксовані значення, що не відповідають фото. Очистьте **Висоту зображення**, щоб відновити його пропорції.

## Що далі?

[Вкладка «Стиль»](/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%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0-%D1%81%D1%82%D0%B8%D0%BB%D1%8E), щоб змінити відступи й тло свого зображення.