S'INSCRIRE
25 FÉVRIER 2022
Classe CSS pour les blocs
Vous pouvez désormais attribuer une classe CSS aux blocs dans le panneau Paramètres. Cette fonctionnalité simplifie l'édition des blocs : Vous pouvez définir une classe pour le bloc et ensuite spécifier son titre en HTML.

Vous trouverez ci-dessous quelques exemples et un guide étape par étape sur l'utilisation de cette nouvelle fonctionnalité.
Exemple n° 1
Titres dégradés
À PROPOS DE NOUS
Renner Yoga propose des cours de yoga uniques pour les personnes de tous niveaux. Nous vous ferons découvrir un nouveau mode de vie et de nouvelles sensations.

Bloc AB501

Comment le préparer
Étape 1
Ajouter un bloc avec un titre, par exemple AB501.

Étape 2
  • Ouvrez les paramètres du bloc, sélectionnez Ajouter un nom de classe CSS ;
  • Définir un nom pour le style, par exemple "uc-about".

Étape 3
  • Ajouter un bloc T123 ("Embed HTML Code") ;
  • Copiez le code ci-dessous et collez-le dans le bloc 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>
→ Enregistrer les modifications et publier la page.

Terminé !
Exemple n° 2
Images avec coins arrondis
Quelques mots sur nous
Nous sommes un studio de design d'intérieur basé au Pays de Galles. Nous travaillons dans trois styles de design contemporain : le minimalisme fonctionnel, l'écologie et le modernisme nouveau. Nous disposons d'une base de données de designers et d'architectes à l'intérieur et à l'extérieur de l'entreprise.

Bloc AB903

Comment le préparer
Étape 1
Ajoutez un bloc avec la photo, par exemple AB903.

Étape 2
  • Ouvrez les paramètres du bloc, sélectionnez Ajouter un nom de classe CSS ;
  • Définir un nom pour le style, par exemple "uc-about".

Étape 3
  • Ajouter un bloc T123 ("Embed HTML Code") ;
  • Copiez le code ci-dessous et collez-le dans le bloc T123.

<style>
.uc-about .t-bgimg {
        border-radius: 40px;
}
</style>
→ Enregistrer les modifications et publier la page.

Terminé !
Exemple n° 3
Effet de survol pour les boutons
Exemple n° 3
Effet de survol pour les boutons
Uniquement pour les versions de bureau
Survoler le bouton
Haute qualité
Nous sommes un cabinet leader en matière de qualité et de valeur ajoutée pour nos clients. Chaque membre de notre équipe a au moins 5 ans d'expérience juridique. Nous aimons ce que nous faisons.
En savoir plus
Bon soutien
Nos gestionnaires sont toujours prêts à répondre à vos questions. Vous pouvez nous appeler le week-end et la nuit. Vous pouvez également vous rendre dans nos bureaux pour un entretien personnel.
En savoir plus

Bloc FR301

Comment le préparer
Étape 1
Ajouter un bloc avec un bouton, par exemple FR301.

Étape 2
  • Ouvrez les paramètres du bloc, allez à l'onglet "Bouton" ;
  • Définissez la couleur initiale du texte du bouton dans Couleur du texte. Il n'est pas nécessaire de spécifier la couleur de la bordure et de l'arrière-plan ;
  • Cliquez sur "Ajouter un nom de classe CSS" et donnez un nom au style, par exemple "uc-about".

Étape 3
  • Ajouter un bloc T123 ("Embed HTML Code") ;
  • Copiez le code ci-dessous et collez-le dans le bloc 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>
→ Enregistrer les modifications et publier la page.

Terminé !
Veuillez noter que la modification du code n'est recommandée qu'aux utilisateurs expérimentés en matière de CSS. Tilda ne fournit pas d'assistance pour les problèmes liés au code d'un tiers.
Fabriqué le
Tilda