Как встроить кнопку в пост темы

Разработка
1

Представляем потрясающую встроенную кнопку — идеальное решение для оживления ваших тем! В один клик вы добавите совершенно новое измерение своему контенту и оставите читателей в восторге. Кроме того, наша встроенная кнопка поставляется с 100% гарантией удовлетворения: если вы не будете полностью довольны её крутостью, мы вернём вам деньги (шутка, это абсолютно бесплатно)! Так почему бы не ждать? Получите свою встроенную кнопку уже сегодня и присоединяйтесь к клубу крутых ребят!

Я создал несколько тем с призывом к действию, чтобы увеличить количество регистраций на моём форуме Discourse. Каждая тема посвящена отдельной маркетинговой кампании. Но у них есть одна общая черта… Я хочу, чтобы пользователи регистрировались после прочтения. Поэтому, чтобы не прерывать поток внимания читателя, я добавил кнопку прямо в пост для их удобства, что повысило конверсию. Но вы можете использовать кнопку для любых своих целей! :slight_smile:

Предпросмотр

image
image964×520 36.4 KB


Как включить

  1. Добавьте пользовательский CSS в вашу текущую тему.
[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;
}

// Часть #1 Позволяет отображать текст справа от кнопки.
[data-wrap="button"] {
    display: inline-block;
}

// Часть #2 Позволяет отображать текст справа от кнопки.
[data-wrap="text-after-button"] {
    display:inline-block;
}
  1. В своих постах скопируйте
[wrap="button"][Начать работу](https://example.com)[/wrap]

Или, если вы хотите добавить текст рядом с кнопкой, попробуйте это…

[wrap="button"][Зарегистрироваться](https://YourDiscourseURL.com/signup)[/wrap]
[wrap="text-after-button"]<-- Нажмите здесь, чтобы зарегистрироваться на моём Discourse![/wrap]
2

Очень приятно, спасибо.

4

Привет, @UnitedFreedom!

Твоя тема вдохновила меня создать отдельную тему о подобных модификациях :+1:

Вы можете прочитать её здесь, ребята: Customize posts' contents with your own styles

5

Я рад, что смог вас вдохновить. Вы создали очень понятную тему с картинками. Мне это нравится :slight_smile:

6

Быстрое улучшение CSS с нашей стороны:

Поскольку HTML-вывод внутри обработанного поста для «wrap-buttons» немного отличается, мы скорректировали CSS-разметку, так как тег a внутри иерархии div > p содержит ссылку, и поэтому нажатие на кнопку чуть выше или ниже ссылки не активирует её.

Нам удалось обойти это, добавив больше отступов вокруг тега a и переопределив разметку margin-block тега <p>.

Также пришлось скорректировать цвет ссылки.

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