Reklamy AMP HTML nie obsługują funkcji elastycznych. Reklamy wideo, animowane GIF-y i reklamy graficzne mogą korzystać z układów z kilkoma rozmiarami.
Elastyczne projektowanie wykorzystuje układy elastyczne, które przystosowują się do różnych orientacji i rozmiarów widocznego obszaru, dzięki czemu nie musisz tworzyć wielu układów. Google Web Designer zawiera wiele narzędzi umożliwiających tworzenie układów elastycznych.
W dokumencie warto przynajmniej zastosować elastyczne wymiary strony. Można też utworzyć układ płynny, definiując rozmiary i pozycje obiektów za pomocą wartości procentowych. Aby dostosować poszczególne elementy do różnych rozmiarów i zakresów rozmiarów widocznego obszaru, użyj reguł multimediów.
Reklamy graficzne nie mogą być elastyczne, ale mogą korzystać z elastycznego przepływu pracy w układzie z kilkoma rozmiarami – w ten sposób można eksportować różne rozmiary z jednego dokumentu.
Wymiary stron elastycznych
Tworzenie całego elastycznego dokumentu
Aby dokumenty elastyczne wypełniały cały dostępny obszar ekranu, powinny mieć szerokość i wysokość ustawione na 100%.
-
Istniejące dokumenty: w panelu Elastyczny zaznacz pole wyboru Układ elastyczny.
-
Nowe pliki: podczas określania wymiarów w oknie nowego pliku zaznacz pole wyboru Układ elastyczny. W przypadku niektórych typów plików ta opcja nie jest dostępna.
Aby treść na stronie była elastyczna, możesz użyć układu płynnego i reguł multimediów.
Układ płynny
Rozmiary i pozycje określane procentowo
Przegląd przygotowania (procent)
Oprócz wymiarów strony możesz też określić rozmiar i pozycję elementów za pomocą wartości procentowych (zamiast liczby pikseli). Wartości procentowe zachowują rozmiar i wyrównanie elementu względem kontenera nadrzędnego, nawet gdy się on zmienia.
Jeśli korzystasz z wyrównywania elementów, opcja układu płynnego w narzędziach wyrównywania i dystrybucji pozwala określić pozycje w procentach.
Reguły multimediów
Można zastępować atrybuty i style CSS na potrzeby różnych orientacji i rozmiarów
Reguły multimediów umożliwiają dokumentowi wykrywanie rozmiaru i orientacji widocznego obszaru oraz stosowanie odpowiednich stylów i atrybutów. Na przykład ekran telefonu może wyświetlać dane treści w 1 kolumnie, a ekran tabletu – w 2 kolumnach. Te zmiany, zwane zastąpieniami, występują w przypadku określonych rozmiarów lub zakresów rozmiarów.
Jeśli chcesz przełączać różne style reguł, skorzystaj z panelu Elastyczny:
- Reguły domyślne: wybierz Edytuj podstawowe właściwości dokumentu, gdy zmieniasz domyślny zestaw stylów lub gdy wprowadzasz zmiany, które są stosowane do wszystkich rozmiarów widocznego obszaru (może to być np. dodawanie lub usuwanie zasobów, komponentów czy zdarzeń).
- Reguły multimediów: wybierz konkretny rozmiar lub zakres rozmiarów do zastępowania stylów domyślnych i atrybutów w przypadku określonego rozmiaru widocznego obszaru.
Gdy wybrana jest reguła multimediów, możesz wybierać style i atrybuty, które mają zastosowanie tylko do tego rozmiaru lub zakresu rozmiarów. Możesz na przykład dostosować pozycję, rozmiar, źródło, widoczność lub animację elementu. Google Web Designer pozwala też zastąpić zawartość tekstową, ustawienia dopasowania tekstu i właściwości komponentów.
Dowiedz się więcej o regułach multimediów i zastąpieniach.
