Como criar uma base de conhecimento para seu site com Divi

Ter uma base de conhecimento em seu site pode ser um ativo extremamente valioso tanto para seus clientes quanto para seus funcionários. E, se feito da maneira certa, uma base de conhecimento pode se tornar uma marca de longa data de garantia de qualidade para o seu negócio. Eles podem ser uma ótima solução para perguntas frequentes, documentação, manuais de software, tutoriais e muito mais.

Neste tutorial, vou mostrar como adicionar uma base de conhecimento ao seu site com Divi. Para fazer isso, usarei o plug-in Echo Knowledge Base (versão gratuita), que possui algumas opções de configuração úteis que facilitam a organização e o estilo de suas páginas de base de conhecimento. Também mostrarei como você pode estilizar a página principal da base de conhecimento e as páginas do artigo usando o Divi Builder.

Espiada

Aqui está uma prévia do que iremos construir.

A página principal da base de conhecimento

Página de artigo de amostra

O que você precisa para este tutorial

• O tema Divi (instalado e ativo)
• O plug-in da base de conhecimento Echo (instalado e ativo)
• O Digital Product Layout Pack (disponível gratuitamente no Divi Builder)

Habilite o tipo de postagem da base de conhecimento no Divi

O Divi torna mais fácil fornecer suporte para certos tipos de post personalizados de terceiros. Como o plugin da base de conhecimento usa seus próprios tipos de postagem para artigos, você precisará habilitá-los no Divi. Isso permitirá que você use o Divi Builder para editar esses artigos.

Para fazer isso, vá para o painel do WordPress e navegue até Divi> Opções de tema. Clique na guia Builder e habilite o tipo de postagem “KB: Base de Conhecimento”.

Criação de artigos e categorias da base de conhecimento

Para ter uma boa ideia de como será a aparência do design, você precisará ter alguns artigos da base de conhecimento e configurações de categorias. Por enquanto, não há problema em usar conteúdo simulado.

Criando suas categorias de base de conhecimento

Você pode criar categorias da base de conhecimento da mesma forma que faria para categorias normais de postagem no WordPress.

Para fazer isso, navegue até Base de conhecimento> Categorias. Em seguida, adicione um Nome, Slug e Categoria Pai (se aplicável) para cada uma das categorias que você usará para os artigos da base de conhecimento. Para este exemplo, adicionei 6 categorias principais, cada uma com algumas subcategorias.

Para se ter uma ideia de onde isso está indo, veja como as categorias e subcategorias principais serão exibidas na página principal da base de conhecimento.

Atribuição de categorias a novos artigos

No momento, suas categorias estão em vigor, mas não há artigos atribuídos a elas. Você precisará criar artigos e atribuir uma (ou mais) das categorias criadas a cada um.

Você pode criar um novo artigo da mesma forma que criaria uma nova postagem no WordPress. Navegue até a Base de conhecimento> Adicionar novo artigo. Em seguida, adicione um Título e atribua uma categoria ao artigo. Você notará que o Divi Builder pode ser ativado porque habilitamos esse tipo de postagem em Opções de tema. Vou compartilhar algumas dicas para fazer isso mais tarde. Mas, por enquanto, você pode apenas adicionar algum editor WordPress padrão de conteúdo simulado. Depois disso publique o artigo.

Continue esse mesmo processo para criar todos os artigos necessários para que cada categoria tenha pelo menos um artigo atribuído a ela.

Verifique a página da base de conhecimento padrão

Depois de ativar o plug-in, uma página da base de conhecimento é criada automaticamente para você. Esta página possui o código de acesso necessário para implantar a base de conhecimento principal.

Aqui está a aparência da página por padrão.

Configurando o Layout e Estilo da Base de Conhecimento

O plugin da base de conhecimento tem muitas opções úteis para configurar a base de conhecimento para corresponder ao design do seu site. Existem opções personalizáveis ​​para a página principal, a página do artigo e a página do arquivo.

Configurando a página principal

Configuração da página principal

Primeiro, clique no botão Página principal na parte superior da página de configuração da base de conhecimento. Na guia de configuração, você pode deixar o estilo e as cores do layout padrão. Mas, para este exemplo, vou alterar a opção de modelo para usar os “Modelos da base de conhecimento projetados para artigos”. Faço isso principalmente porque permite que você personalize a página de arquivo com diferentes opções de estilo predefinido. Mas, se quiser manter os modelos de tema Divi para isso, você pode manter a opção selecionada para “Modelos de tema atuais usados ​​para postagens e páginas”.

No pop-up Modelos, desmarque a opção Exibir título principal e defina todos os preenchimentos e margens como 0px. Isso nos permitirá usar o Divi Builder para o título e o espaçamento da página.

Opções de organização da página principal e todo o texto

Por enquanto, vou deixar as opções Organizar e Todo o texto com seus padrões, mas fique à vontade para alterá-las por conta própria. Na guia Organizar, você pode até arrastar e soltar suas categorias na ordem que desejar. E as opções de Todo o Texto permitem que você altere o texto usado em toda a página (ou seja, o Título de pesquisa e o texto do botão).

Opção de ajuste da página principal

Em seguida, clique na guia Ajuste. É aqui que ocorre a maior parte do estilo da base de conhecimento principal. Não vou usar todas essas configurações, mas vou mudar algumas cores e adicionar alguns ícones. É assim que você pode combinar a base de conhecimento com seu Layout Divi pré-fabricado. Como pretendo usar o pacote de layout de produto digital, usarei essas cores para definir o estilo da página da base de conhecimento.

Cores da caixa de pesquisa

Na categoria da caixa de pesquisa , selecione as cores e atualize o seguinte:

Título: # 333333
Fundo de pesquisa: #ffffff
Fundo do botão: # 091c4f

Estilo de Conteúdo

Na categoria Conteúdo , selecione Estilo e atualize o seguinte:

Largura da página: largura total

Lista de estilos e cores dos artigos

Na categoria Lista de artigos , selecione Estilo e atualize o seguinte:

Ícone: Triângulo de Seta
Altura da lista de artigos: altura mínima de 100 px (isso é útil para fazer com que todas as caixas tenham a mesma altura)

Em seguida, selecione Cores e atualize o seguinte:

Texto de artigos: # 091c4f
Ícone de artigos: # 6767ef

Estilo e cores das categorias

Em seguida, em Categorias , selecione Estilo e atualize o seguinte:

Localização dos ícones: topo

Em seguida, clique em uma das caixas de categoria na visualização para selecioná-la. Em seguida, selecione um ícone de categoria dessa categoria específica. Faça isso para cada uma das caixas de categoria.

Existem mais de 500 ícones para escolher!

Em seguida, selecione Cores e atualize o seguinte:

Ícone de categoria de nível superior: #ffffff
Texto e ícone da subcategoria: # 333333
Divisor: #ffffff
Texto do cabeçalho da caixa da categoria: #ffffff
Fundo do título da caixa da categoria: # 091c4f

Recursos da página do artigo

Agora que configuramos a página principal, clique na página do artigo no topo da página. Em seguida, clique na guia de recursos. Aqui, você pode personalizar elementos como o botão Voltar e trilhas de navegação que aparecerão na parte superior do layout do artigo.

Por enquanto, vou apenas combinar o botão Voltar com o layout predefinido que usarei para a página do artigo. Em Recursos, selecione Navegação traseira e atualize o seguinte:

Cor do texto: #ffffff
Cor de fundo: # 091c4f
Cor da borda: # 091c4f
Largura da borda: 3px

Estilo de layout de página de arquivo

Para alterar o layout da página de arquivo, clique em “Página de arquivo” no topo da página. Na guia de configuração, você verá uma lista suspensa dos diferentes estilos disponíveis. Estou mantendo os padrões, mas sinta-se à vontade para experimentar os outros estilos.

Aqui está um exemplo da aparência de uma página de arquivo de categoria com o Estilo 1 padrão.

Projetando a página da base de conhecimento com a Divi

Agora que completamos a configuração das páginas da nossa base de conhecimento, estamos prontos para concluir o design da página principal da base de conhecimento com o Divi Builder.

Primeiro, vá para editar os títulos da página “Base de conhecimento” que foi criada automaticamente pelo plugin.

Em seguida, implante o Divi Builder. Selecione a opção “Choose a Premade Layout” e então no pop-up Carregar da Biblioteca, selecione o Digital Product Layout Pack. Em seguida, implemente o Layout da Página de Documentação na página.

Depois que o layout for carregado na página, selecione “Construir no Front End”.

Você verá que a seção superior contém o módulo de texto com o código de acesso que exibe nossa base de conhecimento recém-estilizada.

Agora tudo o que precisamos fazer é movê-lo para o local que queremos dentro do layout predefinido e ajustar o design conforme necessário com as opções do Divi Builder.

Para este exemplo, movi o módulo de texto que contém o shortcode KB diretamente sob o módulo de texto com o Título “Documentação”.

Então eu apaguei tudo até que a única coisa que restou foi a seção superior contendo uma linha com o Módulo de Texto “Documentação” e o módulo de texto contendo o shortcode. Também mantive a seção inferior com o CTA.

Para finalizar o design, abra as configurações do módulo de texto que contém o shortcode e atualize o seguinte:

Cor de fundo: #ffffff
Fonte do texto: Poppins
Cantos arredondados: 10 px

Aqui está o design final.

E também se ajusta bem no celular.

Projetando a página do artigo usando o Divi Builder

Como ativamos o tipo de postagem da Base de conhecimento da base de conhecimento em Opções do tema Divi, você pode criar seus artigos usando o Divi Builder. O modelo de artigo da base de conhecimento limita o Divi Builder ao conteúdo sob o título da página e trilhas de navegação e botão Voltar. Ele também limita o conteúdo do divi builder a uma largura máxima de 1080px.

Para este exemplo, vou dar o pontapé inicial no design de um artigo da base de conhecimento com um layout predefinido. Para fazer isso, vá editar um dos artigos e implantar o Divi Builder. Selecione “Choose a Premade Layout” e no pop-up Carregar da biblioteca, selecione o Digital Product Layout Pack e implante a página de contato do produto digital.

Agora veja a aparência do artigo. Observe que o conteúdo do Divi Builder fica diretamente abaixo do título do artigo, trilhas de navegação e botão Voltar, que não são personalizáveis ​​pelo Divi Builder.

Mas você ainda tem algumas opções de personalização poderosas para o conteúdo que permite o Divi Builder. Você pode usar o plano de fundo da seção superior do layout da página de contato para pesquisar como plano de fundo da seção para as diferentes seções (ou etapas) do artigo. E você pode adicionar capturas de tela facilmente usando o módulo de imagem. Basicamente, você tem o potencial ilimitado do Divi Builder para todo o artigo.

Aqui está um exemplo simples de como poderia ser uma página de artigo projetada com Divi.

Claro, você pode adicionar algum CSS personalizado para ajustar a largura do contêiner do artigo para obter um layout de largura total. E você pode adicionar algum código para ocultar o título e, em seguida, usar o conteúdo dinâmico do Divi para colocar o título do artigo em qualquer lugar que desejar no Divi Builder.

Pensamentos finais

O plugin Echo Knowledge Base é surpreendentemente poderoso, mesmo sem todos os addons premium disponíveis (vale a pena conferir). As opções de configuração permitem que você organize e estilize suas páginas de base de conhecimento para combinar com seu layout Divi facilmente. Para completar, você pode até usar o Divi Builder para projetar sua página de base de conhecimento e página de artigo. Espero que este tutorial tenha sido útil para aqueles que procuram adicionar base de conhecimento ao seu site Divi.

Estou ansioso para ouvir de você nos comentários.

Saúde!