Layout 101

< Voltar

Layout-101 é o primeiro layout com botões “click to action

  • Clique para chamar
  • Clique para acessar o bate-papo do WhatsApp
  • Clique para Links
  • Botão de menu

Opções de Layout:

Notas:

Notas:

  • O número do WhatsApp deve estar no formato internacional sem o sinal “+” (Ex: 5511966434235).

  • Não use zeros, colchetes ou traços no número do WhatsApp.

  • Existem duas opções de links da web nas opções de layout. Você pode usá-lo para link de site, link de mídia social, link da play store, etc. Esses links serão abertos em um navegador externo/do sistema.

  • Funções de botão de links no menu do rodapé não funcionam no simulador mas funcionam bem no celular com o App instalado.

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 Layouts para você escolher, desça a barra de rolagem até achar o Layout desejado, no nosso caso o Layout 101, clicando na imagem do Layout 101 o mesmo já será inserido no projeto do seu App

 

Pronto, Layout inserido. Agora vamos configura-lo.

A explicação esta na próxima seção.

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 101

Nota: Para visualizar melhor o comportamento do Layout 101, certifique-se de ter adicionado alguns recurso, no mínimo 3, 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 – WhatsApp Number

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

4 – WhatsApp Icon

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

5 – Web Link-1

Neste campo você poderá inserir uma URL de uma rede social (como exemplo o facebook) ou até mesmo um outro endereço.

6 – Web Icon-1

Neste campo você poderá alterar (caso desejar) a imagem do ícone, por padrão vem o ícone do Facebook, você pode alterar usando outro código como abaixo:

Instagram: icon ion-social-instagram

Twitter: icon ion-social-twitter

LinkedIn: icon ion-social-linkedin

7 – Web Link-2

Neste campo você poderá inserir uma URL de um site ou sistema web ou até mesmo de outra rede social.

8 – Web Icon-2

Neste campo você poderá alterar (caso desejar) a imagem do ícone, por padrão vem o ícone do globo, você pode alterar usando outro código como abaixo:

Link: icon ion-link

Instagram: icon ion-social-instagram

Twitter: icon ion-social-twitter

LinkedIn: icon ion-social-linkedin

9 – Menu Icon

Neste campo você poderá alterar (caso desejar) a imagem do ícone menu (lembrando que este botão abre o menu superior), por padrão vem o ícone de menu hambúrguer, você pode alterar usando outro código como abaixo:

icon ion-navicon

icon ion-home

icon ion-more

10 – Preenchimento inferior do menu

Nesta barra você poderá também ajustar o limite da parte inferior do menu superior.

11 – Altura do menu superior

Nesta barra você poderá também ajustar a altura do menu superior, porém a referência da parte superior, quanto maior o valor os Botões ficarão mais altos.

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 101 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), o segundo é botão WhatsApp, e os outros são links que você poderá definir.
  • 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 101 funcione corretamente.

 

Pronto. 😉

 

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

 

 

Deixe uma resposta

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

Cart
  • No products in the cart.
FALE CONOSCO