AISC · Guida agli stili Elementor

Immagini, card e bottoni

Immagine grande in cima pagina, card numerate per elenchi di regole e il bottone standard del sito.

.aisc-hero-image copiato
Globale · tutte le pagine Widget: Immagine

Immagine grande in cima pagina, ombra morbida e angoli arrotondati. Usata su Conference Guidelines.

ⓘ
Come per aisc-officer-photo: la classe finisce sul contenitore del widget, non sull’<img>. Il CSS è scritto come .aisc-hero-image img{…}.
CSS
.aisc-hero-image img { width: 100%; height: auto; display: block; box-shadow: 0 6px 36px rgba(0,0,0,.13); border-radius: 3px; }
.aisc-guideline-card copiato
Globale · tutte le pagine Colonna aisc-guideline-card + Titolo + Titolo + Editor di testo

Card numerata per elenchi di regole e criteri. Il contenitore porta la classe del componente (selezioni la colonna o la Sezione interna → Avanzato → Classi CSS); dentro, un widget per pezzo, ognuno con la sua classe e solo testo. Ogni card è una colonna con classe aisc-guideline-card; le card stanno due per riga, ogni riga è una Sezione interna. Il numero nel pallino rosso è automatico: segue l’ordine delle card nella pagina, quindi non va scritto.

⚖️

Equilibrio di Genere

Gli inviti dei keynote speakers devono rispettare un criterio di equilibrio di genere: almeno il 50% di donne.

🔬

Peer-Review

La selezione degli abstract deve essere il risultato di un processo di blind peer-review.

I pezzi (dentro la colonna):

  • aisc-card-icon — Titolo: solo l’emoji
  • aisc-card-title — Titolo (H3): il titolo, maiuscolo
  • aisc-card-text — Editor di testo: il testo (anche più paragrafi; il grassetto risalta in nero)

Aggiungi anche la classe aisc-wide alla colonna (aisc-guideline-card aisc-wide) per una card che occupa da sola tutta la riga: va in una Sezione interna con una sola colonna larga 100%.

Le operazioni più comuni:

  1. Cambiare una card: clicchi emoji, titolo o testo sulla pagina e riscrivi.
  2. Aggiungere una card in una riga con un posto libero: tasto destro sulla colonna di una card → Duplica.
  3. Aggiungere una riga di card: tasto destro sulla riga (la Sezione interna) → Duplica, poi cambi i testi.
  4. Spostare una card: trascinala nel Navigatore; i numeri si riaggiustano da soli.
.aisc-guideline-card (essenziale)
/* ogni card (colonna) incrementa il contatore */
.elementor-top-section:has(.aisc-guideline-card) { counter-reset: aiscgcard; }
.elementor-column.aisc-guideline-card {
  position: relative;
  counter-increment: aiscgcard;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-top: 3px solid #c0392b;
  padding: 22px 22px 20px;
}
.elementor-column.aisc-guideline-card::before {
  content: counter(aiscgcard);
  position: absolute;
  top: 22px;
  right: 22px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #c0392b;
  color: #fff;
}
.aisc-guideline-card .aisc-card-icon .elementor-heading-title { font-size: 2rem; }
.aisc-guideline-card .aisc-card-title .elementor-heading-title {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #111;
}
.aisc-guideline-card .aisc-card-text p {
  font-family: 'Cormorant Garamond', serif;
  font-size: .88rem;
  line-height: 1.78;
  color: #444;
}
/* le card di una riga distanziate */
.elementor-section:has(> .elementor-container > .aisc-guideline-card) > .elementor-container { gap: 20px; }
ⓘ
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, la classe del componente va sul contenitore (la colonna).
.aisc-button-filled · aisc-button-ghost copiato
Globale · tutte le pagine Widget: Pulsante

Il bottone standard del sito: si usa il widget Pulsante di Elementor (testo e link si impostano nei suoi campi) con classe aisc-button-filled (rosso pieno) oppure aisc-button-ghost (bordo sottile). Più pulsanti uno dopo l’altro si affiancano da soli. Le vecchie classi aisc-btn scritte dentro un link non vanno più usate.

Diventa Socio   Chi siamo
pulsanti (essenziale)
.aisc-button-filled .elementor-button, .aisc-button-ghost .elementor-button {
  padding: 12px 28px;
  border-radius: 0;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.aisc-button-filled .elementor-button {
  background: #c0392b;
  color: #fff;
  border: 1px solid #c0392b;
}
.aisc-button-filled .elementor-button:hover { background: #922b21; }
.aisc-button-ghost .elementor-button {
  background: transparent;
  color: #555;
  border: 1px solid #ddd;
}
.aisc-button-ghost .elementor-button:hover {
  border-color: #c0392b;
  color: #c0392b;
}
ⓘ
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).
Torna in alto