Come incorporare un pulsante in un post di argomento

Sviluppatore
1

Introduzione dell’incredibile pulsante incorporato: la soluzione definitiva per ravvivare i tuoi post! Con un solo clic, puoi aggiungere una dimensione completamente nuova ai tuoi contenuti e lasciare i tuoi lettori a bocca aperta. Inoltre, il nostro pulsante incorporato è coperto da una garanzia di soddisfazione al 100%: se non sei completamente soddisfatto della sua incredibile funzionalità, ti rimborseremo (scherzo, è totalmente gratuito)! Allora perché aspettare? Ottieni oggi stesso il nostro pulsante incorporato e unisciti al club dei ragazzi cool!

Ho creato alcuni argomenti di call-to-action per aumentare le iscrizioni sul mio forum Discourse. Ogni argomento è per una diversa campagna di marketing. Ma tutti condividono una cosa in comune… voglio che si iscrivano dopo averlo letto. Quindi, invece di interrompere il flusso visivo del lettore, ho aggiunto un pulsante direttamente nel post per la loro comodità e ho aumentato i tassi di conversione. Ma puoi usare il pulsante per quello che vuoi! :slight_smile:

Anteprima

image
image964×520 36.4 KB


Come abilitare

  1. Aggiungi il CSS personalizzato al tuo tema attuale.
[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 Consente la visualizzazione del testo alla destra di un pulsante.
[data-wrap="button"] {
    display: inline-block;
}

// Parte #2 Consente la visualizzazione del testo alla destra di un pulsante.
[data-wrap="text-after-button"] {
    display:inline-block;
}
  1. Nei tuoi post, copia
[wrap="button"][Inizia](https://example.com)[/wrap]

Oppure se vuoi del testo accanto al tuo pulsante, prova questo…

[wrap="button"][Iscriviti](https://YourDiscourseURL.com/signup)[/wrap]
[wrap="text-after-button"]<!-- Clicca qui per iscriverti al mio discourse!-->[/wrap]
14 Mi Piace
2

molto bello, grazie.

2 Mi Piace
4

Ciao @UnitedFreedom!

Il tuo argomento mi ha ispirato a creare un argomento appropriato su tali modifiche :+1:
Potete leggerlo qui ragazzi: Customize posts' contents with your own styles

2 Mi Piace
5

Sono felice di esserti stato d’ispirazione. Hai creato un argomento molto facile da seguire con immagini. Mi piace :slight_smile:

2 Mi Piace
6

Miglioramento rapido del CSS da parte nostra:

Poiché l’output HTML è leggermente diverso all’interno di un post “cotto” per “wrap-buttons”, abbiamo modificato il markup CSS poiché il tag a all’interno della gerarchia div > p contiene il link e quindi fare clic sul pulsante leggermente sopra o sotto il link non attiva il link.

Siamo riusciti a trovare una soluzione per aggiungere più padding attorno al tag a e sovrascrivere il markup margin-block del tag <p>.

Anche il colore del link ha dovuto essere regolato.

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