Wie man einen Button in einen Themenbeitrag einbettet

Entwickler
1

Wir stellen den erstaunlichen eingebetteten Button vor – die ultimative Lösung, um deine Themen-Posts aufzupeppen! Mit nur einem Klick kannst du deinen Inhalten eine völlig neue Dimension verleihen und deine Leser in Erstaunen versetzen. Außerdem gibt es für unseren eingebetteten Button eine 100%ige Zufriedenheitsgarantie – wenn du nicht vollkommen zufrieden mit seiner Großartigkeit bist, geben wir dir dein Geld zurück (nur ein Scherz, er ist völlig kostenlos)! Also, warum warten? Hol dir noch heute unseren eingebetteten Button und schließe dich dem Club der Coolen an!

Ich habe einige Call-to-Action-Themen erstellt, um die Anmeldungen auf meinem Discourse-Forum zu erhöhen. Jedes Thema ist für eine andere Marketingkampagne. Aber sie haben alle eines gemeinsam… ich möchte, dass sie sich nach dem Lesen anmelden. Anstatt den Lesefluss zu unterbrechen, habe ich der Einfachheit halber einen Button direkt in den Beitrag eingefügt und die Konversionsraten erhöht. Aber du kannst den Button für alles verwenden, was du willst! :slight_smile:

Vorschau

image
image964×520 36.4 KB


Aktivieren

  1. Füge den benutzerdefinierten CSS-Code zu deinem aktuellen Theme hinzu.
[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;
}

// Teil #1 Ermöglicht die Anzeige von Text rechts neben einem Button.
[data-wrap="button"] {
    display: inline-block;
}

// Teil #2 Ermöglicht die Anzeige von Text rechts neben einem Button.
[data-wrap="text-after-button"] {
    display:inline-block;
}
  1. Kopiere in deinen Beiträgen
[wrap="button"][Los geht's](https://example.com)[/wrap]

Oder wenn du Text neben deinem Button haben möchtest, versuche es damit…

[wrap="button"][Anmelden](https://YourDiscourseURL.com/signup)[/wrap]
[wrap="text-after-button"]<!-- Hier klicken, um dich für mein Discourse anzumelden! -->[/wrap]
14 „Gefällt mir“
2

Sehr schön, danke.

2 „Gefällt mir“
4

Hallo @UnitedFreedom!

Dein Thema hat mich dazu inspiriert, ein eigenes Thema über solche Modifikationen zu erstellen :+1:
Ihr könnt es hier lesen: Customize posts' contents with your own styles

2 „Gefällt mir“
5

Ich bin froh, dass ich Sie inspirieren konnte. Sie haben ein sehr einfach zu verfolgendes Thema mit Bildern erstellt. Ich liebe es :slight_smile:

2 „Gefällt mir“
6

Schnelle CSS-Verbesserung von unserer Seite:

Da die HTML-Ausgabe für „wrap-buttons“ innerhalb eines gekochten Posts leicht abweicht, haben wir das CSS-Markup angepasst, da das a-Tag innerhalb der div > p-Hierarchie den Link enthält und daher das Klicken auf den Button knapp über oder unter dem Link den Link nicht auslöst.

Wir haben dies umgangen, um mehr Padding um das a-Tag hinzuzufügen und das Margin-Block-Markup des p-Tags zu überschreiben.

Auch die Linkfarbe musste angepasst werden.

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