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.
Tabla de Contenidos
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:
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:
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>
En la siguiente lista mostramos los colores por defecto que cuenta el framework Bootstrap 3.0 con el código completo:
btn btn-defaultgris clarobtn btn-infoazul celestebtn btn-primaryazul índigobtn btn-successverdebtn btn-dangerrojobtn btn-warningnaranja clarobtn btn-linksolo 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>
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
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.
2 Comentarios