Como incorporar um botão em um post de Tópico

Dev
1

Apresentando o incrível botão incorporado - a solução definitiva para apimentar seus posts de tópico! Com apenas um clique, você pode adicionar uma dimensão totalmente nova ao seu conteúdo e deixar seus leitores maravilhados. Além disso, nosso botão incorporado vem com uma garantia de satisfação de 100% - se você não estiver completamente satisfeito com sua incrível funcionalidade, devolveremos seu dinheiro (brincadeira, é totalmente grátis)! Então, por que esperar? Adquira hoje mesmo nosso botão incorporado e junte-se ao clube dos descolados!

Criei alguns tópicos de call-to-action para aumentar as inscrições no meu fórum Discourse. Cada tópico é para uma campanha de marketing diferente. Mas todos eles têm uma coisa em comum… quero que eles se inscrevam depois de lê-lo. Então, em vez de quebrar o fluxo do olhar do leitor, adicionei um botão diretamente na postagem para a conveniência deles e aumentei as taxas de conversão. Mas você pode usar o botão para o que quiser! :slight_smile:

Prévia

image
image964×520 36.4 KB


Como Habilitar

  1. Adicione o CSS personalizado ao seu tema atual.
[data-wrap="button"] a {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: #FFF !important;
    background-color: #007bff;
    border-color: #007bff;
}

// Parte #1 Permite que o texto seja exibido à direita de um botão.
[data-wrap="button"] {
    display: inline-block;
}

// Parte #2 Permite que o texto seja exibido à direita de um botão.
[data-wrap="text-after-button"] {
    display:inline-block;
}
  1. Em suas postagens, copie
[wrap="button"][Comece Agora](https://example.com)[/wrap]

Ou se você quiser texto ao lado do seu botão, tente isto…

[wrap="button"][Inscreva-se](https://SeuDiscourseURL.com/signup)[/wrap]
[wrap="text-after-button"]<!-- Clique Aqui para se inscrever no meu discourse!-->[/wrap]
14 curtidas
2

Muito bom, obrigado.

2 curtidas
4

Olá @UnitedFreedom!

Seu tópico me inspirou a criar um tópico adequado sobre tais modificações :+1:
Vocês podem lê-lo aqui, pessoal: Customize posts' contents with your own styles

2 curtidas
5

Fico feliz por ter conseguido te inspirar. Você fez um tópico muito fácil de seguir com imagens. Adorei :slight_smile:

2 curtidas
6

Melhoria rápida de CSS da nossa parte:

Como a saída HTML é ligeiramente diferente dentro de uma postagem cozida para “wrap-buttons”, ajustamos a marcação CSS, pois a tag a dentro da hierarquia div > p contém o link e, portanto, clicar no botão ligeiramente acima ou abaixo do link não aciona o link.

Conseguimos contornar isso para adicionar mais preenchimento em torno da tag a e substituir a marcação margin-block da tag <p>.

Além disso, a cor do link teve que ser ajustada.

[data-wrap="btn-primary"] {
    display: inline-block;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-weight: normal;
    color: var(--d-button-primary-text-color);
    background-color: var(--d-button-primary-bg-color);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    border-radius: var(--d-button-border-radius);
    transition: var(--d-button-transition);
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0);
    font-size: var(--font-0);
    line-height: normal;
    box-sizing: border-box;
    padding: 0;
    border: var(--d-button-border);
    padding: .5em .65em;
}
[data-wrap="btn-primary"] a,[data-wrap="btn-primary"] a:hover, [data-wrap="btn-primary"] a:active, [data-wrap="btn-primary"] a:visited {
    color: var(--d-button-primary-text-color);
        padding: .5em .65em;
}
[data-wrap="btn-primary"] p {
    margin-block-start: 0;
    margin-block-end: 0;
}