ANMELDEN
25. FEBRUAR 2022
CSS-Klasse für Blöcke
Sie können jetzt Blöcken im Einstellungsfenster eine CSS-Klasse zuweisen. Diese Funktion vereinfacht die Bearbeitung von Blöcken: Sie können eine Klasse für den Block definieren und dann seinen Titel in HTML angeben.

Nachfolgend finden Sie einige Beispiele und eine Schritt-für-Schritt-Anleitung für die Verwendung der neuen Funktion.
Beispiel 1
Gradient-Titel
ÜBER UNS
Renner Yoga bietet einzigartige Yogakurse für Menschen aller Niveaus. Wir führen Sie in eine neue Art des Lebens und der Gefühle ein.

Block AB501

Wie man es macht
Schritt 1
Fügen Sie einen Block mit einer Überschrift hinzu, z. B. AB501.

Schritt 2
  • Öffnen Sie die Blockeinstellungen und wählen Sie CSS-Klassenname hinzufügen;
  • Legen Sie einen Namen für den Stil fest, z. B. "uc-about".

Schritt 3
  • Fügen Sie einen T123-Block hinzu ("HTML-Code einbetten");
  • Kopieren Sie den nachstehenden Code und fügen Sie ihn in den Block T123 ein.

<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>
→ Speichern Sie die Änderungen und veröffentlichen Sie die Seite.

Fertig!
Beispiel #2
Bilder mit abgerundeten Ecken
Einige Worte über uns
Wir sind ein Innenarchitekturbüro mit Sitz in Wales. Wir arbeiten in drei zeitgenössischen Designstilen: funktionaler Minimalismus, Öko und modernistischer Jugendstil. Wir verfügen über eine Datenbank von Designern und Architekten innerhalb und außerhalb des Unternehmens.

Block AB903

Wie man es macht
Schritt 1
Fügen Sie einen Block mit dem Foto hinzu, z. B. AB903.

Schritt 2
  • Öffnen Sie die Blockeinstellungen und wählen Sie CSS-Klassenname hinzufügen;
  • Legen Sie einen Namen für den Stil fest, z. B. "uc-about".

Schritt 3
  • Fügen Sie einen T123-Block hinzu ("HTML-Code einbetten");
  • Kopieren Sie den nachstehenden Code und fügen Sie ihn in den Block T123 ein.

<style>
.uc-about .t-bgimg {
        border-radius: 40px;
}
</style>
→ Speichern Sie die Änderungen und veröffentlichen Sie die Seite.

Fertig!
Beispiel #3
Hover-Effekt für Schaltflächen
Beispiel #3
Hover-Effekt für Schaltflächen
Nur für Desktop-Versionen
Bewegen Sie den Mauszeiger über die Schaltfläche
Hohe Qualität
Wir sind eine führende Kanzlei, die ihren Kunden Qualität und Wert bietet. Jedes Mitglied unseres Teams verfügt über mindestens 5 Jahre juristische Erfahrung. Wir mögen, was wir tun.
Mehr erfahren
Gute Unterstützung
Unsere Manager sind immer bereit, Ihre Fragen zu beantworten. Sie können uns an den Wochenenden und nachts anrufen. Sie können uns auch in unserem Büro besuchen und sich persönlich beraten lassen.
Mehr erfahren

Block FR301

Wie man es macht
Schritt 1
Fügen Sie einen Block mit einer Schaltfläche hinzu, z. B. FR301.

Schritt 2
  • Öffnen Sie die Blockeinstellungen und gehen Sie auf die Registerkarte "Schaltfläche";
  • Legen Sie unter Textfarbe die Ausgangsfarbe für den Text der Schaltfläche fest. Rahmen- und Hintergrundfarbe müssen nicht angegeben werden;
  • Klicken Sie auf "CSS-Klassenname hinzufügen" und geben Sie einen Namen für den Stil ein, z. B. "uc-about".

Schritt 3
  • Fügen Sie einen T123-Block hinzu ("HTML-Code einbetten");
  • Kopieren Sie den nachstehenden Code und fügen Sie ihn in den Block T123 ein.

<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>
→ Speichern Sie die Änderungen und veröffentlichen Sie die Seite.

Fertig!
Bitte beachten Sie, dass die Änderung des Codes nur für Benutzer empfohlen wird, die Erfahrung mit CSS haben. Tilda bietet keinen Support für Probleme im Zusammenhang mit dem Code Dritter.
Hergestellt am
Tilda