Krok po kroku
1
Zaloguj się do swojego konta Kajabi
2
Przejdź do sekcji Website → Pages
3
Wybierz stronę, którą chcesz edytować (lub utwórz nową)
4
Kliknij Settings (ikonę koła zębatego)
5
Przejdź do zakładki Advanced
6
W polu Head Code wklej poniższy kod:
/* Ujednolicenie rozmiaru ramek kursów */
.course-card, .product-card, .offering-item {
width: 100% !important;
height: 380px !important;
min-height: 380px !important;
max-height: 380px !important;
}
/* Ustawienie jednakowej wysokości dla kontenerów */
.course-grid .grid-item,
.products-grid .grid-item,
.offerings-container .course-item {
height: auto !important;
}
/* Ujednolicenie rozmiaru obrazów */
.course-card img,
.product-card img,
.offering-item img {
width: 100% !important;
height: 180px !important;
object-fit: cover !important;
}
7
Zapisz zmiany i opublikuj stronę
Ważne uwagi
Uwaga: Powyższe selektory (.course-card, .product-card itd.) mogą wymagać dostosowania do Twojego motywu Kajabi.
Aby znaleźć właściwe selektory:
- Otwórz stronę z kursami w przeglądarce
- Kliknij prawym przyciskiem myszy na element kursu i wybierz "Zbadaj"
- Sprawdź nazwy klas używane dla kart kursów
- W razie potrzeby zmień selektory w kodzie na właściwe dla Twojego motywu
Przykład efektu
Po zastosowaniu kodu, wszystkie karty kursów będą miały jednakową wysokość (380px) i jednakowy rozmiar obrazków (wysokość 180px).
Jeśli chcesz dostosować wysokość, zmień wartości 380px i 180px na preferowane przez Ciebie.