AISC · Guida agli stili Elementor

Le classi CSS del sito

Un piccolo catalogo di stili pronti da usare in Elementor senza scrivere una riga di codice — e senza bisogno di Elementor Pro.

Come si usa — su qualsiasi widget di Elementor:

  1. Seleziona il widget → tab Avanzato
  2. Campo Classi CSS → incolla il nome della classe (es. aisc-info)
  3. Aggiorna/Pubblica — lo stile si applica da solo

Come funziona davvero

Non è una funzione ufficiale di Elementor — infatti non la trovi elencata da nessuna parte dentro l’editor, non è un preset né uno stile tra cui scegliere. Il campo “Classi CSS” è una semplice casella di testo libera: Elementor ci scrive dentro qualunque parola gli dai, senza sapere cosa significhi. Il collegamento allo stile avviene fuori da Elementor.

1 · Tu, in Elementorscrivi aisc-doc-title nel campo Classi CSS del widget
→
2 · Altrove sul sitoun CSS a parte (plugin Code Snippets, non Elementor) dice: “chi ha la classe aisc-doc-title, va colorato così”
→
3 · Il browserapplica lo stile — è una regola standard del web (CSS), non un meccanismo di Elementor

Quindi non è una “sovrascrittura ufficiale”: è un sistema nostro, parallelo, agganciato semplicemente al nome della classe. Funziona così per tutte le classi di questa guida. Per la stessa ragione, se scrivi la classe su un widget del tipo sbagliato, o con un errore di battitura, non compare nessun avviso: il widget resta semplicemente con l’aspetto di default, come se la classe non fosse mai stata scritta.

Le sezioni della guida

Ogni sezione è una pagina a parte: apri quella che ti serve.

Testi e documenti

Riquadri informativi, intestazioni di documento e articoli numerati: tutto ciò che serve per statuti, regolamenti e pagine di testo lungo.

aisc-infoaisc-eyebrowaisc-page-titleaisc-subtitleaisc-art-badgeaisc-art-titleaisc-article-bodyaisc-article-sublist+8

Persone e board

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

aisc-officer-photoaisc-officer-roleaisc-officer-nameaisc-officer-instaisc-board-nav-labelaisc-board-nav-linksaisc-board-yearaisc-board-title+4

Immagini, card e bottoni

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

aisc-hero-imageaisc-guideline-cardaisc-wideaisc-card-iconaisc-card-titleaisc-card-textaisc-button-filledaisc-button-ghost

Iscrizione, dati e tabelle

Titoli di sezione, scheda scura per i dati bancari (con pulsante copia), avvisi, tabelle di tariffe, riquadri istruzioni e fascia contatti.

aisc-section-titleaisc-data-itemaisc-data-labelaisc-data-valueaisc-data-hintaisc-data-monoaisc-data-boxaisc-data-copy+6

Premi e card di collegamento

Intestazione di pagina indice, card cliccabili con icona, regole numerate automaticamente, card dei vincitori e classifiche delle edizioni.

aisc-eyebrowaisc-intro-titleaisc-intro-leadaisc-link-cardaisc-icon-medalaisc-icon-capaisc-icon-heartaisc-icon-building+32

Schede, classifiche e bandi

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

aisc-bio-cardaisc-bio-initialsaisc-bio-nameaisc-bio-roleaisc-bio-textaisc-result-rowaisc-result-posaisc-result-names+15

Guide pratiche

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

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