AISC · Guida agli stili Elementor

Guide pratiche

Piccoli “come si fa” per situazioni specifiche di una pagina — non sono classi da copiare.

📷 Cambiare la foto della Home
Solo Home

La foto grande a destra nella hero della Home (quella con la scritta “Associazione Italiana di Scienze Cognitive” sopra) non è uno “sfondo” nel senso classico di Elementor — è un’immagine vera e propria, con un velo semi-trasparente e la scritta sovrapposti sopra. Proprio perché ci sono due elementi impilati uno sull’altro, cliccarci sopra direttamente spesso seleziona quello sbagliato (il velo con la scritta, invece della foto). Ecco la strada sicura:

  1. Apri la Home con Elementor (dalla lista Pagine di WordPress, o “Modifica con Elementor” in alto quando visiti la pagina da loggato).
  2. In basso a sinistra nell’editor, apri il Navigatore (l’icona con l’alberello/le righe — se non la vedi, tasto destro sulla pagina → “Naviga”). Si apre un elenco ad albero di tutta la struttura della pagina.
  3. Nell’albero, apri la sezione della Hero e trova la seconda colonna (quella di destra) — dentro trovi due voci: un widget “Immagine” (la foto) e un widget “Titolo” (la scritta in basso: si cambia direttamente nel suo campo di testo). Il velo scuro sopra la foto lo disegna il CSS, non è un widget.
  4. Clicca sulla voce “Immagine” nel Navigatore — si apre il pannello del widget con la foto attuale.
  5. Nel pannello a sinistra, clicca sulla foto (o su “Scegli immagine”) e seleziona la nuova immagine dalla libreria media, come per qualsiasi altra immagine del sito.
  6. Aggiorna/Pubblica. Il ritaglio, il velo scuro e la scritta restano automaticamente al loro posto sopra la nuova foto — non serve toccare altro.
ⓘ
Perché non è un semplice “sfondo”? Per farla comparire ho usato un widget Immagine “steso” sopra tutta la colonna via CSS (invece dell’opzione Sfondo di Elementor), perché è lo stesso meccanismo già collaudato per le foto degli officer — meno probabilità di sorprese. L’effetto finale è identico a uno sfondo, ma tecnicamente sotto c’è un’immagine vera, selezionabile e sostituibile come tutte le altre.
↔️ Cambiare la larghezza della pagina
Tutte le pagine Elementor

La larghezza del contenuto (quanto è largo il “foglio” al centro dello schermo) non sta nel CSS: è un’impostazione normale di Elementor, sezione per sezione. Ogni pagina ha già il suo valore. Per la leggibilità, le pagine-documento (Statute, Governing Rules) sono più strette, le pagine con griglie (Previous Boards) più larghe.

  1. Apri la pagina con Elementor e clicca sulla maniglia della sezione (il quadratino con i puntini al centro in alto, quando passi sopra la sezione), oppure selezionala nel Navigatore.
  2. Tab Layout → Larghezza contenuto: deve essere In scatola.
  3. Sotto c’è il cursore Larghezza in px: spostalo o scrivi il numero.
  4. Ripeti per le altre sezioni della pagina, così hanno tutte la stessa larghezza. Per fare prima: tasto destro sulla sezione già sistemata → Copia, poi tasto destro sulle altre → Incolla stile. Attenzione: incolla anche gli altri stili della sezione (sfondo, spaziature).
  5. Aggiorna/Pubblica.

I valori attuali:

  • 860 px — Statute, Governing Rules
  • 900 px — Premio Vittorio Girotto, Premio Giovane Ricercatore, Premio Maria Miceli, Patrocinio
  • 920 px — Registration
  • 960 px — Award and Funding, Conference Guidelines
  • 1000 px — Previous Governing Boards
ⓘ
E il valore globale? Le sezioni nuove partono dalla larghezza globale di Elementor: Impostazioni sito → Layout → Larghezza contenuto (oggi 1140 px). Cambiarla non tocca le pagine qui sopra, perché ogni loro sezione ha già un valore suo.
🎤 Conferenze: il mini-sito e la nuova edizione
Bacheca → Conferenze

Ogni conferenza è un mini-sito dentro il sito: in alto la testata (copertina o riquadro nero con titolo e date), sotto la striscia bianca con il sotto-menu e i bottoni, poi il contenuto. La pagina Conferenze mostra in cima la conferenza attuale e sotto le card delle edizioni precedenti, con la copertina se c’è.

  • Dati di testata: Bacheca → Conferenze → apri la conferenza. Nella maschera «Dati conferenza» trovi edizione, titolo, tema, città, date, link e la spunta Conferenza attuale.
  • Copertina: riquadro «Copertina» a destra (meglio orizzontale, es. 1600×600). Nella maschera scegli se mostrarla da sola al posto del riquadro nero, oppure come sfondo con titolo e date scritti sopra.
  • Contenuto della prima voce (Panoramica): bottone Modifica con Elementor sulla conferenza, poi si impagina con le classi della guida.
  • Sotto-pagine (Date importanti, Submission, Topics…): nella maschera, riquadro «Sotto-menu», c’è l’elenco con i link Modifica con Elementor e il bottone + Aggiungi sotto-pagina. Il titolo della sotto-pagina è la voce del menu, l’Ordine (riquadro Attributi) la sua posizione.

Preparare l’edizione dell’anno dopo:

  1. Bacheca → Conferenze, passa sopra la conferenza attuale → Duplica come nuova edizione. Nasce una copia in bozza con tutte le sotto-pagine.
  2. Nella copia cambia titolo, edizione, tema, città, date, link e copertina.
  3. Correggi i testi della Panoramica e delle sotto-pagine con Elementor. Puoi aggiungere o togliere sotto-pagine.
  4. Spunta Conferenza attuale e Pubblica: le sotto-pagine si pubblicano insieme, e l’edizione di prima scende da sola tra le edizioni precedenti, col suo mini-sito ancora visitabile.
ⓘ
Classi utili nel contenuto delle conferenze: aisc-section-title (titolo di sezione), aisc-text (testo corrente), la tabella aisc-table-head/aisc-table-row per le date, aisc-topics (un elenco puntato che diventa etichette), le card officer per i relatori (foto tonda: widget Immagine aisc-officer-photo; finché la foto manca, un Titolo aisc-avatar con le iniziali, da sostituire con l’Immagine quando arriva), aisc-cal-card per grants e premi, aisc-button-filled per i bottoni. Il «Prossima conferenza» rosso compare da solo finché la data di fine non è passata. Sul sito, cliccando una voce del sotto-menu cambia solo il contenuto con una dissolvenza: copertina e menu restano fermi, e la striscia del menu resta agganciata in alto mentre si scorre.
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