Wielokolumnowe treści..

Learn DXPR BuilderBuild pagesVolg een tutorial

Tu zbudujesz jedną stronę z czterema układami kolumn, których użyjesz najczęściej: treść z paskiem bocznym, dwie równe połowy, trzy trzecie i cztery ćwiartki. Każdy dostaje nagłówek nad sobą. Użyj jej, aby nauczyć się, który preset pasuje do której treści. Każde ustawienie wiersza znajdziesz w wierszach i kolumnach.

Film buduje stronę wywozu odpadów urzędu.

Zanim zaczniesz

  • Twoja rola ma uprawnienie Edit with DXPR Builder.
  • Strona jest otwarta w kreatorze. Nową utworzysz w Content > Add content > Landing Page (/node/add/landing_page) przyciskiem Save.
  • Nowe elementy lądują na górze sekcji. Dlatego każdy nagłówek wchodzi po swoim wierszu: ląduje nad nim.

Wybierz układ

Układ Najlepszy do Preset
Treść z paskiem bocznym artykuły z linkami pokrewnymi 2/3 + 1/3
Dwie równe połowy porównania, przed i po domyślny wiersz
Trzy równe trzecie wyróżnienia funkcji, usługi 1/3 + 1/3 + 1/3
Cztery równe ćwiartki statystyki, małe karty 1/4 + 1/4 + 1/4 + 1/4

Nowy Row powstaje z dwiema równymi kolumnami. Każdy inny układ pochodzi z ikony siatki wiersza (Column layout).

Krok 1: treść z paskiem bocznym

  1. Kliknij Add Elements na pustej stronie i wybierz Section z karty Layout.
  2. Kliknij + na sekcji i wybierz Row. Kliknij jej ikonę siatki (Column layout), wybierz preset 2/3 + 1/3 i kliknij Save.
  3. Kliknij + w szerokiej kolumnie i wybierz Text z karty Content. Wpisz artykuł, ustaw pierwszą linijkę na Heading 3 i kliknij Save.
  4. Kliknij + w wąskiej kolumnie i wybierz Text. Wpisz „Related” jako Heading 4, dodaj po jednej linijce na pokrewną stronę i kliknij Save.
  5. Kliknij + na sekcji i wybierz Text; ląduje nad wierszem. Wpisz „Content with a sidebar” jako Heading 2 i kliknij Save.

Krok 2: dwie równe połowy

  1. Najedź na sekcję i kliknij Add Section Below. Otwórz More > Settings nowej sekcji, wybierz jasnoszary Background w panelu Style i kliknij Save.
  2. Kliknij + na sekcji i wybierz Row. Dwie równe kolumny to domyślne, więc nie ma nic do zmiany.
  3. Dodaj element Text w każdej kolumnie: „Before” i „After” jako Heading 4 z jedną linijką każde.
  4. Dodaj nagłówek „Two equal halves” tak samo jak w kroku 1.

Krok 3: trzy równe trzecie

  1. Dodaj trzecią sekcję opcją Add Section Below i nadaj jej klasę Align text center.
  2. Dodaj Row, kliknij jej ikonę siatki (Column layout), wybierz preset 1/3 + 1/3 + 1/3 i kliknij Save.
  3. Dodaj element Text w każdej kolumnie: „Paper”, „Glass” i „Organic” jako Heading 4 z jedną linijką każde.
  4. Dodaj nagłówek „Three equal thirds”.

Krok 4: cztery równe ćwiartki

  1. Dodaj czwartą sekcję z jasnoszarym Background i klasą Align text center.
  2. Dodaj Row, kliknij jej ikonę siatki (Column layout), wybierz preset 1/4 + 1/4 + 1/4 + 1/4 i kliknij Save.
  3. Dodaj element Text w każdej kolumnie: dzień jako Heading 4 i to, co odbierane.
  4. Dodaj nagłówek „Four equal quarters”.

Krok 5: zapisz i podejrzyj

  1. Kliknij Save na pasku narzędzi DXPR Builder.
  2. Otwórz menu widoku (ikona oka) i wybierz Preview.

Na mniejszych ekranach

Kolumny stoją obok siebie od 768 pikseli szerokości, więc tablety pokazują ten sam układ co komputery. Na telefonach każda kolumna bierze pełną szerokość, a kolumny układają się w stos w swojej kolejności. Inny układ na tablety wybierzesz ikoną siatki wiersza (Column layout) opcją Add screen size.

Idź dalej

Niepokazane w filmie:

  • Narrow, wide, narrow: preset 1/4 + 1/2 + 1/4 trzyma długi tekst czytelny dzięki pustym marginesom.
  • Mirror row: włącz w ustawieniach wiersza, aby zamienić kolumny na tabletach i komputerach. Telefony trzymają pierwotną kolejność, więc pierwsza kolumna wciąż wchodzi pierwsza.

Efekt

Cztery pasy następują po sobie, każdy z nagłówkiem na górze. Artykuł i jego pokrewne linki dzielą pierwszy, dwie połowy stoją na szarości, a za nimi trzy wyśrodkowane trzecie. Stronę zamykają cztery wyśrodkowane ćwiartki na szarości.

Jeśli nie widzisz kolumn jak na filmie

  • Wiersz ma złą liczbę kolumn. Preset stosuje się dopiero po kliknięciu Save w oknie układu. Kliknij ikonę siatki wiersza (Column layout) ponownie, wybierz preset i kliknij Save.
  • Nagłówek siada pod wierszem. Nagłówek wszedł przed wierszem, a nowe elementy lądują na górze sekcji. Przeciągnij nagłówek nad wiersz za uchwyt na jego pasku sterowania.
  • Kolumny układają się w stos na tablecie. Tablet jest węższy niż 768 pikseli, na przykład mały tablet w pionie. Dodaj układ na tę szerokość opcją Add screen size w oknie układu wiersza.
  • Twoje zmiany zniknęły po przeładowaniu. Stronę opuszczono przed kliknięciem Save na pasku narzędzi kreatora. Jeśli Save pokazuje błąd, zobacz Zmiany nie zapisują się.

Co dalej?