Как вносить изменения в код страниц и настраивать CSS в Рег.сайте

У страниц, которые созданы с помощью услуги Рег.сайт, закрытый код. Теоретически редактировать этот код можно. Однако если после редактирования вы воспользуетесь стандартным редактором Рег.сайта, все правки в коде будут сброшены. Поэтому полноценно работать с кодом в Рег.сайте нельзя. Если вы хотите создать сайт с нуля с помощью кода, рекомендуем вам приобрести обычный хостинг и установить на него пустой WordPress, где код страниц открыт.

Однако иногда нужно внести некоторые параметры, которые не предусмотрены в интерфейсе Рег.сайта. Кроме этого, многие сторонние сервисы требуют от владельца сайта разместить в коде сайта скрипты, метатеги и другие строки кода. Для таких нужд в Рег.сайте есть специальные инструменты. В этой статье мы сделали обзор возможностей работы с кодом и CSS в Рег.сайте.

Перед тем как мы перейдём к инструкциям, хотим отметить, что некоторые CSS настройки могут не работать или работать некорректно. Это связано с тем, что при создании шаблонов применяется множество стилей. Из-за этого некоторые ваши настройки в конструкторе Divi могут противоречить настройкам, указанным в коде шаблона, что приводит к некорректной работе. Рекомендуем использовать CSS только в крайних случаях и для несложных правок. Функционал Рег.сайта предлагает множество настроек без ручного внедрения в код.

Как добавить скрипт или другой код в Рег.сайте

Чтобы добавить необходимый код на сайт:

  1. 1.
    Перейдите в админку WordPress.
  2. 2.

    Перейдите в Divi ― Интеграция:

    Как добавить скрипт или другой код в REG.Site 1

  3. 3.

    В этом разделе есть поля <head>, <body> и поля для постов. В каждое из этих полей нужно вводить необходимые строки кода. Чаще всего скрипты и метатеги нужно вводит в область <head>.

    Совет
    Код для внедрения Google Analytics и Яндекс.Метрики лучше добавлять в область <body>.

    Как добавить скрипт или другой код в REG.Site 2

  4. 4.
    Нажмите Сохранить изменения.

Готово, код добавится на сайт.

Также скрипты можно добавлять на конкретную страницу сайта через модуль код. Подробнее об этом можно прочитать в статье Модуль «Код» в Рег.сайте.

Работа с CSS в Рег.сайте

Кроме вставок HTML-кода, в Рег.сайте можно работать и с CSS. Однако технология работы немного запутанная. Способ работы с CSS зависит от вашей задачи. Мы разберём несколько кейсов.

Как добавить CSS для конкретного модуля или элемента

Обратите внимание! Возможность добавить CSS-параметры есть у всех модулей, но не у всех элементов модуля. Чем больше элементов входит в модуль (текст, кнопки, картинки, стрелки и др.), тем больше риск, что для него нельзя будет применить CSS-настройку.

Рассмотрим, как настроить CSS модуля и элемента на примере модуля «Слайдер»:

  1. 1.

    Перейдите в настройки модуля во вкладку Дополнительно ― Пользовательский CSS:

    Как добавить CSS для конкретного модуля или элемента 1

  2. 2.

    В этом блоке есть несколько полей для ввода параметров CSS. Количество полей зависит от модуля, который вы настраиваете, и элементов, которые в нём размещены. Например, в модуле «Слайдер» есть 10 полей: перед, основной элемент, после, описание слайда, заголовок слайда, кнопка слайда, элементы управления слайда, элементы управления активного слайда, изображение слайда, стрелка слайда.

    Поля «Перед» и «После» отвечают за внешние и внутренние области элемента соответственно.

    Как добавить CSS для конкретного модуля или элемента 2

    Каждому полю автоматически присвоен нужный класс. Чтобы увидеть, какому классу соответствует блок, наведите курсор на поле и кликните на значок со знаком вопроса. Перед вами появится класс CSS. Для индивидуальной настройки CSS эта информация не нужна, но она может понадобиться при массовом изменении параметра для элементов. Об этом мы расскажем ниже:

    Как добавить CSS для конкретного модуля или элемента 3

  3. 3.

    Введите необходимые настройки в нужные поля.

    Обратите внимание! Так как название класса устанавливается автоматически, записывать его в поле не нужно. Вы просто вписываете свойства. Как показано на скриншоте ниже:

    Как добавить CSS для конкретного модуля или элемента 4

    Обратите внимание, функционал добавления CSS очень ограничен. Многие параметры могут не применяться, так как множество настроек уже прописано в коде шаблона.

Как изменить CSS для всей страницы

Также можно вносить общие CSS для одной страницы. Все вписанные параметры будут применяться только на одной странице, а не на всём сайте. Для этого:

  1. 1.

    Нажмите на три точки и на значок шестерёнки:

    Как изменить CSS для всей страницы 1

  2. 2.

    Перед вами появится меню настроек страницы. Во вкладке «Дополнительно» можно ввести CSS-параметры так же, как при индивидуальных настройках модуля.

    Как изменить CSS для всей страницы 2

Как настроить CSS сразу для нескольких элементов

На сайте могут использоваться одинаковые элементы, которые должны быть идентичны по дизайну. Например, все кнопки должны быть одинакового цвета и размера. Настраивать их по отдельности долго. Однако можно указать общие настройки для некоторых элементов и просто применять их при необходимости.

Сделать это можно через настройщик темы Divi.

  1. 1.

    Откройте админку WordPress и перейдите в Divi ― Настройщик темы:

    Как настроить CSS сразу для нескольких элементов 1

  2. 2.

    Перед вами появится меню и ваш сайт, где будут отображаться вносимые изменения:

    Как настроить CSS сразу для нескольких элементов 2

  3. 3.

    В разделе Дополнительные стили можно увидеть, какие параметры указаны для определённого элемента. Сюда же можно вносить свои изменения.

    Как настроить CSS сразу для нескольких элементов 3

    В настройщике темы Divi можно указать разные параметры для текста, который находится в header, body или footer. Также здесь есть удобная массовая настройка кнопок. Все настройки, которые вы укажете здесь, будут автоматически применяться на добавленный модуль «Кнопка». Таким образом, вам не понадобится настраивать его вручную.

    Как настроить CSS сразу для нескольких элементов 4

    Это поле настроек стилей дублируется в поле, которое находится в разделе Divi ― Настройки темы ― Основное ― Общее. Всё, что добавлено в одно из этих полей, автоматически отображается в другом:

    Как настроить CSS сразу для нескольких элементов 5

Как создать новый класс и добавить его в модуль

Ещё один вариант быстро применять параметры к модулям и элементам ― создать новый класс в общих настройках CSS и применить его к нужному элементу.

Обратите внимание! Не во всех модулях есть возможность добавить класс.

Для примера у слайдера сделаем внешний отступ и зальём его цветом.

  1. 1.
    Сначала перейдите в Divi ― Настройки темы ― Основное ― Общее или в Дополнительные стили в «Настройщике темы». Мы используем первый вариант.
  2. 2.

    В поле Пользовательский CSS задайте новый класс и укажите его параметры. В примере мы добавили класс .slider_color_indent:

    Как создать новый класс и добавить его в модуль 1

  3. 3.
    Сохраните изменения.
  4. 4.
    Теперь перейдите в настройки модуля «Слайдер» во вкладку Дополнительно.
  5. 5.
    Откройте блок ID и классы CSS
  6. 6.

    В поле Класс CSS введите название созданного класса без точки в начале. У нас slider_color_indent:

    Как создать новый класс и добавить его в модуль 2

  7. 7.
    Сохраните изменения.

Готово, теперь к слайду применены параметры указанного класса:

Как создать новый класс и добавить его в модуль 3

Помогла ли вам статья?

Спасибо за оценку. Рады помочь 😊

 👍