Dodawanie sekcji..

Poznaj DXPR BuilderBuduj stronyDodaj treściUkład

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?