Weblify의 Add, Navigator, Style 탭에서는 웹사이트 페이지를 편집 가능한 Figma 레이어로 만들고 편집해요. 생성된 레이어에는 Weblify 메타데이터가 남아 있어서, 플러그인이 이를 미리 보고 점검하고 정적 웹사이트로 내보낼 수 있어요.
페이지 시작하기
- Navigator 탭을 열고 New page name에 이름을 입력한 다음 Add page를 선택하세요. 또는 Add 탭을 열고 Templates를 고른 다음 템플릿을 선택하면, 템플릿 이름으로 된 새 페이지로 추가돼요.
- 콘텐츠를 추가하기 전에 Figma 캔버스나 Navigator에서 생성된 페이지를 선택하세요.
아무것도 선택하지 않으면 Weblify는 처음 찾은 Weblify 페이지를 사용하거나 Home이라는 페이지를 만들어요. Add 탭의 필터 아래에 있는 줄에 새 콘텐츠가 삽입될 위치가 표시돼요.
섹션과 요소 추가
Add 탭은 검색할 수 있는 하나의 라이브러리예요. Templates, Sections, Elements, Layouts 필터를 사용하거나 이름으로 검색하세요. 내비게이션, 히어로, 콘텐츠, 가격, 폼, 푸터처럼 페이지의 완성된 영역은 Sections를, 개별 컴포넌트는 Elements를 사용하세요. 항목을 선택하면 삽입돼요.
항목을 삽입하기 전에 Weblify 페이지, 섹션 또는 열을 선택하세요. 그래야 Weblify가 부모를 예측할 수 있고, 내보낸 구조도 그대로 유지돼요.
항목에 별표를 표시하면 Favourites에 추가돼요. 직접 만든 섹션을 재사용하려면 Navigator에서 해당 섹션의 ⋯ 메뉴를 열고 Save to My sections를 선택하세요. 그러면 Add 탭의 My sections에 나타나요.
구조 편집
Navigator 탭에는 페이지 목록과 현재 페이지의 섹션이 표시돼요. 여기서 다음 작업을 할 수 있어요.
- 페이지를 추가하고, 페이지와 섹션을 드래그해 순서를 바꾸고, ⋯ 메뉴로 이름 변경, 복제, 숨기기, 삭제, 홈페이지 설정을 하세요.
- 페이지 옆의 ⚙ 버튼을 선택해 URL과 검색 메타데이터를 편집한 다음 Save page를 선택하세요.
- 섹션의 ⋯ 메뉴에서 해당 섹션을 모든 페이지에 헤더나 푸터로 표시하세요.
페이지 메타데이터에는 제목, 설명, 정규 URL, 소셜 공유 필드, 파비콘, Twitter 카드 유형, 검색 엔진 설정이 포함돼요.
선택한 섹션, 행, 그리드, 열이 태블릿과 휴대폰에서 어떻게 바뀔지 설정하려면 Style 탭을 열고 Responsive를 펼치세요.
스타일과 이미지 적용
Style 탭을 열고 Brand styles를 펼치면 생성된 콘텐츠에 쓰인 테마, 색상, 타이포그래피, 모서리 반경을 검토할 수 있어요. Images를 펼치면 플레이스홀더 이미지 목록이 나오므로, 내보내기 전에 실제 이미지 URL로 바꿀 수 있어요.
플러그인을 벗어나지 않고 현재 웹사이트를 확인하려면 Preview 탭을 여세요.