# Дизайн
{% hint style="success" %}
Администрирование и управление контентом CMS Zeta Web выполняется в программе 1С: Предприятие.
{% endhint %}
#### Zeta Web 2.x
Основные инструменты доступны в панели управления сайтом, которую можно открыть из меню **Zeta Web,** кликнув на соответствующий пункт меню **"Панель управления сайтом"**.
#### Zeta Web 3.x
Основные инструменты доступны по ссылке меню **Zeta Web** →**Панель управления "Контент"**.
Для сайта определяется основной дизайн, а для каждой конкретной страницы можно указать собственный или переопределить контент в нужных областях.
## Сетка (макет)
В CMS Zeta Web для создания сайтов используется набор готовых сеток (макетов).
```markup
```
Для каждой области сетки можно задать html-контент, отображаемый по умолчанию, (установив произвольный html-контейнер), а также, при необходимости, задать имя css-класса, которое будет проставлено в атрибут **class** html-тега, ответственного за отображение области.
## Создание сайта и настройка дизайна, используемого по умолчанию
#### Zeta Web 2.x
Перейдите на вкладку **Настройки**, затем на вкладку **Дизайн** и нажмите кнопку **Добавить/Открыть.**
В открывшемся окне, на вкладке **Основные -** укажите наименование вашего нового дизайна.
#### Zeta Web 3.x
Перейдите в раздел **Сайты**, откройте настройку сайта и выберите "**Дизайн**".
Нажмите правой кнопкой мыши в строке **Дизайн** и "**Создать/Открыть**", чтобы перейти в его настройки.
В **настройках шаблона** доступны следующие настройки:
* **Шаблон** - выберите подходящую для вас сетку. \
С правой стороны после выбора сетки будет отображено схематическое отображение расположения областей;
* **Ширина шаблона** - выберите один из двух вариантов:
* фиксированная - для создания сайта с фиксированной шириной
* от и до - для создания "резинового" сайта
* **Ширина** (доступна в режиме Ширина шаблона = Фиксированная) - ширина сетки в пикселях;
* **Ширина от** (доступна в режиме Ширина шаблона = от и до) - минимальная ширина сетки в пикселях. \
Пустое значение - без ограничений по минимальной ширине;
* **Ширина до** (доступна в режиме Ширина шаблона = от и до) - максимальная ширина сетки в пикселях. \
Пустое значение - без ограничений по максимальной ширине;
* **Стиль документа** - наименование css-класса, которое будет установлено в атрибут **class** тега **html**;
* **Стиль тела документа** - наименование css-класса, которое будет установлено в атрибут **class** тега **body**;
* **Иконка сайта** - изображение favicon
* **Табличная часть настройки областей сетки** - список доступных к использованию в сетке областей.
* **Страница / переменная** - html-контейнер, содержимое которого будет помещено в указанную область
* **Стиль** - наименование css-класса, которое будет установлено в атрибут **class** тега, отвечающего за отображение области.
{% hint style="info" %}
У каждой сетки есть основная рабочая область (отмечена галочкой). \
В данной области будет отображено содержимое страниц сайта.\
Оставьте значение страницы пустым при настройке дизайна сайта для этой области.
{% endhint %}
Сохраните изменения, нажав на кнопку **Записать**.
Возвращаясь к настройкам домена**:**
{% hint style="info" %}
#### Zeta Web 2.x
Перейдите на вкладку **Настройки**, затем на вкладку **Дизайн** и нажмите кнопку **Добавить/Открыть.**
#### Zeta Web 3.x
Перейдите в раздел **Сайты**, откройте настройку сайта и выберите "**Дизайн**".
Нажмите правой кнопкой мыши в строке **Дизайн** и "**Создать/Открыть**", чтобы перейти в его настройки.
{% endhint %}
Заполните следующие настройки:
* На вкладке **Основные:**
* Наименование -наименование вашего сайта;
* Дизайн - укажите созданный на предыдущем шаге дизайн;
* Стартовая страница - укажите стартовую страницу (главную) сайта;
* На вкладке **Доменные имена** укажите одно или несколько доменных имен привязанных к вашему сайту и установите один из них основным;
* На вкладке **Наполнение robots.txt** наполните содержимое файла robots.txt;
* На вкладке **Наполнение head** вставьте ссылки на [файлы](https://help-zetaweb.zetasoft.ru/seo-i-upravlenie-kontentom/izobrazheniya-i-faily#razmeshenie-faila-na-stranice) css, js и пр.;
* На вкладке **Наполнение body:**
* После открывающего тега - укажите html-контент, который будет добавлен первым дочерним узлом к тегу **body;**
* Перед закрывающим тегом - укажите html-контент, который будет добавлен последним дочерним узлом к тегу **body;**
* На вкладке **Анимация** настройте отображение глобальной анимации для сайта (отображается при переходе от одной страницы к другой при задержке перехода большей, чем указана в настройках анимации):
* Анимационный контент - html-контент, который будет наложен на всю видимую часть страницы;
* Включить глобальную анимацию с задержкой - отображение анимации с задержкой в миллисекундах / мгновенное отображение анимации;
* Настройка таймаута - укажите значение задержки отображения анимации в миллисекундах;
* На вкладке **Водяной знак** укажите изображение, которое будет наложено в качестве водяного знака на изображения товаров и настройте параметры наложения:
* Размещать по центру / сдвиг слева и сверху;
* Размер водяного знака (оригинальный / с заданной высотой и шириной);
* Прозрачность.
Нажмите кнопку **"Записать"**.
## Переопределение дизайна для страницы
См. [переопределение дизайна страницы](https://help-zetaweb.zetasoft.ru/seo-i-upravlenie-kontentom/stranicy-i-peremennye#pereopredelenie-dizaina-dlya-konkretnoi-stranicy).
## Переопределение контента областей для страницы
См. [переопределение html-контента страницы](https://help-zetaweb.zetasoft.ru/seo-i-upravlenie-kontentom/stranicy-i-peremennye#pereopredelenie-soderzhimogo-oblasti-dizaina-dlya-konkretnoi-stranicy).