Cómo incrustar un botón en una publicación de tema

Desarrollador
1

Presentamos el increíble botón incrustado: ¡la solución definitiva para darle vida a tus publicaciones de temas! Con solo un clic, puedes agregar una dimensión completamente nueva a tu contenido y dejar a tus lectores asombrados. Además, nuestro botón incrustado viene con una garantía de satisfacción del 100%: si no estás completamente satisfecho con su asombrosidad, te devolveremos tu dinero (¡es broma, es totalmente gratis!). Entonces, ¿por qué esperar? ¡Consigue hoy mismo nuestro botón incrustado y únete al club de los chicos geniales!

He creado algunos temas de llamada a la acción para aumentar las inscripciones en mi foro de Discourse. Cada tema es para una campaña de marketing diferente. Pero todos comparten una cosa en común… quiero que se registren después de leerlo. Así que, en lugar de romper el flujo visual de los lectores, he agregado un botón directamente en la publicación para su conveniencia, y he aumentado las tasas de conversión. ¡Pero puedes usar el botón para lo que quieras! :slight_smile:

Vista previa

image
image964×520 36.4 KB


Cómo habilitar

  1. Agrega el CSS personalizado a tu tema actual.
[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 el texto se muestre a la derecha de un botón.
[data-wrap="button"] {
    display: inline-block;
}

// Parte #2 Permite que el texto se muestre a la derecha de un botón.
[data-wrap="text-after-button"] {
    display:inline-block;
}
  1. En tus publicaciones, copia
[wrap="button"][Empezar](https://example.com)[/wrap]

O si quieres texto junto a tu botón, prueba esto…

[wrap="button"][Registrarse](https://YourDiscourseURL.com/signup)[/wrap]
[wrap="text-after-button"]-- ¡Haz clic aquí para registrarte en mi discourse![/wrap]
14 Me gusta
2

muy bien, gracias.

2 Me gusta
4

¡Hola @UnitedFreedom!

Tu tema me inspiró a crear un tema adecuado sobre tales modificaciones :+1:
Pueden leerlo aquí, amigos: Customize posts' contents with your own styles

2 Me gusta
5

Me alegra haber podido inspirarte. Hiciste un tema muy fácil de seguir con imágenes. Me encanta :slight_smile:

2 Me gusta
6

Mejora rápida de CSS de nuestro lado:

Dado que la salida HTML es ligeramente diferente dentro de una publicación cocida para “wrap-buttons”, ajustamos el marcado CSS ya que la etiqueta a dentro de la jerarquía div > p contiene el enlace y, por lo tanto, hacer clic en el botón ligeramente por encima o por debajo del enlace no activa el enlace.

Logramos sortear eso para agregar más relleno alrededor de la etiqueta a y anular el marcado margin-block de la etiqueta <p>.

También tuvimos que ajustar el color del enlace.

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