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

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:



Nela, você vai perceber que há um botão "Código-Fonte". Você deverá clicar nele;


Copie o código HTML informado mais abaixo nesse tutorial e cole no campo em branco;


Agora clique novamente sobre o botão Código-Fonte";


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


<meta name="viewport" content="width:device-width, initial-scale=1" />

<style type="text/css">* {

box-sizing: border-box;

font-family: "Roboto", sans-serif;

}

.container {

height: 100%;

margin: 30px;

padding: 0.25em;

font: 16px 'Roboto';

background-color: #ffffff;

color: grey;

margin-left: 4px;

margin-right: 4px;

}

accordion {

margin: 0 auto;

max-width: 30em;

}

.toggle {

display: none;

}

.option {

position: relative;

margin-bottom: -18;

}

.title,

.content {

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-transform: translateZ(0);

transform: translateZ(0);

transition: all 0.2s;

}

.title {

background: #ffffff;

padding: 1em;

display: block;

color: #fe950c;

font-weight: bold;

border-radius: 10px;

font-family: 'Roboto', sans-serif;

box-shadow: 3px 3px 6px #DCDCDC, -3px 3px 6px #DCDCDC;

}

.title:after, .title:before {

content: '';

position: absolute;

right: 1.25em;

top: 1.25em;

width: 2px;

height: 0.75em;

background-color: grey;

transition: all 0.2s;

}

.content {

max-height: 0;

overflow: hidden;

background-color: #ffffff;

width: 95%;

margin-left: 2.5%;

border-radius: 2px 2px 10px 10px;

}

.content p {

margin: 0;

padding: 0.5em 1em 1em;

font-size: 0.9em;

line-height: 1.5;

}

.toggle:checked + .title, .toggle:checked + .title + .content {

box-shadow: 3px 3px 6px #DCDCDC, -3px 3px 6px #DCDCDC;

}

.toggle:checked + .title + .content {

max-height: 1000px;

}

.title:before {

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

.title:after {

transform: rotate(150deg);

right: 26px;

}

.toggle:checked + .title:after {

-webkit-transform: rotate(210deg) !important;

transform: rotate(210deg) !important;

}

.toggle:checked + .title:before {

-webkit-transform: rotate(-30deg) !important;

transform: rotate(-30deg) !important;

}

.main{

padding:15px;

}

.s {

width: 100%;

display: flex;

justify-content: space-around;

margin-top:30px;

}

.btn-img{

display: flex;

justify-content: center;

}

.mp{

text-align: center;

color: #fe950c;

}

h2{

color:#fe950c;

font-size:18px;

font-family: "Roboto", sans-serif;

}

p{

color:grey;

margin-bottom:-20px;

}

</style>

<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;"><img src="https://imgur.com/eWm697f.png " width="20px" /> </a> <a href="#" onclick="window.open(' https://www.facebook.com/FabricaDeAplicativos/', 'location=yes');

return false;" style="text-decoration: none;"> <img src="https://imgur.com/UjD6mYW.png" width="20px" /> </a> <a href="#" onclick="window.open(

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

'_system', 'location=yes'); return false;" style="text-decoration: none;"> <img src="https://imgur.com/qbSzr31.png" width="20px" /> </a></div>


<div class="main">

<h2><span style="color:#fe950c;"><strong>Nossa pet shop</strong></span></h2>

<p>&quot;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.&quot; ;m!<br />

<br />

<br />

<span style="color:#fe950c;"><strong><span style="font-size:16px;"></span></strong></span></p>

<h2><span style="color:#fe950c;"><span style="font-size:16px;"></span></span></h2>

<h2></h2>

<h2><span style="color:#fe950c;"><span style="font-size:16px;"><strong>Sobre nossos servi&ccedil;os:</strong></span></span></h2>

<p>Oferecemos servi&ccedil;os top de linha. Veja todos os detalhes abaixo.</p>

</div>

<div>

<div class="container">

<div class="accordion">

<div class="option"><input class="toggle" id="toggle1" type="checkbox"><label class="title" for="toggle1">Pet shop</label>

<div class="content">

<p style="color:grey">&Eacute; &quot;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.&quot;</p>

</div>

</div>

</div>

<div class="accordion">

<div class="option"><input class="toggle" id="toggle2" type="checkbox" /> &nbsp; &nbsp; <label class="title" for="toggle2">Veterin&aacute;rio</label>

<div class="content">

<p style="color:grey">&Eacute; &quot;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.&quot;</p>

</div>

</div>

<div class="accordion">

<div class="option"><input class="toggle" id="toggle4" type="checkbox" /> &nbsp; &nbsp; <label class="title" for="toggle4">Banho e tosa</label>

<div class="content">&nbsp;

<p style="color:grey">&Eacute; &quot;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.&quot;</p>

</div>

</div>

</div>

<!-- imagem Botão --><br />

&nbsp;</div>

</div>

</div>

</div>


Para adicionar um Mapa


Você precisará usar o Google Maps e buscar pelo seu endereço.


Depois basta clicar sobre o botão de compartilhar e depois em Incorporar a um mapa;


Copie o código clicando em Copiar HTML. Como mostra abaixo.



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%;" />

Nesse caso é só excluir essa parte e colar o código referente ao mapa.

Não se esqueça de clicar em salvar.




Para adicionar um vídeo


Você precisará ter o vídeo hospedado em alguma plataforma, como o Youtube.


Vá no vídeo desejado e copie o código identificador dele, como por exemplo:




Copie esse identificador e substitua no código abaixo logo após /embed/


<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/CÓDIGO AQUI" title="YouTube video player" width="100%"></iframe>

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