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”.