ISCRIVITI
25 FEBBRAIO 2022
Classe CSS per i blocchi
È ora possibile assegnare una classe CSS ai blocchi nel pannello delle impostazioni. Questa funzione semplifica la modifica dei blocchi: È possibile definire una classe per il blocco e poi specificarne il titolo in HTML.

Di seguito sono riportati alcuni esempi e una guida passo-passo su come utilizzare la nuova funzione.
Esempio n. 1
Titoli sfumati
SU DI NOI
Renner Yoga offre corsi di yoga unici per persone di ogni livello. Vi faremo conoscere un nuovo modo di vivere e di sentire.

Blocco AB501

Come si fa
Passo 1
Aggiungere un blocco con un titolo, ad esempio AB501.

Passo 2
  • Aprire le impostazioni del blocco, selezionare Aggiungi nome classe CSS;
  • Impostare un nome per lo stile, ad esempio "uc-about".

Passo 3
  • Aggiungere un blocco T123 ("Incorpora codice HTML");
  • Copiare il codice sottostante e incollarlo nel blocco T123.

<style>
.uc-about .t-title {
        background: linear-gradient(45deg, #e9474a 0%, #70358f 50%, #1e4be2 100%);
        background: -webkit-linear-gradient(45deg, #e9474a 0%, #70358f 50%, #1e4be2 100%);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: rgba(255, 255, 255, 0); 
        -moz-text-fill-color: rgba(255, 255, 255, 0);
}
</style>
→ Salvare le modifiche e pubblicare la pagina.

Fatto!
Esempio n. 2
Immagini con angoli arrotondati
Alcune parole su di noi
Siamo uno studio di interior design con sede in Galles. Lavoriamo in tre stili di design contemporaneo: minimalismo funzionale, eco e nouveau modernista. Disponiamo di un database di designer e architetti interni ed esterni all'azienda.

Blocco AB903

Come si fa
Passo 1
Aggiungere un blocco con la foto, ad esempio AB903.

Passo 2
  • Aprire le impostazioni del blocco, selezionare Aggiungi nome classe CSS;
  • Impostare un nome per lo stile, ad esempio "uc-about".

Passo 3
  • Aggiungere un blocco T123 ("Incorpora codice HTML");
  • Copiare il codice sottostante e incollarlo nel blocco T123.

<style>
.uc-about .t-bgimg {
        border-radius: 40px;
}
</style>
→ Salvare le modifiche e pubblicare la pagina.

Fatto!
Esempio n. 3
Effetto Hover per i pulsanti
Esempio n. 3
Effetto Hover per i pulsanti
Solo per le versioni desktop
Passare il mouse sul pulsante
Alta qualità
Siamo uno studio leader nel fornire qualità e valore ai nostri clienti. Ogni membro del nostro team ha almeno 5 anni di esperienza legale. Ci piace quello che facciamo.
Per saperne di più
Buon supporto
I nostri responsabili sono sempre pronti a rispondere alle vostre domande. Potete chiamarci durante i fine settimana e di notte. Potete anche visitare il nostro ufficio per una consulenza personale.
Per saperne di più

Blocco FR301

Come si fa
Passo 1
Aggiungere un blocco con un pulsante, ad esempio FR301.

Passo 2
  • Aprire le impostazioni del blocco, andare alla scheda "Pulsante";
  • Impostare il colore iniziale del testo del pulsante in Colore testo. Non è necessario specificare il colore del bordo e dello sfondo;
  • Fare clic su "Aggiungi nome classe CSS" e impostare un nome per lo stile, ad esempio "uc-about".

Passo 3
  • Aggiungere un blocco T123 ("Incorpora codice HTML");
  • Copiare il codice sottostante e incollarlo nel blocco T123.

<style> 
.uc-features .t-btn { 
    box-shadow: inset 0 0 0 2px #1f5bff; 
    position: relative; 
    transition: color 0.25s; 
    box-sizing: border-box; 
} 
 
.uc-features .t-btn::before, 
.uc-features .t-btn::after { 
    content: ''; 
    position: absolute; 
    border: 2px solid transparent; 
    width: 0; 
    height: 0; 
    top: 0; 
    left: 0; 
    box-sizing: inherit; 
} 
 
.uc-features .t-btn:hover { 
    color: #60daaa !important; 
} 
 
.uc-features .t-btn:hover::before, 
.uc-features .t-btn:hover::after { 
    width: 100%; 
    height: 100%; 
} 
 
.uc-features .t-btn:hover::before { 
    border-top-color: #60daaa; 
    border-right-color: #60daaa; 
    transition: width 0.15s ease-out, height 0.15s ease-out 0.15s; 
} 
 
.uc-features .t-btn:hover::after { 
    border-bottom-color: #60daaa; 
    border-left-color: #60daaa; 
    transition: height 0.15s ease-out, width 0.15s ease-out 0.15s; 
} 
</style>
→ Salvare le modifiche e pubblicare la pagina.

Fatto!
Si noti che la modifica del codice è consigliata solo agli utenti esperti di CSS. Tilda non fornisce assistenza per qualsiasi problema relativo al codice di terze parti.
Realizzato su
Tilda