Работа с CSS

Данный функционал доступен только для платного аккаунта.

 

Внося изменения в CSS, вы сможете изменить внешний вид вашего сайта.

Внести свой код можно в разделе дизайн, вкладка Управление CSS:

Сюда вносятся только те изменения, которые вы хотите сделать на своем сайте.

Как найти и изменить CSS нужного элемента в браузере (Chrome и Firefox)

Самый удобный способ искать код элементов — использовать встроенный редактор (инструменты разработчика). Рассмотрим два основных браузера: Google Chrome и Mozilla Firefox.

Как открыть инструменты разработчика

Есть несколько способов:

1. Клавиша F12 — универсальный вариант для всех браузеров (Chrome, Firefox, Edge).

2. Правая кнопка мыши → «Посмотреть код» (в Chrome) или «Исследовать» (в Firefox) — самый быстрый способ для анализа конкретного места на странице.

3. Сочетания клавиш:

   • Ctrl + Shift + I (Windows) / Cmd + Opt + I (Mac) — открыть инструменты разработчика.

   • Ctrl + Shift + C (Windows) / Cmd + Opt + C (Mac) — сразу включить режим выбора элемента на странице.

 

Как выбрать нужный элемент

После открытия панели разработчика:

• Нажмите на иконку со стрелкой (в левом верхнем углу панели) — в Chrome это «Выбрать элемент», в Firefox — «Указатель».

• Или сразу нажмите Ctrl + Shift + C.

• Наведите курсор на нужный элемент страницы — он подсветится цветной рамкой.

• Нажмите левую кнопку мыши — и вы автоматически перейдёте к его коду в панели разработчика.

В Chrome код откроется во вкладке Elements, в Firefox — во вкладке Inspector. В правой части панели вы увидите CSS-стили, применённые к этому элементу. Именно их можно редактировать прямо в браузере и сразу видеть изменения на странице.

Как посмотреть и изменить CSS не сохраняя данные
В правой части панели отображаются все стили, применённые к выбранному элементу.
Вы можете прямо здесь менять значения: цвета, размеры, отступы и т. д. Все изменения видны мгновенно, но не сохраняются после обновления страницы. Это позволяет безопасно экспериментировать с дизайном.
Для временного применения стилей используйте поле element.style {...} — так вы не затронете исходный код сайта(после обновления страницы все вернется в исходное положение)

Чтобы перенести изменения из инструментов разработчика на сайт, выполните два простых шага.

• Скопируйте селектор. Нажмите правой кнопкой мыши на нужный элемент в панели разработчика и выберите «Копировать» → «Копировать селектор». Это позволит получить точный CSS-путь к элементу.

• Скопируйте стили.В разделе element.style {...} возьмите изменённые свойства включая фигурные скобки, например, {background-color: aqua;}

 

Вставьте получившийся код в админпанели сайта: раздел «Дизайн» → вкладка «Управление CSS». После сохранения изменения будут видны для всех пользователей.