Layout 103

< Voltar

Layout-103 é um layout com menu duplo (Menu Principal + Menu Rodapé), que é uma combinação do padrão Layout-1 e Layout-3.

Também vem com o botão de telefone de acesso rápido no menu do rodapé. Você poderá customizar trocando cores, altura, borda, plano de fundo e muito mais. Veja abaixo como inserir e customizar o Layout:

Recursos:

  • Botão Clique para ligar (Telefone)
  • Ícone telefone personalizável
  • Cor do ícone telefone personalizável
  • Ajuste de altura do menu principal

Exemplo:

1 – Abra o Painel com seus Aplicativos: https://portalapper.com.br/construtor-apps/

 

 

2 – Escolha o Aplicativo que deseja aplicar o Layout e clique em EDITAR ao lado do nome do App

 

 

ou, crie um novo Aplicativo clicando em “Criar um novo aplicativo”, digite o nome do App e clique em “Criar”

 

 

3 – Neste momento se caso criou um novo App vai aparecer uma janela com vários Modelos para você escolher um, escolha um modelo, e em caso de dúvida escolha o “BLANK TEMPLATE”.

 

 

Se apenas está editando um App existente, então você já cairá na Aba DESIGN, que é a Aba para inserir o Layout.

Nesta seção “SEU DESIGN” clique em “Alterar o Layout”

 

 

Ao clicar aparecerá uma janela com vários Layout para você escolher, desça a barra de rolagem até achar o Layout desejado, no nosso caso o Layout 103, clicando na imagem do Layout 103 o mesmo já será inserido no projeto do seu App

 

 

Ao lado do Layout aparecerá um quadro onde você poderá alterar as “CONFIGURAÇÕES DO LAYOUT”, para cada Layout se tem uma configuração em particular, vejamos o que permite alterar o Layout 103

Nota: Para visualizar melhor o comportamento do Layout 103, certifique-se de ter adicionado alguns recurso, no mínimo 8, para que ambos os menus fiquem preenchidos com os recursos.

 

 

1 – Phone Number

Neste campo você deverá colocar um número de telefone, como exemplo: 011966434235

O primeiro recurso a aparecer no Menu do Rodapé é o botão de telefone, ou seja, assim que o usuário clicar será direcionado para o discador do celular com o telefone já preenchido.

 

 

2 – Phone Icon

Neste campo você poderá alterar o ícone do telefone via código, ele já vem com um código padrão “icon ion-ios-telephone”, você não precisa de alterá-lo.

Mas se caso desejar alterar, temos abaixo mais 2 modelos que você poderá usar, substitua o código do campo copiando e colando no campo.

icon ion-android-call
icon ion-ios-telephone-outline

 

 

3 – Icon Color

Neste campo você poderá inserir um código de cor para alterar a cor do ícone do telefone, o código padrão que vem é da cor branca.

Exemplo: #000000

Para preto

 

 

4 – Menu Bottom Padding

Nesta barra você poderá ajustar a altura que o Menu principal irá iniciar na parte inferior, quanto maior o valor, a distância entre o Menu principal e o Menu de rodapé aumenta.

 

 

5 – Menu Scroll Height

Nesta barra você poderá também ajustar a altura do Menu principal, porém com referência da parte superior, quanto maior o valor o Menu principal ficará mais alto.

 

 

Faça testes para compreender melhor cada ajuste. Para voltar os ajustes aos valores padrões é simples: Escolha outro Layout qualquer e depois escolha o Layout 103 novamente.

 

 

Depois que terminar de configurar os ajustes clique em “Salvar” para salvar as alterações.

 

As alterações de cores de fundo, demais ícones e borda deve ser alterados pela seção “CORES”.

 

Importante:

  • O Menu de rodapé consiste em cinco itens, o primeiro é o botão clicar para ligar (telefone) e os outros quatro são os primeiros quatro recursos do seu aplicativo.
  • O Menu principal consiste em todos os outros demais recursos do seu aplicativo, ou seja, a partir do 5º recurso inserido.
  • Caso seu Aplicativo já esteja publicado nas lojas (Play Store e App Store) será necessário a atualização do Aplicativo na loja para que o Layout 103 funcione corretamente.

Pronto. 😉

 

Qualquer dúvida pode contar com nossa equipe de suporte.

 

 

Tags:

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

WhatsApp whatsapp
Carrinho Item removido. Desfazer
  • Não a produtos no carrinho.