•  
  • Innovadora

     
  • Valores

     
  • Participativa

     
  •  
  •  
  • "Generación Digital"
  • Proyecto Educar en Valores desde el Deporte
  • Abiertos a toda la comunidad educativa
  • Proyecto Centro Educativo hacia la Sostenibilidad
  • Una de nuestras señas de identidad es la interculturalidad

Inicio

Como crear un botón con imagen.

Esta guía nos enseñará a crear botones como el de Racima que tenemos al inicio de la web.

Para empezar, debemos crear un modulo de tipo HTML Personalizado. En el backend, Extensiones > Gestor de Módulos > Nuevo > HTML Personalizado (Custom HTML si tenemos la interfaz en inglés).

Una vez creado, le ponemos un título y colocamos dentro los contenidos que queramos: imagenes, enlaces, texto... para hacer un botón con imagen, debemos poner la imagen que necesitemos.

 

¡¡¡OJO!!! Esta imagen ha de tener ciertas características:

  • PNG o GIF con fondo transparente.
  • No puede ser mas grande que el espacio donde queramos colocarlo (barras laterales: 285 pixels, central: 385 pixels).

Si ponemos imágenes mayores, provocaremos que el diseño de la web se descuadre por completo.

Una vez insertada la imagen, la seleccionamos y pulsamos el botón de Insertar/Editar Vínculo. Cubrimos de forma normal y antes de cerrar, vamos a la tercera pestaña, Avanzado. Ahi tenemos un campo llamado Clases de hojas de estilo. En ese campo, ponemos sp-button y le damos a aceptar.

Cuadro de configuración

Ejemplo de botón

Como puedes ver, el botón toma como anchura el total del espacio en el que lo hemos insertado. Se puede retocar en la pestaña Avanzado que vimos antes, colocando el texto width: 100px; (cambiando el 100 por el numero de pixeles que queramos) en la casilla Estilo. Si lo queremos centrado, hay que poner width: 100px; margin: auto;

Botón con anchura definida

Además de usarlo en bloques de HTML personalizado, también podemos emplearlo dentro de artículos como este, y asi crear botones dentro de ellos. Se puede aplicar a cualquier tipo de contenido:

Ejemplo de botón de texto

Govierno de La Rioja