Ir para o conteúdo
Converto Ajuda
IA e Markdown

A linguagem Markdown Converto

Guia da sintaxe — seções, blocos :::content e :::style, listas, valores responsivos, fundos e as regras que toda página deve seguir.

Avançado4 min de leitura
Nesta página

A linguagem Markdown Converto descreve uma página como uma sequência de seções. Cada seção é um widget Converto, identificado por um comentário e preenchido por blocos de campos. Nunca se escreve HTML nem CSS: só os campos documentados de cada widget.

Estrutura de um documento

markdown
---
converto_version: 1
page_type: sales_page
seo_title: Mentoria Escala — resultados em 90 dias
seo_description: Conheça o método e garanta sua vaga.
---

<!-- converto:header -->

:::content
show_signup: no
:::

<!-- converto:hero-01 -->

:::content
title: Venda mais com uma página que converte
description: Método completo, passo a passo, para o seu negócio.
button_text: Quero começar
button_link: https://pagamento.exemplo.com
:::

:::style
title_color: "#0B1220"
:::

<!-- converto:cta-01 -->

:::content
title: Pronto para começar?
button_text: Garantir minha vaga
button_link: https://pagamento.exemplo.com
:::

Elementos

ElementoRegra
Front matterBloco --- … --- opcional no início. converto_version: 1 é a versão suportada. Chaves editoriais (page_type, business, goal, tone) não têm efeito na página. Demais chaves são opções de página.
SeçãoLinha <!-- converto:ID -->, onde ID é exatamente o identificador do widget (por exemplo, hero-01).
Bloco de conteúdo:::content … ::: — campos da aba Conteúdo.
Bloco de estilo:::style … ::: — campos da aba Estilo (opcional). Se um campo fica de fora, o widget usa o padrão dele.
Texto soltoTexto fora de seções e blocos é ignorado.

Os campos de cada widget (nome, tipo, se é obrigatório, opções) estão em cada artigo da Biblioteca de widgets, na seção Campos no Converto Construtor.

Sintaxe dos valores

Os blocos usam um subconjunto de YAML: campo: valor, listas e blocos indentados.

TipoComo escrever
Textotitle: Meu título (aspas opcionais)
Sim/Nãoyes ou no
Número0, 12, 1.5
SeleçãoUma das opções listadas, exatamente como escrita
Cor#RRGGBB, rgb()/rgba() ou nome CSS
ImagemURL da imagem
ÍconeClasse Font Awesome, como fa-solid fa-truck (um ícone diferente e coerente por item)
Medida16px, 50%, 1.4em
Valores por dispositivodesktop:, tablet: e mobile: em bloco indentado; um valor simples vale para desktop
Espaçamento10px, 10px 20px, ou 10px 20px 30px 40px (topo, direita, baixo, esquerda)
Linkurl simples ou bloco com url:, external: yes, nofollow: yes
Texto de várias linhas`campo:

Listas (repeaters)

markdown
faq_list:
  - category_title: Como funciona?
    question_text: Como funciona a mentoria?
    answer_text: <p>Você recebe o método e acompanhamento semanal.</p>
  - category_title: Tem garantia?
    question_text: Existe garantia?
    answer_text: <p>Sim, de 7 dias.</p>

Cada item começa com - e os demais campos ficam alinhados abaixo.

Valores responsivos

markdown
title_font_size:
  desktop: 56px
  tablet: 44px
  mobile: 32px

Fundos

Campos de fundo só aceitam o bloco indentado:

markdown
section_bg:
  type: classic
  color: "#F6F8FC"
  image: https://exemplo.com/fundo.jpg
  image_mobile: https://exemplo.com/fundo-mobile.jpg

Fundos clássicos aceitam imagem (com variantes de tablet e celular) e position, size e repeat. Se o tipo for omitido, é aplicado classic.

Regras importantes

  1. Nunca invente IDs de widget nem nomes de campo. O que não existe é ignorado com aviso.
  2. Gere o documento completo: header, corpo e footer juntos.
  3. custom_css e custom_js são os únicos códigos permitidos, em qualquer :::style, e exigem a permissão unfiltered_html.
  4. O contêiner raiz da página é criado pelo sistema, sem espaçamentos; o ritmo vertical vem do preenchimento de cada widget.
  5. Ícones de blocos têm tamanho mínimo imposto pelo Converto (35 px) quando o tamanho é definido.
  6. URLs com javascript:, data: ou vbscript: são bloqueadas (erro).

Boas práticas editoriais

  • Escolha o tipo de página (captura, vendas, planos, webinar, institucional, informativa, obrigado, link na bio) e siga a sequência de seções recomendada.
  • Uma meta de conversão por página; o mesmo destino em todos os botões.
  • Defina seo_title, seo_description e tab_title no front matter.
  • Troque as imagens de exemplo por imagens do projeto e preencha também a versão de celular quando houver valor grande no desktop.

Este artigo foi útil?

Artigos relacionados