Divi, Как это сделать

Как показать модуль комментариев Divi только вошедшим в систему пользователям

[ad_1]

Раздел комментариев любого блога может стать отличным местом дискуссии для всех посетителей вашего сайта. Однако, может наступить момент, когда вы захотите создать свое сообщество в Интернете и тогда вам поможет новая функция темы условия Divi С ней мы можем запретить пользователям не зарегистрированным на сайте комментировать посты. Это может стать дополнительной мотивацией для гостей вашего сайта регистрироваться на сайте и становиться активными участниками сообщества. В этой статье мы рассмотрим как показать модуль комментариев Divi только вошедшим в систему пользователям

Функция «Условие» Divi позволяет нам выбирать набор параметров, с которыми могут взаимодействовать модули, строки, столбцы и разделы. В нашем случае мы хотим установить условия отображения на основе статуса входа пользователя в систему. Вот краткое изложение шагов, которые мы предпримем в этом руководстве, чтобы создать раздел комментариев только для участников:

  1. Загружаем или создаём свой шаблон поста блога в Divi Theme Builder
  2. Создаём раздел комментариев только для участников, содержащий модуль входа
  3. Активируем условия отображения для строки, содержащей модуль входа
  4. Активируем условия отображения для строки, содержащей модуль комментариев
  5. Сохраняем и тестируем шаблон в режиме инкогнито

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

Как показать модуль комментариев Divi только авторизованным пользователям после входа в систему

Используя условия Divi, мы можем отобразить модуль входа в систему гостям сайта. После того как пользователь вошел в систему, он может взаимодействовать с модулем комментариев.

Как показать модуль комментариев Divi только вошедшим в систему пользователям перед входом в систему

Установка шаблона статьи блога

Прежде чем мы начнем создавать раздел комментариев только для участников, нам необходимо загрузить шаблон, который мы будем использовать. Вы можете скачать шаблон статьи блога Film Lab здесь.

Загрузите шаблон сообщения в блоге Film Lab из блога Divi.

Перейдите в конструктор тем Divi.

Чтобы загрузить шаблон, перейдите к Divi Theme Builder в административной части вашего WordPress сайта.

Начало работы с пакетом макетов конференции Divi

Загрузите шаблон сайта

Затем в правом верхнем углу вы увидите значок с двумя стрелками. Нажмите на значок.

Импорт макета верхнего и нижнего колонтитула в конструктор тем Divi

Перейдите на вкладку импорта, загрузите файл JSON, который вы можете скачать в этом посте, и нажмите «Импортировать шаблоны Divi Theme Builder».

Импорт настроек для пакета макетов верхнего и нижнего колонтитула

Сохранить изменения в конструкторе тем Divi

Загрузив файл, вы увидите новый шаблон с новой областью Body, назначенной всем постам блога. Сохраните изменения Divi Theme Builder, как только захотите активировать шаблон.

Сохраните импортированный макет сообщения блога в Divi Theme Builder.

Изменение шаблона

Откройте шаблон поста

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

Начните редактировать шаблон тела сообщения блога в Divi Builder.

Добавьте новую строку для модуля входа в систему

Добавьте новую строку в том же разделе, что и модуль комментариев этого шаблона. Переключитесь на каркасный вид чтобы было проще. Затем, нажмите зеленый плюс чтобы добавить новую строку над строкой, содержащей модуль комментариев.

Добавить новый для модуля входа в систему

Далее мы добавим в строку один столбец.

Добавьте макет с одним столбцом во вновь добавленную строку

Добавьте модуль входа

В новой строке мы собираемся добавить модуль входа, чтобы пользователи входили на наш веб-сайт и получали доступ к разделу комментариев. Прокрутите модальное окно «Модуль», пока не увидите значок

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

Добавьте текст в модуль входа

Давайте добавим заголовок к модулю входа. Мы также будем использовать этот заголовок, чтобы попросить пользователей войти в систему, прежде чем получить доступ к нашему разделу комментариев.

Добавить заголовок в модуль входа

Стилизация модуля входа

Теперь мы придадим добавленному модулю входа внешний вид, соответствующий оформлению шаблона блога Film Lab.

Стилизуем фон блока

Нажмите на значок ведра с краской и выберите цвет заливки #ff4125. Далее нажмите переключатель «Использовать цвет фона».

Добавьте цвет фона в модуль входа в раздел комментариев только для наших участников.

Фон

  • Цвет фона: #ff4125
  • Использовать цвет фона: Да

Стилизуем поля

Для полей мы будем использовать тот же цвет, что и для фона раздела, с черным текстом.

Начните стилизовать поля модуля входа в систему.

Поля: Фон и стиль текста.

  • Цвет фона полей: #eae9e4
  • Цвет текста полей: #000000
  • Цвет фона фокуса полей: #eae9e4
  • Цвет текста фокуса полей: #000000

Мы также добавим полям рамку и не будем делать закругленных углов. Это будет имитировать стиль модуля комментариев.

Оформление границ полей входа

Поля: Фон и стиль текста.

  • Поля с закругленными углами: 0
  • Стили границ полей: Все
  • Ширина границы полей: 1 пиксель
  • Цвет границы полей: #000000
  • Стиль границы полей: Сплошной

Стилизуем заголовок

В заголовке будет использован тот же шрифт, что и во всем шаблоне, и он будет белым.

Стилизация текста заголовка модуля входа в систему

Текст заголовка

  • Текст заголовка заголовка: H2
  • Шрифт заголовка: Mulish
  • Цвет текста заголовка: #ffffff

Обратите внимание, что мы добавляем адаптивные размеры, чтобы заголовок хорошо выглядел на экранах разных размеров.

Настройка размеров шрифта текста заголовка для модуля входа в систему

Текст заголовка: Размер шрифта

  • Размер шрифта текста заголовка (рабочий стол): 64 пикселя.
  • Размер шрифта текста заголовка (планшет): 48 пикселей
  • Размер шрифта текста заголовка (мобильная версия): 48 пикселей.

Стилизуем кнопку

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

Копирование настроек кнопки из модуля комментариев

Перейдите на вкладку «Дизайн».. Прокрутите вниз до вкладки «Кнопка». Щелкните правой кнопкой мыши вкладку кнопки и нажмите Копировать стили кнопки.

Повторное копирование настроек кнопки из модуля комментариев.

После этого выйдите из модуля комментариев. Войдите в модуль входа, нажав на значок шестеренки.

Войдите в настройки модуля входа

Снова, перейдите на вкладку «Дизайн» и прокрутите вниз до вкладки «Кнопка». Далее, щелкните правой кнопкой мыши и выберите «Вставить стили кнопок».. Вуаля! Кнопка выглядит также как кнопка в модуле комментариев.

Вставка стилей кнопок из модуля комментариев в модуль входа в систему

Теперь кнопка нашего модуля входа в систему точно соответствует стилю кнопок модуля комментариев. Ура нам!

Модуль входа в систему. Оформление кнопок.

Применяем условие отображения к строке модуля входа

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

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

Нажмите на вкладку «Дополнительно». в настройках строки, затем перейдите на вкладку «Условия». Затем, нажмите на значок плюса.

Готовимся к активации условий отображения для раздела комментариев только для наших участников.

Когда вы нажмете на значок плюса, у вас появится множество вариантов того, при каком условии вы будете отображать (или скрывать) эту строку. Прокрутите вниз до пункта «Состояние пользователя», а затем нажмите «Состояние входа в систему».

Активация условия отображения статуса входа в систему для строки «Модуль входа»

Как только это будет сделано, мы получим еще одно модальное окно. В этом модальном окне мы хотим щелкните раскрывающийся список с надписью «Пользователь вошел в систему». и измените это на Пользователь вышел из системы. Это то, что способствует нашему разделу комментариев только для участников. Поскольку мы хотим, чтобы люди были участниками сайта, у них должны быть действительные учетные данные для доступа к нашему разделу комментариев. Если у них нет действительных учетных данных, они не смогут получить доступ к разделу комментариев нашего сайта.

Отображать эту строку, только если пользователь вышел из системы

Условия отображения

  • Отображать только если: Пользователь вышел из системы
  • Условие включения: Да

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

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

Последняя часть этого руководства — настройка условия отображения для строки, содержащей модуль комментариев. Для этого щелкните значок шестеренки, чтобы получить доступ к настройкам строки.

Редактирование строки, содержащей модуль комментариев, для создания раздела комментариев только для наших участников.

Как и в случае со строкой, содержащей модуль входа, в настройках строки мы нажмите на вкладку «Дополнительно» затем перейдите на вкладку «Условия» и нажмите значок плюса чтобы добавить условие отображения.

Активация условия отображения для строки модуля комментариев

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

Условия отображения строки, содержащей модуль комментариев, только для наших участников.

Теперь, когда мы добавили условия отображения как в модуль комментариев, так и в строку с модулем входа в систему, мы можем провести быстрый тест. Откройте публикацию в режиме инкогнито или приватном просмотре.

Наши участники комментируют только раздел в частном браузере

Мы используем приватный браузер или окно в режиме инкогнито для проверки условий отображения, чтобы пользователь не был залогинен на сайте. Когда вы вернетесь к обычному просмотру и *залогинетесь* на сайте, вы должны увидеть раздел комментариев. Кроме того, вы можете выйти из своего WordPress сайта, чтобы увидеть готовую работу! Хотя мы делали это руководство для модуля комментариев, его можно применить к любому модулю, строке, столбцу или разделу внутри Divi; дополнительный плагин не требуется. Потратьте некоторое время, чтобы смешать и сопоставить различные настройки дисплея и посмотреть, что у вас получится.

Заключение

Создание сообщества на вашем WordPress сайте позволяет вам укрепить доверие тех, кто пользуется вашим сайтом чаще остальных. Один из способов сделать это — создать раздел комментариев только для участников, который позволит участникам легко взаимодействовать друг с другом. Divi имеет встроенные инструменты и функции, которые упрощают это. Благодаря собственным условиям отображения Divi ваши пользователи могут взаимодействовать только друг с другом. Кроме того, вы можете легко стилизовать свой модуль комментариев, используя вкладку «Дизайн» и полный набор инструментов редактирования Divi. Чтобы создать гибкое частное сообщество, вам не нужно устанавливать плагин членства при использовании Divi. Активировав определенные функции в ядре Divi, вы можете создать раздел комментариев вошедших в систему пользователей, укрепить свое онлайн-сообщество и сделать свой веб-сайт WordPress легким и гибким. Прежде чем использовать плагин для добавления простых функций членства на ваш веб-сайт, рассмотрите возможность ознакомления с условиями отображения Divi для различных аспектов вашего веб-сайта сегодня.

[ad_2]

Оригинал статьи

author-avatar

Автор - Wespe Club

Клуб веб-разработчиков. Наша миссия - сделать вебразработку понятной и доступной широкому кругу людей.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *