Umieść kolor albo zdjęcie za treścią.

Poznaj DXPR BuilderBuduj stronyStylizuj elementy

Nadaj pasowi strony markowy kolor albo zdjęcie, aby nagłówek się wyróżniał, a pas czytał się jako jeden blok. Kolor i zdjęcie ustawisz w panelu Styl dowolnego elementu. Sekcja dodaje panel Efekty tła na nieruchome zdjęcie, parallax, gradient albo wideo z YouTube.

Film podąża za recepturą poniżej: kładzie zdjęcie za nagłówkiem i ciemny gradient na zdjęcie, aby biały nagłówek pozostał czytelny.

Zanim zaczniesz

  • Otwórz stronę w DXPR Builder; wskazanie elementu pokazuje jego pasek sterowania z opcją More. Nowy w kreatorze? Zobacz Twoja pierwsza strona.
  • Zapisz w oknie zachowuje zmianę w edytorze. Zapisz na pasku narzędzi kreatora nad treścią zapisuje stronę i pokazuje „Saved field”.
  • Użyj sekcji na pełny pas strony. Tylko sekcja ma Efekty tła.
  • Użyj elementu tekstowego albo karty na kolorowy blok za kilkoma wierszami wewnątrz kolumny.
  • Użyj swojego motywu do teł na każdej stronie, na przykład treści strony albo stopki.
  • Trzymaj słowa z dala od zdjęcia. Obraz w tle nie ma tekstu alt, więc czytniki ekranu go pomijają. Umieść przekaz w nagłówku na wierzchu.

Przepis: czytelny nagłówek na zdjęciu

Biały tekst na zatłoczonym zdjęciu trudno odczytać. Ciemny gradient na zdjęciu to naprawia i działa dalej po podmianie zdjęcia. Potrzebujesz sekcji, która trzyma twój nagłówek w elemencie tekstowym.

  1. Najedź na sekcję, kliknij More, a potem Settings.
  2. Otwórz panel Styl i kliknij Select Image w sekcji Obraz tła. Wybierz zdjęcie. Pojawi się miniatura z listą rozmiarów obrazu.
  3. Z listy rozmiarów wybierz rozmiar co najmniej tak szeroki jak najszerszy ekran, dla którego projektujesz, albo Original image (No resizing). Unikaj Optimize for fast loading dla pełnego pasa.
  4. Ustaw Styl tła na Cover, a Pozycję tła na Center center.
  5. Otwórz panel Efekty tła i ustaw Efekt tła na Gradient. Twoje zdjęcie zostaje; gradient leży na nim.
  6. W polu koloru Koloru początkowego wpisz rgba(0, 0, 0, 0.6): czerń na 60%. Wpisz rgba(0, 0, 0, 0.3) dla koloru końcowego. Pozostaw kierunek gradientu na 180, aby woal biegł z góry na dół.
  7. Kliknij Zapisz w oknie. Sekcja pokazuje zdjęcie pod ciemnym woalem.
  8. Najedź na element tekstowy, kliknij More, a potem Settings. W jego panelu Styl ustaw Kolor czcionki na biały i kliknij Zapisz.
  9. Kliknij Zapisz na pasku narzędzi.

Panel efektów tła sekcji z wybranym gradientem, ciemnymi półprzezroczystymi próbkami kolorów pod kolorem początkowym i końcowym oraz kierunkiem 180, obok zdjęcia biurka przyciemnionego pod białym nagłówkiem

Sprawdź nagłówek na najjaśniejszym fragmencie zdjęcia. Celuj w kontrast co najmniej 4,5 do 1 albo 3 do 1 dla dużych nagłówków; strona typografia wyjaśnia te cele. Nadal trudno odczytać? Podnieś obie wartości, na przykład do 0,8 i 0,5.

Co widzisz

Panel Styl sekcji z turkusowym zdjęciem jako obrazem tła i stylem tła Cover, obok sekcji ze zdjęciem za białym nagłówkiem Spring Open Day

Sekcja pokazuje twoje zdjęcie pod ciemnym woalem, najciemniejszym u góry, z białym nagłówkiem na nim. Cover wypełnia całą sekcję, więc na wąskim ekranie więcej boków zdjęcia jest odciętych.

Jak działają ustawienia

Ustawienie Co robi
Tło Kolor za treścią. Suwak krycia w selektorze czyni go przezroczystym.
Obraz tła Zdjęcie za treścią: przez Select Image, z adresu URL albo z AI Image Generation, chyba że twoja witryna to wyłączyła.
Styl tła Jak obraz wypełnia element. Zobacz tabelę poniżej.
Pozycja tła Punkt, do którego przypięty jest obraz. Przy Cover decyduje, która część zdjęcia zostaje widoczna.
Styl tła Efekt
Theme defaults O ile motyw nie stanowi inaczej, obraz powtarza się w swoim rozmiarze od lewego górnego rogu.
Cover Obraz wypełnia element, a krawędzie, które się nie mieszczą, są odcinane. Najlepszy do zdjęć.
Contain Cały obraz pokazuje się raz. Po dwóch stronach mogą zostać puste pasy. Najlepszy do logo.
No repeat Jedna kopia w swoim rozmiarze.
Repeat Obraz kafelkuje element. Dobry do wzorów.

Kolor leży pod obrazem. Przebija przez przezroczyste części obrazu, w pasach wokół obrazu Contain i podczas wczytywania zdjęcia. Wybierz kolor bliski głównemu tonowi zdjęcia.

Rozmiar Optimize for fast loading skaluje obraz do co najwyżej 1024 px szerokości i zapisuje go jako WebP. Sprawdza się w bloku, ale na pełnym pasie na dużym ekranie wygląda miękko.

Ten sam obraz wczytuje się na każdym rozmiarze ekranu, łącznie z telefonami. Panel Styl najechania ma własne Tło i Obraz tła, więc blok może zmieniać kolor albo podmieniać obraz po najechaniu.

Efekty tła sekcji

Te efekty potrzebują sekcji. Stały obraz i obraz parallax biorą zdjęcie z Obrazu tła, więc najpierw ustaw zdjęcie.

Efekt tła Co widzą odwiedzający Ustawienia
Simple image Zdjęcie przewija się ze stroną. To domyślne. brak
Fixed image Zdjęcie stoi w miejscu, a treść przewija się nad nim. brak
Parallax image Zdjęcie przewija się wolniej niż treść. Parallax speed (0 do 100; wybranie Parallax image ustawia 20, gdy jest 0), Parallax mode (Fixed albo Local), Disable on mobile (ekrany węższe niż 481 px)
Gradient Mieszanka dwóch kolorów, osobno albo na zdjęciu. Start color, End color, Gradient direction (1 do 360 stopni; 180 biegnie z góry na dół), Start position, End position
YouTube video Wyciszony film gra, gdy sekcja jest na ekranie, i pauzuje, gdy zjedzie z widoku. YouTube video URL, Start time in seconds, Stop time in seconds, Video options

Na zdjęciu gradient zawsze biegnie od krawędzi do krawędzi. Start position i End position dotyczą tylko gradientu bez zdjęcia.

Jeśli nie widać tła

  • Zdjęcie pokazuje się jako cienki pasek. Tło nie dodaje wysokości; sekcja jest tak wysoka jak treść i odstępy. Dodaj treść albo włącz wysokość 100% w panelu Ogólne. Aby dodać odstępy, zobacz wyższą sekcję.
  • Zdjęcie się powtarza albo widać tylko jeden róg. Styl tła jest na Theme defaults. Wybierz Cover.
  • Zdjęcie wygląda miękko na szerokim ekranie. Optimize for fast loading ogranicza je do co najwyżej 1024 px szerokości. Wybierz szerszy rozmiar z listy rozmiarów.
  • Zdjęcie kryje się za jednolitą czernią. Kolory gradientu nie mają przezroczystości. Zakończ każdą wartość liczbą poniżej 1, na przykład rgba(0, 0, 0, 0.6).
  • Nagłówek pozostaje ciemny. Klasa koloru w polu HTML classes elementu tekstowego albo reguła motywu z !important wygrywa. Usuń chip albo zobacz typografia.
  • Tła nie ma po przeładowaniu strony. Zapisz w oknie zachowuje zmianę tylko w edytorze. Kliknij Zapisz na pasku narzędzi.
  • Kolor się nie pokazuje. Zdjęcie go zakrywa. Aby zabarwić zdjęcie, użyj Gradientu w Efektach tła.
  • Pozycja początkowa i pozycja końcowa nic nie zmieniają. Sekcja ma Obraz tła, więc gradient biegnie od krawędzi do krawędzi. Użyj zamiast tego kierunku gradientu i przezroczystych kolorów.
  • Kolor klasy wygrywa. Klasa taka jak Primary background w polu HTML classes bije twoje Tło. Usuń jej chip.
  • Tło nie działa na liczniku kołowym, pasku postępu ani separatorze. Te elementy używają własnych kolorów. Ustaw Background color, Back color albo Color w panelu Ogólne.

Co dalej?

  • Typografia: ustaw kolor nagłówka na zdjęciu i sprawdź jego kontrast.