Usando HTML para personalizar os detalhes de seus produtos

Você não precisa ser um desenvolvedor para tornar seus produtos mais atraentes, basta usar alguns dos códigos que listamos aqui para você. ⌨

Adicione o código ao texto no campo de descrição do produto.

Não se preocupe pois o código aparecerá no app, mas no catálogo seus clientes verão apenas o texto personalizado.

💡 Se você não gosta de telas muito poluídas, separe as personalizações por linha, isso não afetará o resultado final. Para testar seu código conforme ele é criado, o escreva n plataforma plataforma de codificação W3 e clique em Run para ver o resultado final.

  • Use títulos para criar uma hierarquia. Faça o título o primeiro item da frase e use <h1> seu texto aqui </h1> para o maior texto. Siga a numeração para os textos menores, por exemplo <h2> seu texto aqui </h2>, <h3> seu texto aqui </h3> e assim por diante;
  • Para separar linhas você precisa usar <br> no final da frase e se quiser mais espaço, adicione um segundo ou terceiro <br>;
  • Para usar parágrafos, insira <p> seu texto aqui </p>;
  • Se você usar fontes específicas, use <font style = "font-family: nome da fonte aqui">;
  • Para alterar o tamanho do texto, use <font style = "font-size: tamanho da fonte aqui px">;
  • Se você quiser que seu texto tenha espaçamento duplo entre as palavras, adicione <tt> seu texto aqui </tt> a ele;
  • Para criar estilos de texto clássicos, use <b> seu texto aqui </b> para negrito, <i> seu texto aqui </i> para itálico e <u> seu texto aqui </u> para sublinhar as palavras;
  • As cores podem ser adicionadas ao seu texto usando <font color = "nome da cor aqui"> no início da frase. Você pode usar o HEX da cor ou seu nome em inglês;
  • Para riscar informações como preços, adicione <strike> seu texto aqui </strike>;
  • Você pode listar itens usando <li> seu texto aqui </li>. No topo da lista, especifique se é <ol> para números ou <ul> para marcadores;
  • Emojis ou emoticons podem ser usados ​​no texto sem código, basta adicioná-los à frase conforme o desejar e certifique-se de que não sejam personalizados, pois podem não ser reconhecidos em alguns navegadores;
  • GIFs também podem ser usados, mas precisam ser inseridos no código <a> <img src = "link da imagem aqui"> </a>. Para obter o link da imagem, basta clicar com o botão direito sobre ele e selecionar Abrir imagem em uma nova guia, copiar o link e colá-lo no código. E lembre-se de ter certeza de que é um GIF de fonte gratuita.

Vamos testar? Copie e cole o texto abaixo na descrição de um produto em seu aplicativo ou na plataforma de codificação W3 para ver o código em ação. 😎

<h1> <font color = "#323f4c"> Dominando HTML com o <font color = "#00d5b1"> Kyte <font color = "#323f4c">!</h1>
<h2> <font color = "#454e5f"> Eis algumas dicas para personalizar seu texto: </h2>
<ol>
<li><tt> Faça seu texto com espaço duplo; </tt></li>
<li><b> O escreva em negrito; </b></li>
<li><i> Ou itálico; </i></li>
<li><u> Sublinhe algumas palavras; </u></li>
<li><strike> Ou corte tudo. </strike></li>
<br>
<ul>
<li><font color = "blue"> Se <font color = "crimson"> você <font color = "green"> tiver <font color = "brown"> paciência, 🥱 </li>
<li><font color = "black"> Escreva <font color = "orange"> cada <font color = "black"> palavra <font color = "orange"> de <font color = "black"> uma <font color = "orange"> cor. <font color = "black">🍭 </li>
<br><br>
<font color = "#323f4c">
<font style="font-family:magneto"> Mude
<font style="font-family:mv boli"> o estilo
<font style="font-family:papyrus"> do seu texto. <br>
<font style="font-family:stencil"><font style="font-size:30px"> Use letras grandes
<font style="font-family:pristina"><font style="font-size:15px"> ou pequeninas. 🐭 <br>
<font color = "#00d5b1">
<font style="font-family:monotype corsiva"><font style="font-size:25px"> E deslumbre seus clientes com GIFs animados.
<a><img src= "https://i.pinimg.com/originals/68/8e/9e/
688e9eb45c2f5cc82361d5c305ccc0ca.gif" width="050" height="050"></a>