Artigos sobre: Opções do editor

Modelo de HTML - página personalizada


Se você deseja uma página no seu app que tenha uma estrutura parecida com a imagem abaixo, então esse artigo é para você.


Aqui ensinaremos como construí-la, copiando o código que disponibilizamos mais abaixo. Não precisa se preocupar! Você não precisa saber nada de programação ou de HTML para fazer uma página assim. A gente vai ensinar como fazer isso sem precisar escrever uma linha de código!



  • **Como adicionar o código no app **


  1. Perceba que em algumas funções é disponibilizado um campo em branco, para você adicionar textos, imagens etc. Como o campo da função Lista ou da função Página em branco, conforme mostra a imagem abaixo:



  1. Nela, você vai perceber que há um botão "Código-Fonte". Você deverá clicar nele;
  2. Copie o código HTML informado mais abaixo nesse tutorial e cole no campo em branco;
  3. Agora clique novamente sobre o botão Código-Fonte";
  4. Clique em salvar e veja o HTML aplicado e funcionando no preview, como mostra a imagem abaixo.






  • **Passo a passo para editar informações do HTML: imagem, ícones, número de telefone, links de redes sociais, textos e cores **



Código HTML







<div class="main"><img src="https://imgur.com/4g6APHR.png" style="width: 100%;" />


<div class="s"><a href="#" onclick="window.open('https://www.instagram.com/fabricadeaplicativos/', 'location=yes');


return false;" style="text-decoration: none;"> <a href="#" onclick="window.open(' https://www.facebook.com/FabricaDeAplicativos/', 'location=yes');


return false;" style="text-decoration: none;"> <a href="#" onclick="window.open(


'https://api.whatsapp.com/send?1=pt_BR&phone=551199999999',


'_system', 'location=yes'); return false;" style="text-decoration: none;">



<div class="main">


Nossa pet shop


"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." ;m!


Sobre nossos serviços:

Oferecemos serviços top de linha. Veja todos os detalhes abaixo.


Pet shop

É "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

    Veterinário

É "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

    Banho e tosa
 

É "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."




  • Para adicionar um Mapa



  1. Você precisará usar o Google Maps e buscar pelo seu endereço.
  2. Depois basta clicar sobre o botão de compartilhar e depois em Incorporar a um mapa;
  3. Copie o código clicando em Copiar HTML. Como mostra abaixo.



  1. Adicione o HTML em questão dentro do seu app, no local desejado, como mostra a imagem abaixo. Nós sugerimos que substitua pela parte do código que representa a imagem do topo. Você verá que essa parte é a seguinte:



<div class="main"><img src="https://imgur.com/4g6APHR.png" style="width: 100%;" />


  1. Nesse caso é só excluir essa parte e colar o código referente ao mapa.
  2. Não se esqueça de clicar em salvar.




  • Para adicionar um vídeo



  1. Você precisará ter o vídeo hospedado em alguma plataforma, como o Youtube.
  2. Vá no vídeo desejado e copie o código identificador dele, como por exemplo:




  1. Copie esse identificador e substitua no código abaixo logo após /embed/
  2. Adicione o HTML em questão dentro do seu app, no local desejado. Não se esqueça de clicar em salvar.

Atualizado em: 06/01/2023