Nadaj sekcji kolor, zdjęcie albo gradient tła.

Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

Każdą sekcję możesz wypełnić kolorem, zdjęciem albo gradientem. Kolor i zdjęcie pochodzą z panelu Style, który mają sekcje, wiersze, kolumny i elementy. Sekcje dodają panel Background effects dla gradientów, przyklejonych i parallax zdjęć oraz wideo YouTube. Przykład buduje granatową sekcję ze zdjęciem miasta, białym tekstem i gradientem na wierzchu.

Film dodaje zdjęcie za sekcją, potem przykrywa je gradientem.

Dodanie koloru i zdjęcia

  1. Kliknij Add Elements w pustym obszarze treści i wybierz Section z karty Layout.
  2. Najedź na sekcję i otwórz More > Settings.
  3. Otwórz panel Style.
  4. Wybierz ciemnogranatową próbkę dla Background.
  5. Wybierz biel dla Font color.
  6. W Background image kliknij Select Image. Przeszukaj bibliotekę mediów, zaznacz zdjęcie i kliknij Insert selected.
  7. Ustaw Background style na Cover.
  8. Ustaw Background position na Center center i kliknij Save.
  9. Kliknij + na sekcji i wybierz Text z karty Content.
  10. Wpisz nagłówek, na przykład Evening lectures, i jeden wiersz pod nim. Ustaw nagłówek na Heading 2 i wyśrodkuj oba wiersze na pasku narzędzi edytora.
  11. Otwórz panel Style, ustaw Font color na biały i kliknij Save.

Dodanie gradientu

  1. Najedź na sekcję i ponownie otwórz More > Settings.
  2. Otwórz panel Background effects i ustaw Background effect na Gradient.
  3. Wybierz Start color i End color, potem kliknij Save.
  4. Kliknij Save na pasku narzędzi, otwórz menu widoku (ikona oka) i wybierz Preview.

Co widzisz

Po pierwszych krokach zdjęcie wypełnia całą sekcję za białym nagłówkiem. Cover przycina to, co się nie mieści, a Center center trzyma środek zdjęcia w widoku. Granatowy kolor pokazuje się tylko, gdy zdjęcie się wczytuje albo gdzie zdjęcie nie sięga.

Gradient przechodzi od koloru początkowego u góry do koloru końcowego u dołu. Leży na zdjęciu. Kryjące kolory przykrywają zdjęcie całkowicie; kolory z pewną przezroczystością przepuszczają je.

Ustawienia

Panel Style (każda sekcja, wiersz, kolumna i element)

Ustawienie Do czego służy Domyślnie
Background Kolor wypełnienia z próbnika kolorów albo próbki motywu Brak
Background image Obraz z biblioteki mediów, wybrany poleceniem Select Image Brak
Background style Cover wypełnia element i przycina; Contain pokazuje cały obraz i może zostawić przerwy; No repeat pokazuje go raz we własnym rozmiarze; Repeat kafelkuje go Theme defaults
Background position Która część obrazu pozostaje w widoku po przycięciu, na przykład Center center albo Left top Theme defaults

Gdy skonfigurowano generowanie obrazów przez AI, Background image przyjmuje też prompt. Zobacz generowanie obrazu z AI.

Panel efektów tła (tylko sekcje)

Efekt tła Do czego służy Dodatkowe ustawienia
Simple image (domyślnie) Zdjęcie przewija się ze stroną Brak
Fixed image Zdjęcie stoi w miejscu, gdy strona przewija się nad nim Brak
Parallax image Zdjęcie porusza się wolniej niż strona. Zobacz sekcję hero z przykładem. Parallax speed, Parallax mode (Fixed albo Local), Disable on mobile
Gradient Dwa kolory mieszają się w całej sekcji, na zdjęciu, jeśli istnieje Start color, End color, Gradient direction (180 stopni biegnie z góry na dół), Start position, End position
YouTube video Wyciszone wideo YouTube wypełnia sekcję; zaznacz Loop, aby je zapętlić YouTube video URL, Video options, Start time in seconds, Stop time in seconds

Efekty przyklejony i parallax poruszają zdjęciem ustawionym w panelu Style. Wideo YouTube nie potrzebuje zdjęcia.

Jeśli nie widzisz tła

  • Brak panelu Background effects. Mają go tylko sekcje. Najedź na sekcję, nie na wiersz, kolumnę ani element, i otwórz More > Settings.
  • Zdjęcie jest ucięte. Cover przycina to, co nie pasuje do sekcji. Zmień Background position, aby utrzymać temat w widoku, albo wybierz Contain.
  • Gradient ukrywa zdjęcie. Gradient leży na wierzchu, a kryjące kolory przykrywają zdjęcie. Obniż krycie Start color i End color w próbniku kolorów.
  • Sekcja nie pokazuje gradientu. Gradient potrzebuje obu kolorów. Wybierz Start color i End color.
  • Wideo YouTube się nie odtwarza. YouTube video URL jest puste albo nie jest linkiem do jednego filmu. Wklej pełny adres filmu, na przykład https://www.youtube.com/watch?v= i jego ID.

Co dalej?