Dodawanie panelu kart..

Learn DXPR BuilderBuild pagesAdd contentLay-out

Użyj kart, gdy kilka bloków pokrewnej treści ma stać w jednym miejscu, a widoczny ma być tylko jeden naraz. Powstaje rząd etykiet kart; odwiedzający klika etykietę, aby zobaczyć jej treść. Przykład buduje stronę agencji z jedną kartą na usługę. Do pytań i odpowiedzi panel zwijany zwykle czyta się lepiej.

Trzy karty usług o etykietach „Web design” , „branding” i „marketing”, z otwartą kartą „web design” nad tekstem

Dodawanie panelu kart

  1. Najedź na kolumnę i kliknij + na jej pasku sterowania albo + na środku pustej kolumny, aby otworzyć selektor elementów.
  2. Na karcie Layout kliknij Tabs. Element pojawia się z jedną kartą o etykiecie Title.
  3. Najedź na panel karty i otwórz More > Settings. Wpisz nazwę w Tab title i kliknij Save.
  4. Kliknij + w panelu, aby dodać treść, na przykład element Text.
  5. Aby dodać kartę, najedź na etykiety kart i kliknij Add tab na pasku sterowania Tabs. Nowa karta ląduje na początku, przed pozostałymi. Nazwij ją i wypełnij tak samo.

Efekt

Rząd etykiet kart stoi nad treścią otwartej karty. W podglądzie i na opublikowanej stronie kliknięcie etykiety pokazuje treść tej karty i chowa resztę. Każda karta trzyma własne elementy, więc jedna karta może nieść tekst, a inna zestaw kart. Na ekranach węższych niż 768 pikseli karty zamieniają się w ułożone w stos nagłówki, które otwierają się jak panel zwijany.

Konfiguracja kart

Element Tabs ma trzy ustawienia. Otworzysz je z More > Settings na pasku sterowania Tabs, który pokazuje się po najechaniu na etykiety kart.

Ustawienie Do czego służy Domyślnie
Tab direction Gdzie stoją etykiety: Default (nad treścią), Left albo Right Default
Style Wygląd etykiet: Default (linia pod etykietami), Modern (zaokrąglone karty) albo Accordion (nagłówki z liniami oddzielającymi) Default
Mobile friendly Pokazuje karty jako zwijane nagłówki na ekranach węższych niż 768 pikseli On

Każda karta ma własne ustawienia w More > Settings na swoim panelu. Tab title to tekst etykiety. Tab description to opcjonalna krótka linijka pod etykietą otwartej karty.

Zarządzanie kartami

  • Reorder: przeciągnij etykietę karty w nowe miejsce między etykietami. Jej treść wędruje razem z nią.
  • Rename: najedź na panel karty, otwórz More > Settings, zmień Tab title i kliknij Save.
  • Remove: najedź na panel karty, otwórz More i wybierz Delete. Wszystko w karcie usuwa się razem z nią.

Etykiety pisz w jednym do trzech słów i poprzestań na około pięciu kartach, aby zmieściły się w jednej linii.

Jeśli ich nie widzisz

  • Nowa karta jest na początku zamiast na końcu. Add tab zawsze stawia nową kartę z przodu. Przeciągnij jej etykietę w wybrane miejsce.
  • Ustawienia pokazują tylko Tab title i Tab description. Otwarto ustawienia jednej karty. Najedź na etykiety kart, aby pokazał się pasek sterowania Tabs, a potem otwórz tam More > Settings.
  • Telefony pokazują ułożone w stos nagłówki zamiast kart. Mobile friendly jest włączone, co jest domyślne. Wyłącz je w ustawieniach Tabs, aby zachować karty na każdej szerokości ekranu.
  • Kart nie ma na karcie Layout selektora. Twój profil użytkownika DXPR Builder je pomija. Administrator zaznacza Tabs w Elements w twoim profilu pod adresem /admin/dxpr_studio/dxpr_builder/profile.

Co dalej?