Tworzenie strony responsywnej z użyciem warstwy pływającej (floating layers)
Obiekt 'Warstwa' (Layer) w WYSIWYG Web Builder to bardzo zaawansowane narzędzie do budowy złożonych układów na stronach internetowych i może być użyty w wielu różnych typach układów. W tym tutorialu postaramy się przedstawić nową koncepcję zastosowania warstw (wprowadzoną od wersji 9 programu) o nazwie warstwa pływająca (floating layers). Funkcja może to być wykorzystana do utworzenia układów "responsywnych". Responsywnych oznacza, że układ dostosuje się automatycznie do dostępnej wielkości ekranu. Na przykład na urządzeniach mobilnych z różnymi rozmiarami wyświetlaczy.

Pływający tryb warstwy sprawi, że  w przypadku kilku warstw pływających które są umieszczone na stronie obok siebie (od lewej do prawej) warstwa zamiast stałej pozycji będzie dostosowywać w zależności od dostępnego miejsca na ekranie i w przypadku jeśli warstwa nie mieści się w bieżącym wierszu zostanie on zawinięty do następnego wiersza.

Dla trybu warstwa pływająca
(floating layers) we właściwościach można ustawić jak zachowa się warstwa
• Default
Warstwa umieszczona po prawej stronie poprzedniego obiektu pływającego. Jeśli obiekt nie zmieści się w bieżącym rzędzie będzie przechodził do następnego wiersza.

• Clear Left
Wymuszone będzie przejście Warstwy do kolejnego rzędu (nawet jeśli jest jeszcze miejsce w bieżącym wierszu). Warstwa ta może mieć inne obiekty po prawej stronie (chyba, że następny obiekt pływający jest ustawione, aby usunąć z lewej).

• Full Width
Warstwa użyje  całej szerokości strony(100%). Żadne inne przedmioty nie będą mogły być w tym samym rzędzie. Tryb ten może być przydatny dla nagłówków i stopek.

Uwaga: warstwy pływające mogą stanowić część innej  warstwy pływającej. Jednak obecnie tylko jeden poziom zagnieżdżenia jest obsługiwany.

Oto przykład, jak ta funkcja może być użyta:

Krok 1
Dodaj warstwę która będzie nagłówkiem strony.
Ustaw jej szerokość dokładnie na 320 pikseli (wysokość nie ma znaczenia). Użyjemy 320 pikseli, ponieważ jest to minimalna rozdzielczość jaką chcemy obsługiwać.
Jeśli dodamy więcej warstw to może wyglądać to tak  (na dużym ekranie)
Etap 4:
W ostatnim kroku jeszcze stopkę:
a) Dodaj warstwę, ustaw szerokość dokładnie na 320 pikseli (wysokość nie ma znaczenia).
b) Ustaw tryb warstwy na ""
floating layers" i wybierz i wybierz "Full Width" w "Tryb pływający:".
c) Ustaw  wyrównanie na 'Center' będzie to wyrównywać całą zawartość na środku warstwy.
Krok 2
Ustaw tryb warstwy na "
floating layers" i wybierz "Full Width" w "Tryb pływający:".
Ustaw również wyrównanie na 'Center' będzie to wyrównywać całą zawartość na środku warstwy.
Kliknij OK, możesz zobaczyć że warstwa została teraz przeniesiona w lewy górny róg strony!

Wszystkie inne obiekty pływające są umieszczane po obiektu i dlatego, że są ustawione warstwy na całej szerokości, ma inne cele będą w tym samym rzędzie. Podczas podglądu lub publikowania strony warstwa automatycznie rozwinąć do pełnego rozmiaru strony.

Oto to jak to będzie wyglądać na ekranie o szerokości 320 pikseli:
Mamy teraz warstwę o łącznej szerokości 140 + 2 x 10 (margines) = 160 pikseli.
Oznacza to, że jeśli dodamy inną taka samą warstwę o tej samej szerokości, to możemy umieścić 2 warstwy w jednym rzędzie.

Krok 3
Następnie dodamy kilka bloków treści. W tym przykładzie użyjemy kilku warstw z obrazem i tekstem.
a) Dodaj nową warstwę
b) Ustaw jej szerokość 140 pikseli i wysokość na 160 pikseli.
c) Ustaw tryb warstwy na "
floating layers" i ustaw wszystkie marginesy do 10.
Można zobaczyć na żywo przykład tutaj:
http://www.wysiwygwebbuilder11.pl - demo

Pobierz projekt demo:
http://www.wysiwygwebbuilder.com/support/floatinglayer/floatinglayer.zip

na podstawie : http://www.wysiwygwebbuilder.com/floating_layers.html

Tak moze wyglądać efekt końcowy na ekranie o szerokości 320 pikseli:









Wyjście
---Home------Download------Zakup------Poradniki Online------Szablony------Wsparcie------Forum------Rozszerzenia------Manual------Rózne---
Copyright © 2017