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.

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.

Com un menú d'icones.

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

 

Com es crea

Com s'esborra

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 casella 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'indiqui més d'una opció, preval la primera. Es recomana no barrejar opcions en una mateixa graella!

  • Enllaç: Enllaç al qual es dirigirà l'usuari en clicar la icona. 
  • 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 ). Et recomanem que facis servir sempre aquesta opció.
  • 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.
  • 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 tradueix

Exemples

  • Graella d'icones Fontawesome com a menú interior 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).