Joomla User Manual
Manual Index
Articolo: Modifica - Stili di link
Descrizione
Classi di collegamento personalizzate aggiunte alle opzioni dell'editor TinyMCE consentono di trasformare rapidamente un collegamento di un articolo in un pulsante o di aggiungere altri effetti visivi senza dover modificare direttamente il codice HTML.
Passaggi per usare il selettore di classe
- Dalla Dashboard Home, vai alla lista dei Plugin e trova il plugin TinyMCE.
- Apri il plugin TinyMCE e con la scheda Plugin selezionata scorri fino in fondo.
- Aggiungi classi alla Lista Classi Collegamento. Ad esempio, classi di Bootstrap per creare pulsanti eleganti. Potrebbe essere necessario scorrere la lista da sinistra a destra o cambiare l'ingrandimento dello schermo per vedere i pulsanti di aggiunta, rimozione e ordinamento alla fine.
- Salva e Chiudi.
Puoi trovare esempi di modelli che utilizzano nativamente Bootstrap nella documentazione ufficiale di Bootstrap.
Ecco alcune classi che puoi utilizzare per le varianti dei pulsanti Bootstrap:
btn btn-primary
per un pulsante primariobtn btn-secondary
per un pulsante secondariobtn btn-success
per un pulsante di successobtn btn-danger
per un pulsante di pericolobtn btn-warning
per un pulsante di avvisobtn btn-info
per un pulsante di informazionebtn btn-light
per un pulsante chiarobtn btn-dark
per un pulsante scurobtn btn-link
per un pulsante di collegamento
Alternative al Pulsante Contorno
Puoi anche utilizzare le varianti dei pulsanti con contorno:
btn btn-outline-primary
per un pulsante primario contornatobtn btn-outline-secondary
per un pulsante secondario contornato- … (ecc.)
Per le dimensioni dei pulsanti, aggiungi queste classi
btn-lg
per un pulsante grandebtn-sm
per un pulsante piccolo
Esempio: btn btn-dark btn-lg
(un grande pulsante scuro)
Creare un collegamento in un articolo
- Apri un articolo e seleziona del testo, una parola o una frase, per la creazione di un link.
- Seleziona l'icona del Link che appare quando selezioni del testo.
- Inserisci l'URL per il link.
- In fondo alla finestra di dialogo per la creazione del link, seleziona una delle classi configurate.
- Salva il Link.
- Salva l'Articolo.
- Anteprima dell'Articolo.
E questo è un esempio in cui la classe del pulsante di collegamento è stata impostata su btn btn-sm btn-outline-info
e il testo collegato è Bootstrap:
Uso avanzato: Applicazione di classi personalizzate
Questa funzionalità non è limitata alle classi di Bootstrap. È possibile applicare anche le proprie classi CSS personalizzate per esigenze specifiche. Ad esempio, è possibile aggiungere un'icona prima del link con un effetto hover. Questo rende facile stilizzare i link senza dover modificare il codice sorgente dell'articolo.
Tradotto da openai.com