Como usar modelos de diretório de membros para criar um diretório de usuários

Publicados: 2023-01-25

Os modelos de diretório de membros facilitam a exibição de uma grande quantidade de informações em seu site WordPress de uma maneira bem ordenada e bonita.

A função de um diretório de listagem de usuários é gerenciar seu banco de dados on-line (por exemplo, equipe, empresas em sua rede, especialistas em tópicos ou qualquer coisa intermediária). Os diretórios de membros (listas de usuários) fornecem aos seus visitantes funções de pesquisa e filtragem fáceis de navegar. Os diretórios criam oportunidades de networking e comércio e permitem que as pessoas se conectem e participem de sua comunidade. Além disso, existem muitas vantagens de SEO e marketing também!

Neste tutorial, usaremos um dos 5 modelos de diretório de membros pré-criados do Profile Builder para criar um diretório de membros sofisticado, bonito e, o mais importante, útil. Com nossos modelos fáceis de usar, você não precisa de nenhum conhecimento de codificação. Forneceremos instruções passo a passo para criar um diretório de usuário, equipe ou empresa impecável.

Por que preciso de um plug-in de diretório de listagem de usuários com modelos de diretório de membros?

É possível criar uma lista manual de informações ou tabelas de informações para seu site, mas é difícil apresentar listas de maneira útil. Se suas listas forem longas e complexas, você precisará adicionar uma função de classificação ou filtragem, ou seus usuários não conseguirão obter o que precisam. E é um pesadelo manter as listas manuais atualizadas!

Um plug-in de listagem de usuários devidamente integrado fornece diretórios de membros que são muito mais fáceis de manter do que tabelas e listas, mas também podem atendê-lo de outras maneiras. Você pode criar vários diretórios de membros diferentes, em diferentes partes do seu site, com apenas alguns cliques. Mais importante, o plug-in Profile Builder é na verdade uma combinação de 4 funções importantes do WordPress:

  • A capacidade de obter as informações necessárias de seus usuários por meio de formulários de usuário,
  • e usar as informações para gerenciar usuários e suas funções e capacidades,
  • tudo feito sem prejudicar a segurança do seu site,
  • enquanto ainda é capaz de exibir informações úteis lindamente através de diretórios de membros.

Instruções sobre como criar um diretório de membros usando modelos de diretório de membros

Nesta seção, faremos um exemplo passo a passo do uso de um dos modelos de diretório de membros do Profile Builder para criar uma lista de usuários.

Etapa 1: instalar, configurar e registrar o Profile Builder Pro

Você precisará de uma instalação atualizada do WordPress e de um tema adequado. Para este tutorial, usaremos o tema Hello Elementor. Solicitaremos aos vendedores de plantas que forneçam sua área de especialização e, em seguida, usaremos essas informações para exibir uma lista filtrada de vendedores de plantas especializados.

Você também precisará do plug-in Profile Builder PRO. Comece escolhendo o plano Profile Builder mais adequado às suas necessidades. Após inscrição e pagamento, receberá um e-mail a confirmar a sua compra.

Faça login na sua conta Cozmoslabs. Vá para a guia Downloads . Baixe os arquivos compactados principal e profissional do Profile Builder para o seu computador. Em seguida, vá para a página Plugins no painel do WordPress. Carregue os dois arquivos em seu site, um de cada vez. Clique em Instalar e Ativar todas as vezes.

Uma vez configurado em seu painel WordPress, você precisará registrar a versão PRO para ter acesso a todas as funcionalidades. Vá para Profile Builder → Register Version para criar uma conexão entre seu site e o Profile Builder PRO registrando seu site. Use a chave ou SR (número de série) que aparece na guia Licenças na página da sua conta Cozmoslabs. Se precisar de ajuda com o registro, confira esta documentação passo a passo.

A imagem 1 mostra a página da conta Cozmoslabs com uma chave SR para criar uma conexão entre seu site e os modelos de diretório de membros do Profile Builder PRO
Imagem 1: Faça login na sua conta Cozmoslabs. Use a tecla SR para criar uma conexão entre seu site e o Profile Builder Pro

Etapa 2: personalize sua página de registro

Como outros plug-ins avançados (por exemplo, WooCommerce), o plug-in Profile Builder pode criar novas páginas automaticamente. Clique no botão Criar páginas de formulário . Ele criará suas páginas Editar perfil, Login e Registro e o levará para a guia Páginas no painel do WordPress. Suas novas páginas Editar perfil, Login e Registro serão perfeitamente integradas à aparência do seu site. Para verificar, clique no botão Exibir que aparece ao passar o mouse.

Alternativamente, a maneira mais rápida de identificar suas páginas do Profile Builder é navegar até a página principal do Profile Builder e clicar no grande botão azul “View Form Pages” . Você também pode navegar até Páginas → Todas as páginas .

A imagem 2 mostra onde clicar no botão 'Exibir páginas de formulário' para ver as páginas pré-criadas do Profile Builder a serem usadas pelos modelos de diretório de membros
Imagem 2: Clique no botão 'Exibir páginas de formulário' para ver as páginas pré-criadas do Profile Builder que são usadas por todos os modelos de diretório de membros

Se você não consegue encontrar a página de registro pré-criada ou deseja adicionar uma nova página de registro, você pode criar uma nova. Basta copiar o código de acesso da página de registro da página Campos de formulário e colá-lo em uma página em branco.

Outro atalho é escolher o bloco Register do Profile Builder (ou qualquer outro formulário de usuário) no menu de blocos do Gutenberg.

A imagem 3 mostra onde selecionar o formulário de registro do Profile Builder no menu de blocos do Gutenberg
Imagem 3: Selecione o formulário de registro do Profile Builder no menu de blocos do Gutenberg

Observação: lembre-se de que você pode personalizar tanto a página de registro quanto o próprio formulário de registro. Sua página de registro deve conter todas as informações pertinentes para garantir que os usuários entendam para o que estão se inscrevendo. O formulário de registro na página de registro deve conter os campos úteis para seu modelo de negócios e sua listagem de usuários.

Na próxima etapa, você personalizará o formulário de registro pré-criado adicionando campos que deseja especificamente, removendo campos redundantes e adicionando campos de valores especiais e regras para evitar ações não autorizadas.

Personalizar formulários

Navegue até a guia do painel Criador de perfil → Campos de formulário . Uma solicitação para ativar os complementos de listagem de usuários é exibida. Se você perder o prompt, poderá navegar até a página de complementos para ativá-los. Recomendamos que você ative os complementos Lista de usuários, Formulários de registro múltiplo e Formulários de perfil de edição múltipla antes de começar a personalizar seu primeiro formulário.

Vamos começar a personalizar o formulário padrão pré-criado!

Novos formulários incluirão, por padrão, todos os campos personalizados durante esta etapa. Você pode criar formulários novos ou diferentes navegando até a página Formulários de registro do criador de perfil e clicando em Adicionar novo .

Nota: O formulário padrão não aparece nesta página. Para editar este formulário padrão original, vá para a página de campos do formulário do Profile Builder.

Seu formulário de registro deve conter os campos que você precisa como gerente de negócios. Neste exemplo, queremos alterar o formulário para solicitar aos inscritos que forneçam sua área de especialização no comércio de plantas, localização e informações de contato para criar um diretório comercial para os membros.

O Profile Builder inclui alguns campos padrão básicos para cada formulário de registro. Você os verá se rolar a página para baixo. Clique no botão Excluir ao lado dos campos que deseja remover. Para começar a adicionar novos campos, clique na seta no campo Selecionar uma opção do menu e percorra o menu pop-up para obter a lista de campos que você pode escolher.

A imagem 4 mostra onde clicar em 'Selecionar uma opção'. Os campos básicos padrão aparecem na coluna à esquerda do menu suspenso do seletor de campos de formulário que é usado por todos os modelos de diretório de membros
Imagem 4: Clique em 'Selecionar uma opção. Os campos básicos padrão aparecem na coluna à esquerda do menu suspenso do seletor de campo de formulário

Escolha os campos desejados e personalize-os como desejar antes de clicar no botão Adicionar campo . Neste exemplo, adicionamos o título do campo 'Campo especialista' , escolhemos o tipo de campo Seleção múltipla e adicionamos algumas opções (cactos, arbustos, árvores, etc.).

A Imagem 5 mostra o título do Campo recém-adicionado 'Campo Especialista', escolhendo o tipo de campo Selecionar e adicionando algumas Opções.
Imagem 5: Adicionado o título do campo 'Campo especialista', escolha o tipo de campo Selecionar e adicione algumas opções

Na próxima etapa, você aprenderá como exibir as informações de todos esses campos em um diretório de membros ou lista de usuários para tornar as informações úteis para os visitantes do seu site.

Etapa 3. Crie uma lista de usuários do WordPress

Conforme mencionado na Etapa 2, você precisará habilitar o complemento Listagem de usuários antes de prosseguir. Recomendamos que você ative os add-ons Listagem de Usuários, Formulários de Registro Múltiplo e Formulários Múltiplos de Edição de Perfil .

A imagem 6 mostra onde ativar complementos para usar os modelos de diretório de membros
Imagem 6: Para usar os modelos de diretório de membros, você deve primeiro ativar o complemento 'Lista de usuários'

No painel do WordPress, procure Listagem de usuários na guia Criador de perfil. Clique nisso. Na página de lista de usuários, você verá uma lista de usuários mestre padrão, publicada e pronta chamada Userlisting com o shortcode [wppb-list-users name="userlisting"]

Se você é novo em Listagens de usuários, recomendamos que não edite esta listagem, pois ela pode servir como uma referência útil para as configurações padrão enquanto você aprende. Além disso, tenha cuidado ao usar essa lista principal para exibir todas as informações do seu site sem adicionar filtros.

Clique no botão Adicionar novo na parte superior e dê um título à sua lista de usuários (diretório de membros).

NOTA: Se você não conseguir encontrar o botão Adicionar novo , certifique-se de ter ativado os complementos necessários (lista de usuários, formulários de registro múltiplo e complemento de vários formulários de perfil de edição)

A imagem 7 mostra como adicionar uma nova listagem de usuários com o título Plant Specialists, Select Contributors e Subscribers usando os campos comuns a todos os modelos de diretório de membros
Imagem 7: Adicione uma nova listagem de usuários com o título Especialistas em plantas, colaboradores selecionados e assinantes

Personalizar as configurações da lista de usuários

Neste exemplo, usamos o título de listagem usado 'Especialistas em plantas' e restringimos as funções a serem exibidas para 'Contribuidores' e 'Assinantes'. Depois de dar um título à sua lista de usuários, role um pouco para baixo até as outras configurações básicas . Você pode escolher quais funções de usuário incluir e como elas serão exibidas na lista de usuários.

Por exemplo, você pode ocultar a listagem de usuários de usuários não conectados para que apenas as pessoas que estão conectadas possam ver o diretório. Se você deve selecionar Visível apenas para usuários logados , uma outra opção de menu aparece onde você pode selecionar se deve ser visível para todos os usuários logados ou para clientes, assinantes, etc. Marque a caixa ” * ” para tornar fique visível para todos os usuários conectados, mas tenha cuidado ao expor informações confidenciais a todos os usuários.

A imagem 8 mostra onde selecionar opções para tornar a listagem de usuários visível para todos ou apenas para usuários selecionados
Imagem 8: Selecione as opções para tornar a lista de usuários visível para todos ou apenas para usuários selecionados

Personalizar Menus Facetados

A próxima seção da página é Menus Facetados. Adicionar facetas significa escolher quais filtros estarão disponíveis em sua página de listagem de usuários. A maioria dos usuários está bastante familiarizada com o uso de filtros em sites de compras. Assim, você pode adicionar o mesmo tipo de filtros com os quais eles estão acostumados, para ajudá-los a obter as informações de que precisam em seu site. Por exemplo, você pode permitir que eles filtrem os resultados da pesquisa por local, área de especialização, idade etc.

Vamos adicionar um filtro para classificar os membros por sua especialidade de planta, então digitamos “Especialidade” como o rótulo que queremos exibir na página. Para este exemplo de Menu Facetado, escolhemos Selecionar Múltiplo como o Tipo de Faceta — já que você deseja que as pessoas possam selecionar várias opções simultaneamente. No campo Facet Meta , usamos o menu suspenso para selecionar o campo “Especialista em” como fonte para o filtro (Facet Meta).

Clique em Adicionar entrada . Repita as mesmas etapas para adicionar quantos filtros forem necessários. Assim que você clicar em Adicionar entrada , seu novo filtro aparecerá no resumo do filtro (faceta) logo abaixo do botão Adicionar entrada.

A imagem 9 mostra como adicionar a faceta 'Plant Specialty' como um rótulo usando 'select multiple' das opções usadas por todos os modelos de diretório de membros
Imagem 9: Adicione a faceta 'Plant Specialty' como um rótulo usando 'select multiple'

É assim que os filtros ficarão no front-end:

Menus facetados no front-end

Personalizar configurações de pesquisa

Em seguida, escolha como o Profile Builder deve localizar as informações para fazer a barra de pesquisa funcionar. Esta seção fica logo abaixo da seção Menus Facetados nesta mesma página. Escolha as funções de pesquisa marcando ou desmarcando quais informações você deseja verificar quando um visitante pesquisa uma palavra-chave na barra de pesquisa.

A imagem 10 mostra onde selecionar as configurações de 'pesquisa' usadas por todos os modelos de diretório de membros para a listagem de novos usuários
Imagem 10: Selecione as configurações de 'pesquisa' para a listagem de novos usuários

Crie seu diretório usando modelos de diretório de membros

A seção final é onde você escolhe um modelo de diretório de membros e personaliza o formato e a maneira como deseja que a listagem apareça no front-end do seu site. Como você deve saber, padronizar o design e a formatação de diferentes elementos em seu site pode levar horas. É por isso que o Profile Builder oferece 5 temas pré-projetados para sua página de listagem de usuários.

Há um tema padrão, além de outros 4 temas personalizados. Cada um representa a melhor maneira de exibir tabelas, grades, caixas ou listas, respectivamente. Ao passar o mouse sobre cada um, você verá um botão para visualizar o tema e outro para ativá -lo.

Cada modelo inclui uma exibição de diretório de membros (lista de usuários) que aparece como uma lista ordenada em seu site, além de uma página individual para cada entrada em sua lista de membros. É aí que você exibirá as informações detalhadas de cada membro.

A imagem 11 mostra como visualizar e ativar os temas dos modelos de diretório de membros
Imagem 11: Visualize e ative um tema de modelos de diretório de membros

Os modelos de diretório de associação são um excelente ponto de partida, mas você pode personalizar ainda mais cada tema. Por enquanto, basta escolher aquele que você acha que ficará melhor e que se adequará melhor ao tipo de informação que deseja exibir. Você pode alternar facilmente para um tema diferente, e o HTML e o CSS serão atualizados automaticamente para o novo estilo.

O modelo Padrão exibe apenas uma função de classificação minimalista, portanto, para este exemplo, usamos o modelo Tablesi para ilustrar seus botões de filtro proeminentes e campo de pesquisa de diretório.

Personalize as informações do usuário a serem exibidas usando tags

Para personalizar as informações que deseja exibir em seu diretório de membros, role para baixo para ver o subtítulo “Modelo de lista de usuários”. Se parece com isso:

A imagem 12 mostra um resumo das informações da lista de usuários HTML a serem exibidas
Imagem 12: Resumo das informações da lista de usuários HTML a serem exibidas

NOTA: O modelo de lista de todos os usuários é para personalizar o diretório de membros (lista de usuários) conforme exibido em seu site. O modelo de lista de usuário único é para personalizar os detalhes do membro individual quando as pessoas clicam no botão “Mais” no diretório de membros. Chegaremos a isso em breve!).

Se estiver de acordo com os campos de exibição padrão, basta deixar tudo como está. Se quiser adicionar ou remover informações do diretório do usuário, você encontrará todas as tags do Profile Builder disponíveis para cada tipo de listagem no lado direito da coluna de exibição à direita. Neste exemplo, removemos o “número de postagens” do modelo de diretório de membros excluindo as linhas apropriadas, como pode ser visto nesta imagem:

A imagem 13 mostra como uma coluna de cabeçalho 'número de postagens' foi removida das colunas padrão dos modelos de diretório de membros
Imagem 13: Remoção da coluna de cabeçalho dos modelos de diretório de associação padrão 'número de postagens' do diretório de membros

Por fim, vamos personalizar como queremos que as entradas individuais apareçam quando os visitantes clicarem no botão “Mais” ou “Visualizar” no diretório de membros. Role para baixo até o modelo de lista de usuário único .

Neste exemplo, adicionaremos outro rótulo nomodelo de usuário único (a listagem de perfil do indivíduo), o rótulo “Especialista em”.Basta destacar e copiar a tag 'Especialista' e a tag da direita e colá-la à esquerda.

A imagem 14 mostra que o campo 'especialista' criado de forma personalizada substituiu o campo 'apelido' padrão dos modelos de diretório de membros
Imagem 14: Adicionada a seção 'Especialista em' com campo 'especialista' personalizado

Corrija erros com a função de reinicialização

Erros podem acontecer, especialmente quando você está fazendo muitas customizações. Felizmente, você pode restaurar as configurações padrão para um novo começo. Você pode redefinir as configurações gerais de lista de usuários, o modelo de lista de todos os usuários ou o modelo de lista de usuário único ou pode começar do zero redefinindo tudo. Basta rolar de volta para a seção de modelos de diretório de membros. Passe o mouse sobre o tema ativo. Clique no botão Redefinir dados e selecione qual configuração ou configurações você deseja redefinir.

A imagem 15 mostra onde selecionar o tipo de dados que deseja redefinir nos modelos de diretório de membros
Imagem 15: Selecione o tipo de dados que deseja redefinir nos modelos de diretório de membros que você usou.

Etapa 4: Publicar modelos de diretório de membros

Quando estiver satisfeito com suas personalizações, clique no botão Publicar na parte superior. Isso gerará um shortcode para sua listagem de usuários, que você pode colar ou inserir por meio de blocos do Gutenberg em qualquer página do seu site.

E: Ta-Daa! Esta é a aparência do seu novo diretório de membros no front-end do site. Observe os botões de filtro proeminentes dos modelos de diretório de membros do Tablesi. Se você não gostar da aparência, basta escolher um modelo diferente.

A imagem de captura de tela 16 mostra a aparência da listagem do diretório de usuários em seu site ao usar modelos de diretório de membros
Imagem 16: É assim que o diretório se parece em seu site usando modelos de diretório de membros

A próxima imagem mostra a aparência de uma página de informações de usuário individual quando você usa um dos modelos de diretório de associação. Os visitantes do seu site podem acessar esta página clicando no botão “visualizar” ou “mais” na lista de diretórios.

A imagem 17 mostra a aparência de uma página de informações de usuário individual ao usar modelos de diretório de membros
Imagem 17: Esta é a aparência de uma página de informações de um usuário individual.

Conclusão

O plug-in Profile Builder Pro torna muito fácil listar seus usuários de uma forma que agrega valor real ao seu site. Os modelos pré-criados para formulários de registro de usuários e exibições de listagem de usuários economizarão seu tempo (e dinheiro!). O Profile Builder Pro oferece 5 modelos de diretório de membros fáceis de usar que garantem a adição de novas oportunidades de monetização para o seu negócio.

Leve seu site a um novo nível com apenas alguns cliques: Baixe o Profile Builder Pro aqui mesmo!

Criador de perfil profissional

Crie belos formulários front-end de registro e perfil com campos personalizados. Configure diretórios de membros, redirecionamentos personalizados, personalize e-mails de usuários e muito mais usando o plug-in de gerenciamento de usuários tudo em um.

Obtenha o plug-in

Ou baixe a versão GRATUITA

Você usou o Profile Builder para criar um ou mais diretórios de membros ou diretórios de negócios para o seu site? Ajude outras pessoas a maximizar o potencial de seus sites. Compartilhe sua experiência na seção de comentários abaixo!