ANMELDEN

CSS-Klasse für Website-Elemente

Ein praktisches Werkzeug zum Ändern von Gestaltungselementen in Zero Block
Sie können über das Kontextmenü einen CSS-Klassennamen für jedes Zero Block-Element hinzufügen. Diese Funktion vereinfacht die Bearbeitung von Elementen: Sie können eine Klasse für den Titel, das Bild, die Galerie oder ein beliebiges anderes Element definieren und dann den Namen 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
Neue Funktion
Fälle
Team
Kontakte
Wir entwickeln Dienstleistungen, die den Menschen helfen, ihre Unternehmen zu führen und ihre Managementsysteme zu verbessern
Wie man es macht
Schritt 1
Ein Muster in Zero Block erstellen

Schritt 2
  • Klicken Sie mit der rechten Maustaste auf den Titel, wählen Sie CSS-Klassenname hinzufügen
  • Legen Sie einen Namen für den Stil fest, z. B. "Farbverlauf".

Schritt 3
  • Hinzufügen des HTML-Elements zum Null-Block
  • Kopieren Sie den folgenden Code und fügen Sie ihn über die Schaltfläche Code bearbeiten in das HTML-Element ein

<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>
Speichern Sie die Änderungen in Zero Block und veröffentlichen Sie die Seite

Fertig!
BEISPIEL # 2
Benutzerdefinierte Galeriepfeile
INNENRAUM
DESIGN
STUDIO
Machen wir Ihr Zuhause zu einem besseren Ort
Wie man es macht
Schritt 1
Ein Muster in Zero Block erstellen

Schritt 2
  • Klicken Sie mit der rechten Maustaste auf die Galerie, wählen Sie CSS-Klassenname hinzufügen
  • Legen Sie einen Namen für den Stil fest, z. B. "gallery".

Schritt 3
  • Hinzufügen des HTML-Elements zum Null-Block
  • Kopieren Sie den folgenden Code und fügen Sie ihn über die Schaltfläche Code bearbeiten in das HTML-Element ein

<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>
Speichern Sie die Änderungen in Zero Block und veröffentlichen Sie die Seite

Fertig!
So laden Sie Ihre eigenen Pfeile in die Galerie hoch
Um Ihre eigenen Pfeile in die Galerie hochzuladen, fügen Sie die Links zu den linken und rechten Pfeilbildern als SVG-Dateien zum HTML-Code hinzu. Laden Sie dazu Bilder in einen beliebigen Cloud-Dienst oder auf eine beliebige Tilda-Seite hoch. Öffnen Sie dann das hochgeladene Bild in einer neuen Registerkarte und kopieren Sie den Link.

Beispiel für die im obigen Code verwendeten Links
Linker Pfeil: https://static.tildacdn.com/tild3139-6463-4139-b830-653761616437/left_custom_arrow.svg
Rechter Pfeil: https://static.tildacdn.com/tild6262 -3932-4634-b166-373237616466 / right_custom_arrow.svg
BEISPIEL # 3
Hinzufügen eines Unschärfeeffekts hinter Ihrem Text
TRIVIA
Fälle
Team
Kontakte
Atemberaubende Inhalte beginnen mit der eigenen Erfahrung, nicht nur mit der Erforschung der Gedanken anderer
Betrachten Sie den Text als Ausgangspunkt für Ihre eigenen Worte
Schritt 1
Ein Muster in Zero Block erstellen

Schritt 2
  • Klicken Sie mit der rechten Maustaste auf die Form, wählen Sie CSS-Klassenname hinzufügen
  • Legen Sie einen Namen für den Stil fest, z. B. "blur".

Schritt 3
  • Hinzufügen des HTML-Elements zum Null-Block
  • Kopieren Sie den folgenden Code und fügen Sie ihn über die Schaltfläche Code bearbeiten in das HTML-Element ein

<style>
.blur {
        backdrop-filter: blur(20px);
        border-radius: 20px;
        -webkit-backdrop-filter: blur(20px);
}
</style>
Speichern Sie die Änderungen in Zero Block und veröffentlichen Sie die Seite

Fertig!
Es gibt mehrere Möglichkeiten, HTML-Code in Tilda einzufügen
Wenn Sie einen Code auf einer einzelnen Seite hinzufügen möchten, verwenden Sie das HTML-Element oder den Block T123. Wenn Sie den Code für die gesamte Website oder mehrere Seiten verwenden möchten, fügen Sie ihn in die Kopfzeile ein.
Legen Sie komplexe Farbverläufe für den Titel fest, ändern Sie Galeriepfeile, Schaltflächen und vieles mehr. Ihrer Kreativität sind keine Grenzen gesetzt.
Hergestellt am
Tilda