Как создать базу знаний для вашего сайта с Divi

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

В этом уроке я покажу вам, как добавить базу знаний на ваш сайт с помощью Divi. Для этого я буду использовать плагин Echo Knowledge Base (бесплатная версия), который имеет несколько полезных параметров конфигурации, которые упрощают организацию и стилизацию страниц вашей базы знаний. Я также покажу, как можно стилизовать главную страницу базы знаний и страницы статей с помощью Divi Builder.

Sneak Peek

Вот краткий обзор того, что мы будем строить.

Основная страница базы знаний

Образец страницы статьи

Что вам понадобится для этого урока

• Тема Divi (установленная и активная)
• Плагин базы знаний Echo (установлен и активен)
• Пакет макетов цифрового продукта (доступен БЕСПЛАТНО в Divi Builder)

Включите тип публикации базы знаний в Divi

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

Для этого перейдите в свою панель управления WordPress и перейдите в Divi> Параметры темы. Щелкните вкладку Builder и включите тип сообщения «KB: База знаний».

Создание статей и категорий базы знаний

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

Создание категорий базы знаний

Вы можете создавать Категории базы знаний так же, как и для обычных категорий сообщений в WordPress.

Для этого перейдите в База знаний> Категории. Затем добавьте Имя, Слаг и Родительскую категорию (если применимо) для каждой из категорий, которые вы собираетесь использовать для статей базы знаний. В этом примере я добавил 6 родительских категорий с парой подкатегорий в каждой.

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

Назначение категорий новым статьям

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

Вы можете создать новую статью так же, как новую запись в WordPress. Перейдите в Базу знаний> Добавить новую статью. Затем добавьте заголовок и назначьте категорию статье. Вы заметите, что Divi Builder можно активировать, потому что мы включили этот тип публикации в параметрах темы. Я поделюсь некоторыми советами, как это сделать позже. Но пока вы можете просто добавить какой-нибудь редактор WordPress по умолчанию для фиктивного контента. После этого опубликуйте статью.

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

Проверьте страницу базы знаний по умолчанию

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

Вот как будет выглядеть страница по умолчанию.

Настройка макета и стиля базы знаний

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

Настройка главной страницы

Настройка главной страницы

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

Во всплывающем окне «Шаблоны» отмените выбор параметра «Отображать основной заголовок» и установите для всех отступов и полей 0 пикселей. Это позволит нам использовать Divi Builder для заголовка страницы и интервала.

Параметры главной страницы и всего текста

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

Параметр настройки главной страницы

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

Цвета окна поиска

Под категорией окна поиска выберите цвета и обновите следующее:

Название: # 333333
Фон поиска: #ffffff
Фон кнопки: # 091c4f

Стиль содержания

В категории « Содержимое » выберите « Стиль» и обновите следующее:

Ширина страницы: Полная ширина

Список стилей и цветов статей

В категории « Список статей » выберите « Стиль» и обновите следующее:

Изображение: треугольник со стрелкой
Высота списка статей: минимальная высота 100 пикселей (это полезно для создания всех блоков одинаковой высоты)

Затем выберите Цвета и обновите следующее:

Текст статьи: # 091c4f
Значок статей: # 6767ef

Категории Стиль и цвета

Затем в разделе « Категории» выберите « Стиль» и обновите следующее:

Расположение иконок: вверху

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

На выбор предлагается более 500 иконок!

Затем выберите Цвета и обновите следующее:

Значок категории верхнего уровня: #ffffff
Текст подкатегории и значок: # 333333
Разделитель: #ffffff
Текст заголовка поля категории: #ffffff
Категория заголовка фон: # 091c4f

Особенности страницы статьи

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

А пока я просто сопоставлю кнопку «Назад» с готовым макетом, который я буду использовать для страницы статьи. В разделе «Возможности» выберите «Назад навигация» и обновите следующее:

Цвет текста: #ffffff
Цвет фона: # 091c4f
Цвет границы: # 091c4f
Ширина границы: 3 пикселя

Стиль макета страницы архива

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

Вот пример того, как выглядит страница архива категории со стилем 1 по умолчанию.

Создание страницы базы знаний с помощью Divi

Теперь, когда мы завершили настройку страниц нашей базы знаний, мы готовы завершить дизайн главной страницы базы знаний с помощью Divi Builder.

Во-первых, перейдите к редактированию страницы Заголовки «База знаний», которая была создана плагином автоматически.

Затем разверните Divi Builder. Выберите вариант «Выбрать готовый макет», а затем во всплывающем окне «Загрузить из библиотеки» выберите пакет макетов цифрового продукта. Затем разверните макет страницы документации на странице.

После того, как макет загрузится на страницу, выберите «Build on the Front End».

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

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

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

Затем я удалил все, пока единственное, что у меня не осталось, это верхний раздел, содержащий одну строку с текстовым модулем «Документация» и текстовый модуль, содержащий шорткод. Я также сохранил нижнюю часть с призывом к действию.

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

Цвет фона: #ffffff
Шрифт текста: Поппинс
Закругленные углы: 10 пикселей

Вот окончательный дизайн.

И он также хорошо настраивается на мобильных устройствах.

Создание страницы статьи с помощью Divi Builder

Поскольку мы активировали тип публикации базы знаний KB в параметрах темы Divi, вы можете создавать свои статьи с помощью Divi Builder. Шаблон статьи базы знаний не ограничивает Divi Builder содержимым под заголовком страницы, хлебными крошками и кнопкой «Назад». Он также ограничивает содержимое конструктора divi максимальной шириной 1080 пикселей.

В этом примере я собираюсь запустить дизайн статьи базы знаний с готовым макетом. Для этого перейдите к редактированию одной из статей и разверните Divi Builder. Выберите «Выбрать готовый макет» и во всплывающем окне «Загрузить из библиотеки» выберите пакет макета цифрового продукта и разверните контактную страницу цифрового продукта.

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

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

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

Конечно, вы можете добавить некоторый собственный CSS, чтобы настроить ширину контейнера статьи, чтобы получить макет полной ширины. И вы можете добавить код, чтобы скрыть заголовок, а затем использовать динамический контент Divi, чтобы разместить заголовок статьи в любом месте в Divi Builder.

Последние мысли

Плагин Echo Knowledge Base на удивление мощный, даже без всех доступных премиум-надстроек (хотя их стоит проверить). Параметры конфигурации позволяют легко организовать и стилизовать страницы базы знаний в соответствии с макетом Divi. В довершение всего, вы даже можете использовать Divi Builder для создания страницы базы знаний и страницы статьи. Я надеюсь, что это руководство было полезно для тех, кто хотел добавить базу знаний на свой сайт Divi.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!