S'INSCRIRE

Classe CSS pour les éléments du site web

Un outil pratique pour modifier les éléments de conception dans Zero Block
Vous pouvez ajouter un nom de classe CSS pour n'importe quel élément de Zero Block à partir du menu contextuel. Cette fonctionnalité simplifie l'édition des éléments : vous pouvez définir une classe pour le titre, l'image, la galerie ou tout autre élément, puis spécifier son nom en HTML.

Vous trouverez ci-dessous quelques exemples et un guide étape par étape sur l'utilisation de cette nouvelle fonctionnalité.
EXEMPLE 1
Titres dégradés
Nouvelle fonctionnalité
Cas
L'équipe
Contacts
Nous développons des services pour aider les gens à gérer leurs entreprises et à améliorer leurs systèmes de gestion.
Comment le préparer
Étape 1
Créer un dessin dans Zero Block

Étape 2
  • Cliquez avec le bouton droit de la souris sur le titre et sélectionnez Ajouter un nom de classe CSS.
  • Définissez un nom pour le style, tel que "dégradé", par exemple

Étape 3
  • Ajouter l'élément HTML au bloc zéro
  • Copiez le code ci-dessous et collez-le dans l'élément HTML à l'aide du bouton "Modifier le code".

<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>
Enregistrez les modifications dans Zero Block et publiez la page

Terminé !
EXEMPLE 2
Flèches de la galerie personnalisées
INTÉRIEUR
DESIGN
STUDIO
Faisons de votre maison un endroit plus agréable
Comment le préparer
Étape 1
Créer un dessin dans Zero Block

Étape 2
  • Cliquez avec le bouton droit de la souris sur la galerie et sélectionnez Ajouter un nom de classe CSS.
  • Définissez un nom pour le style, tel que "galerie", par exemple

Étape 3
  • Ajouter l'élément HTML au bloc zéro
  • Copiez le code ci-dessous et collez-le dans l'élément HTML à l'aide du bouton "Modifier le code".

<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>
Enregistrez les modifications dans Zero Block et publiez la page

C'est fait!
Comment télécharger vos propres flèches dans la galerie ?
Pour télécharger vos propres flèches dans la galerie, ajoutez les liens vers les images des flèches gauche et droite en tant que fichiers SVG au code HTML. Pour ce faire, téléchargez les images sur n'importe quel service de cloud ou sur n'importe quelle page de Tilda. Ouvrez ensuite l'image téléchargée dans un nouvel onglet et copiez le lien.

Exemple de liens utilisés dans le code ci-dessus
Flèche gauche : https://static.tildacdn.com/tild3139-6463-4139-b830-653761616437/left_custom_arrow.svg
Flèche droite : https://static.tildacdn.com/tild6262 -3932-4634-b166-373237616466 / right_custom_arrow.svg
EXEMPLE 3
Ajout d'un effet de flou derrière votre texte
TRIVIA
Cas
L'équipe
Contacts
Un contenu époustouflant commence par votre propre expérience, et pas seulement par l'exploration des pensées d'autrui.
Considérez le texte comme un point de départ pour vos propres mots.
Étape 1
Créer un dessin dans Zero Block

Étape 2
  • Cliquez avec le bouton droit de la souris sur la forme et sélectionnez Ajouter un nom de classe CSS.
  • Définissez un nom pour le style, tel que "flou", par exemple

Étape 3
  • Ajouter l'élément HTML au bloc zéro
  • Copiez le code ci-dessous et collez-le dans l'élément HTML à l'aide du bouton "Modifier le code".

<style>
.blur {
        backdrop-filter: blur(20px);
        border-radius: 20px;
        -webkit-backdrop-filter: blur(20px);
}
</style>
Enregistrez les modifications dans Zero Block et publiez la page

C'est fait!
Il existe plusieurs façons d'ajouter du code HTML à Tilda
Si vous souhaitez ajouter un code à une seule page, utilisez l'élément HTML ou le bloc T123. Si vous souhaitez utiliser le code pour l'ensemble du site web ou pour plusieurs pages, ajoutez-le à l'en-tête.
Définissez des dégradés complexes pour le titre, modifiez les flèches de la galerie, les boutons, etc. Votre créativité est sans limite.
Fabriqué le
Tilda