Divi로 스크롤링 패션 카탈로그를 만드는 방법

이 게시물에서는 스크롤링 패션 카탈로그를 만드는 방법을 보여 드리겠습니다. 이 방법을 사용하면 종이 카탈로그를 전달하는 것처럼 청중과 연결하는 데 도움이 됩니다. 온라인 스크롤 패션 카탈로그를 만들면 카탈로그에서 얻을 수 있는 결과를 높이는 데 도움이 될 수 있습니다. 예를 들어 상점 항목에 대한 직접 링크를 포함하면 구매 프로세스도 향상됩니다.

결과

단계별로 생성하는 방법을 보여드릴 결과는 데스크탑에서 다음과 같습니다.

휴대전화와 태블릿에서 다음과 같이 하세요.

Divi로 스크롤링 패션 카탈로그를 만드는 방법

YouTube 채널 구독

Photoshop으로 이미지에 투명한 모양 추가

가장 먼저 보여드릴 것은 Photoshop을 사용하여 이미지에 투명 부분을 추가하는 방법입니다. GimpShop이라는 Photoshop을 위한 무료 대안이 있지만 튜토리얼의 이 부분에서는 Photoshop만 사용할 것입니다. 각각 다른 모양을 가진 두 개의 이미지가 필요합니다. 하나는 데스크톱용이고 다른 하나는 모바일 및 태블릿용입니다. 이 부분에서는 이미지에 투명한 모양을 추가하는 방법을 간단히 보여드리겠습니다. 그런 다음 필요한 모든 이미지를 직접 만들 수 있습니다.

포토샵 열기

컴퓨터에서 Photoshop을 열어 시작합니다.

이미지 열기

그런 다음 편집하려는 첫 번째 이미지를 엽니다. 이 방법은 이 튜토리얼 전체에서 사용할 세 개의 이미지 모두에 대해 동일하게 유지됩니다. 그렇기 때문에 한 번만 설명하겠습니다.

이미지를 두 번 클릭하고 레이어 만들기

편집하려는 이미지를 연 후 이미지를 두 번 클릭하고 새 레이어를 만듭니다.

다른 레이어 추가

그 위에 다른 빈 레이어를 추가하여 계속합니다.

레이어 1 및 다각형 올가미 도구 선택

레이어 1을 선택하고 다각형 올가미 도구 사용을 시작합니다.

모양 만들기

다각형 올가미 도구를 활성화한 상태에서 이미지 내에 투명한 모양을 만드십시오.

레이어 1을 보이지 않게 만들고 레이어 0을 선택한 상태에서 Delete 키를 누릅니다.

투명하게 만들 영역을 선택했으면 레이어 1을 보이지 않게 만들고 레이어 0을 다시 선택하고 키보드의 삭제 버튼을 누릅니다.

직사각형 선택 윤곽 도구를 선택하고 이미지의 아무 곳이나 클릭하십시오.

완료되면 Rectangular Marquee Tool을 선택하고 이미지의 아무 곳이나 클릭하십시오.

PNG로 이미지 저장

마지막으로 이미지를 PNG로 저장하고 레이아웃 전체에서 사용할 4개의 이미지 모두에 대해 동일한 프로세스를 반복해야 합니다.

기본 메뉴 모음 설정

만들고 있는 레이아웃에 필요한 기본 메뉴 모음 설정은 다음과 같습니다.

• 로고 이미지 숨기기: 활성화
• 메뉴 높이: 30
• 텍스트 크기: 15
• 문자 간격: -1
• 글꼴: Lato
• 글꼴 스타일: 굵게 및 대문자
• 텍스트 색상: #FFFFFF
• 활성 링크 색상: #FFFFFF
• 배경색: rgba(255,255,255,0)
• 드롭다운 메뉴 배경색: rgba(255,255,255,0)

에디션 소개

기본 메뉴 모음을 수정했으면 계속해서 새 페이지를 추가하고 Divi Builder를 사용하고 Visual Builder로 전환할 수 있습니다.

새 섹션 추가

해당 페이지 내에서 표준 섹션을 추가하여 시작합니다.

섹션 배경색

해당 색상의 배경은 '#d6d6d6'이어야 합니다.

맞춤 패딩

해당 섹션의 디자인 탭으로 이동합니다. Spacing 하위 범주 내에서 상단 패딩에 '24px'를 추가하고 하단 패딩에 0px를 추가합니다.

1열 행 추가

완료되면 계속해서 섹션에 1열 행을 추가할 수 있습니다.

사이징

디자인 탭으로 이동하여 크기 조정 하위 범주를 수정합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 1

맞춤 패딩

아래로 스크롤하여 행의 상단 패딩에 '0px'를 추가합니다.

첫 번째 텍스트 모듈

완료되면 행에 텍스트 모듈을 추가할 수 있습니다. 표시할 텍스트를 입력한 후 디자인 탭으로 이동하여 다음 변경 사항이 텍스트 하위 범주에 적용되는지 확인합니다.

• 텍스트 글꼴: 이전 표준 TT
• 글꼴 스타일: 대문자
• 텍스트 글꼴 크기: 72(데스크톱), 41(태블릿), 29(전화)
• 텍스트 색상: #000000
• 텍스트 문자 간격: 11px
• 텍스트 줄 높이: 1em
• 텍스트 방향: 중앙

Spacing 하위 범주를 열고 상단 및 하단 패딩에 '30px'를 추가합니다.

디바이더 모듈

Text Module 바로 아래에 Divider Module을 추가하고 'Show Divider' 옵션을 활성화합니다.

디자인 탭으로 이동하여 구분선 색상으로 '#FFFFFF'를 선택합니다.

그런 다음 스타일 하위 범주 내에서 구분선 스타일로 '단색'을 선택하고 구분선 위치로 '상단'을 선택합니다.

그런 다음 크기 조정 하위 범주를 열고 다음 설정을 적용합니다.

• 디바이더 무게: 10px
• 높이: 23px
• 폭: 100%
  

두 번째 텍스트 모듈

Divider 모듈 바로 아래에 다른 텍스트 모듈을 추가합니다. 문자표(Windows) 또는 문자 팔레트(Mac)에서 원하는 아이콘을 선택하고 콘텐츠 탭에 배치합니다. 이 예에서는 '↓' 기호를 사용했습니다. 그런 다음 디자인 탭으로 이동하여 다음 설정을 적용합니다.

• 텍스트 글꼴 크기: 42px
• 텍스트 색상: #000000
• 텍스트 방향: 중앙

데스크탑 패션 카탈로그(신규 섹션)

이제 다른 표준 섹션을 추가합니다. 이 섹션에는 데스크탑에 카탈로그의 다른 부분을 표시하는 두 개의 행이 포함됩니다.

섹션 설정

배경색

이 섹션의 배경색으로 '#FFFFFF'를 사용합니다.

맞춤 패딩

그런 다음 디자인 탭으로 이동하여 상단 패딩에 '15px'를 추가합니다.

첫번째 줄

열 구조

설정을 변경했으면 다음 열 구조로 행을 추가하십시오.

배경색

행 설정을 열고 'rgba(255,255,255,0.14)'를 배경색으로 추가합니다.

배경 이미지

이 게시물의 Photoshop 부분에서 만든 이미지 중 하나를 추가하고 배경 이미지 혼합으로 '색조'를 사용합니다.

사이징

마지막으로 Sizing 하위 범주를 다음과 같이 변경합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

첫 번째 텍스트 모듈

행 설정을 완료했으면 두 번째 열에 텍스트 모듈을 추가합니다. 텍스트 하위 범주에 대해 다음 설정을 사용합니다.

• 텍스트 글꼴: 비터
• 텍스트 글꼴 크기: 63px
• 텍스트 색상: #000000
• 텍스트 방향: 중앙

디바이더 모듈

첫 번째 텍스트 모듈 바로 아래에 Divider 모듈을 추가하고 'Show Divider' 옵션을 활성화합니다.

디자인 탭으로 이동하여 구분선 색상으로 '#000000'을 사용합니다.

스타일 하위 범주 내에서 '단색'을 구분선 스타일로 사용하고 '상단'을 구분선 위치로 사용합니다.

동일한 탭을 아래로 스크롤하여 크기 조정 하위 범주에 다음 설정을 적용합니다.

• 디바이더 무게: 3px
• 높이: 23px
• 폭: 57%
• 모듈 정렬: 왼쪽

마지막으로 '30px'의 위쪽 여백과 '50px'의 아래쪽 여백을 추가합니다.

두 번째 텍스트 모듈

Divider가 배치되면 제목을 포함할 두 번째 텍스트 모듈을 추가합니다. 먼저 Content 탭에서 배경색으로 '#000000'을 사용합니다.

그런 다음 디자인 탭으로 이동하여 다음 설정을 텍스트 하위 범주에 적용합니다.

• 텍스트 글꼴: 비터
• 텍스트 글꼴 크기: 92px
• 텍스트 색상: #000000
• 텍스트 줄 높이: 1em
• 텍스트 방향: 왼쪽

테두리 하위 범주를 열고 다음 테두리를 사용합니다.

• 테두리 사용: 예
• 테두리 색상: #000000
• 테두리 너비: 3px
• 테두리 스타일: 단색

또한 Width '77%'와 왼쪽 Module Alignment를 사용합니다.

마지막으로 Text Module의 상하좌우 패딩에 '15px'를 추가합니다.

세 번째 텍스트 모듈

이전 모듈 바로 아래에 다른 텍스트 모듈을 추가합니다. 이것은 설명을 나타냅니다. 디자인 탭으로 이동하여 텍스트 하위 범주에 대해 다음 설정을 사용합니다.

• 텍스트 글꼴: Lato
• 텍스트 글꼴 크기: 16px
• 텍스트 색상: #000000
• 텍스트 줄 높이: 1em
• 텍스트 방향: 왼쪽

크기 조정 하위 범주를 열고 너비에 '70%'를 사용하고 왼쪽 모듈 정렬을 선택합니다.

마지막으로 '20px'의 상단 여백을 추가합니다.

다섯 번째 텍스트 모듈

다섯 번째 텍스트 모듈은 최소한의 버튼 역할을 합니다. 콘텐츠 탭 내에서 '→' 기호 + 텍스트를 사용하고 그 뒤에 링크를 넣습니다.

그런 다음 디자인 탭으로 이동합니다. 텍스트 하위 범주에 대해 다음 설정을 사용합니다.

• 텍스트 글꼴: 비터
• 텍스트 글꼴 크기: 23px
• 텍스트 색상: #000000
• 텍스트 줄 높이: 1em
• 텍스트 방향: 왼쪽

Sizing 하위 범주가 나타날 때까지 동일한 탭을 아래로 스크롤합니다. 해당 하위 범주 내에서 너비 '49%'와 오른쪽 모듈 정렬을 사용합니다.

마지막으로 '80px'의 상단 여백을 추가합니다.

여섯 번째 텍스트 모듈

우리가 필요로 할 여섯 번째이자 마지막 모듈은 이전 모듈과 거의 동일합니다. '→' + 텍스트를 사용하고 그 뒤에 링크를 넣으십시오.

텍스트 하위 범주에 대한 설정은 다음과 같습니다.

• 텍스트 글꼴: 비터
• 텍스트 글꼴 크기: 23px
• 텍스트 색상: #e02b20
• 텍스트 줄 높이: 1em
• 텍스트 방향: 왼쪽

너비를 '39%'로 변경하고 올바른 모듈 정렬도 사용합니다.

두 번째 행

배경색

행 설정을 열고 'rgba(255,255,255,0.14)'를 배경색으로 추가합니다.

배경 이미지

이 게시물의 Photoshop 부분에서 만든 이미지 중 하나를 추가하고 배경 이미지 혼합으로 '색조'를 사용합니다.

열 구조

표준 섹션에 추가해야 하는 두 번째 행은 이전 행과 정반대입니다.

클론 모듈

이전 행에서 사용한 모듈은 이 행에 필요한 것과 동일하므로 복제하여 두 번째 열 대신 첫 번째 열에 배치합니다. 이 게시물의 다음 부분에서 정렬을 변경해야 합니다.

첫 번째 텍스트 모듈 수정

첫 번째 텍스트 모듈을 열고 '20px'의 상단 여백을 추가합니다.

디바이더 모듈 수정

그런 다음 Divider Module을 열고 Sizing 하위 범주 내의 Module Alignment를 오른쪽으로 변경합니다.

두 번째 텍스트 모듈 수정

두 번째 텍스트 모듈의 텍스트 방향을 오른쪽으로 설정합니다.

크기 조정 하위 범주에서도 올바른 모듈 정렬을 선택합니다.

세 번째 텍스트 모듈 수정

세 번째 텍스트 모듈도 올바른 텍스트 방향이 필요합니다.

그리고 올바른 모듈 정렬도 가능합니다.

다섯 번째 텍스트 모듈 수정 사항

다섯 번째 텍스트 모듈에 대해 해야 할 일은 너비를 '82%'로 변경하는 것뿐입니다.

여섯 번째 텍스트 모듈 수정

여섯 번째 텍스트 모듈에 대해서도 같은 수이지만 대신 '87%'를 사용합니다.

태블릿 및 휴대폰용 섹션 숨기기

두 행을 완료하면 휴대전화와 태블릿에서 전체 섹션을 비활성화할 수 있습니다.

태블릿 및 휴대폰 카탈로그(새 섹션)

태블릿과 휴대폰에서도 모든 것이 멋지게 보이도록 새로운 표준 섹션을 만들 것입니다.

섹션 설정

배경색

해당 섹션의 배경색으로 '#FFFFFF'를 추가합니다.

맞춤 패딩

디자인 탭으로 이동하여 '15px'의 상단 패딩을 추가합니다.

첫번째 줄

열 구조

그런 다음 섹션에 2열 행을 추가합니다.

사이징

해당 행의 크기 조정 하위 범주로 이동하여 다음과 같이 변경합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

이미지 모듈

배경 이미지를 사용하는 대신 이미지 모듈을 대신 사용하겠습니다. 그렇게 하면 텍스트와 이미지가 겹치지 않게 됩니다. 계속해서 행의 첫 번째 열에 이미지 모듈을 추가하고 이미지를 업로드하십시오.

데스크탑 버전의 첫 번째 행의 복제 모듈

그런 다음 데스크톱 버전의 첫 번째 행에서 사용한 모든 모듈을 복제하고 두 번째 열에 배치합니다.

두 번째 텍스트 모듈 글꼴 크기 변경

변경해야 할 것은 단 한 가지입니다. 두 번째 텍스트 모듈의 글꼴 크기입니다. 65px로 변경합니다.

두 번째 행

열 구조

그런 다음 섹션에 2열 행을 추가합니다.

사이징

이 행에는 수정된 Sizing 하위 범주도 필요합니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

이미지 모듈

첫 번째 열에도 Image Module을 추가하고 이미지를 업로드합니다.

데스크톱 버전에서 두 번째 행의 모듈 복제

그런 다음 데스크톱 버전의 두 번째 행에 있는 모듈을 복제합니다. 복제한 후에는 이 행의 두 번째 열에 배치합니다.

두 번째 텍스트 모듈 글꼴 크기 변경

두 번째 텍스트 모듈의 텍스트 크기도 변경해야 합니다. 계속해서 글꼴 크기를 '65px'로 지정하십시오.

데스크탑용 섹션 숨기기

두 행을 모두 마치면 데스크톱에서 전체 섹션을 비활성화할 수 있습니다.

결과

이 게시물의 모든 단계를 수행한 후 데스크톱에서 다음 결과를 얻을 수 있습니다.

휴대전화와 태블릿에서 다음을 수행합니다.

마지막 생각들

이 게시물에서는 멋진 스크롤링 패션 카탈로그를 만드는 방법을 보여 드렸습니다. 디자인 작업을 수행하기 위해 먼저 Photoshop을 사용하여 이미지 내에서 투명한 모양을 만드는 방법을 보여 주었습니다. 그런 다음 Divi 자습서에서 이 이미지를 사용하여 디자인을 만들었습니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 댓글을 남겨주세요!

중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!

Rvector / Shutterstock.com의 주요 이미지