ZAPISZ SIĘ

Klasa CSS dla elementów strony internetowej

Poręczne narzędzie do modyfikowania elementów projektu w Zero Block
Możesz dodać nazwę klasy CSS dla dowolnego elementu Zero Block z menu kontekstowego. Ta funkcja upraszcza edycję elementów: możesz zdefiniować klasę dla tytułu, obrazu, galerii lub dowolnego innego elementu, a następnie określić jego nazwę w HTML.

Poniżej znajdziesz kilka przykładów i przewodnik krok po kroku, jak korzystać z nowej funkcji.
PRZYKŁAD 1
Napisy gradientowe
Nowa funkcja
Przypadki
Zespół
Kontakty
Tworzymy usługi pomagające ludziom w prowadzeniu działalności i ulepszaniu systemów zarządzania
Jak to zrobić
Krok 1
Utwórz projekt w Zero Block

Krok 2
  • Kliknij tytuł prawym przyciskiem myszy i wybierz Dodaj nazwę klasy CSS
  • Ustaw nazwę stylu, na przykład "gradient".

Krok 3
  • Dodaj element HTML do bloku zerowego
  • Skopiuj poniższy kod i wklej go do elementu HTML za pomocą przycisku Edytuj kod.

<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>
Zapisz zmiany w Zero Block i opublikuj stronę

Gotowe!
PRZYKŁAD 2
Niestandardowe strzałki galerii
WNĘTRZE
DESIGN
STUDIO
Uczyńmy Twój dom lepszym miejscem
Jak to zrobić
Krok 1
Utwórz projekt w Zero Block

Krok 2
  • Kliknij galerię prawym przyciskiem myszy i wybierz Dodaj nazwę klasy CSS
  • Ustaw nazwę stylu, na przykład "galeria".

Krok 3
  • Dodaj element HTML do bloku zerowego
  • Skopiuj poniższy kod i wklej go do elementu HTML za pomocą przycisku Edytuj kod.

<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>
Zapisz zmiany w Zero Block i opublikuj stronę

Gotowe!
Jak przesłać własne strzały do galerii
Aby przesłać własne strzałki do galerii, dodaj łącza do obrazów strzałek w lewo i w prawo jako pliki SVG do kodu HTML. Aby to zrobić, prześlij obrazy do dowolnej usługi w chmurze lub na dowolną stronę Tilda. Następnie otwórz przesłany obraz w nowej karcie i skopiuj link.

Przykład linków użytych w powyższym kodzie
Strzałka w lewo: https://static.tildacdn.com/tild3139-6463-4139-b830-653761616437/left_custom_arrow.svg
Strzałka w prawo: https://static.tildacdn.com/tild6262 -3932-4634-b166-373237616466 / right_custom_arrow.svg
PRZYKŁAD 3
Dodawanie efektu rozmycia za tekstem
CIEKAWOSTKI
Przypadki
Zespół
Kontakty
Zapierające dech w piersiach treści zaczynają się od własnego doświadczenia, a nie tylko od odkrywania myśli innych osób
Potraktuj tekst jako punkt wyjścia dla własnych słów
Krok 1
Utwórz projekt w Zero Block

Krok 2
  • Kliknij kształt prawym przyciskiem myszy i wybierz Dodaj nazwę klasy CSS
  • Ustaw nazwę stylu, na przykład "rozmycie".

Krok 3
  • Dodaj element HTML do bloku zerowego
  • Skopiuj poniższy kod i wklej go do elementu HTML za pomocą przycisku Edytuj kod.

<style>
.blur {
        backdrop-filter: blur(20px);
        border-radius: 20px;
        -webkit-backdrop-filter: blur(20px);
}
</style>
Zapisz zmiany w Zero Block i opublikuj stronę

Gotowe!
Istnieje kilka sposobów dodawania kodu HTML do Tildy
Jeśli chcesz dodać kod do pojedynczej strony, zrób to za pomocą elementu HTML lub bloku T123. Jeśli chcesz użyć kodu dla całej witryny lub kilku stron, dodaj go do nagłówka.
Ustawiaj złożone gradienty w tytule, modyfikuj strzałki galerii, przyciski i nie tylko. Twoja kreatywność jest nieograniczona.
Wykonane na
Tilda