Dodawanie sekcji..

Learn DXPR BuilderBuild pagesAdd contentLay-out

Sekcja to jeden pas twojej strony, na przykład hero na górze albo szary pas funkcji pod nim. Każdej sekcji dajesz własne tło, kolor tekstu, odstępy i wysokość, a potem wypełniasz ją wierszami albo treścią. Ta strona opisuje dodawanie i konfigurowanie sekcji; podział na kolumny znajdziesz w wierszach i kolumnach.

Strona kliniki oczami odwiedzających: granatowa sekcja od krawędzi do krawędzi z wyśrodkowanym nagłówkiem „Book your health check” , linijką o wizytach w tym samym tygodniu i białym przyciskiem „book online”, nad jasnoszarą sekcją z trzema kolumnami: „same-week visits”, „experienced gps” i „results online”

Dodawanie sekcji

Przykład buduje granatową sekcję hero dla kliniki. Pod nią następuje jasnoszara sekcja z trzema kolumnami.

  1. Kliknij Add Elements na pustej stronie i wybierz Section na karcie Layout. Pod istniejącą sekcją kliknij Add Section Below, okrągły plus pod nią.
  2. Najedź na sekcję, otwórz More i wybierz Settings.
  3. Skonfiguruj całą sekcję: tutaj Align text center w HTML classes, granatowy Background i biały Font color. Kliknij Save.
  4. Kliknij + na sekcji, aby dodać treść wprost do niej, albo dodaj Row, aby podzielić ją na kolumny.
  5. Kliknij Save na pasku narzędzi, aby zapisać stronę.

Background i Font color są w panelu Style okna. Nowe elementy lądują na górze sekcji, więc najpierw dodaj najniższy: w filmie przycisk wchodzi przed nagłówkiem.

Efekt

Granatowy pas wypełnia okno od krawędzi do krawędzi. Nagłówek i przycisk zostają w wyśrodkowanym pudełku, wewnętrznym kontenerze sekcji. Szara sekcja zaczyna się tuż pod spodem, z trzema kolumnami funkcji w tym samym wyśrodkowanym pudełku.

Każda nowa sekcja niesie już klasę Vertical padding size 5 (py-5) w HTML classes. Ta klasa daje jej przestrzeń nad treścią i pod nią.

Konfiguracja sekcji

Okno ustawień ma pięć paneli: General, Background effects, Animation, Style i Hover style. Tylko sekcje mają Background effects.

Ustawienie Panel Do czego służy Domyślnie
Full width General Wiersze biegną od krawędzi do krawędzi zamiast w wyśrodkowanym kontenerze Off
100% height General Sekcja jest wysoka co najmniej na okno przeglądarki Off
Vertical centering General Treść siada w pionowym środku sekcji wyższej od niej Off
HTML ID General Nazwa kotwicy, dzięki której link do #name skacze do tej sekcji Empty
HTML classes General Klasy narzędziowe, takie jak Align text center albo rozmiar odstępu Vertical padding size 5 (py-5)
Background effect Background effects Simple image, Fixed image, Parallax image, Gradient albo YouTube video Simple image
Background, Font color Style Kolor za sekcją i kolor jej tekstu None: decyduje motyw

Tło zawsze rozciąga się na całą sekcję, niezależnie od Full width. Efekty obrazu przesuwają Background image wybrane w panelu Style; tła pokazują każdy efekt.

Przy mniejszej lub większej przestrzeni zamień Vertical padding size 5 (py-5) na mniejszy rozmiar albo No vertical padding (py-0). Dokładne piksele ustawisz modelem pudełkowym w panelu Style, jak wyjaśniają odstępy.

Przepisy na sekcje

Sekcja Ustawienia, które ją tworzą
Hero 100% height i Vertical centering włączone, efekt Parallax image, nagłówek i przycisk
Funkcje Jasny Background, nagłówek, a potem wiersz trzech kolumn
Wezwanie do działania Mocny Background, Align text center, jedna krótka linijka i przycisk
Opinie Jasny Background i wiersz trzech kolumn, każda z Block quote

Projektowanie sekcji hero buduje pierwszą krok po kroku.

Jeśli jej nie widzisz

  • Pusta strona nie ma przycisku Add Elements. Asystent tworzenia stron jest wyłączony, więc pusta strona oferuje tylko Choose a template. Kliknij pusty obszar, aby otworzyć selektor elementów, albo włącz Enable page creation assistant pod adresem /admin/dxpr_studio/dxpr_builder/ai_settings.
  • Nie ma przycisku Add Section Below. Mają go tylko sekcje położone wprost na stronie, nie sekcja w kolumnie ani w karcie. Kliknij + na kolumnie.
  • Wyśrodkowanie pionowe nic nie zmienia. Sekcja jest wysoka tylko na swoją treść, więc nie ma w czym środkować. Włącz też 100% height.
  • Full width zdaje się nic nie robić. Tło i tak rozciąga się na całą sekcję; Full width tylko wysuwa wiersze do jej krawędzi. Przy krótkim tekście w jednej kolumnie zmianę trudno dostrzec.
  • Pojawiła się sekcja, której nie dodano. Wybrano Row albo element treści na pustej stronie, a każdy element potrzebuje sekcji wokół siebie. DXPR Builder dodał ją za ciebie; otwórz jej ustawienia jak każde inne.

Co dalej?