Dodawanie kontenera Positioned Layers..

Learn DXPR BuilderBuild pagesAdd contentLay-out

Użyj Positioned Layers, gdy elementy mają na siebie zachodzić albo stać w dokładnym miejscu, czego wiersze i kolumny nie dają. Dostajesz płótno, na którym przeciągasz każdy element tam, gdzie chcesz, na przykład nagłówek na zdjęcie. Przykład nakłada biały nagłówek dnia otwartego na obraz. Do zwykłych treści obok siebie wiersze i kolumny łatwiej utrzymać w porządku na telefonach.

Biały nagłówek „Spring Open Day” i jego data nałożone na lewy górny róg pomarańczowego abstrakcyjnego obrazu

Dodawanie kontenera Positioned Layers

  1. Najedź na kolumnę i kliknij + na jej pasku sterowania albo + na środku pustej kolumny, aby otworzyć selektor elementów.
  2. Na karcie Layout kliknij Positioned layers.
  3. Otwierają się najpierw jego ustawienia. Ustaw Height tak, aby zmieściła się najwyższa warstwa, a potem kliknij Save. Pojawia się puste płótno.
  4. Najedź na płótno i kliknij + na jego pasku sterowania, aby dodać element, taki jak Text albo Image. Każdy dodany element staje się warstwą do ustawienia.

Efekt

Płótno trzyma ustawioną wysokość, a każda warstwa stoi tam, gdzie została umieszczona, nad innymi albo pod nimi. Odwiedzający widzą kompozycję tak, jak wygląda w edytorze. Pozycje zapisują się jako udział płótna, więc warstwa trzyma miejsce, gdy płótno się zwęża. Tekst zachowuje rozmiar, chyba że włączysz Responsive.

Konfiguracja Positioned Layers

Otwórz ustawienia z More > Settings na pasku sterowania Positioned layers.

Ustawienie Do czego służy Domyślnie
Width Szerokość płótna, na przykład 100% albo 600px 100%
Height Wysokość płótna w pikselach 500
Responsive Skaluje wysokość płótna i tekst wraz z szerokością płótna, więc kompozycja zachowuje proporcje na małych ekranach Off

Ustawianie warstw

  • Select: kliknij warstwę. Na jej rogach i krawędziach pojawiają się uchwyty.
  • Move: przeciągnij warstwę za jej nazwę na pasku sterowania, na przykład Text albo Image. Warstwy zostają w płótnie.
  • Resize: przeciągnij uchwyt wybranej warstwy.
  • Add at a spot: kliknij dwukrotnie puste miejsce płótna. Otworzy się selektor elementów, a nowy element ląduje w miejscu kliknięcia.

Menu More każdej warstwy ma cztery dodatkowe pozycje. 100% width i 100% height rozciągają warstwę na całe płótno. Bring forward i Send backward przesuwają ją nad inne warstwy albo pod nie.

Jeśli go nie widzisz

  • Warstwa nie rusza się po przeciągnięciu. Warstwy ruszają się tylko za uchwyt z nazwą na pasku sterowania. Najedź na warstwę i przeciągnij ten uchwyt.
  • Warstwa chowa się za inną. Leży niżej w stosie. Otwórz menu More warstwy i wybierz Bring forward.
  • Warstwy zachodzą na siebie albo wystają na telefonach. Responsive jest wyłączone, więc wysokość płótna i tekst trzymają rozmiar. Włącz Responsive w ustawieniach Positioned layers.
  • Positioned layers nie ma w selektorze w płótnie. Płótno nie mieści drugiego płótna. Dodaj nowy element Positioned layers do kolumny.
  • Positioned layers nie ma w selektorze nigdzie. Twój profil użytkownika DXPR Builder go pomija. Administrator zaznacza Layers w Elements w twoim profilu pod adresem /admin/dxpr_studio/dxpr_builder/profile.

Co dalej?

  • Sekcje: daj obszarowi wokół płótna kolor albo obraz tła.
  • Zagnieżdżanie: łącz warstwy z wierszami i kolumnami w bardziej złożonych układach.
  • Karta animacji: pozwól każdej warstwie pojawiać się z własnym efektem wejścia.