AISC · Guida agli stili Elementor

Schede, classifiche e bandi

Scheda biografica, classifica a medaglie, riquadro bando con bottone, card di date e calendario, elenchi a pallini.

Schede, classifiche, bandi e liste

Nate per Premio Maria Miceli e Patrocinio AISC, ma sono globali. Tutte funzionano allo stesso modo: ogni elemento è un widget Editor di testo e la colonna che li contiene li dispone da sola (elenco, griglia o riga). Dentro il widget, ogni paragrafo ha un ruolo fisso (il primo è l’etichetta, il secondo il titolo…): non servono classi dentro il testo, basta rispettare l’ordine. Per aggiungere un elemento duplica un widget.

.aisc-bio-card copiato
Globale · tutte le pagine Colonna aisc-bio-card + Titoli + Editor di testo

Scheda biografica con cerchio nero. La colonna della sezione porta la classe aisc-bio-card; dentro, un widget per pezzo. Su telefono il cerchio sparisce.

MM

Maria Miceli

Professoressa di Psicologia Sociale · Ricercatrice ISTC-CNR

Maria Miceli è stata professoressa di psicologia sociale con una formazione filosofica e ricercatrice presso l’ISTC-CNR.

  • aisc-bio-initials — Titolo: le iniziali dentro il cerchio
  • aisc-bio-name — Titolo (H3): il nome
  • aisc-bio-role — Titolo: il ruolo, maiuscolo grigio
  • aisc-bio-text — Editor di testo: la biografia (anche più paragrafi)
.aisc-bio-card (essenziale)
.elementor-column.aisc-bio-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-top: 3px solid #111;
  padding: 28px 32px;
}
.elementor-column.aisc-bio-card > .elementor-widget-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 32px;
}
.aisc-bio-initials {
  grid-column: 1;
  grid-row: 1 / 3;
}
.aisc-bio-initials .elementor-heading-title {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aisc-bio-name .elementor-heading-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #111;
}
.aisc-bio-role .elementor-heading-title {
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #888;
}
.aisc-bio-text {
  grid-column: 1 / -1;
  border-top: 1px solid #f0f0f0;
  padding-top: 20px;
}
.aisc-result-row copiato
Globale · tutte le pagine Sezioni interne (una per riga) + Titolo + Editor di testo

Classifica con medaglia rotonda, fatta a pezzi come una tabella: ogni riga è una Sezione interna con classe aisc-result-row e due colonne. I colori del podio sono automatici in base all’ordine: la 1ª riga è rossa, la 2ª grigio scuro, la 3ª grigio; le altre restano chiare.

1°

Giulio Sacco

Il problema delle emozioni recalcitranti

2°

Erika Sampaolo, Giada Lettieri & Luca Cecchetti

Analisi dell’associazione tra generi cinematografici ed emozioni

3°

Andrea Bobbio & Luigina Canova

Spencer il cibo

4° ex

Selene Arfini & Wendy Ross

Sentirsi bloccati

  • aisc-result-row — Sezione interna: una riga della classifica
  • aisc-result-pos — Titolo (1ª colonna): la posizione nel cerchio (“1°”, “4° ex”…)
  • aisc-result-names — Editor di testo (2ª colonna): gli autori
  • aisc-result-title — Editor di testo (2ª colonna): il titolo del lavoro, in corsivo

Aggiungere una riga: tasto destro sulla riga → Duplica, poi cambi i testi. I colori del podio seguono la posizione: se sposti le righe, si spostano anche loro.

classifica a medaglie (essenziale)
.elementor-section.aisc-result-row {
  background: #fff;
  border: 1px solid #ebebeb;
}
.aisc-result-row .elementor-column:first-child { flex: 0 0 60px; }
.aisc-result-pos .elementor-heading-title {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f0f0f0;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 700;
}
.aisc-result-row:nth-child(1) .aisc-result-pos .elementor-heading-title {
  background: #c0392b;
  color: #fff;
}
.aisc-result-row:nth-child(2) .aisc-result-pos .elementor-heading-title {
  background: #555;
  color: #fff;
}
.aisc-result-row:nth-child(3) .aisc-result-pos .elementor-heading-title {
  background: #888;
  color: #fff;
}
.aisc-result-names p {
  font-size: .8rem;
  color: #666;
}
.aisc-result-title p {
  font-family: 'Cormorant Garamond', serif;
  font-size: .9rem;
  font-style: italic;
  color: #222;
}
.aisc-cta-box copiato
Globale · tutte le pagine Colonna aisc-cta-box + Titoli + Editor di testo + Pulsante

Riquadro nero con invito all’azione (bando aperto, iscrizione…). La colonna della sezione porta la classe aisc-cta-box; dentro, un widget per pezzo. Il pulsante va da solo a destra (sotto, su telefono).

🟢 Candidature aperte

Patrocinio AISC — Bando Attivo

Presenta la tua richiesta di patrocinio per iniziative scientifiche.

Compila il modulo
  • aisc-cta-status — Titolo: l’etichetta rossa (puoi iniziare con un’emoji, es. 🟢)
  • aisc-cta-title — Titolo (H3): il titolo bianco
  • aisc-cta-text — Editor di testo: la descrizione
  • aisc-cta-button — Pulsante: il testo del bottone e, nel campo Link, l’indirizzo (per un modulo esterno attiva “Apri in una nuova finestra”). La freccia la aggiunge il CSS
.aisc-cta-box (essenziale)
.elementor-column.aisc-cta-box {
  padding: 36px 40px;
  background: #111;
  border-top: 4px solid #c0392b;
}
.elementor-column.aisc-cta-box > .elementor-widget-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 32px;
  align-items: center;
}
.aisc-cta-status .elementor-heading-title {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #c0392b;
}
.aisc-cta-title .elementor-heading-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
}
.aisc-cta-text p {
  font-family: 'Cormorant Garamond', serif;
  font-size: .88rem;
  color: rgba(255,255,255,.7);
}
/* il pulsante nella colonna di destra */
.aisc-cta-box > .elementor-widget-wrap > .aisc-cta-button {
  grid-column: 2;
  grid-row: 1 / 4;
}
.aisc-cta-button .elementor-button {
  padding: 14px 28px;
  background: #c0392b;
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.aisc-cta-button .elementor-button-text::after { content: ' \2197'; }
.aisc-date-card · aisc-cal-card copiato
Globale · tutte le pagine Colonne in Sezioni interne + Titolo + Editor di testo

Card di date e di calendario. Ogni card è una colonna con la classe del componente, in una Sezione interna (due date per riga, tre mesi per riga); dentro, un widget per pezzo.

📅 Marzo 2026

per iniziative maggio – agosto 2026

📅 Luglio 2026

per iniziative settembre – dicembre 2026

  • aisc-date-card — colonna: la card della data
  • aisc-date-title — Titolo: la data, in grassetto (l’emoji si scrive a inizio testo)
  • aisc-date-note — Editor di testo: la nota in corsivo
🍂 Ottobre

Per iniziative da svolgersi tra gennaio e aprile

dell’anno successivo

🌱 Marzo

Per iniziative da svolgersi tra maggio e agosto

dell’anno in corso

☀️ Giugno

Per iniziative da svolgersi tra settembre e dicembre

dell’anno in corso

  • aisc-cal-card — colonna: la card del mese
  • aisc-cal-month — Titolo: il mese, in rosso
  • aisc-cal-text — Editor di testo: il periodo
  • aisc-cal-note — Editor di testo: la nota piccola grigia

Aggiungere una card: tasto destro sulla colonna → Duplica; per una riga nuova, duplichi la Sezione interna. Su telefono le card si mettono una sotto l’altra.

date e calendario (essenziale)
.elementor-column.aisc-date-card {
  padding: 12px 18px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-left: 3px solid #888;
}
.aisc-date-title .elementor-heading-title {
  font-size: .9rem;
  font-weight: 700;
  color: #333;
}
.aisc-date-note p {
  font-family: 'Cormorant Garamond', serif;
  font-size: .78rem;
  font-style: italic;
  color: #888;
}
.elementor-column.aisc-cal-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-top: 3px solid #c0392b;
  padding: 18px 18px 16px;
}
.aisc-cal-month .elementor-heading-title {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #c0392b;
}
.aisc-cal-text p {
  font-family: 'Cormorant Garamond', serif;
  font-size: .88rem;
  color: #444;
}
.aisc-cal-note p {
  font-size: .72rem;
  color: #999;
}
.aisc-dot-item copiato
Globale · tutte le pagine Widget: Editor di testo (uno per voce)

aisc-dot-item = voce di elenco con pallino rosso (un solo paragrafo; il grassetto diventa nero). Le voci nella stessa colonna formano l’elenco. aisc-footnote = piccola nota in corsivo grigio da mettere sotto un blocco.

Nomi, affiliazioni e recapiti degli organizzatori/richiedenti

Programma dell’evento (anche in via di definizione)

Le proposte vengono esaminate dal Consiglio Direttivo, che comunica la decisione entro un mese dalla scadenza del bando.

.aisc-dot-item · .aisc-footnote
.aisc-dot-item {
  position: relative;
  padding: 13px 16px 13px 36px;
  background: #fff;
  border: 1px solid #ebebeb;
}
.aisc-dot-item::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 21px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c0392b;
}
.aisc-dot-item p {
  font-family: 'Cormorant Garamond', serif;
  font-size: .9rem;
  line-height: 1.72;
  color: #444;
}
.aisc-dot-item strong {
  font-family: 'DM Sans', sans-serif;
  color: #111;
}
.aisc-footnote p {
  font-family: 'Cormorant Garamond', serif;
  font-size: .84rem;
  font-style: italic;
  color: #888;
}
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).
Torna in alto