Divi 레이아웃을 재사용 가능한 와이어프레임으로 바꾸는 방법

매주 다음 프로젝트에 사용할 수 있는 새로운 무료 Divi 레이아웃 팩을 제공합니다. 레이아웃 팩 중 하나의 경우 웹사이트를 한 단계 업그레이드하는 데 도움이 되는 사용 사례도 공유합니다.

이번 주에 진행 중인 Divi 디자인 이니셔티브의 일환으로 Divi의 Food Catering Layout Pack을 사용하여 레이아웃을 재사용 가능한 와이어프레임으로 바꾸는 방법을 보여 드리겠습니다. 와이어프레임은 웹사이트 구축의 시작 과정에 적합합니다. 웹사이트의 전반적인 구조와 디자인 스타일을 결정하는 데 도움이 됩니다. 그들은 또한 모든 것을 미리 조정하지 않고도 디자인 스타일에 대한 클라이언트의 의견을 얻는 데 도움을 줄 수 있습니다.

가자!

시사

자세히 알아보기 전에 생성할 최종 결과를 살펴보겠습니다.

레이아웃을 와이어프레임으로 변환

Visual Builder로 푸드 케이터링 랜딩 페이지 열기

Divi의 Food Catering Layout Pack을 사용하여 만든 방문 페이지를 엽니다.

섹션 및 전체 너비 헤더 배경 이미지, 배경 색상 및 그라데이션 배경 제거

와이어프레임을 만드는 첫 번째 단계는 페이지 섹션의 모든 배경 이미지, 그라데이션 배경 및 배경색과 영웅 섹션의 전체 너비 헤더 모듈을 제거하는 것입니다.

대체 섹션에 회색 배경색을 대신 지정

페이지 디자인의 다른 섹션을 결정하는 데 도움이 되도록 번갈아 가며 각 섹션에 '#f9f9fb' 배경색을 지정하세요. 나중에 와이어프레임을 사용하여 페이지를 만들 때 찾기 및 바꾸기 기능을 사용하여 페이지에 색상 팔레트를 매끄럽게 추가할 수 있습니다.

수정된 스타일 필터를 사용하여 디자인 요소의 모든 색상 제거

버튼 모듈에서 수정된 스타일 필터 활성화

우리는 또한 사용되는 색상 팔레트를 제거할 것입니다. 그렇게 하면 페이지를 만들 때 영향을 받지 않습니다. 페이지에서 버튼 모듈 중 하나를 열고 수정된 스타일 필터를 활성화하여 모든 현재 설정을 확인합니다.

버튼 모듈에 어두운 배경 및 테두리 색상 제공

버튼 배경색과 버튼 테두리 색상을 모두 '#2b2b2b'로 변경합니다.

버튼 스타일 복사 및 다른 버튼에 적용

버튼 설정을 마우스 오른쪽 버튼으로 클릭하고 '버튼 스타일 복사'를 클릭하여 버튼 스타일을 계속 복사합니다. 그런 다음 페이지의 나머지 버튼 모듈 각각에 버튼 스타일을 추가합니다.

추가 디자인 설정 제거(예: 상자 그림자)

버튼 상자 그림자 제거

Box Shadow와 같은 추가 요소도 제거하고 있습니다. 작업 중이던 동일한 버튼 모듈을 열고 상자 그림자를 완전히 제거합니다.

버튼 모듈 상자 그림자 설정 복사

이 버튼 모듈의 상자 그림자 스타일을 복사하여 나머지 버튼 모듈에도 추가합니다.

영웅 및 연락처 섹션에서 수동으로 상자 그림자 제거

Box Shadow를 수동으로 제거해야 하는 단 두 개의 버튼은 Fullwidth Header Module 및 Contact Module에 포함된 버튼입니다. 이 버튼은 여러 디자인 요소가 있는 모듈의 일부이므로 수동으로 제거해야 합니다.

강조 표시된 섹션에 CTA와 동일한 배경색 제공

그런 다음 '강조 표시된' 섹션이 나타날 때까지 아래로 스크롤합니다. 여기서 '#2b2b2b' 섹션 배경색을 사용합니다. CTA에는 동일한 색상이 사용되었습니다.

이미지 크기 결정

미디어 라이브러리로 이동

레이아웃의 레이아웃 주제를 완전히 제거하기 위해 모든 이미지 모듈을 필요한 이미지 크기가 포함된 자리 표시자로 교체합니다. 이러한 치수를 찾으려면 미디어 라이브러리로 이동하십시오.

사용된 이미지를 개별적으로 열기

페이지에 포함된 각 이미지를 개별적으로 엽니다.

페이지에 이미지의 다른 차원을 기록

그렇게 하면 특히 해당 이미지의 크기를 볼 수 있습니다. 다음 단계로 넘어가기 전에 페이지에 필요한 모든 치수를 기록해 둡니다.

차원이 있는 자리 표시자 만들기

포토샵 열기

자리 표시자를 만들 시간입니다! Photoshop 또는 기타 이미지 편집 소프트웨어를 엽니다.

차원에 대한 새 프로젝트 생성

페이지에 있는 모든 차원 집합에 대해 새 프로젝트를 만듭니다. 우리의 경우 다음 차원 각각에 대해 별도의 프로젝트가 필요합니다.

• 800 x 1029
• 400 x 400
• 48x48

그레이 색상 선택

색상으로 '#e7e8ed'를 선택합니다.

배경 레이어 잠금 해제

배경 레이어도 잠금 해제하십시오.

페인트 통 도구 선택 및 레이어에 색상 추가

그런 다음 페인트 통 도구를 사용하여 캔버스를 회색으로 색칠합니다.

치수가 있는 텍스트 추가

이미지 치수를 추적하는 데 도움이 되도록 자리 표시자 중간에 치수를 추가할 수도 있습니다. 그렇게 하면 대체할 이미지를 편집할 때 페이지에 필요한 이미지 크기를 알 수 있습니다.

웹용으로 저장

완료되면 웹용 이미지 자리 표시자를 저장합니다.

페이지의 각 이미지 크기에 대해 반복

페이지의 각 측정기준 세트에 대해 이 단계를 반복합니다. 이 페이지에는 총 세 가지 세트가 필요합니다.

• 800 x 1029(회사 소개 섹션
• 400 x 400(갤러리 섹션)
• 48 x 48(아이콘)

이미지를 자리 표시자로 바꾸기

이미지 자리 표시자를 모두 내보낸 후에는 이미지를 교체하세요.

와이어프레임을 쉽게 재사용할 수 있도록 만들기

컴퓨터에서 와이어프레임 맵 생성

와이어프레임 생성을 완료한 후에는 모양을 어딘가에 저장하는 것이 좋습니다. 컴퓨터 어딘가에 새 폴더를 만듭니다.

화면 캡처 레이아웃 및 로컬에 저장

그런 다음 선택한 화면 캡처 추가 기능/확장 프로그램을 사용하여 페이지를 캡처합니다. 아래 이미지에서는 Mozilla Firefox용 FireShot 애드온을 사용했습니다. 스크린샷을 저장할 때 적절한 이름을 지정해야 합니다.

같은 이름으로 라이브러리에 레이아웃 저장

스크린샷에 사용한 것과 동일한 이름을 사용하여 와이어프레임 레이아웃을 Divi 라이브러리에 저장합니다. 이를 통해 페이지 중 하나에 업로드하기 전에 컴퓨터의 와이어프레임을 살펴볼 수 있습니다.

맞춤형 와이어프레임에 대한 설계 설정 변경

섹션 구분선 추가

페이지당 하나의 와이어프레임을 만드는 것으로 제한되지 않습니다. 디자인 설정을 쉽게 조정하여 새 와이어프레임을 생성할 수 있습니다. 예를 들어 섹션 구분선을 사용하여 독특한 디자인을 만들 수 있습니다.

타이포그래피로 놀아요

제목 글꼴에서 찾기 및 바꾸기 활성화

또는 타이포그래피를 가지고 놀 수도 있습니다. 영웅 섹션에서 전체 너비 헤더 모듈을 열고 제목 글꼴을 마우스 오른쪽 버튼으로 클릭합니다. 찾기 및 바꾸기 기능을 활성화하여 계속하십시오.

글꼴 변경

페이지에서 사용 중인 글꼴을 다른 글꼴로 변경하면 완전히 새로운 와이어프레임을 갖게 됩니다!

범주를 사용하여 별도의 디자인 요소 저장

'라이브러리에 추가' 아이콘을 클릭합니다.

당신이 할 수 있는 또 다른 일은 페이지의 특정 디자인 요소를 별도로 저장하는 것입니다. 예를 들어 영웅 섹션 모음을 만들고 싶다면 영웅 섹션을 Divi 라이브러리에 쉽게 추가할 수 있습니다.

새 카테고리 추가 및 디자인 요소에 이름 지정

보다 조직적인 구조를 가지려면 '영웅 섹션'이라는 새로운 섹션 범주를 계속 추가하여 원하는 영웅 섹션을 쉽게 찾고 매장에 있는 모든 디자인을 탐색할 수 있습니다.

시사

이제 모든 단계를 거쳤으므로 최종 결과를 최종적으로 살펴보겠습니다.

마지막 생각들

이 사용 사례 블로그 게시물에서 우리는 Divi 레이아웃을 재사용 가능한 와이어프레임으로 바꾸는 방법을 보여주었습니다. 레이아웃을 와이어프레임으로 바꾸면 웹사이트 구조가 어떻게 보이길 원하는지에 대한 전체적인 관점을 유지하는 데 도움이 됩니다. 또한 웹 사이트 구축 프로세스의 첫 번째 단계에서 클라이언트에게 디자인 스타일을 브리핑하는 데 탁월합니다. 질문이나 제안 사항이 있으면 댓글 섹션에 댓글을 남겨주세요!