Minhas Compras
Você adicionou a sua lista de compras. O que deseja fazer agora?
Continuar Comprando! Fechar Compra!
X

Fale Conosco:

Aguarde, enviando contato!

Layout Royal - Mais um incrível e lindo layout para o seu aplicativo

Postado em | Categoria: Plataforma QueroApp

5 estrelas - baseado em 136 votos

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.

Layout Royal - Mais um incrível e lindo layout para o seu aplicativo

 

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

Layout Royal - Mais um incrível e lindo layout para o seu aplicativo

 

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.

 

Layout Royal - Mais um incrível e lindo layout para o seu aplicativo

 

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.

Layout Royal - Mais um incrível e lindo layout para o seu aplicativo

 

Configurações e ajustes para textos e imagens.

 

Layout Royal - Mais um incrível e lindo layout para o seu aplicativo

 

Layout Royal - Mais um incrível e lindo layout para o seu aplicativo

 

Layout Royal - Mais um incrível e lindo layout para o seu aplicativo

 

Layout Royal - Mais um incrível e lindo layout para o seu aplicativo

 

Layout Royal - Mais um incrível e lindo layout para o seu aplicativo

 

Layout Royal - Mais um incrível e lindo layout para o seu aplicativo

 

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:

Layout Royal - Mais um incrível e lindo layout para o seu aplicativo

Layout Royal - Mais um incrível e lindo layout para o seu aplicativo

 

[2] Ocultar ícones do rodapé:

Layout Royal - Mais um incrível e lindo layout para o seu aplicativo

 

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

Layout Royal - Mais um incrível e lindo layout para o seu aplicativo

 

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.

 

Cookies
Este website utiliza cookies próprios e de terceiros a fim de personalizar o conteúdo, melhorar a experiência do usuário, fornecer funções de mídias sociais e analisar o tráfego. Para continuar navegando você deve concordar com nossa Política de Privacidade.
Fale Conosco