BOTONES y ENLACES | Hacia otras páginas, descargables, etc.

En este tutorial te mostraré dos formas de crear un enlace:

  • Un enlace incrustado en el propio texto que es muy sencillo
  • Y otro un poco más sofisticado (botón) pero con un resultado visual mucho más profesional.

Como crear un enlace sencillo

La primera forma es super sencilla, es un enlace en el mismo texto. Echa un vistazo tanto a la imagen como al video:

  1. Selecciona el texto que quieras convertir en enlace
  2. Haz click en el botón con forma de «cadena» como muestro en la imagen
  3. Introduce el enlace con la URL de destino
  4. (opcionalmente) Escoge si quieres que el enlace se abra en una pestaña diferente. Esto es práctico si apuntas a una página fuera de tu web y no quieres que el usuario salga de ella.
  5. Le damos click en Enter y listos.

Cómo crear un botón

Ahora veremos como crear un botón más vistoso, que te permita captar más la atención del usuario. Aquí te puede ser util echar un vistazo al video al final de este apartado si algún paso no te ha quedado muy claro:

  1. Empezaremos simplemente dando a Enter para empezar una nueva linea, ahí le darás al botón de + que siempre te sale por defecto a la derecha.
  1. Te aparecerán varias opciones y un campo de texto, ahí deberas escribir «botones» para que aparezcan opciones acorde a «botones». IMPORTANTE: aquí es posible que veas dos opciones similares, escoge la de color azul (como muestro en la imagen).
Importante escoger el de color azul
  1. Te aparecerá un botón de color azul por defecto (como verás en la imagen más abajo). Escribe el texto que quieras mostrar en el botón
  2. Haz click en el botón con forma de «cadena»
  3. Introduce el enlace con la URL de destino
  4. (opcionalmente) Escoge si quieres que el enlace se abra en una pestaña diferente. Esto es práctico si apuntas a una página fuera de tu web y no quieres que el usuario salga de ella.

Ahora veremos algunas opciones básicas para aplicarle un poco de estilo al botón:

  1. Teniendo seleccionado el botón haz click en el botón con forma de tuerca en la parte superior derecha de la pantalla (este botón abre y cierra las opciones del bloque que tengamos seleccionado).
  2. Desplázate por las diferentes opciones de la barra lateral hasta que encuentres una sección llamada «Espaciado». Tal y como muestro en el video, cambiando los números de estos cuadros le podrás dar un aspecto totalmente diferente al botón (si lo quieres hacer más grande o más pequeño).

  1. Ahora veremos el apartado de color. En el mismo menú lateral desplázate un poco más abajo del apartado «Espaciado», verás la sección de «colores» (mira la imagen a continuación).
    • a) Este es el color de fondo del botón «en reposo».
    • b) Este es el color de fondo del botón cuando alguien pone el mouse «encima» (puedes ver un ejemplo en el video). Es una forma intuitiva de hacer entender al usuario que este es un elemento accionable.

Te dejo con el video de los pasos hasta ahora:

  1. Y por último, verás como centrar el botón en caso necesario:

Tan solo añadir que en este mismo menú lateral donde has visto «espaciado» y «colores» encontrarás infinidad de otras opciones en la que te animo a aventurarte. Secciones como «tipografia» para cambiar el tamaño del texto, o en la misma sección de «colores» existen opciones para cambiar el color del texto del botón entre otras.

Crear un enlace para Google Drive

Cuando quieras crear un enlace a un archivo tuyo, ya sea para que el usuario pueda verlo, editarlo o directamente descargar, lo más recomendable es guardarlo en tu carpeta de Google drive y enlazar a dicho archivo desde tu web.

Si no sabes cómo generar un enlace a un fichero de Drive, es realmente sencillo:

  1. Abre Drive
  2. Haz click con el botón derecho sobre el archivo a compartir
  3. Selecciona Obtener enlace (en móviles Copiar enlace)
  4. Pega el enlace en donde desees usarlo (de acuerdo a lo que hemos visto en el tutorial, si deseas crear un enlace sencillo deberías pegar el enlace en el paso 3, y si estás creando un botón deberás pegar el enlace en el paso 5).

¿No encontraste solución?

Prueba con otro tutorial o contáctame para que te ayude