👉 En esta documentación te enseñaremos paso a paso a agregar en la descripción de tu publicación un botón con un link. Para ello te mostraremos cómo crear el link, te compartiremos un código CSS para darle estilo y te indicaremos dónde añadirlo.
Crearemos un botón que contiene una URL. Por ejemplo "Ir al website":
1. Ve a Panel de Control > Publicaciones. Elige la publicación en la que deseas que se muestre el botón.
Si aún no cargaste tu publicación, aquí te compartimos un tutorial y te mostramos cómo hacerlo.
2. Posiciónate en la publicación y haz clic en Editar.
3. Ve al recuadro de la descripción. Allí podrás agregar la descripción de tu publicación y es también donde agregaremos el link como te indicamos a continuación:
a. Escribe lo que deseas que diga el link. Por ejemplo: "Ir al website".
b. Selecciona el texto:
c. Haz clic en el ícono 🔗 para insertar el enlace y escribe la URL. Por ejemplo "https://misitio.com":
d. Haz clic en Link y luego haz clic en Actualizar.
Ahora la descripción de tu publicación tendrá un link como éste:
En caso de que solo quieras agregar un link ya habrás terminado de crearlo pero si quieres que luzca como un botón o personalizarlo como en la primer imagen, continúa con los pasos siguientes.
4. Ahora que hemos creado el link, ¡Vamos a darle forma de botón!
⚠️ De acuerdo al plan que tengas contratado deberás ingresar el código CSS en diferentes lugares, así que presta atención que te indicaremos cómo hacerlo y funciona de la misma manera.
Ambos se configuran desde Panel de control > Ajustes > Avanzados
En caso de que cuentes con el recuadro de CSS Personalizado
Deberás insertar el siguiente código CSS:
/* Modal description button*/
.IssueModal-descriptionText.IssueModal-descriptionText a {
float: left;
color: white;
background: #D580D5;
border-radius: 30px;
padding: 0.5rem 1rem;
}
Si no tienes el recuadro de CSS Personalizado colocaremos el código CSS en el recuadro Custom before </head> code
En este caso deberías de agregar la etiqueta adicional <style>. El código te quedaría así:
<style>
.IssueModal-descriptionText.IssueModal-descriptionText a {
float: left;
color: white;
background: #D580D5;
border-radius: 30px;
padding: 0.5rem 1rem;
}
</style>
Ten en cuenta que algunos valores puedes modificarlos a tu gusto (alineación, color del texto, color de fondo, radio del borde y padding) siempre que tengas conocimiento en CSS 🤓
Haz clic en Guardar.
¡Listo! Hemos terminado y tu botón ahora luce así:
En caso de que no se haya creado correctamente o se haya presentado algún error, verifica que hayas copiado correctamente el código tal como te lo compartimos.
>>Si deseas configurar el botón o enlace en más de una publicación, puedes hacerlo mediante una actualización masiva de publicaciones.
En la planilla deberás de insertar el siguiente código en la columna Description en la fila de la/las publicaciones donde desees configurarlo.
<aside><!--block--><em>Ingresar texto aquí.</em></aside><div><!--block--><br><a href="ingresar url aquí" target="_blank">Botón de redirección<br></a><br><br></div><div>Descripción de la publicación aquí.</div>
No olvides incluir un link en ingresar url aquí para que los usuarios puedan ser re direccionados correctamente. Luego debes de finalizar el proceso normalmente.
Esperamos que este tutorial te haya resultado sencillo. Si tienes consultas escríbenos a [email protected].