Graella d'enllaços amb icones

Aquesta estructura de contingut ens permet crear graelles d'enllaços amb icones, ja sigui utilitzant imatges, codi Fontawesome (icones estàndar per a la web, com ) o lletres i números. A més de la icona, l'enllaç pot dur un text. 

Es pot utilitzar, per exemple, per construir un menú visual per destacar opcions de la web o de la intranet.

Les icones "no estàndard" (no Fontawesome) es consideren imatges, que hem de pujar prèviament en una carpeta de Contingut > Documents i fitxers multimèdia. Han de ser senzilles, en format PNG de 400x400 px i fons transparent.
  • Si tens intenció d'utilitzar un set d'icones especial, diferents de les que s'utilitzen habitualment a la web de la UPF, cal que ho consultis amb Serveis Web.

 

Com es veu

Com un menú d'icones. El nombre de columnes és configurable, però s'adapta al monitor de l'usuari.

 

Amb títols i subtítols.

Sense text.

Com un menú d'icones.

Amb títols i subtítols, les icones es disposen en una sola columna.

Sense text, la disposició s'adapta al mòbil.

Graella d'icones sense text, vista mòbil

 

Com es crea

 

Com s'edita

Característiques que afecten tota la graella:

  • Títol (obligatori): Títol intern de la graella. Cal que sigui un títol molt descriptiu, per tal d'evitar confusions en el futur.
  • Número de columnes: Selecciona el nombre òptim de columnes en què es distribuiran les icones. Tanmateix, la disposició final dependrà del tipus de monitor que tingui l'usuari. 
  • Mostrar icones sense el text: Marca aquesta caselles si no vols utilitzar un text per a l'enllaç.

A continuació, tindrem una fitxa per a cadascun dels enllaços. Per afegir una fitxa, clica el signe + i, per esborrar-la, el signe . Els enllaços no es poden reordenar.

Per a cada enllaç, podem utilitzar alternativament una imatge, una icona de Fontawesome (opció recomanada) o números i lletres; en cas que s'iindiqui més d'una opció, preval la primera. Es recomana no barrejar opcions en una mateixa graella!

  • Enllaç: Enllaç al que es dirigirà l'usuari en clicar la icona. Si és a una web o document de la UPF, recorda que no es posa mai el domini (p.e., https://www.upf.edu /web/matricula/). 
  • Imatge: Si vols utilitzar una imatge, aquí la pots triar (cal haver-la pujat prèviament). Les icones no estàndard (Fontawesome) es consideren "imatge". Han de ser PNG (400x400 px) amb fons transparent.
  • Icona: Si vols utilitzar una icona, pots triar-la de la web de Fontawesome. Cal copiar el codi de la icona (p.e. icon-thumbs-up per ).
  • Lletres o números (max 3): Pots escriure un número o lletres, amb un màxim de 3 caràcters. 
  • Títol: Títol de l'enllaç. Es mostrarà només si la casella "Mostra icones sense text" està desactivada.
  • Subtítol: Subtítol explicatiu de l'enllaç. Només es pot utilitzar si hi ha un Títol.

 

Exemples

  • Graella d'icones Fontawesome com a menú interor d'una secció de la web: UCA de Comunicació > Sobre nosaltres.
  • Graella d'icones tipus imatge com a accés a diferents temes de la web (no reprodueix un menú): UPF Sostenible.
  • Graella d'icones com a accés ràpid (menú) a diferents seccions d'una intranet: Intranet del personal de la UPF (requereix identificació de Campus Global).