Accesos
Convertir enlaces en botones

Convertir enlaces en botones en el cuerpo del mensaje es tan sencillo que, cuando aprendas a hacerlo, dotarás a tu web de un estilo único.

Convertir enlaces en botones con bootstrap

Para poder agregar botones, tienes que saber muy poco de html y sobre todo, saber escribir en la pestaña Texto de la caja de redacción de tu WordPress. Si te fijas en la caja de redacción, cuentas a tu derecha de dos pestañas: «Visual» y «Texto». La mayoría de usuarios de WordPress escriben en «Visual» ya que es muy parecido a los clásicos documentos en Word de Microsoft Office y una gran minoría lo hace en Texto o en ambas para poder maquetar elementos y textos fuera de la visualización normal. Prácticamente, en Texto es escribir en código fuente (html).

Imaginemos que has añadido un enlace desde Visual:

Enlace

Si observamos este enlace desde Texto, veremos su código fuente así:

<a href="http://www.ibermega.com">Enlace</a>

Ahora añadiremos muy poco de código para convertir el enlace en un botón:

<a href="http://www.ibermega.com" class="btn btn-info" role="button">Enlace</a>

Siendo el resultado el siguiente:

Enlace

Simplemente hemos añadido la clase btn btn-info y el código role="button" que también corresponde con un botón de color azul celeste. La característica del color del botón está justamente en btn-info. Si por ejemplo queremos un botón verde, debemos cambiar «info» por «success» de esta forma:

<a href="http://www.ibermega.com" class="btn btn-success" role="button"">Enlace</a>

Enlace

En la siguiente lista mostramos los colores por defecto que cuenta el framework Bootstrap 3.0 con el código completo:

  • btn btn-default gris claro
  • btn btn-info azul celeste
  • btn btn-primary azul índigo
  • btn btn-success verde
  • btn btn-danger rojo
  • btn btn-warning naranja claro
  • btn btn-link solo enlace

Tamaños

Si necesitas destacar el botón tipo enlace, estos estos son los códigos que debemos de añadir según sus características de tamaño: .btn-lg, .btn-sm, o .btn-xs

<p> <a href="#" class="btn btn-primary btn-lg" role="button">Botón Grande</a> </p> 
<p> <a href="#" class="btn btn-primary" role="button">Botón por Defecto</a> </p> 
<p> <a href="#" class="btn btn-primary btn-sm" role="button">Botón Pequeño</a> </p> 
<p> <a href="#" class="btn btn-primary btn-xs" role="button">Botón extra pequeño</a> </p>

Botón Grande

Botón por Defecto

Botón Pequeño

Botón extra pequeño

Como has podido ver, convertir enlaces en botones en sumamente sencillo. En siguientes tutoriales veremos donde insertar estos enlaces estilo botón con la maquetación de cada publicación.


Fuente: http://getbootstrap.com/css/#buttons

Este tutorial está basado en el framework Bootstrap 3.0 o superior para las plantillas web Athenea y Pharma de WordPress. Puedes descargar ambas plantillas desde https://ibermega.com/themes/ e instalarlas para practicar con este y otros tutoriales.

Aconsejamos que cuando crees una entrada o una página no la publiques directamente. Solo guardala y si quieres ver los resultados, pulsa en «Vista previa». Cuando la tengas lista, publícala con garantías de una perfecta visualización exenta de errores.

Por experiencia, nada más publicar una entrada o una página, los robots del buscador Google que pasaban en ese momento, nos han indexado la publicación en sus directorios mostrándo los errores y fallas que estaban por corregir. Si esto ocurre, no podremos hacer nada hasta que vuelva a pasar el rastreador del buscador, que en algunas ocasiones, puede tardar hasta 30 días.


¡SIGAMOS EN CONTACTO!

¡Nos encantaría tenerte al día con nuestras últimas noticias y ofertas! 😎

¡No enviamos spam! Lee nuestra política de privacidad para más información.

Publicaciones relacionadas

Renting Web, la revolución web ha llegado

Renting Web, la revolución web ha llegado

Renting Web es un servicio organizado pensando en pequeñas y medianas empresas, consiste en el diseño y mantenimiento de páginas web abonadas en cómodas cuotas. La idea es abonar mensualmente una cuota similar a la que pagaría por disponer de servidor, este pago incluye lo que conocemos como todo incluido. Esto se refiere a los […]

Enlace permanente de WordPress

Enlace permanente de WordPress

El enlace permanente de WordPress tiene influencia en el ranking de tráfico y motores de búsqueda de tu sitio web, aunque no sea muy evidente. No es recomendable pasar desapercibidos estos enlaces. Elegirlos erróneamente puede ser perjudicial y es difícil de cambiar, a futuro se puede perder la conexión a su sitio. El enlace permanente […]

¿Qué es Google Authenticator?

¿Qué es Google Authenticator?

Si deseas mantener un buen nivel de seguridad en WordPress, debes considerar utilizar el plugin de la autenticación de dos pasos para cuentas Google y otros servicios. Existe una manera sencilla de habilitar la autenticación de 2 pasos en WordPress utilizando Google Authenticator, con esto darás valor a tu blog y seguridad. Google Authenticator funciona […]

¿Qué es el multisite de WordPress?

¿Qué es el multisite de WordPress?

El multisite de WordPress es un CMS (es decir, no hay que instalar nada especial, sólo activarla) que permite gestionar una red de webs desde una sola instalación de WordPress que, aunque nació como solución para blogs, actualmente cuenta con funcionalidades y capacidades que le hacen capaz de adaptarse a multitud de necesidades. Una de […]


2 Comentarios

Deja un comentario

  Acepto losPolítica de privacidad

Muy importante.- No es necesario registrarse para publicar una opinión o comentario, pero si es necesario introducir su nombre y correo electrónico para evitar el SPAM. Además, no utilizaremos los datos insertados para otras cuestiones que difieren de esta publicación. En cualquier momento puede solicitar la eliminación de los mismos, enviando una solicitud al correo de contacto y con el mismo correo que ha emitido la opinión o comentario para que en un plazo máximo de 72 horas se elimina.

INFORMACIÓN ADICIONAL SOBRE PROTECCIÓN DE DATOS:

  • Responsable: IBERMEGA TSEO, SL
  • Finalidad del tratamiento: Control de spam, gestión de comentarios, comunicaciones y promociones.
  • Legitimación: Su consentimiento
  • Transferencia de datos: Tus datos no se cederán a terceros, salvo por obligación legal.
  • Derechos: Acceso, rectificación, portabilidad, olvido.
  • Email de contacto: oficina@ibermega.com

Copyright © 2002-2021 by IBERMEGA TSEO, S.L.