Link do sekcji i używaj klas do stylów.

Poznaj DXPR BuilderBuduj stronyStylizuj elementy

Nadaj sekcji HTML ID, aby przycisk mógł do niej przeskoczyć. Dodaj klasy HTML, aby ukryć element na telefonach, ustawić odstępy na rozmiar ekranu albo użyć ponownie wyglądu zdefiniowanego przez motyw. Oba pola znajdziesz u dołu panelu Ogólne każdego elementu. Klasa utrzymuje wygląd spójny: gdy jej reguła CSS się zmieni, każdy element z tą klasą podąży.

Film podąża za pierwszą recepturą poniżej: sprawia, że przycisk przeskakuje do sekcji niżej na stronie.

Zanim zaczniesz

  • Otwórz stronę w DXPR Builder; wskazanie elementu pokazuje jego pasek sterowania z opcją More. Nowy w kreatorze? Zobacz Twoja pierwsza strona.
  • Zapisz w oknie zachowuje zmianę w edytorze. Zapisz na pasku narzędzi kreatora nad treścią zapisuje stronę i pokazuje „Saved field”.
  • Użyj HTML ID jako celu skoku. Przycisk „Book a tour” może przewinąć do formularza rezerwacji. Lista linków u góry długiej strony może prowadzić do każdej części.
  • Użyj klasy dla wyglądu, który się powtarza. Twój webmaster pisze CSS raz, a ty dodajesz klasę tam, gdzie potrzeba. Panel Styl kopiuje zamiast tego wartości do każdego elementu, co z czasem się rozjeżdża.
  • Użyj klasy do tego, czego panel Styl nie potrafi, na przykład ukrywania elementu na telefonach albo zmiany odstępów na rozmiar ekranu.

Przepis: przycisk, który przeskakuje do sekcji

  1. Najedź na docelową sekcję, kliknij More, a potem Settings.
  2. W panelu Ogólne wpisz krótką nazwę, na przykład programmes, w polu HTML ID. Kliknij Zapisz.
  3. Otwórz ustawienia przycisku. W polu Link wpisz # i dokładnie tę samą nazwę: #programmes. Kliknij Zapisz.
  4. Kliknij Zapisz na pasku narzędzi kreatora.
  5. Wybierz Podgląd w menu widoku (ikona oka) i kliknij przycisk.

Testuj z sekcją niżej na stronie niż przycisk, aby zobaczyć przewijanie. Jeśli cel siedzi w zwijanym panelu, zakładce albo slajdzie karuzeli, link najpierw go otworzy.

Panel Ogólne przycisku z tytułem See our programmes i linkiem #programmes, obok tego przycisku na stronie

Przepis: ukryj element na telefonach

  1. Najedź na element, kliknij More, a potem Settings.
  2. W panelu Ogólne kliknij pole HTML classes.
  3. Wybierz Hidden on extra small devices, phones (<576px). Znajduje się w grupie Responsive Visibility.
  4. Kliknij Zapisz w oknie, a potem Zapisz na pasku narzędzi.

Element znika teraz na ekranach węższych niż 576 px, także w edytorze. Aby to sprawdzić, otwórz stronę na telefonie.

Pole klas HTML elementu tekstowego z chipem Hidden on extra small devices, phones (<576px), obok szarego bloku Plan your visit, nadal pokazywanego na szerokości desktopa

Przepis: wpisz własne klasy

Pole HTML classes pozwala tylko wybierać z listy. Aby wpisać nazwę klasy, najpierw przełącz je na tekst.

  1. Najedź na element, kliknij More, a potem Settings.
  2. W polu HTML classes kliknij Edit as text. Pole zamienia się w zwykłe pole tekstowe z listą klas, które element już ma.
  3. Dopisz swoje nazwy klas po nich, oddzielone spacjami, na przykład brand-card py-3 py-lg-5. Pomiń kropkę: .brand-card w CSS twojego zespołu to tutaj brand-card.
  4. Kliknij Zapisz w oknie, a potem Zapisz na pasku narzędzi.

Element przyjmuje wygląd zdefiniowany przez twój zespół webowy.

Klasy HTML w trybie Edit as text, zwykłe pole z tekstem brand-card py-3 py-lg-5, obok szarego bloku Partner with us z odstępem klasy nad i pod tekstem

Co widzisz

Panel Ogólne sekcji z otwartym HTML ID open-day i trzema chipami klas, obok sekcji z szarym tłem i wyśrodkowanym tekstem

W Podglądzie przycisk płynnie przewija stronę do sekcji i zostawia miejsce na przyklejony nagłówek; pasek adresu kończy się na #programmes. Poniżej 576 px szerokości ukryty element znika. Wpisane klasy pokazują się jako chipy przy kolejnym otwarciu okna, w cudzysłowie, gdy nie ma ich na liście, na przykład „brand-card”.

Jak działają pola

HTML ID

ID musi zaczynać się od litery. Potem może zawierać litery, cyfry, myślniki i podkreślenia, ale bez spacji. Błędne ID pokazuje błąd pod polem, a Zapisz nic nie robi, dopóki go nie poprawisz.

Jeśli zostawisz pole puste, element zachowa ID utworzone przez DXPR Builder. Puste pole pokazuje je na szaro. Używaj każdego ID raz na stronie: gdy dwa elementy dzielą jedno, linki skaczą do pierwszego.

HTML classes

Lista zawiera klasy cieni i klasy Bootstrap 5, pogrupowane według zadań, na przykład Margins, Padding, Responsive Visibility i Rounded Corners. Twój motyw może dodać własną grupę na końcu.

Przewiń otwartą listę albo wpisz fragment nazwy, na przykład padding, py-5 albo circular, aby ją zawęzić. Wpisywanie tylko filtruje listę; dla klasy, której na niej nie ma, użyj Edit as text.

Lista klas HTML przefiltrowana słowem padding, pokazująca grupę Padding z rozmiarami Padding size 1 do 5 i opcją No padding, obok tekstu Course fees, który ostyluje

Klasy Bootstrapa działają tylko, gdy strona wczytuje Bootstrap 5. Pochodzi z twojego motywu albo z General Settings > Bootstrap (/admin/dxpr_studio/dxpr_builder/settings), gdzie Sideload Bootstrap files jest ustawione na Bootstrap 5.

Klasy narzędziowe Bootstrapa, na przykład klasy kolorów i odstępów, są oznaczone !important. Biją panel Styl w tej samej właściwości. Primary background bije Tło, a Top margin size 3 (mt-3) bije górny margines.

Klasa z rozmiarem ekranu w nazwie obowiązuje od tej szerokości w górę:

W nazwie klasy Obowiązuje od
sm 576 px
md 768 px
lg 992 px
xl 1200 px
xxl 1400 px

Zatem py-3 py-lg-5 daje 16 px paddingu u góry i u dołu na mniejszych ekranach oraz 48 px od 992 px szerokości.

Dla programisty twojego motywu

Klasa potrzebuje reguły CSS w motywie, na przykład:

.brand-card {
  background: #f4f6fb;
  border-left: 4px solid #1a4d8f;
  padding: 2rem;
}

Aby pokazać klasę na liście HTML classes dla redaktorów, zarejestruj ją w pliku .info.yml motywu; zobacz Klasy narzędziowe. Aby ostylować całą witrynę, zobacz Własny CSS.

Jeśli go nie widać

  • Zapisz nic nie robi, a HTML ID mówi „ID must start with a letter”. ID łamie powyższe zasady. Zacznij je od litery i używaj tylko liter, cyfr, myślników i podkreśleń.
  • Nie możesz wpisać nowej klasy. Pole tylko filtruje listę. Najpierw kliknij Edit as text.
  • Klasy, której oczekujesz, nie ma na liście. Lista zawiera tylko klasy zdefiniowane przez DXPR Builder i twój motyw. Kliknij Edit as text i ją wpisz.
  • Przycisk wcale nie przewija. Link musi być # z dokładnie tym ID HTML, z tymi samymi wielkimi literami. Sprawdź oba pola i przetestuj w Podglądzie.
  • Klasa nie działa. Nazwa jest źle napisana, motyw nie ma dla niej reguły albo Bootstrap 5 się nie wczytuje. Sprawdź pisownię, a potem zapytaj webmastera o regułę albo Sideload Bootstrap files.
  • Klasa twojego zespołu zmienia tylko niektóre rzeczy. Wartość panelu Styl w tej samej właściwości bije klasę motywu. Wyczyść tę wartość w panelu Styl.
  • Przycisk skacze w złe miejsce. Dwa elementy dzielą ID i wygrywa pierwszy. Nadaj każdemu elementowi własne ID.
  • Nagłówek sekcji chowa się pod przyklejonym nagłówkiem. DXPR Builder nie rozpoznaje twojego nagłówka. Webmaster ustawia Scroll offset selector w General Settings > Advanced Settings (/admin/dxpr_studio/dxpr_builder/settings) na selektor CSS nagłówka.

Co dalej?