ISCRIVITI

Classe CSS per gli elementi del sito web

Un pratico strumento per modificare gli elementi di design in Zero Block
È possibile aggiungere un nome di classe CSS per qualsiasi elemento di Zero Block dal menu contestuale. Questa funzione semplifica la modifica degli elementi: è possibile definire una classe per il titolo, l'immagine, la galleria o qualsiasi altro elemento, e poi specificarne il nome in HTML.

Di seguito troverete alcuni esempi e una guida passo-passo su come utilizzare la nuova funzione.
ESEMPIO N. 1
Titoli sfumati
Nuova funzione
Casi
Squadra
Contatti
Sviluppiamo servizi per aiutare le persone a gestire le loro attività e a migliorare i loro sistemi di gestione.
Come si fa
Passo 1
Creare un disegno in Zero Block

Passo 2
  • Fare clic con il tasto destro del mouse sul titolo, selezionare Aggiungi nome classe CSS
  • Impostare un nome per lo stile, ad esempio "gradiente".

Passo 3
  • Aggiungere l'elemento HTML al blocco zero
  • Copiate il codice qui sotto e incollatelo nell'elemento HTML utilizzando il pulsante Modifica codice

<style>
.gradient {
        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);
}

.gradient .tn-atom {
    display: inline;
}
</style>
Salvare le modifiche in Zero Block e pubblicare la pagina

Fatto!
ESEMPIO # 2
Frecce della galleria personalizzate
INTERNI
DESIGN
STUDIO
Rendiamo la vostra casa un posto migliore
Come si fa
Passo 1
Creare un disegno in Zero Block

Passo 2
  • Fare clic con il tasto destro del mouse sulla galleria, selezionare Aggiungi nome classe CSS
  • Impostare un nome per lo stile, ad esempio "galleria".

Passo 3
  • Aggiungere l'elemento HTML al blocco zero
  • Copiate il codice qui sotto e incollatelo nell'elemento HTML utilizzando il pulsante Modifica codice

<style>
.gallery .t-null__slds-arrow {
 opacity: 0;
}

.gallery .t-slds__arrow-left {
  background: url('https://static.tildacdn.com/tild3139-6463-4139-b830-653761616437/left_custom_arrow.svg');
}

.gallery .t-slds__arrow-right {
  background: url('https://static.tildacdn.com/tild6262-3932-4634-b166-373237616466/right_custom_arrow.svg');
}

.gallery .t-slds__arrow {
    background-size: 50px 50px;
   background-repeat: no-repeat;
   background-position: center;
 width: 75px !important;
    height: 75px !important;
   left: -40px !important;
}

@media (max-width: 480px) { 
 .t396__elem .t-slds__arrow {
    width: 40px !important;
     height: 40px !important;
    background-size: 30px 30px;
    left: -20px !important;
 }
}
</style>
Salvare le modifiche in Zero Block e pubblicare la pagina

Fatto!
Come caricare le proprie frecce nella galleria
Per caricare le proprie frecce nella galleria, aggiungere al codice HTML i link alle immagini delle frecce destra e sinistra come file SVG. A tale scopo, caricare le immagini su qualsiasi servizio cloud o su qualsiasi pagina Tilda. Quindi aprire l'immagine caricata in una nuova scheda e copiare il link.

Esempio dei link usati nel codice qui sopra
Freccia sinistra: https://static.tildacdn.com/tild3139-6463-4139-b830-653761616437/left_custom_arrow.svg
Freccia destra: https://static.tildacdn.com/tild6262 -3932-4634-b166-373237616466 / right_custom_arrow.svg
ESEMPIO N. 3
Aggiunta di un effetto di sfocatura dietro il testo
TRIVIA
Casi
Squadra
Contatti
I contenuti mozzafiato partono dalla propria esperienza, non solo dall'esplorazione dei pensieri altrui.
Pensate al testo come punto di partenza per le vostre parole.
Passo 1
Creare un disegno in Zero Block

Passo 2
  • Fare clic con il pulsante destro del mouse sulla forma, selezionare Aggiungi nome classe CSS
  • Impostare un nome per lo stile, ad esempio "sfocatura".

Passo 3
  • Aggiungere l'elemento HTML al blocco zero
  • Copiate il codice qui sotto e incollatelo nell'elemento HTML utilizzando il pulsante Modifica codice

<style>
.blur {
        backdrop-filter: blur(20px);
        border-radius: 20px;
        -webkit-backdrop-filter: blur(20px);
}
</style>
Salvare le modifiche in Zero Block e pubblicare la pagina

Fatto!
Esistono diversi modi per aggiungere codice HTML a Tilda
Se si desidera aggiungere un codice a una singola pagina, lo si può fare utilizzando l'elemento HTML o il blocco T123. Se si desidera utilizzare il codice per l'intero sito web o per più pagine, aggiungerlo all'intestazione.
Impostate gradienti complessi per il titolo, modificate le frecce della galleria, i pulsanti e altro ancora. La vostra creatività è illimitata.
Realizzato su
Tilda