Dodatkowe klasy CSS dla motywu Neura.pro

Motyw Neura.pro 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 Neura.pro

Do zastosowania we wszystkich blokach

  • --hidden-on-phone – ukrywa element na ekranie mobilnym (poniżej 768 px szerokości ekranu)
  • --hidden-on-tablet –ukrywa element 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 – usuwa domyślny margines dolny 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 mogą być używane 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 będzie wyświetlany
  • –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 ?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *