Dodatkowe klasy CSS dla motywu Astratic

Motyw Astratic zawiera zestaw klas CSS, które pomagają wprowadzić dodatkowe ulepszenia lub zmiany podczas tworzenia dowolnego niestandardowego układu (na przykład strony docelowej). Klasy te są bardzo łatwe w użyciu i można je stosować w różnych elementach, takich jak bloki Gutenberga. Ich celem jest pomoc bardziej zaawansowanym użytkownikom w dokonywaniu drobnych poprawek bezpośrednio w edytorze treści bez konieczności edytowania kodu źródłowego.

Aby użyć takiej klasy w bloku, musisz przejść do paska bocznego Ustawienia, a następnie otworzyć zakładkę Zaawansowane.

Dodatkowe klasy CSS

*dostępne dla użytkowników korzystających z motywu Astratic

Do zastosowania we wszystkich blokach

• --hidden-on-phone – ukrywa element na ekranie mobilnym (poniżej 768 px szerokości ekranu)
• --hidden-on-tablet –element ukryty na ekranie tableta (szerokość od 768 do 1199 px)
• --hidden-on-desktop – ukrywa element na ekranie komputera (szerokość większa niż 1199px)
• --disable-margin-top –  usuwa domyślny margines górny dla bloku
• --disable-margin-bottom – domyślny margines dolny usunięty dla bloku
• --disable-vertical-margins – usuwa domyślne pionowe marginesy dla bloku (górny i dolny jednocześnie)

Blok „Kolumny”

• --cols-disable-horizontal-margins – wyłącza poziome marginesy między kolumnami; tą klasę dodajemy do bloku Kolumny, nie do pojedynczej kolumny
• –cols-disable-vertical-margins –wyłącza pionowe marginesy między kolumnami na ekranie mobilnym; tą klasę dodajemy do bloku Kolumny, nie do pojedynczej kolumny
• --col-height-100 –  ustawia wysokość danego elementu na 100% wysokości bloku kolumny; ta klasa jest dodawana do danego bloku w kolumnie; przykład użycia: dla grupy z tłem w jednej kolumnie i zdjęciem w drugiej kolumnie – dzięki temu obie kolumny będą tej samej wysokości

Blok „Grupa”

• --vertical-align-center – wyśrodkowuje zawartość bloku grupy w pionie, przydatne gdy grupa ma ustaloną większą wysokość niż jej kontent

Blok okładka

• --linked –jeśli w bloku okładka dodamy link to cały obszar bloku będzie podlinkowany, link musi być wstawiony bezpośrednio w bloku jako pierwszy element
• --linked-text-on-hover –  jeśli w bloku okładka dodamy link to cały obszar bloku będzie podlinkowany, tekst linku w normalnym stanie jest ukryty i pokazywany po najechaniu kursorem

Menu nawigacyjne (nie blok)

Klasy te możesz użyć tylko dla elementów menu. Przejdź do opcji Wygląd> Menu. Kliknij Opcje Ekranu u góry strony i przejdź do Pokaż Zaawansowane Właściwości Menu. Zaznacz Klasy CSS. Za każdym razem, gdy stworzysz lub zaczniesz edytować nowy element menu pojawi się okno Klasy CSS.

• –label – klasa dodana do menu zmienia swój wygląd w wersji mobilnej; przykład użycia: tworzenie niestandardowego menu mobilnego (jeśli różni się od wersji na komputer); na pulpicie element z tą klasą nie wyświetli się
• –button – element menu z tą klasą ma wygląd przycisku

Jeśli cokolwiek jest niejasne, prosimy – daj nam znać! Jesteśmy po to, aby Ci pomóc ?