# Настройка элементов

О том, как добавить или изменить контент элемента, можно прочитать [в статье «Работа с элементами»](https://help.lynda.ru/sozdanie-proekta.-pervye-shagi/rabota-s-elementami).

Каждый элемент в Pro-режиме обладает настройками, которые содержатся в трех разделах:

1. «Сетка».
2. «Элемент».
3. «Данные».

{% tabs %}
{% tab title="Сетка" %}

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2F0UmusgKAAqhyRhdGZzW2%2FScreenshot%202023-11-27%20at%2013.00.55.png?alt=media&#x26;token=13d6f990-d6e4-4b8f-a798-526d8eb75b66" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Элемент" %}

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FcXf5bkO5GNcANvjwkad2%2FScreenshot%202023-11-27%20at%2013.02.03.png?alt=media&#x26;token=2dfea75b-5c4a-4bfc-9e48-334cc4ecc74b" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Данные" %}

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FGdChlkK0SMX0dJ89kfX9%2FScreenshot%202023-11-27%20at%2013.02.45.png?alt=media&#x26;token=8b4cdb5f-934a-49eb-8a79-1493958bdd7c" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Раздел «Сетка»

К настройкам сетки относятся:

* [выравнивание (по горизонтали и по вертикали)](#vyravnivanie-po-gorizontali-i-po-vertikali);
* [настройки ширины и высоты](#nastroiki-shiriny-i-vysoty);
* [настройки внутренних и внешних отступов](#nastroiki-vnutrennikh-i-vneshnikh-otstupov);
* [возможность скрыть элемент в режиме заполнения](#vozmozhnost-skryt-element-v-rezhime-zapolneniya);
* [возможность создать уникальное имя элемента](#vozmozhnost-sozdat-unikalnoe-imya-elementa).

{% hint style="info" %}
Обратите внимание: данные настройки доступны только в Pro-режиме.
{% endhint %}

#### Выравнивание (по горизонтали и по вертикали)

Задать выравнивание можно нажатием кнопок выравнивания по высоте и ширине.

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FUhLlyaZqzaQ68qjkMuqu%2FScreenshot%202023-11-27%20at%2013.05.21.png?alt=media&#x26;token=95d84f86-15e3-43a1-b70f-4c5ff3573680" alt=""><figcaption><p>В нашем примере, заголовок центрирован по ширине и высоте.</p></figcaption></figure>

#### Настройки ширины и высоты

С помощью гибких настроек высоты и ширины можно установить любой размер элемента.

По умолчанию высота и ширина элемента установлены в значении **«Авто»**. Это означает, что система сама анализирует размер элемента и подстраивает ширину и высоту элемента автоматически.

Также есть опция **«100%»**. При установке значения ширины и высоты 100% элемент будет занимать всю доступную область колонки, в которой он находится.&#x20;

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FtSRFC7SeVRoaNnqDns44%2FScreenshot%202023-11-27%20at%2013.07.21.png?alt=media&#x26;token=83210348-ead0-46f6-9fa6-05dbf6e399e8" alt=""><figcaption><p>В данном примере картинке заданы значения: ширина – 100%, высота – автоматическая</p></figcaption></figure>

Для более управляемых настроек можно задать ширину и высоту в пикселях. Для этого переведите положение ширины/высоты в положение **px** и укажите минимальную и максимальную ширину/высоту элемента.

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FzErAYFNITpvsGf3kagfA%2FScreenshot%202023-11-27%20at%2013.08.18.png?alt=media&#x26;token=133b45fd-72ec-4d46-9ebf-bfd79813fe5c" alt=""><figcaption><p>На примере: минимальная ширина – 350 px, максимальная ширина – 500 px, минимальное значение высоты отсутствует, максимальная высота – 450 px</p></figcaption></figure>

#### Настройки внутренних и внешних отступов

Для того чтобы элементы не были визуально прилеплены друг к другу, используются отступы:

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2F4VYr9ZylsLV8o3xaXHXt%2FScreenshot%202023-11-27%20at%2013.09.20.png?alt=media&#x26;token=4aadf51f-05d0-4564-97e2-bdc668b55fc0" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Слева направо:

* первая ячейка – отступ сверху;
* вторая ячейка – отступ справа;
* третья ячейка – отступ снизу;
* четвертая ячейка – отступ слева.
  {% endhint %}

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FSQ2afQsfdQpohbEyy0rM%2FScreenshot%202023-11-27%20at%2013.11.29.png?alt=media&#x26;token=94bc5084-de20-4731-b50c-24f5e077dae6" alt=""><figcaption><p>Текст имеет отступы: 16 px – сверху, 0 px – справа, 16 px – снизу, 46 px – слева</p></figcaption></figure>

#### Возможность скрыть элемент в режиме заполнения

Как известно, платформа Линда поддерживает 2 режима работы редактора: [режим заполнения](https://help.lynda.ru/sozdanie-proekta.-pervye-shagi/rabota-s-blokami) и [Pro- режим. ](https://help.lynda.ru/sozdanie-proekta.-pervye-shagi/pro-rezhim)

Для того, чтобы скрыть элемент от пользователей в режиме заполнения, [переключитесь в Pro-режим](https://help.lynda.ru/pro-rezhim#perekhod-v-pro-rezhim).

После этого в выбранном элементе найдите настройку **«Скрыть»** и переведите кнопку **«Скрыть»** в положение **«Да»**.

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FZcN3nrdZqOy6dIfv7C4K%2FScreenshot%202023-11-27%20at%2013.12.48.png?alt=media&#x26;token=8d90c17f-9e78-40e2-ad8e-0068b24701f6" alt=""><figcaption><p>Текст скрыт от пользователей в режиме заполнения</p></figcaption></figure>

В результате в режиме заполнения пользователь не видит элемент **«Текст»** в структуре блока.

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2F4b18VV80Vr68rY1EH9MN%2FScreenshot%202023-11-27%20at%2013.14.51.png?alt=media&#x26;token=10af58d8-680f-4811-aead-6f373dbc03fc" alt=""><figcaption></figcaption></figure>

#### Возможность создать уникальное имя элемента

По умолчанию все элементы имеют стандартные имена, например: **«Текст»**, **«Картинка»**, **«Аудио»**, **«Видео»** и т.д.

Для кастомизации элементов вы можете переименовать элементы по своему усмотрению. Чтобы переименовать элемент, перейдите в Pro-режим, выделите нужный элемент и в графе **«Название»** введите новое имя элемента.

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2F2ZcPfDdLJBGCWVuqykse%2FScreenshot%202023-11-27%20at%2016.13.33.png?alt=media&#x26;token=20624ed9-90fd-424e-8c82-70205c566ca6" alt=""><figcaption></figcaption></figure>

После того как элемент будет переименован, новое имя элемента появится в структуре блока и в редакторе.

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FcjKv579err5oJ83i1JmV%2FScreenshot%202023-11-27%20at%2013.17.04.png?alt=media&#x26;token=f5889329-1eba-4d3c-ada0-b845b0ea730b" alt=""><figcaption><p>Теперь текст называется «Заголовок», а картинка – «Первая картинка в проекте»</p></figcaption></figure>

### Раздел «Элемент»

Раздел настроек **«Элемент»** содержит настройки, специфичные для самого элемента. Например, текст имеет настройки цвета, высоты строки, шрифта, начертания и т.д.

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2Fc1tK4fAMq8Ii3frIaf1t%2FScreenshot%202023-11-27%20at%2016.15.58.png?alt=media&#x26;token=1439a8e3-cfe5-4672-af2f-f4fd85ee01c3" alt=""><figcaption><p>настройки элемента "текст"</p></figcaption></figure>

В то же время элемент **«Картинка»** содержит настройки скругления, рамки, цвета рамки.

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2F7qKhSxywcjgKGO4xIs0T%2FScreenshot%202023-11-27%20at%2016.17.14.png?alt=media&#x26;token=5423f91a-f8c7-4e68-b825-09f34a72b5d6" alt=""><figcaption></figcaption></figure>

### Раздел «Данные»

Раздел настроек элемента **«Данные»** содержит настройки контента элемента. Например, в данном разделе в элементе **«Текст»** можно лишь заменить текст, в элементе **«Картинка»** – заменить картинку.

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2Fi2WnTgZNtsZ9szcv3yum%2FScreenshot%202023-11-27%20at%2016.18.31.png?alt=media&#x26;token=3c37b886-3823-4180-8572-dbf86d1002e3" alt=""><figcaption></figcaption></figure>