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]
2

Muito bom, obrigado.

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

5

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

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;
}
7

Inspirado neste hack de CSS do autor, criei este Componente de Tema que oferece Botões Personalizados. Longe de ser tão personalizável quanto seu próprio CSS, mas muito mais fácil de usar.

Obrigado ao autor pela ótima ideia.