AISC · Guida agli stili Elementor

Persone e board

Card dei membri con foto opzionale, barra di navigazione tra i mandati ed elenchi compatti di persone.

.aisc-officer-name copiato

Globale · tutte le pagine

Card “persona” con foto facoltativa. Ogni persona è una colonna (le persone di un mandato stanno affiancate nella stessa Sezione interna) e dentro la colonna c’è un widget per pezzo. La colonna diventa da sola la card con il bordo rosso: la riconosce dal widget del nome, quindi la colonna non ha bisogno di classi.

Marco Marini

ISTC-CNR, Rome

Treasurer

Stefania Pighin

University of Trento

I pezzi (dall’alto in basso, dentro la colonna):

aisc-officer-photo — Immagine: facoltativa: la foto, ritagliata tonda da sola
aisc-officer-role — Titolo: il ruolo, rosso maiuscolo (“President”)
aisc-officer-name — Titolo (H3): il nome
aisc-officer-inst — Editor di testo: l’istituzione, in corsivo grigio

Le operazioni più comuni:

Cambiare nome, ruolo o istituzione: clicchi il testo sulla pagina e lo riscrivi.
Aggiungere una persona: tasto destro sulla colonna di una persona → Duplica, poi cambi i testi (e la foto, o la elimini).
Togliere la foto: elimini il widget Immagine; la card resta completa.

card persona (essenziale)

.aisc-officer-photo img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
}
/* la colonna che contiene il nome diventa la card */
.elementor-column:has(> .elementor-widget-wrap > .aisc-officer-name) {
  background: #fafafa;
  border-left: 3px solid #c0392b;
  padding: 18px 14px 16px;
}
.aisc-officer-role .elementor-heading-title {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #c0392b;
}
.aisc-officer-name .elementor-heading-title {
  font-size: .92rem;
  font-weight: 700;
  color: #111;
}
.aisc-officer-inst p {
  font-family: 'Cormorant Garamond', serif;
  font-size: .78rem;
  font-style: italic;
  color: #666;
}

ⓘ

.aisc-board-nav-label copiato

Globale · tutte le pagine

Barra “vai a”: nella colonna ci sono due widget, l’etichetta e i link. La colonna diventa da sola la barra grigia con il bordo rosso.

aisc-board-nav-label — Titolo: l’etichetta (“Jump to”)
aisc-board-nav-links — Editor di testo: i link uno dopo l’altro, separati da uno spazio. Ogni link si inserisce con il pulsante link della barra e punta all’ancora della sezione (es. #board-2026); l’ancora si scrive nel campo ID CSS della sezione (Avanzato)

Jump to

2026–2029 2023–2025 2020–2022

Intestazione di un periodo: due widget Titolo uno dopo l’altro: il periodo (classe aisc-board-year, badge rosso) e il titolo (classe aisc-board-title, livello H2). Si affiancano da soli.

2026–2029

Governing Board

Aggiungere un mandato alla barra: clicchi nei link, scrivi il nuovo periodo, lo selezioni e con il pulsante link gli dai l’ancora (#board-AAAA) che hai scritto nell’ID CSS della nuova sezione.

barra e intestazione (essenziale)

/* la colonna che contiene l'etichetta diventa la barra */
.elementor-widget-wrap:has(> .aisc-board-nav-label) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: #f7f7f7;
  border-left: 4px solid #c0392b;
}
.aisc-board-nav-label .elementor-heading-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #888;
}
.aisc-board-nav-links p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.aisc-board-nav-links a {
  padding: 5px 16px;
  background: #fff;
  border: 1px solid #d0d0d0;
  color: #333;
  text-decoration: none;
}
.aisc-board-year .elementor-heading-title {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: #c0392b;
  color: #fff;
  padding: 4px 14px;
}
.aisc-board-title .elementor-heading-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #111;
}

ⓘ

.aisc-sub-label · aisc-people-grid · aisc-founding copiato

Globale · tutte le pagine

aisc-sub-label — Titolo: etichetta di sotto-sezione (“Councilors”), rossa maiuscola con filetto.
aisc-people-grid — Editor di testo con un elenco puntato normale, una persona per voce: il nome in grassetto, poi a capo (Maiusc+Invio) l’istituzione; se serve, ancora a capo una nota in corsivo (es. “Auditor”, diventa rossa maiuscola). Il CSS dispone l’elenco in una griglia a 3 colonne. Per aggiungere una persona: Invio alla fine dell’ultima voce.
aisc-founding-title + aisc-founding — i membri fondatori, in due widget uno sotto l’altro che formano un unico riquadro: un Titolo con il titolo (“Founding Members”) e un Editor di testo con solo l’elenco puntato (nome e, in corsivo, l’istituzione).

Councilors

Marco Viola
Università di Roma Tre
Elisabetta Lalumera
University of Bologna
Account Auditor
Luca Tummolini
ISTC-CNR, Rome

Founding Members

Domenico Parisi — ISTC-CNR, Rome
Alessandro Laudanna — University of Salerno

persone (essenziale)

.aisc-sub-label .elementor-heading-title {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #c0392b;
  border-bottom: 1px solid #ececec;
  padding-bottom: 6px;
}
.aisc-people-grid ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.aisc-people-grid li {
  padding: 9px 12px;
  border: 1px solid #ebebeb;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: #888;
}
.aisc-people-grid li strong {
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  color: #222;
}
.aisc-people-grid li em {
  font-style: normal;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #c0392b;
}
/* fondatori: il titolo apre il riquadro, l'elenco lo continua */
.aisc-founding-title {
  padding: 18px 22px 12px;
  background: #fafafa;
  border-left: 3px solid #111;
}
.aisc-founding-title .elementor-heading-title {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #111;
}
.elementor-widget-wrap > .aisc-founding-title + .aisc-founding {
  margin-top: 0;
  padding-top: 0;
}
.aisc-founding li em { color: #888; }

ⓘ

Testo puro: nei widget si scrive solo testo (al massimo grassetto, corsivo, elenchi e link dalla barra). Ogni pezzo con uno stile diverso è un widget a sé, con la classe nel campo Avanzato → Classi CSS; quando i pezzi formano una card o una riga, la classe del componente va sul contenitore (la colonna o la Sezione interna).

Guida aggiornata mano a mano che si aggiungono nuove classi. Il CSS mostrato è quello attivo sul sito (Code Snippets → “AISC — Classi di stile riutilizzabili”, “AISC — Classi: iscrizione, dati e tabelle” e i layout delle singole pagine). Sorgenti in aisc-guida-stili/ (uno sections/<sezione>.html per pagina).