Jak ułożyć kolumny jedna pod drugą na urządzeniach mobilnych?
Zaznacz warstwę Row zawierającą warstwy Column, kliknij przycisk Settings w nagłówku wtyczki, a następnie włącz Stack Columns in this Row. Domyślnie układa to kolumny rzędu w jedną kolumnę na urządzeniach mobilnych.
Dlaczego kolumny nie układają się jedna pod drugą na urządzeniach mobilnych?
Kolumny nie będą się układać, jeśli dla danego rzędu wyłączona jest opcja Stack Columns in this Row albo rząd jest ustawiony tak, aby na urządzeniach mobilnych zachować więcej niż jedną kolumnę w rzędzie. Niektóre gotowe komponenty mogą też mieć domyślnie wyłączone układanie mobilne, jeśli tak wymaga ich projekt.
Aby to naprawić, zaznacz rząd, otwórz Settings, włącz Stack Columns in this Row i wybierz 1 Column Per Row on Mobile, jeśli chcesz, aby każda kolumna pojawiała się pod poprzednią.
Domyślnie wszystkie warstwy Column w projektach układają się na urządzeniach mobilnych jedna pod drugą (chyba że korzystasz z gotowego komponentu, w którym zgodnie z jego przeznaczeniem jest to już wyłączone).
Możesz zmienić to zachowanie na urządzeniach mobilnych, klikając dowolną warstwę Row, następnie przycisk Settings w nagłówku wtyczki i włączając lub wyłączając przełącznik Stack Columns in this Row.
Jeśli w warstwie Row masz więcej niż 2 warstwy Column, rozważ pozostawienie układania włączonego – w przeciwnym razie treść w kolumnach może być bardzo wąska i mała na mniejszych ekranach urządzeń mobilnych.
Zmiana liczby kolumn w rzędzie na urządzeniach mobilnych
Domyślnie włączenie przełącznika Stack Columns in this Row układa wszystkie warstwy Column w rzędzie w jedną kolumnę, ale opcjonalnie możesz to zmienić, wybierając jedną z opcji z listy obok przełącznika we wtyczce:
- 1 Column Per Row on Mobile
- 2 Columns Per Row on Mobile
- 3 Columns Per Row on Mobile
- 4 Columns Per Row on Mobile
Na przykład jeśli w e-mailu masz rząd z 4 kolumnami, możesz wybrać opcję 2 Columns Per Row on Mobile, aby na urządzeniach mobilnych kolumny ułożyły się po 2 w 2 rzędach (jako „siatka” 4 elementów).
Wybieraj tylko taką wartość z listy, która ma sens przy Twojej liczbie kolumn. Na przykład ustawienie opcji 3 Columns Per Row on Mobile, gdy rząd w projekcie zawiera tylko 2 kolumny, sprawi, że każda z tych 2 kolumn będzie mieć szerokość 33%. Nie wypełnią one wtedy całej szerokości ekranu na urządzeniu mobilnym i mogą wyglądać na zepsute lub dziwne.
Zmiana wyrównania w pionie kolumn w rzędach mobilnych
Jeśli rząd nadal zachowuje na urządzeniach mobilnych kilka warstw Column obok siebie, możesz też nadpisać ich wzajemne wyrównanie w pionie w tym rzędzie mobilnym. Aby to zrobić, kliknij warstwę Row, włącz przełącznik Mobile Column Vertical Alignment, a następnie wybierz Top, Middle lub Bottom z listy obok.
To nadpisanie wyrównania w pionie jest dostępne tylko wtedy, gdy rząd ma nadal kilka kolumn na urządzeniach mobilnych, czyli gdy:
- przełącznik Stack Columns In This Row jest wyłączony lub
- przełącznik jest włączony, a na liście wybrano więcej niż 1 Column Per Row on Mobile
Możesz masowo zastosować ustawienia: otwórz Settings, a potem zaznacz w Figmie kilka warstw Emailify tego samego typu. Każde zmienione ustawienie zostanie zastosowane do wszystkich zaznaczonych warstw.