Divi용 무료 모양 이미지 오버레이 9개 다운로드

웹사이트에 이미지를 표시하는 방식은 만들고 있는 전체 디자인에 큰 변화를 줄 수 있습니다. Divi의 기본 제공 옵션을 사용하면 예를 들어 테두리 및 상자 그림자를 생각하여 이미지를 멋진 방식으로 표시하는 데 도움이 되는 다양한 디자인 설정을 이미 적용할 수 있습니다. 그러나 이미지에 더 독특한 모양을 부여하고 싶다면 이 게시물이 도움이 될 것입니다. 여러분이 만드는 모든 웹사이트에서 다운로드하여 사용할 수 있는 9가지 모양의 무료 이미지 오버레이를 공유합니다. 이러한 모양의 이미지 오버레이를 공유한 후 Divi로 웹사이트를 구축할 때 이를 활용하는 방법도 보여드리겠습니다. 이 튜토리얼을 통해 자신만의 모양의 이미지 오버레이도 만들 수 있기를 바랍니다.

가자!

시사

튜토리얼을 살펴보고 다운로드하기 전에 다양한 화면 크기에서 기대할 수 있는 결과를 간단히 살펴보겠습니다.

데스크탑

핸드폰

무료로 모양 이미지 오버레이 다운로드

모양의 이미지 오버레이에 손을 대려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일과 금요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하시면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

접근하다

• 흰색 행 및/또는 섹션 배경색과 결합하면 다운로드 폴더에서 찾을 수 있는 모양의 이미지 오버레이를 사용할 수 있습니다.
• 다른 배경색에 따라 모양 이미지 오버레이를 조정하려면 위의 다운로드에 포함된 일러스트레이터 파일을 사용하여 모양 이미지 오버레이를 다른 색상으로 내보내야 합니다.
• 튜토리얼의 첫 번째 부분에서 모양 이미지 오버레이 색상을 변경하는 방법을 보여 드리겠습니다(Adobe Illustrator 사용).
• 그런 다음 Divi로 이동하여 모양이 지정된 이미지 오버레이 중 하나를 이미지 모듈에 업로드합니다.
• 모양 이미지 오버레이를 통해 표시될 이미지 모듈에 배경 이미지와 그라데이션 배경도 추가합니다.

Adobe Illustrator를 사용하여 모양 이미지 오버레이를 섹션 배경색으로 수정

다운로드 폴더에서 Illustrator 파일 열기

이 게시물의 접근 섹션에서 언급했듯이 흰색 배경에 이미지 모양의 오버레이를 사용하려면 다운로드 폴더에 있는 PNG 파일만 사용하면 됩니다. 그러나 다른 행 및/또는 섹션 배경색에 모양 이미지 오버레이를 사용하려면 다운로드 폴더에 포함된 Adobe Illustrator 파일을 사용하여 수동으로 색상을 변경해야 합니다. 색상을 변경하는 데 시간이 거의 또는 전혀 걸리지 않으며, 말 그대로 모든 웹사이트에서 모양 이미지 오버레이를 사용할 수 있으므로 단계를 살펴보겠습니다. 먼저 Adobe Illustrator 파일을 열어야 합니다.

선택한 이미지 모양 오버레이 선택

파일을 열면 어떤 용도로든 자유롭게 사용할 수 있는 모양의 이미지 오버레이가 포함된 9개의 다른 아트보드를 찾을 수 있습니다. 편집할 항목을 선택합니다.

섹션 배경 색상과 일치하도록 색상 변경

계속해서 모양의 색상을 행 및/또는 섹션에 사용하려는 동일한 배경색으로 변경합니다.

대지 선택

색상이 수정되면 모양이 지정된 이미지 오버레이가 포함된 전체 대지를 선택할 수 있습니다.

웹용 PNG 모양의 이미지 오버레이 저장

그리고 파일 > 내보내기 > 웹용으로 저장 으로 이동하여 웹용 PNG 이미지 파일로 저장합니다 .

만들기 시작합시다!

YouTube 채널 구독

새 섹션 추가

Divi로 전환하고 결과를 만들 시간입니다! 새 페이지를 만들거나 기존 페이지를 열고 새 일반 섹션을 추가하십시오.

새 행 추가

열 구조

다음 열 구조를 사용하여 섹션에 새 행을 계속 추가합니다.

열 1에 이미지 모듈 추가

모양 이미지 오버레이 업로드

열 1에서 필요한 유일한 모듈은 이미지 모듈입니다. 여기에서 모든 마법이 일어날 것입니다. 모양이 지정된 이미지 오버레이를 업로드하여 시작하겠습니다. 이미지의 한 부분이 완전히 투명하다는 것을 알 수 있습니다. 이렇게 하면 다음 단계에서 배경 이미지와 그라데이션 배경이 표시됩니다.

그라데이션 배경

다음으로 원하는 그라데이션 배경을 추가하세요.

• 색상 1: #aa2bff
• 색상 2: #09f7eb

배경 이미지

그리고 PNG 배경 이미지를 업로드하거나 그라디언트 배경이 보이지 않게 하려면 일반 이미지만 업로드하세요. 호버에서 그라데이션 배경을 변경하는 방법에 대해 만든 다음 게시물로 이동하여 사용 중인 그림을 다운로드할 수도 있습니다.

• 배경 이미지 크기: 표지
• 배경 이미지 위치: 하단 중앙
• 배경 이미지 반복: 반복 없음

사이징

이 튜토리얼을 작동시키는 또 다른 중요한 단계는 이미지 모듈의 크기 설정에서 'Force Fullwidth' 옵션을 활성화하는 것입니다. 이렇게 하면 그라디언트 배경과 배경 이미지가 모양이 지정된 이미지 오버레이의 투명 영역을 통해서만 표시됩니다.

• 강제 전폭: 예

열 2에 제목 텍스트 모듈 추가

콘텐츠 추가

두 번째 열로 넘어 갑시다. 여기에서 우리가 필요로 하는 첫 번째 모듈은 제목 텍스트 모듈입니다. 선택한 콘텐츠를 추가합니다.

텍스트 설정

그런 다음 제목 텍스트 설정으로 이동하여 몇 가지를 변경합니다.

• 제목 2 글꼴: Antic Didone
• 제목 2 글꼴 두께: 굵게
• 제목 2 텍스트 크기: 45px
• 제목 2 글자 간격: -2px

간격

사용자 정의 상단 여백도 추가하십시오.

• 상단 여백: 100px

2열에 설명 텍스트 모듈 추가

콘텐츠 추가

두 번째 모듈은 설명 텍스트 모듈입니다. 선택한 내용을 입력합니다.

텍스트 설정

그런 다음 텍스트 설정으로 이동하여 모듈의 텍스트 방향을 변경합니다.

• 텍스트 방향: 양쪽 맞춤

사이징

크기 설정에서 너비도 변경합니다.

• 폭: 63%

2열에 버튼 모듈 추가

사본 추가

다음이자 마지막으로 필요한 모듈은 버튼 모듈입니다. 선택한 내용을 입력합니다.

버튼 설정

버튼 설정으로 이동하여 버튼 모양을 변경하여 계속하십시오.

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 크기: 17px
• 버튼 텍스트 색상: #ffffff
• 그라디언트 색상 1: #aa2bff
• 그라디언트 색상 2: #09f7eb
• 기울기 방향: 111deg

• 버튼 테두리 너비: 0px
• 버튼 테두리 반경: 100px
• 버튼 문자 간격: -2px
• 글꼴 두께: 매우 굵게
• 글꼴 스타일: 대문자

간격

버튼에 사용자 지정 패딩을 추가합니다.

• 상단 패딩: 10px
• 하단 패딩: 10px
• 왼쪽 패딩: 50px
• 오른쪽 패딩: 50px

박스 섀도우

마지막으로 버튼에 은은한 나비 그림자를 더해 디자인을 완성한다.

• 상자 그림자 흐림 강도: 50px
• 상자 그림자 확산 강도: -5px

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.

데스크탑

핸드폰

마지막 생각들

이 게시물에서는 구축 중인 모든 종류의 웹사이트에 사용할 수 있는 Divi용 9가지 무료 모양의 이미지 오버레이를 공유했습니다. 이 튜토리얼을 통해 지속적으로 재사용할 수 있는 고유한 모양의 이미지 오버레이를 만들 수 있기를 바랍니다. 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!