Ważne jest, aby pamiętać, że treść/zawartość i stylistyka obiektów będą takie same we wszystkich wariantach ("punktach przerwania")  ponieważ jest to cały czas ten sam obiekt, użyty tylko w różnym układzie. Należy również pamiętać, że nie wszystkie obiekty mogą być zmniejszane, niektóre obiekty nie są przystosowane do użycia jako obiekty "responsywne". Oznacza to, że będą mieć taką samą wielkość we wszystkich punktach przerwania (wariantach strony). Zajrzyj tutaj po bardziej szczegółowe informacje na ten temat:  http://wysiwygwebbuilder.com/forum/viewtopic.php?f=10&t=63817
Najszybszym sposobem dostępu do konkretnych punktów przerwania jest użycie paska "breakpoint" u dołu ekranu:


Lub w prawym górnym rogu okna programu

Widoczność paska możemy włączyć/wyłączyć w Menu->Widok - "Pasek punktów przerwań"
Na tablecie (z mniejszym ekranem) może być mniej miejsca czyli że nie jest on w stanie wyświetlić tyle samo pikseli  co wyświetlacze urzadzeń stacjonarnych i nawet jeśli nie jest to do końca prawdą gdyż ekrany wielu urządzeń przenośnych niewiele ustępują wyświetlaczom monitorów stacjonarnych w możliwości wyświetlenia ilości pixeli to jednak ich rozmiary są mniejsze i wynika z tego to że rozmiar fizyczny pixela jest mniejszy co oczywiście powoduje że fizyczny rozmiar np. pojedynczej litery jest bardzo mały , a więc będą one trudniejsze do odczytania bez bez użycia funkcji powiększania na urządzeniu.
Warto więc dodać punkt przerwania na 768 pikseli  i zmienić nieco organizację na stronie np kolejność pól. Zauważ, że zostały wykorzystane te same obiekty jedynie ich położenie i rozmiar został zmieniony!
For more details about Responsive Web Design please read this related tutorial and FAQ:
Responsive Web Design in WYSIWYG Web Builder

Responsive Web Design FAQ (must read!)
Desktop View
Na telefonie komórkowym smartfonie jest jeszcze mniej miejsca, więc tutaj możemy umieścić wszystkie okna w jednej kolumnie. Ponownie są to te same obiekty, tylko na innej pozycji i innej wielkości.
Tablet View
Mobile View
Podczas tworzenia nowego przerwania, Web Builder będzie bazował na domyślnym widoku strony. Tak więc strona nowo utworzonego punktu przerwania będzie początkowo wygląda identycznie jak strona domyślna.

Wskazówka:
Nie należy dokonywać zmiany zbyt wielu ustawień jednocześnie! Aby zorientować się, jak działa Responsive Web Design, zacznij po prostu przesuwać obiekty pojedynczo  i sprawdzaj  jak to wpływa na cały układ korzystając z funkcji podglądu. Jeżeli zmienisz zbyt wiele rzeczy naraz możesz spowodować "rozjechanie" się układu, i stracić to co zostało zrobione i dobrze działało. Dodatkowo mogą być problemy z cofnięciem wykonanych zmian  jeśli coś pójdzie nie tak (funkcja cofnij w przypadku rozbudowanych układów póki co nie działa idealnie. - dop.s.m.)
Desktop View
Tablet View

Demo:
http://www.wysiwygwebbuilder.com/support/rwd_demo.html

You can download the demo project here:
http://www.wysiwygwebbuilder.com/support/rwd_demo.zip


Here's a great video tutorial about Responsive Web Design created by Greg Hughes:
Mobile View
Wprowadzenie do tworzenia stron Responsywnych  - Podstawy
Ten poradnik wprowadzi cię pokrótce w podstawy tworzenie stron "responsywnych" w programie WWB, "responsywnych" w tym wypadku oznacza możliwość  dostosowania się automatycznie układu strony do dostępnej wielkości ekranu. Na przykład na urządzeniach mobilnych z różnymi rozmiarami wyświetlaczy.  Pod koniec tego kursu jest również wprowadzenie wideo.

Ideą Responsive Web Design jest to, że gdy użytkownik odwiedza Twoją stronę, będzie ona dostosowała swój układ  na podstawie rozmiaru ekranu. Osiąga się to przez udostępnienie różnych układów strony dla określonych przedziałów rozdzielczości ekranu urządzenia.Wszystkie warianty układów danej strony (zwanymi "punktami przerwania") są częścią tej samej strony i korzystają (najczęściej) tych samych obiektów, a użytkownik w programie WYSIWYG Web Builder ma pełną kontrolę nad całym układem dla różnych "punktów przerwania"  w odróżnieniu od innych rozwiązań bazujących na zdefiniowanych z góry szablonach.

Oto koncepcja podstawowego układu:
Więcej informacji na temat Responsive Web Design znajdziesz w tym tutorialu:
Responsive Web Design in WYSIWYG Web Builder


Responsive Web Design FAQ (przeczytaj koniecznie!)

Demo:
http://www.wysiwygwebbuilder.com/support/rwd_demo.html

You can download the demo project here:
http://www.wysiwygwebbuilder.com/support/rwd_demo.zip


Oto wielki film instruktażowy o Responsive Web Design stworzony przez Greg Hughes:
Po przegrupowaniu obiektów kliknij przycisk "Podgląd w przeglądarce", aby zobaczyć, jak dana strona zachowuje się w przeglądarce dla konkretnego punku przerwania.
Standardowo przeglądarka wyświetli widok domyślny (jeśli jest w trybie pełnego pulpitu), ale jeśli zaczniesz zmianiać rozmiaru okna przeglądarki (poziomo) i przekroczysz punkt że okno bedzie mniejsze mniejsze niż 768 pikseli, będziesz mógł zauważyć, że układ dostosuje się do aktualnego rozmiaru okna przeglądarki!
Przeglądarka Firefox posiada podgląd w trybie "mobilnym" ( użyj kombinacji na klawiaturze CTRL+SHIFT+M)

Jest również możliwe dodawanie obiektów, które są widoczne tylko w jednym określonym punkcie przerwania i ukrywanie ich w pozostałych.

Może to być przydatne dla obiektów nawigacyjnych, ponieważ niektóre obiekty nawigacyjne działają lepiej na komputerach stacjonarnych a inne na ekranach dotykowych lub gdy obiekt nie jest w 100% responsywny i możemy go użyć w kilku wariantach (kilka obiektów) kazdy dla innego punktu przerwania.
Na przykład możesz wyświetlić pasek menu w wersji dla komputerów stacjonarnych i menu panelowe dla urządzenia o mniejszym ekranie.
Można używać Menedżera obiektów, aby pokazać lub ukryć obiekt. Widoczność może być różna dla każdego punktu przerwania.









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