Que tal um lindo layout para o seu projeto de aplicativo?

Confira o nosso mais atual layout, tudo pronto para você utilizar como quiser em seu projeto de aplicativo.

Você pode utilizar em projetos dos mais variados segmentos como restaurantes, hotéis, negócios diversos e muito mais.

Com este layout moderno para o seu aplicativo, você contará com recursos incríveis para deixar a experiência de navegação fácil, leve e super pratica para os seus usuários.

Confira alguns dos principais recursos para este layout:

- Imagem superior frontal personalizável por URL da imagem;
- Altura personalizável da área superior e do rodapé;
- Título personalizável e subtítulo, tamanho da fonte, cor e preenchimento superior;
- Cor da área de rodapé personalizável, cor BG e cor do ícone;
- Cor de alternância personalizável e cor BG;
- Tamanho do ícone do menu personalizável e cor BG;
- Transformação de texto de menu personalizável;
- Opção Click to Call (ligar direto para um telefone);
- Clique para WhatsApp / WebLink.

Para Utilizar este layout é muito simples, basta escolher um template da sua preferência e depois escolher o layout Royal. Deve ser informado também o link da imagem principal do app.

Configurações e ajustes para textos e imagens.

Observação:

No rodapé, existem dois ícones. O ícone de chamada é fixo enquanto outro ícone é o WhatsApp / Web Link. Você pode escolher entre Opções de layout.

Você pode personalizar ainda mais usando códigos CSS. No final desta página você pode conferir alguns exemplos de CSS que serão ilustrados nas imagens abaixo.

Aqui estão alguns exemplos (da aplicação do CSS no final desta página):

[1] Imagem em altura total:

[2] Ocultar ícones do rodapé:

[3] Alterar a cor do fundo do título superior da tela anterior:

Exemplos de aplicação de CSS para o layout Royal

[1] Como aplicar o plano de fundo de altura total no Layout Royal?

.layout.royal .royal_card .royal_up { background: none; }

.layout.royal .royal_card .royal_down { background: none; }

.layout.royal .royal_card {
   background-image: url(IMAGE_URL);
   background-position: 50%;
   background-size: cover;
}

.layout.royal .royal_card .royal_back { top: 0;}

.layout.royal #royal ion-content {
   top: 15vh;
   bottom: 15vh;
  height: 70vh;
}

Observação:
Você precisa alterar o URL de IMAGEM acima do código CSS.

[2] Como ocultar ícones de chamada de rodapé, WhatsApp e Weblink?

.layout.royal .royal_card .royal_down { display: none; }

[3] Como alterar a imagem de fundo do título superior da tela anterior?

.layout.royal .royal_on .royal_up {
   background-image: url(IMAGE_URL);
   background-position: 50%;
   background-size: cover;
}

Observação:
Você precisa alterar o URL de IMAGEM acima do código CSS.

[4] Como alterar a cor de fundo do título superior da tela anterior?

.layout.royal .royal_on .royal_up {
   background: #ed145b !important;
}

Observação:
Você precisa alterar o código de cores acima do código CSS.