Passar para o conteúdo principal

Usando HTML para personalizar os detalhes de seus produtos

Você pode usar o código HTML para personalizar a descriçao dos produtos no Kyte.

Atualizado há mais de 11 meses

Você não precisa ser um desenvolvedor para tornar o seu catálogo mais atraente, basta usar alguns dos códigos que montamos aqui para você. Monte o código diretamente no campo de descrição dentro dos detalhes do produto, não se preocupe pois apenas o texto personalizado aparecerá no catálogo online.

Códigos

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

  2. Para separar linhas você precisa usar <br> no final da frase, se quiser mais espaço, adicione um segundo ou terceiro <br>

  3. Para usar parágrafos, insira <p> seu texto aqui </p>

  4. Se você usar fontes específicas, use <font style = "font-family: nome da fonte aqui">

  5. Para alterar o tamanho do texto, use <font style = "font-size: tamanho da fonte aqui px">

  6. Se você quiser que seu texto tenha espaçamento duplo entre as palavras, adicione <tt> seu texto aqui </tt> a ele

  7. Para criar estilos de texto clássicos:

    • Use <b> seu texto aqui </b> para negrito

    • Use <i> seu texto aqui </i> para itálico

    • Use <u> seu texto aqui </u> para sublinhar as palavras

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

  9. Para riscar informações como preços, adicione <strike> seu texto aqui </strike>

  10. Você pode listar itens usando <li> seu texto aqui </li>, no topo da lista, especifique se é <ol> para números ou <ul> para marcadores

  11. Emojis ou emoticons podem ser usados no texto sem código, basta adicioná-los à frase conforme o desejar

  12. 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 clique com o botão direito sobre ela, selecione Abrir imagem em uma nova guia, copie o link e o cole no código

💡 Se você tem dificuldade com telas muito poluídas, separe as personalizações por linha e teste seu código de tempo em tempo em plataformas de conversão.

Vamos testar?

Copie e cole o texto abaixo na descrição de um produto 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>
Respondeu à sua pergunta?