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.

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:

  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

Preparamos um vídeo para te ajudar com isso. Veja abaixo.

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&amp;phone=551199999999',

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

<div class="s"></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>

Código 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.

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

Código 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:

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

4. Adicione o HTML em questão dentro do seu app, no local desejado, como mostra a imagem abaixo. Não se esqueça de clicar em salvar.

__________________________________________________________

Nosso objetivo é o seu sucesso. Por isso, em qualquer dificuldade ou necessidade, não hesite em nos contatar pelo messenger.

Até a próxima, equipe Fabapp.


Quer saber mais?

Como testar o app antes de publicar
App offline
Inserir Iframe no app


Encontrou sua resposta?