header-logo
Confira como usar o Wix para construir seu site e negócio.
Personalize e gerencie seu site com os recursos do Wix.
Gerencie assinaturas, planos e faturas.
Administre seu negócio e conecte-se com os membros.
Compre, conecte ou transfira um domínio para o seu site.
Expanda seu negócio e presença online.
Aumente sua visibilidade com recursos de SEO e marketing.
Acesse recursos avançados e otimize sua produtividade.
Encontre soluções, problemas conhecidos ou contate-nos.
placeholder-preview-image
Domine novas habilidades com nossos cursos e tutoriais.
Confira nossas dicas de web design, marketing e mais.
Aumente o tráfego orgânico vindo dos motores de busca.
Desenvolva um site único com a nossa plataforma full-stack.
Alcance seus objetivos com a ajuda de um especialista.
placeholder-preview-image

Apps mobile do Wix: personalizar os recursos e o conteúdo do app nativo

31 min
Neste artigo
  • Personalizar o cabeçalho
  • Personalizar o menu de navegação
  • Adicionar elementos às suas telas
  • Gerenciar suas telas
  • Personalizar o design do seu app
  • Perguntas frequentes
  • Vídeo tutorial
Depois de criar o tema do seu próprio app mobile nativo, personalize seu conteúdo e recursos. O seu próprio app nativo é composto de telas, semelhantes às páginas do site. Escolha de quantas telas você precisa e o que cada uma mostra.
Adicione elementos às telas com base nas necessidades do seu negócio, como uma página de produto do Wix Stores, uma lista do Wix Events ou uma agenda de aulas do Wix Bookings. Personalize sua tela ainda mais com botões, imagens, vídeos e mais. Você também pode melhorar o design do seu app selecionando diferentes cores e fontes.
Escolha se deseja personalizar o conteúdo do seu app no painel de controle do seu site ou ao fazer download do app Wix e personalizando no mobile. 

Personalizar o cabeçalho

O cabeçalho do seu app mobile aparece na tela inicial e é a primeira coisa que os membros veem depois de fazer login no app. Personalize-o para o seu negócio ao adicionar seu logo, uma foto de capa e uma cor de tema para destacar seus botões e detalhes.
App Wix
App do Wix Studio
  1. Vá para App mobile no painel de controle do seu site.
  2. Clique na aba Seu próprio app mobile ou clique na aba com o nome do seu próprio app mobile. 
  3. Clique em Editar app mobile
  4. No criador de app mobile, clique no cabeçalho do seu app para abrir o painel Editar cabeçalho.
Uma captura de tela do painel Editar cabeçalho no editor web do painel de controle.
  1. Personalize o design do seu cabeçalho usando as opções disponíveis:
    • Ícones: ative as alavancas relevantes para adicionar ícones ao seu cabeçalho.
      Observação: dependendo dos apps do Wix que você instalou (por exemplo: Wix Stores, Wix Chat), você pode ver diferentes opções de personalização.
    • Digite: selecione um design de cabeçalho para sua tela inicial:
6. Clique em Salvar no canto superior direito.

Personalizar o menu de navegação

Seu próprio app mobile consiste em telas, e o menu de navegação ajuda os visitantes a navegar por elas. Você pode optar por colocar o menu de navegação na parte superior ou inferior do seu app e personalizar seu design adicionando ícones de menu personalizados.
App Wix
App do Wix Studio
  1. Vá para App mobile no seu painel de controle.
  2. Clique na aba Seu próprio app mobile ou clique na aba com o nome do seu próprio app mobile. 
  3. Clique em Começar ou clique em Editar app mobile
  4. Clique na barra de navegação do seu app. Ela aparece abaixo do cabeçalho ou na parte inferior do aplicativo.
Uma captura de tela do painel de navegação da barra inferior no Editor web.
  1. Escolha um layout de navegação:
    • Barra superior: os membros navegam entre as telas na parte superior do seu app diretamente abaixo do cabeçalho.
    • Barra inferior: os membros navegam entre as telas na parte inferior do seu app. Você pode adicionar ícones personalizados para cada tela se você selecionar essa opção.
      • Etiquetas: clique na alavanca para mostrar ou ocultar o nome da tela no menu de navegação. O nome aparece abaixo do ícone da tela. Recomendamos incluir o nome da tela por motivos de acessibilidade.
      • Ícones: personalize os ícones no seu menu de navegação. Cada ícone corresponde a uma tela. Passe o mouse sobre um ícone e clique em Alterar ícone para substituí-lo.
  2. Clique em Salvar no canto superior direito.

Adicionar elementos às suas telas

Os elementos são os blocos de construção do conteúdo do seu app. Use-os para mostrar quem você é, o que você faz e o que você oferece aos usuários do seu app. Por exemplo, se você tiver um negócio de planejamento de eventos, você pode adicionar um elemento de eventos para permitir que as pessoas confirmem presença diretamente através do app.

Após adicionar elementos, você pode movê-los facilmente para cima ou para baixo na mesma tela ou transferi-los para uma tela diferente. Você também tem a opção de duplicar elementos, remover o que não deseja e editar o conteúdo dentro de cada elemento.
Dica:
Saiba mais sobre como adicionar elementos para negócios específicos como lojas online, restaurantes e agendamentos.
App Wix
App do Wix Studio
  1. Vá para App mobile no seu painel de controle.
  2. Clique na aba Seu próprio app mobile ou clique na aba com o nome do seu próprio app mobile. 
  3. Clique em Começar ou clique em Editar app mobile
  4. Clique em Elementos à esquerda. 
  5. Navegue pelo catálogo e clique em um elemento para adicioná-lo ao seu app.
    Dica: em Itens básicos você pode adicionar elementos para personalizar e organizar seu aplicativo, como botões, imagens, separadores e vídeos.
Uma captura de tela do catálogo de elementos no Editor web com um carrossel de eventos selecionado.
  1. Clique no elemento na visualização do app para personalizar suas configurações de exibição e conteúdo.
Uma captura de tela de um elemento com as opções reordenar, duplicar e excluir selecionadas.
Observação:
Nem todos os elementos podem ser personalizados no criador de app mobile. Pode ser que você precise atualizar alguns elementos no app Wix ou no app do Wix Studio.
  1. (Opcional) Gerencie o elemento ainda mais usando as opções disponíveis:
    Observação: as opções variam dependendo dos elementos que você adiciona. 
8. Clique em Salvar no canto superior direito.

Gerenciar suas telas

Atualize as telas do seu app nativo, incluindo o número total de telas você deseja mostrar na barra de navegação, a ordem das telas e os nomes das telas. Você também pode criar telas que são ocultadas no menu principal do seu app.
App Wix
App do Wix Studio
  1. Vá para App mobile no seu painel de controle.
  2. Clique na aba Seu próprio app mobile ou clique na aba com o nome do seu próprio app mobile. 
  3. Clique em Começar ou clique em Editar app mobile
  4. Clique em Telas à esquerda.
  5. Escolha o que você quer fazer:
Uma captura de tela do menu Mais ações ao lado de uma tela no painel de navegação.

Personalizar o design do seu app

Personalize as cores e fontes do seu app mobile nativo para que ele combine com a sua marca. Selecione um tema de app ou escolha cores e fontes para mostrar o design exclusivo da sua marca.
Painel de controle
App Wix
App do Wix Studio
  1. Vá para App mobile no seu painel de controle.
  2. Clique na aba Seu próprio app mobile ou clique na aba com o nome do seu próprio app mobile. 
  3. Clique em Começar ou clique em Editar app mobile
  4. Clique em Design à esquerda. 
  5. Escolha o que você deseja personalizar:
    Dica: clique em Alterar tema do app para escolher uma combinação predefinida de cores e fontes.
    • Cor do tema: personalize as cores do seu app selecionando um tema de cor ou escolha individualmente a cor primária, o background do aplicativo e os ícones de texto.
    • Tema de texto: personalize sua fonte selecionando um tema de texto ou ajuste as fontes dos cabeçalhos e corpo individualmente.
    • Estilo do cabeçalho: personalize a cor do seu cabeçalho para combinar com sua cor primária ou cor de background.
  6. Clique em Salvar.

Perguntas frequentes

Clique nas perguntas abaixo para saber mais sobre como personalizar os recursos do seu app mobile nativo. 

Vídeo tutorial