Uwaga: Aby korzystać z tego bloku, musisz mieć włączone skrypty nagłówka/stopki w sekcji Wygląd > Kadence (jest to funkcja pro).

WAŻNE – skopiuj kod z poniższego bloku Custom HTML do Kadence Block Controls > Page Scripts >Custom CSS & JS > Footer na tej stronie, a następnie usuń blok Custom HTML.

Ten szablon składa się z 2 sekcji w wierszu nadrzędnym. Pierwsza sekcja zawiera kod HTML do utworzenia kontenera paska. Druga sekcja jest przeznaczona na zawartość. W tej drugiej sekcji można dodać dowolny element. Post (jak w wersji demonstracyjnej), formularz optin lub cokolwiek innego. Pamiętaj tylko, aby pozostawić górną sekcję bez zmian.

Możesz dostosować wysokość animacji paska dla komputerów stacjonarnych, tabletów i urządzeń mobilnych.
Istnieje wiele zmiennych w górnej części CSS w przełączniku Custom CSS w wierszu nadrzędnym:

–wpziom-soundbar-1-height-desktop: 350px;
–wpziom-soundbar-1-height-tablet: 350px;
–wpziom-soundbar-1-height-mobile: 500px;

Zmień wartości dla każdego rozmiaru urządzenia. Animowane paski muszą mieć jawnie ustawioną wysokość i można użyć dowolnej jednostki Z WYJĄTKIEM %. (px, em, rem, vh, vw są w porządku)

Jeśli chcesz zmienić kolor i/lub krycie animowanych pasków, możesz to zrobić w zmiennych na górze CSS.

–wpziom-soundbar-1-background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 66%, rgba(255, 255, 255, 0) 100%);
–wpziom-soundbar-1-opacity: 0.5;


Zmienna background definiuje kolor pasków. Używam liniowego gradientu, który sprawia, że paski zanikają na górze i na dole, nadając im łagodniejszy efekt. Możesz edytować gradient, zastąpić go własnym lub przełączyć na jednolity kolor. Oto przydatne narzędzie gradientu, które wygeneruje dla ciebie wymagany CSS: https://cssgradient.io

Wartość krycia można dostosować, aby rozjaśnić lub przyciemnić animowane paski.