Tipografia
Tag HTML Headings
I tag HTML definiscono gli stili di intestazione predefiniti.
Tutti i titoli H1

Titolo 1

Tutti i titoli H2

Rubrica 2

Tutti i titoli H3

Rubrica 3

Tutti i titoli H4

Rubrica 4

Tutti i titoli H5
Rubrica 5
Tutti i titoli H6
Rubrica 6
Classi di intestazione
Classi di intestazione quando lo stile tipografico non corrisponde al tag HTML predefinito.
stile-intestazione-h1

Stile di intestazione-h1

stile-intestazione-h2

Stile di intestazione-h2

stile-intestazione-h3

Stile di intestazione-h3

stile-intestazione-h4

Stile di intestazione-h4

stile-intestazione-h5

Stile di intestazione-h5

stile-intestazione-h6

Stile di intestazione-h6

Altri tag HTML
I tag HTML definiscono gli stili di testo predefiniti.
Tutti i paragrafi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Tutti i link
Tutti i link
Tutte le citazioni di Block
Citazione del blocco
Tutti gli elenchi non ordinati
  • Nessun elenco puntato

  • Nessun elenco puntato

Tutti gli elenchi non ordinati
  • Nessun elenco puntato

  • Nessun elenco puntato

Tutti gli elenchi ordinati
  1. Nessun elenco puntato

  2. Nessun elenco puntato

  3. Nessun elenco puntato

Dimensioni del testo
Classi di dimensioni del testo quando le dimensioni della tipografia non corrispondono al tag HTML predefinito.
dimensione testo grande

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

dimensione testo-regolare

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

dimensione-testo-piccola

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

didascalia

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Pesi del testo
Classi di peso del testo quando il peso della tipografia non corrisponde al tag HTML predefinito.
peso del testo-xbold
peso del testo-xbold (800)
testo-peso-bold
testo-peso-bold (700)
peso del testo-semibold
peso del testo-semibold (600)
peso del testo medio
peso del testo medio (500)
peso del testo-normale
peso del testo-normale (400)
testo-peso-leggero
peso del testo leggero (300)
Stili di testo
Classi di stile di testo quando lo stile tipografico non corrisponde al tag HTML predefinito.
testo-stile-italico
testo-stile-italico
stile testo-traverso
stile testo-traverso
stile testo-allcaps
stile testo-allcaps
stile testo-nowrap
stile testo-nowrap
testo-stile-citazione
testo-stile-citazione
link in stile testo
stile testo-2 linee
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
stile testo-3 linee
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sospendi varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
stile testo-muto
stile testo-muto
Allineamento del testo
Classi di allineamento del testo quando l'allineamento della tipografia non corrisponde al tag HTML predefinito.
allineamento del testo a sinistra
allineamento del testo a sinistra
allineamento del testo al centro
allineamento del testo al centro
allineamento del testo a destra
allineamento del testo a destra
Testo ricco
testo-ricco-testo

Titolo 1

Rubrica 2

Rubrica 3

Rubrica 4

Rubrica 5
Rubrica 6
Questa è una citazione a blocchi

L'elemento Rich Text ti permette di creare e formattare titoli, paragrafi, virgolette, immagini e video in un unico posto invece di doverli aggiungere e formattare singolarmente. Basta un doppio clic per creare facilmente i contenuti.

Questo è un link all'interno di un testo ricco

  • Elenco articoli
  • Elenco articoli
  • Elenco articoli
  1. Elenco articoli
  2. Elenco articoli
  3. Elenco articoli
La didascalia va qui
industrie_rich-text

Cos'è un elemento Rich Text?

L'elemento Rich Text ti permette di creare e formattare titoli, paragrafi, virgolette, immagini e video in un unico posto invece di doverli aggiungere e formattare singolarmente. Basta un doppio clic per creare facilmente i contenuti.

Modifica dei contenuti statici e dinamici

Un elemento di testo ricco può essere utilizzato con contenuti statici o dinamici. Per i contenuti statici, basta inserirli in qualsiasi pagina e iniziare a modificarli. Per i contenuti dinamici, aggiungi un campo di testo ricco a qualsiasi raccolta e poi collega un elemento di testo ricco a quel campo nel pannello delle impostazioni. Voilà!

Come personalizzare la formattazione di ciascun testo ricco

I titoli, i paragrafi, le citazioni a blocchi, le figure, le immagini e le didascalie delle figure possono essere stilizzati dopo l'aggiunta di una classe all'elemento di testo ricco utilizzando il sistema di selettori annidati "When inside of".

pagamenti_rich-text

Cos'è un elemento Rich Text?

L'elemento Rich Text ti permette di creare e formattare titoli, paragrafi, virgolette, immagini e video in un unico posto invece di doverli aggiungere e formattare singolarmente. Basta un doppio clic per creare facilmente i contenuti.

Modifica dei contenuti statici e dinamici

testo

testo

Modifica dei contenuti statici e dinamici

Un elemento di testo ricco può essere utilizzato con contenuti statici o dinamici. Per i contenuti statici, basta inserirli in qualsiasi pagina e iniziare a modificarli. Per i contenuti dinamici, aggiungi un campo di testo ricco a qualsiasi raccolta e poi collega un elemento di testo ricco a quel campo nel pannello delle impostazioni. Voilà!

Come personalizzare la formattazione di ciascun testo ricco

I titoli, i paragrafi, le citazioni a blocchi, le figure, le immagini e le didascalie delle figure possono essere stilizzati dopo l'aggiunta di una classe all'elemento di testo ricco utilizzando il sistema di selettori annidati "When inside of".

Colori
Colore di sfondo
bg-colore-bianco
#fff
bg-colore-nero
#000
bg-colore-1
#889e77
bg-colore-2
#9e7777
bg-colore-3
#334350
bg-colore-4
#f4f4f7
bg-colore-5
#ebedee
bg-colore-6
#E2E7EE
bg-colore-7
#f1f2f4
Colore del testo
Gestisci i colori del testo ricorrenti.
testo-colore-1
Si tratta di un testo all'interno di un blocco div.
testo-colore-2
Si tratta di un testo all'interno di un blocco div.
testo-colore-3
Si tratta di un testo all'interno di un blocco div.
testo-colore-4
Si tratta di un testo all'interno di un blocco div.
Elementi UI
Pulsanti
pulsante
è-secondario
link-testo
splide__frecce
posizione a sinistra delle frecce del cursore
splide__frecce
posizione destra-cursore-frecce
splide__frecce
posizione in alto a sinistra delle frecce del cursore
splide__frecce
posizione in basso a sinistra delle frecce del cursore
splide__freccia
cerchio-cursore-freccia
splide__arrow--prev
cerchio-cursore-freccia-prev
splide__arrow--next
cerchio-cursore-freccia-successivo
splide__paginazione__pagina
cerchio-punto
splide__paginazione__pagina
cerchio-punto
è-attivo
splide__paginazione__pagina
cerchio-punto
splide__paginazione__pagina
cerchio-punto
è-attivo
splide__freccia
cursore-cerchio-freccia-scuro
splide__arrow--prev
cerchio-cursore-freccia-prev-scuro
splide__arrow--next
cerchio-cursore-freccia-successivo-scuro
splide__paginazione
carrello-impaginazione a destra
Elementi di forma
etichetta del campo
form-input
form-input
is-text-area
form-input
is-select-input
form-checkbox
modulo-radio
pulsante
Grazie! Abbiamo ricevuto la tua richiesta.
Ci dispiace. Purtroppo si è verificato un problema durante l’invio del modulo.
Icone (Immagine)

icona-altezza-xxpiccola

icona-altezza-xpiccola

icona-altezza-piccola

icona-altezza-media

icona-altezza-grande

icona-altezza-grande

icona-altezza-custom1

icona-1x1-xxpiccola

icona-1x1-xsmall

icona-1x1-piccola

icona-1x1-media

icona-1x1-grande

icona-1x1-xlarge

icona-1x1-custom1

Icone (HTML Embed)
Le icone HTML embed ti permettono di controllare il colore dell'icona al passaggio del mouse.

icona-embed-xxsmall

icona-embed-xsmall

icona-embed-small

icona-embed-medium

icona-embed-grande

icona-embed-xlarge

icona-embed-custom1

Classi di struttura
Una struttura di base definita e flessibile che possiamo utilizzare su tutte o sulla maggior parte delle pagine.
page-wrapper
main-wrapper
contenitore-piccolo
contenitore-medio
contenitore-grande
imbottitura globale
imbottitura-sezione-piccola
imbottitura-sezione-media
imbottitura-sezione-grande
gruppo di pulsanti
Larghezze massime
Usa la proprietà CSS max-width per contenere il contenuto interno a una larghezza massima.
larghezza massima piena
max-larghezza-pieno-tablet
max-larghezza-pieno-ritratto
max-larghezza-pieno-paesaggio
max-width-xxlarge
max-width-xlarge
max-larghezza-grande
max-larghezza-media
max-larghezza-piccola
max-width-xsmall
max-width-xxsmall
Imbottiture
Classi di direzione
padding-bottom
imbottitura-top
padding-verticale
imbottitura orizzontale
padding-sinistra
padding-destra
Classi di dimensioni
imbottitura-0
imbottitura-minuscola
imbottitura-xxsmall
imbottitura-xsmall
imbottitura-piccola
imbottitura-media
imbottitura-grande
imbottitura-xlarge
imbottitura-xxlarge
imbottitura enorme
imbottitura-xhuge
imbottitura-xxhuge
padding-custom1
imbottitura-custom2
imbottitura-custom3
Margini
Classi di direzione
margine inferiore
margine superiore
margine-verticale
margine orizzontale
margine-sinistra
margine destro
Classi di dimensioni
margine-0
margine-minuscolo
margine-xxpiccolo
margine-xsmall
margine-piccolo
margine-medio
margine-grande
margine-xlarge
margine-xxlarge
margine-ingente
margine-xhuge
margine-xxhuge
margine-custom1
margine-custom2
margine-custom3
Classi di utilità
Utili classi di utilità che ci piace utilizzare nella maggior parte dei nostri progetti per costruire più velocemente.
nascondersi
Questo elemento è nascosto
nascondi-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visibile
overflow-nascosto
overflow-auto
overflow-scroll
puntatore-eventi-su
puntatore-eventi-off
strato
div-quadrato
spaziatura-pulizia
allineare al centro
z-index-1
z-index-2
display-inlineflex
margin-top-auto
dal basso