Dodawanie obramowań do elementów układu

Jednolite obramowanie możesz dodać do warstw w projekcie e-maila (na przykład Row, Column, Button itp.), klikając warstwę i stosując na niej obrys (stroke) w Figmie. Zostanie on automatycznie dodany jako obramowanie CSS w końcowym HTML wyeksportowanym z Emailify.

Aby dodać odstęp między obramowaniem a zawartością warstwy, możesz po ustawieniu obramowania dodać do tych warstw padding.

Pamiętaj, że klienty poczty nie obsługują obramowań gradientowych. Jeśli użyjesz wypełnienia gradientowego w obrysie w Figmie, w końcowym eksporcie HTML zostanie ono zastąpione pierwszym jednolitym kolorem gradientu.

Dodawanie linii oddzielających między warstwami treści

Jeśli potrzebujesz linii oddzielającej między warstwami treści w kolumnie, dodaj specjalny element separatora Emailify: kliknij warstwę „Column”, wybierz pozycję „Divider” z listy Quick Add na dole wtyczki, a następnie kliknij przycisk Add +, aby wstawić warstwę linii oddzielającej do kolumny.

Po dodaniu separatora do kolumny możesz przeciągnąć warstwę w panelu warstw, aby zmienić jej miejsce między innymi warstwami. Jej rozmiar zmienisz, ustawiając Height w panelu właściwości warstwy w Figmie, a kolor tła – zmieniając Fill warstwy w Figmie na dowolny jednolity kolor.

Pamiętaj, że klienty poczty nie obsługują obramowań gradientowych. Jeśli użyjesz wypełnienia gradientowego w separatorze, w końcowym eksporcie HTML zostanie ono zastąpione pierwszym jednolitym kolorem gradientu.

Dodawanie wewnętrznego paddingu do linii oddzielających

Opcjonalnie możesz dodać do separatorów wewnętrzny padding: zaznacz warstwę separatora Emailify w e-mailu przy otwartym panelu Settings, włącz przełącznik Inner Padding, a następnie wpisz wartości paddingu, które chcesz zastosować do zaznaczonego separatora.

Po wyrenderowaniu do HTML w warstwie separatora pojawi się dodatkowy „wewnętrzny” padding. Pozwala to ustawić wartości paddingu dla wybranych warstw w kolumnie bez wpływu na pozostałe warstwy.

Opcjonalnie możesz też nadpisać padding dowolnego separatora Emailify na urządzeniach mobilnych: włącz przełącznik Mobile Padding i wpisz wartości paddingu dla zaznaczonego separatora. Będą one widoczne tylko podczas oglądania e-maila HTML na urządzeniu mobilnym.

Zaokrąglanie rogów tła elementów układu

Jeśli element układu Row lub Column ma wypełnienie tła (bez obrysu), możesz zaokrąglić rogi tła: kliknij warstwę i ustaw wartość zaokrąglenia we właściwości Corner Radius w Figmie.

Uwaga dotycząca treści opartych na obrazach. Jeśli ustawisz mobilne zaokrąglenie rogów mniejsze niż na desktopie, obraz zostanie wyeksportowany jako kwadratowy plik JPG, aby zachować cały obszar obrazu. Dzięki temu na urządzeniach mobilnych można zastosować mniejsze zaokrąglenie, ale nie jest ono wtopione w plik PNG. W efekcie Outlook wyświetli obraz z kwadratowymi rogami, ponieważ nie obsługuje właściwości CSS border-radius.

Pamiętaj, że klienty poczty nie obsługują zaokrąglenia rogów w obramowaniach (obrysach). Jeśli zaokrąglisz rogi elementu układu, który ma obrys w Figmie, w końcowym eksporcie HTML obramowanie będzie miało zwykłe, kwadratowe rogi.

Ważne uwagi o zaokrąglaniu rogów z obrysem

Zaokrąglenie rogów działa niezawodnie na wszystkich warstwach Column, które mają też obrys. Nie zadziała jednak na warstwach Row, ponieważ są to tabele HTML (które niestety nie obsługują zaokrąglenia rogów w obrysach).

Niestety zaokrąglenie rogów nie jest obsługiwane w żadnej wersji Outlooka, więc te klienty zawsze wyświetlą kwadratowe rogi, niezależnie od ustawień.

Aby uzyskać najlepszy efekt, ustaw zaokrąglenie rogów bezpośrednio na warstwie Column Emailify, która ma obrys, a nie na warstwie Row czy Wrapper. Pamiętaj jednak, że w żadnej wersji Outlooka zaokrąglone rogi nie będą widoczne.