CMS (antigo Gerenciador de Dados): exibir conteúdo da coleção em uma página normal
6 min de leitura
Neste tutorial, você vai aprender a criar uma página personalizada para exibir o conteúdo de uma coleção. Mostraremos como organizar elementos de página, criar uma coleção e conectá-la a esses elementos usando um conjunto de dados. Por fim, testaremos a página no modo Visualização e publicaremos o site para que os visitantes do seu site possam ver seus dados.
Observação:
Neste tutorial, estamos criando uma página estática para exibir o conteúdo de uma coleção. Você também pode configurar páginas dinâmicas de item que criam automaticamente páginas para cada item em sua coleção.
Etapa 1 | Crie uma coleção
Uma coleção é onde você armazena o conteúdo que você precisa para o seu site ou onde você coleta informações enviadas por seus visitantes. Ao criar uma coleção, você também precisa definir suas permissões. Elas permitem que você controle o que seus visitantes podem fazer com o conteúdo da sua coleção. Aqui, estamos adicionando uma coleção vazia que armazenará o conteúdo que você deseja exibir aos visitantes.
Para criar uma coleção:
- Acesse CMS no painel de controle do seu site.
- Clique em Criar coleção.
- Insira um nome para sua coleção.
- Escolha quantos itens você deseja em sua coleção:
- Um único item: uma coleção pode ter um único item que contém muitos campos, como texto, imagens, vídeo e URLs. Esse tipo é mais adequado para conteúdo que não se repete, como uma página "Sobre".
- Vários itens (padrão): uma coleção com vários itens armazena muito mais conteúdo e pode aparecer em um elemento, como um repetidor ou uma tabela. Esse tipo é bom para listagens de propriedades, portfólios, receitas, etc. Você pode ler mais sobre a diferença entre coleções com um único item e vários itens.
- Clique em Criar.
Etapa 2 | Configure sua coleção
Adicione um campo para cada informação que você deseja que seus visitantes vejam e insira o conteúdo.
Para configurar sua coleção:
- Acesse CMS no painel de controle do seu site.
- Clique na coleção desejada.
- Clique em Gerenciar campos e clique em + Adicionar campo para adicionar um campo à sua coleção.
- Configure o campo para corresponder às informações que você deseja que seus visitantes vejam. Certifique-se de selecionar o tipo de campo correto para corresponder ao conteúdo do seu campo.
- Defina o campo para cada um dos elementos planejados da página.
- Insira conteúdo em sua coleção.
Etapa 3 | Faça o design da sua página
Sua página deve incluir elementos que permitam que os visitantes vejam as informações que você deseja exibir.
Para começar:
- Vá para o menu Elementos e selecione o grupo que contém um tipo de elemento que corresponde a um tipo de campo da sua coleção.
- Arraste elementos para a sua página para personalizar seu design e fazer o layout da sua página. Você pode selecionar elementos como texto e imagem.
Etapa 4 | Configure seus elementos
Depois de adicionar elementos da página, você pode configurar a aparência de cada elemento no painel Configurações.
Para configurar seus elementos:
- Selecione um elemento da página, clique no ícone Configurações e use as opções para configurá-lo.
- Repita isso para cada um dos elementos da sua página.
Agora você precisa conectar seus elementos à sua coleção. Usaremos um conjunto de dados para fazer isso. Vamos falar sobre ele nas próximas etapas.
Etapa 5 | Adicione e configure um conjunto de dados
Um conjunto de dados conecta seus elementos à sua coleção. Ao adicionar um conjunto de dados, você precisa decidir a qual coleção deseja se conectar, se deseja que seus visitantes possam ler e/ou gravar em sua coleção e muito mais.
Para adicionar um conjunto de dados à sua página:
- Vá para o CMS no seu Editor:
- Editor Wix: clique em CMS
no lado esquerdo do Editor. - Editor X: clique em CMS
na parte superior do Editor X.
- Editor Wix: clique em CMS
- Clique em Adicionar elementos de conteúdo.
- Clique em Conjunto de dados. Um conjunto de dados é adicionado à sua página.
- Selecione o conjunto de dados e clique em Configurações. O painel Configurações do banco de dados é aberto.
- Em Conectar uma coleção, selecione sua coleção.
- Selecione Apenas ler para o Modo.
- Se desejar, você pode configurar filtros e classificações para o conjunto de dados.
- Feche o painel.
Etapa 6 | Conecte os elementos da sua página
Depois de configurar seu conjunto de dados, você pode conectar seus elementos a ele. Você precisa ir para cada um dos elementos da sua página e conectá-lo ao mesmo conjunto de dados. Cada vez que você conecta um elemento, você também define a qual campo em sua coleção seu valor deve se conectar. Alguns elementos contêm mais de uma propriedade que pode ser conectada a diferentes campos.
Para conectar seus elementos:
- Selecione um elemento e clique no botão Conectar aos dados
. - Selecione o campo em sua coleção onde as informações estão armazenadas.
- Repita isso para cada um dos elementos da sua página.
Na próxima etapa, criaremos os botões Anterior e Próximo para navegar pelos elementos no conjunto de dados.
Etapa 7 | Crie botões Anterior e Próximo
Agora que todos os seus elementos estão conectados à mesma coleção por meio do mesmo conjunto de dados, você precisa permitir que seus visitantes naveguem pelas informações. Para fazer isso, adicione dois botões à sua página, conecte-os ao mesmo conjunto de dados que os outros elementos e defina suas ações de clique.
Para criar botões Anterior e Próximo:
- Adicione dois botões à sua página e altere seus textos para Anterior e Próximo.
- Clique nos botões Conectar aos dados
. - No painel Conectar botão, selecione seu conjunto de dados.
- Em A ação do clique conecta-se a, selecione Item anterior para o primeiro botão e Item seguinte para o segundo botão.
Etapa 8 | Teste sua página
Agora você pode testar sua página no modo Visualização. O conteúdo que você visualizar será do seu banco de dados Sandbox, que só é visível no modo Visualização. Saiba mais sobre o Sandbox.
Para testar sua página:
- Clique em Visualizar.
- Clique nos botões Próximo e Anterior.
- Clique em Voltar ao Editor.
Etapa 9 | Publique seu site
Observação:
Essa etapa se aplica apenas quando você tem o Sandbox ativado. Saiba mais sobre o Sandbox.
Agora é hora de publicar seu site para que seus visitantes possam visualizar seu conteúdo.
A publicação do seu site cria uma versão vazia da sua coleção com todos os campos da sua coleção Sandbox. O conteúdo que seus visitantes verão na versão publicada do seu site é salvo na sua coleção Live, que você pode acessar através do Gerenciador de Dados.
Depois de publicar seu site para criar uma coleção Live, você pode adicionar os dados à coleção Live manualmente ou sincronizar o conteúdo da sua coleção Sandbox.
Para configurar uma coleção ativa:
- No Editor, clique em Publicar para publicar seu site.
- Vá para o CMS no seu Editor:
- Editor Wix: clique em CMS no lado esquerdo do Editor.
- Editor X: clique em CMS na parte superior do Editor X.
- Editor Wix: clique em CMS
- Clique em Coleções.
- Selecione a coleção desejada.
- Escolha como preencher sua coleção Live:
- Para adicionar dados manualmente à sua coleção Live:
- Clique em Coleção Live e insira seu conteúdo.
- Para sincronizar o conteúdo da sua coleção Sandbox:
- Clique em Coleção Sandbox.
- Clique em Sincronizar conteúdo.
- Selecione a opção de sincronização desejada.
- Clique em Sincronizar.
- Clique em Sincronizar novamente para confirmar.
- Para adicionar dados manualmente à sua coleção Live:
Etapa 10 | Veja seu conteúdo online
Depois de publicar seu site, seu conteúdo está disponível para seus visitantes. Quando eles acessam sua página, eles veem o conteúdo da sua coleção Live.
Próximos Passos:
Você pode adicionar mais funcionalidades à sua página.
- Crie um formulário para capturar a entrada do usuário.
- Mostre informações de várias coleções usando filtros do conjunto de dados e/ou campos de referência.
- Melhore a funcionalidade da sua página com código usando Velo.
- Importe dados para sua coleção de um arquivo CSV.
- Adicione personalização usando hooks de dados e hooks de coleção usando o Velo.
- Adicione interatividade usando a API Velo.
- Publique os dados em qualquer web API de terceiros usando módulos da web e hooks de dados usando o Velo.
Esse artigo foi útil?
|