# Страницы и переменные {% hint style="success" %} Администрирование и управление контентом CMS Zeta Web выполняется в программе 1С: Предприятие. {% endhint %} #### Zeta Web 2.x Основные инструменты доступны в панели управления сайтом, которую можно открыть из меню **Zeta Web,** кликнув на соответствующий пункт меню **"Панель управления сайтом"**. ![](/files/B8tTCp9G3JhpTTp6iCBB) #### Zeta Web 3.x Основные инструменты доступны по ссылке меню **Инструменты Zeta Web** →**Панель управления "Контент"**. ![](/files/mY6TyZoscS735urdQlRu) ## Области, переменные, страницы Разделение html-контента на области, страницы и переменные - условно. Все контейнеры поддерживают хранение статического html-кода, контролов и вложенных контейнеров. **Переменная** - это переиспользуемый контейнер, который может быть использован при верстке других переменных, областей и страниц. **Область -** определяет контент в определенной части дизайна (шапка, подвал, левая и правая колонки). **Страница -** определяет основной контент дизайна. ![Пример сетки дизайна](/files/-LmsrjZQay7cYiTECRcI) ## Добавление нового html-контейнера #### Zeta Web 2.x Для добавления нового html-контента перейдите на вкладку **Наполнение сайта** и затем на вкладку **Страницы / Переменные**. Выберите нужную группу (области, переменные или страницы) и нажмите **"Добавить".** ![](/files/-Lmt9EFoQbzYX1Y6kP01) #### Zeta Web 3.x ![](/files/aKeP7Lbia3e9tBzBOCzO) Перейдите на вкладку **Основные** и заполните поле **Наименование**.\ Вы можете указать в поле **Имя в URL** свое значение, в противном случае в это поле будет подставлено значение из поля **Наименование** переведенное в транслит. Нажмите кнопку **"Записать"**. {% hint style="warning" %} Значение поля **Имя в URL** должно быть уникальным. В случае автоматической генерации - это правило соблюдается автоматически (к наименованию добавляется числовой суффикс). {% endhint %} {% hint style="info" %} Для областей и переменных - значение этого поля не влияет на формирование URL и не участвует в конечном html-коде страницы. Для страниц - значение из этого поля будет участвовать в формировании адреса данной страницы. {% endhint %} ## Разграничение прав доступа к html-контейнеру После записи вновь-созданного html-контейнера, вы можете настраивать доступность этого контейнера различным группам пользователей. Для настройки прав перейдите на вкладку **Доступ ролей**. Установите флажок напротив тех ролей, которым должен быть доступен html-контент и нажмите кнопку **Записать**. ![](/files/-LmtC8arZSrRJutwlNmH) {% hint style="warning" %} Для html-контейнера, который установлен в качестве значения области в дизайне сайта не действует настройка разграничения прав при просмотре страницы, но правила работают в штатном режиме, если данный контейнер расположен в другом html-контейнере. {% endhint %} ## Добавление контента #### Zeta Web 2.x Для добавления/изменения контента, нажмите на кнопку **"Редактировать наполнение"** или нажмите на окно предварительного просмотра html-контента. ![html-редактор](/files/-LmtEtWwno_WzjX0FLmY) В **визуальном редакторе** доступны следующие действия: * Ввод и редактирование текста**;** * Добавление / редактирование ссылки; * Добавление / редактирование изображения;; * Добавление вложенного html-контейнера * Добавление контрола. В **редакторе текста**: * Ввод и форматирование текста. #### Zeta Web 3.x Для добавления/изменения контента, нажмите на кнопку **"Редактировать".** ![](/files/gbw5LZTNCWdEcQB0Mc60) ### Работа визуальном редакторе {% hint style="warning" %} #### Визуальный редактор используется только в Zeta Web 2.x {% endhint %} #### Ввод и редактирование текста в визуальном редакторе Начните вводить текст непосредственно в окне редактора. Форматировании текста вам доступны быстрые комбинации клавиш, таких как **CTRL + B** (жирный), **CTRL + I** (курсив), **CTRL + U** (подчеркнутый), **CTRL + MouseScrol** (увеличение / уменьшение размера текста) и т.д. ![](/files/-LmtHOy5IhRHcljItcx7) {% hint style="info" %} Мы не рекомендуем использовать визуальный редактор для полноценной верстки. С его помощью легко поправить опечатку или добавить картинку. Более правильно для других задач использовать "Редактор текста". {% endhint %} #### Добавление / редактирование ссылки в визуальном редакторе Вы можете добавить **ссылку**: * На внутреннюю страницу; * На внешнюю страницу; * [На файл](https://help-zetaweb.zetasoft.ru/seo-i-upravlenie-kontentom/izobrazheniya-i-faily#razmeshenie-faila-na-stranice). #### - Добавление перетаскиванием: Перейдите не вкладку **HTML Элементы** и перетащите элемент **Ссылка** в окно визуального редактора. ![](/files/-LmtJY2dSL3kqjfWrK-Q) В открывшемся окне выберите **адрес назначения** нажав на **"...":** ![](/files/-LmtKR33c_eJ5wyavsnt) * **Строка** - добавление ссылки на внешний ресурс, например, ; * **Картинка (Zeta Web)** - добавление ссылки на [скачивание файла](https://help-zetaweb.zetasoft.ru/seo-i-upravlenie-kontentom/izobrazheniya-i-faily#razmeshenie-faila-na-stranice); * **Страницы / переменные (Zeta Web)** - добавление ссылки на внутреннюю страницу. Также, укажите текст / пиктограмму для ссылки в поле **Картинка / текст** нажав на **"...":** ![](/files/-LmtMGn6veyhx73ISSq-) * **Строка** - строковое представление ссылки; * **Картинка (Zeta Web)** - ссылка в виде изображения. Значение полей **Подсказка**, **Класс** и **Targe** добавится в атрибуты **title, class и target** соответственно для тега <**a>.** #### **- Быстрое добавление:** Выделите текст, который необходимо преобразовать в ссылку и нажмите на значок **Ссылка** в верхнем меню редактора. В результате откроется окно добавления новой ссылки с заполненным полем **Картинка / текст** ![](/files/-LmtOaCCWv7YegUXDXPs) #### - Быстрое удаление: Установите курсор мыши на ссылке и нажмите на значок **"Удалить ссылку"** в верхнем меню редактора. ![](/files/-LmtOyDGKKEqu75UGCx3) #### *-* Редактирование ссылки: Установите курсор мыши на ссылке и нажмите значок **Редактировать** в верхнем меню редактора. В результате откроется окно редактирования ссылки. ![](/files/-LmtPO1PW9oc4DpYFk_D) *Пример сгенерированного html-кода:* ```markup На главную ``` {% hint style="info" %} Атрибут **zw** является служебным атрибутом и будет убран из сгенерированного html-кода страницы в процессе ее обработки. {% endhint %} #### Добавление / редактирование изображения в визуальном редакторе #### **- Добавление:** см. [размещение изображения](https://help-zetaweb.zetasoft.ru/seo-i-upravlenie-kontentom/izobrazheniya-i-faily#razmeshenie-izobrazheniya-na-stranice). #### **-** Редактирование: Выделите изображение курсором мыши и нажмите значок **Редактировать** в верхнем меню редактора. В результате откроется окно редактирования изображения. ![](/files/-LmtQEKiVQEC5kjqfjGv) *Пример сгенерированного html-кода:* ```markup Запасная часть ``` {% hint style="info" %} Атрибут **zw** является служебным атрибутом и будет убран из сгенерированного html-кода страницы в процессе ее обработки. {% endhint %} #### Добавление вложенного html-контейнера в визуальном редакторе Перейдите не вкладку **Переменные** и перетащите элемент **Ссылка** в окно визуального редактора. ![](/files/-LmtSjOrdqH3uIeZkFVX) {% hint style="danger" %} Избегайте использование html-контейнера в самом себе (зацикливание). {% endhint %} {% hint style="info" %} При изменении html-контента в переменной **header-logo** изменение текущего html-контейнера не требуется. {% endhint %} *Пример сгенерированного html-кода:* ```markup
header-logo
``` {% hint style="info" %} Все содержимое тега **div** с атрибутом **zw**, а также сам тег **div** будет заменен на значение html-контента использованного html-контейнера в сгенерированном html-коде страницы в процессе ее обработки. {% endhint %} #### Добавление контрола в визуальном редакторе #### - Добавление перетаскиванием: Перейдите не вкладку **Шабл. контр.**, выберите нужный контрол и перетащите его в окно визуального редактора. ![](/files/-LmtXoYhQ23b8IxAkGts) В результате, откроется окно настройки параметров контрола. {% hint style="info" %} У каждого контрола индивидуальный набор параметров. Параметры бывают обязательные (отмечены галочкой) и общие (например, размер станицы выводимых контролом данных). {% endhint %} #### - Редактирование параметров контрола: Выделите пиктограмму контрола курсором мыши и нажмите значок **Редактировать** в верхнем меню редактора. В результате откроется окно редактирования параметров контрола. ![](/files/-LmtZsTZmPyWsSzhJuGV) *Пример кода:* ```markup ``` {% hint style="info" %} Тэг **img** с атрибутом **zw** будет заменен на тег **div** с набором служебных атрибутов (**cp\_...)**, содержимое которого будет сгенерировано в соответствии с указанным в параметрах шаблона. {% endhint %} ### Ввод и форматирование текста в редакторе текста #### Zeta Web 2.x В редакторе текста вы можете набирать html-код как вручную, так и вставив его из любого внешнего редактора. ![](/files/-LmtW_lvG24ut_gj2dFM) #### Zeta Web 3.x ![](/files/ypcTKkwlcCBJjdzLwV0I) Для форматирования текста нажмите кнопку **Форматировать** в верхнем меню редактора. ```markup
column 1 column 2
column 1 column 2
``` ## **Переопределение дизайна для конкретной страницы** Если на сайте требуется сверстать страницу в новом дизайне, например, страницу-лендинг, вы можете воспользоваться опцией переопределения дизайна для конкретной страницы. #### Zeta Web 2.x Для этого на вкладке **Основные** установите нужный дизайн в поле **Дизайн** и нажмите кнопку **Записать.** ![](/files/-Lmy0J8lRp5C8LRh7Btr) #### Zeta Web 3.x На вкладке **Разобрать** установите нужный дизайн в поле **Дизайн** и нажмите кнопку **Записать.** ![](/files/Wiv5oD56UXcfxGIMudrX) См более подробную информацию о [дизайне](https://help-zetaweb.zetasoft.ru/seo-i-upravlenie-kontentom/dizain). ## **Переопределение содержимого области дизайна для конкретной страницы** Для каждой страницы можно переопределить значение области дизайна, например, шапки, а также, очистить значение области. Для этого в дереве отображения значений областей измените / очистите значение html-контейнера и/или стиль. ![](/files/-LmtfIs7rnUH1U-9R0G9) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help-zetaweb.zetasoft.ru/seo-i-upravlenie-kontentom/stranicy-i-peremennye.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.