ZAPISZ SIĘ
25 LUTEGO 2022 R.
Klasa CSS dla bloków
Możesz teraz przypisać klasę CSS do bloków w panelu Ustawienia. Funkcja ta upraszcza edycję bloków: Możesz zdefiniować klasę dla bloku, a następnie określić jego tytuł w HTML.

Poniżej znajdziesz kilka przykładów i przewodnik krok po kroku, jak korzystać z nowej funkcji.
Przykład #1
Napisy gradientowe
O NAS
Renner Yoga oferuje wyjątkowe zajęcia jogi dla osób na wszystkich poziomach umiejętności. Wprowadzimy Cię w nowy sposób życia i odczuwania.

Blok AB501

Jak to zrobić
Krok 1
Dodaj blok z nagłówkiem, np. AB501.

Krok 2
  • Otwórz ustawienia bloku, wybierz Dodaj nazwę klasy CSS;
  • Ustaw nazwę stylu, np. "uc-about".

Krok 3
  • Dodaj blok T123 ("Osadź kod HTML");
  • Skopiuj poniższy kod i wklej go do bloku 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>
→ Zapisz zmiany i opublikuj stronę.

Gotowe!
Przykład #2
Obrazy z zaokrąglonymi narożnikami
Kilka słów o nas
Jesteśmy studiem projektowania wnętrz z siedzibą w Walii. Pracujemy w trzech współczesnych stylach projektowania: funkcjonalnym minimalizmie, eko i modernistycznym nouveau. Posiadamy bazę danych projektantów i architektów wewnątrz i na zewnątrz firmy.

Blok AB903

Jak to zrobić
Krok 1
Dodaj blok ze zdjęciem, np. AB903.

Krok 2
  • Otwórz ustawienia bloku, wybierz Dodaj nazwę klasy CSS;
  • Ustaw nazwę stylu, np. "uc-about".

Krok 3
  • Dodaj blok T123 ("Osadź kod HTML");
  • Skopiuj poniższy kod i wklej go do bloku T123.

<style>
.uc-about .t-bgimg {
        border-radius: 40px;
}
</style>
→ Zapisz zmiany i opublikuj stronę.

Gotowe!
Przykład #3
Efekt najechania kursorem dla przycisków
Przykład #3
Efekt najechania kursorem dla przycisków
Tylko dla wersji na komputery stacjonarne
Najechanie kursorem na przycisk
Wysoka jakość
Jesteśmy wiodącą firmą zapewniającą naszym klientom jakość i wartość. Każdy członek naszego zespołu ma co najmniej 5-letnie doświadczenie prawnicze. Lubimy to, co robimy.
Dowiedz się więcej
Dobre wsparcie
Nasi menedżerowie są zawsze gotowi odpowiedzieć na Twoje pytania. Można do nas dzwonić w weekendy i w nocy. Możesz również odwiedzić nasze biuro w celu osobistej konsultacji.
Dowiedz się więcej

Blok FR301

Jak to zrobić
Krok 1
Dodaj blok z przyciskiem, np. FR301.

Krok 2
  • Otwórz ustawienia bloku, przejdź do zakładki "Przycisk";
  • Ustaw początkowy kolor tekstu przycisku w obszarze Kolor tekstu. Nie ma potrzeby określania koloru obramowania i tła;
  • Kliknij "Dodaj nazwę klasy CSS" i ustaw nazwę stylu, np. "uc-about".

Krok 3
  • Dodaj blok T123 ("Osadź kod HTML");
  • Skopiuj poniższy kod i wklej go do bloku 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>
→ Zapisz zmiany i opublikuj stronę.

Gotowe!
Należy pamiętać, że modyfikowanie kodu jest zalecane tylko dla użytkowników doświadczonych w CSS. Tilda nie zapewnia wsparcia w przypadku jakichkolwiek problemów związanych z kodem stron trzecich.
Wykonane na
Tilda