Comment intégrer un bouton dans un post de sujet

Dev
1

Présentation du bouton intégré incroyable - la solution ultime pour pimenter vos publications de sujets ! En un seul clic, vous pouvez ajouter une toute nouvelle dimension à votre contenu et laisser vos lecteurs émerveillés. De plus, notre bouton intégré est assorti d’une garantie de satisfaction à 100 % - si vous n’êtes pas entièrement satisfait de sa puissance, nous vous remboursons (je plaisante, c’est totalement gratuit) ! Alors pourquoi attendre ? Mettez la main sur notre bouton intégré dès aujourd’hui et rejoignez le club des cool kids !

J’ai créé des sujets d’appel à l’action pour augmenter les inscriptions sur mon forum Discourse. Chaque sujet est destiné à une campagne marketing différente. Mais ils ont tous une chose en commun… Je veux qu’ils s’inscrivent après l’avoir lu. Donc, au lieu de casser le flux visuel du lecteur, j’ai ajouté un bouton directement dans la publication pour leur commodité, et j’ai augmenté les taux de conversion. Mais vous pouvez utiliser le bouton pour ce que vous voulez ! :slight_smile:

Aperçu

image
image964×520 36.4 KB


Comment activer

  1. Ajoutez le CSS personnalisé à votre thème actuel.
[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;
}

// Partie #1 Permet d'afficher du texte à droite d'un bouton.
[data-wrap="button"] {
    display: inline-block;
}

// Partie #2 Permet d'afficher du texte à droite d'un bouton.
[data-wrap="text-after-button"] {
    display:inline-block;
}
  1. Dans vos publications, copiez
[wrap="button"][Commencer](https://example.com)[/wrap]

Ou si vous voulez du texte à côté de votre bouton, essayez ceci…

[wrap="button"][S'inscrire](https://YourDiscourseURL.com/signup)[/wrap]
[wrap="text-after-button"]<-- Cliquez ici pour vous inscrire à mon discourse ![/wrap]
14 « J'aime »
2

très bien, merci.

2 « J'aime »
4

Salut @UnitedFreedom !

Ton sujet m’a inspiré à créer un sujet approprié sur de telles modifications :+1:
Vous pouvez le lire ici les gars : Customize posts' contents with your own styles

2 « J'aime »
5

Je suis heureux d’avoir pu vous inspirer. Vous avez créé un sujet très facile à suivre avec des images. J’adore ça :slight_smile:

2 « J'aime »
6

Amélioration rapide du CSS de notre part :

Étant donné que la sortie HTML est légèrement différente à l’intérieur d’un article publié pour « wrap-buttons », nous avons ajusté le balisage CSS car la balise a dans la hiérarchie div > p contient le lien et, par conséquent, cliquer sur le bouton légèrement au-dessus ou en dessous du lien ne déclenche pas le lien.

Nous avons réussi à contourner cela pour ajouter plus de marge autour de la balise a et à remplacer le balisage margin-block de la balise <p>.

La couleur du lien a également dû être ajustée.

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