Divi에서 배경 이미지 테두리 디자인을 만드는 방법

테두리 및 배경 이미지는 웹 사이트를 구축할 때 계속해서 인기 있는 디자인 자산입니다. 올바른 배경 이미지를 사용하면 사용자 지정 그래픽에 시간과 비용을 들이지 않고도 사이트에 개성과 스타일을 추가할 수 있습니다. 테두리는 콘텐츠에 구조를 추가하는 데 도움이 됩니다.

오늘 우리는 배경 이미지를 테두리로 디자인하여 이 두 자산을 함께 가져올 것입니다. Divi에는 독특한 테두리 디자인을 위한 배경 이미지를 쉽게 디자인할 수 있도록 배경 이미지를 사용자 정의할 수 있는 유용한 옵션 세트가 있습니다. 이를 통해 모든 종류의 창의적인 방법으로 색상, 그라디언트, 상자 그림자 및 혼합 모드를 결합할 수 있습니다.

시작하자.

엿보기

다음은 함께 만들 배경 이미지 테두리 디자인입니다.

무료로 레이아웃 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

YouTube 채널 구독

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder로 드래그하기만 하면 됩니다.

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 다음이 필요합니다.

1. Divi 테마가 설치되고 활성화되었습니다.
2. 프론트 엔드에서 처음부터 빌드하기 위해 생성된 새 페이지(비주얼 빌더)
3. 모의 콘텐츠에 사용할 이미지

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

배경 이미지 테두리 디자인을 만들기 위한 일반적인 팁

빌드를 시작하기 전에 배경 이미지 테두리 디자인을 만들 때 염두에 두어야 할 몇 가지 일반적인 팁이 있습니다.

#1 텍스처가 많은 이미지 선택

대부분의 경우 테두리가 더 좁은 쪽에 ​​있기를 원할 것입니다. 이것은 당신이 이미지를 많이 볼 수 없다는 것을 의미합니다. 따라서 질감이 많은 이미지를 사용하는 것이 좋습니다. 예를 들어 풍경, 꽃다발 또는 도시 고층의 사진을 사용할 수 있습니다. 다음은 이 자습서에 사용하는 몇 가지 이미지입니다.

#2 배경 이미지 테두리에 그라디언트 및 투명도 사용

배경 이미지는 때때로 콘텐츠의 큰 테두리로 단독으로 사용될 수 있습니다. 그러나 대부분의 경우 배경 이미지에 오버레이를 추가하여 색상을 지정하거나 배경을 더 어둡거나 밝게 만들고 싶을 것입니다. 배경 그라디언트는 배경 이미지에 오버레이를 추가하고 독특한 테두리 디자인을 만드는 좋은 방법입니다.

#3 혼합 모드 사용

배경 이미지에 혼합 모드를 사용하면 테두리 디자인에 고유한 색상과 질감을 구현할 수 있습니다. 배경 이미지와 함께 배경 색상이나 그라디언트를 추가한 다음 배경 이미지의 혼합 모드를 선택하기만 하면 됩니다. 배경 이미지 테두리에 대한 몇 가지 훌륭한 혼합 모드는 색상, 광도, 곱하기 및 화면입니다.

고유한 모양에 둥근 모서리 옵션 사용

모든 테두리에 직선 모서리가 있어야 하는 것은 아닙니다. 조금 섞어주세요! Divi의 둥근 모서리 옵션을 사용하면 이러한 모서리를 창의적인 방식으로 형성할 수 있습니다.

시차 배경 이미지를 테두리로 사용

시차의 가장 큰 장점은 움직임과 함께 디자인에 생동감을 불어넣는 것입니다. 또한 테두리 디자인에 시차가 있는 배경 이미지를 사용하면 콘텐츠를 돋보이게 하는 미묘한 움직임을 만들 수 있습니다.

Divi에서 배경 이미지 테두리 디자인하기

이제 배경 이미지 테두리 디자인을 만드는 일반적인 아이디어를 이해했으므로 몇 가지를 함께 디자인해 보겠습니다. 4가지 디자인을 제작할 예정입니다. 각각에는 모의 콘텐츠 역할을 하는 기본 안내문 모듈이 있습니다. 그리고 열 설정을 사용하여 모듈의 배경 이미지 테두리를 추가합니다.

첫 번째 디자인부터 시작하겠습니다.

배경 이미지 테두리 디자인 #1

이 첫 번째 디자인은 콘텐츠의 프레임처럼 보이도록 상자 그림자가 있는 좁은 배경 이미지 테두리를 특징으로 합니다.

디자인하는 방법은 다음과 같습니다.

먼저 일반 섹션에 2열 행을 추가합니다.

Blurb 모듈 추가

그런 다음 왼쪽 열에 블러브 모듈을 추가합니다.

광고 문구가 배치되면 광고 문구 설정을 열고 기본 이미지를 제거하여 제목과 본문 내용만 보이도록 합니다.

다음으로, 광고 문구에 흰색 배경색을 지정합니다.

그런 다음 다음과 같이 광고 문구 디자인 설정을 업데이트합니다.

• 제목 글꼴: Oswald
• 본문 글꼴: Lato
• 여백 위쪽 5%, 아래쪽 5%, 왼쪽 5%, 오른쪽 5%
• 패딩: 상단 7%, 하단 7%, 왼쪽 10%, 오른쪽 10%
• 둥근 모서리: 오른쪽 상단 20px, 왼쪽 하단 20px
• 박스 섀도우: 스크린샷 참조

열에 배경 이미지 추가

그것이 우리의 블러브 모듈을 처리합니다. 이제 배경 이미지 테두리를 추가해 보겠습니다. 이를 위해 블러브 모듈을 포함하는 열에 배경 이미지를 추가합니다. 행 설정을 연 다음 열 1에 대한 설정을 열고 다음 배경을 추가합니다.

• 배경 이미지: [선택한 이미지 업로드]
• 배경색: #303a7a
• 배경 이미지 혼합: 광도

그런 다음 둥근 모서리와 상자 그림자를 다음과 같이 업데이트합니다.

• 둥근 모서리: 오른쪽 상단 20px, 왼쪽 하단 20px
• 박스 섀도우: 스크린샷 참조

최종 결과

이제 최종 디자인을 확인하십시오.

배경 이미지 테두리 디자인 #2

다음 디자인은 텍스처가 많은 이미지를 사용하여 특히 이미지 블렌드 모드와 결합할 때 아름다운 테두리를 만드는 방법을 강조합니다.

디자인하는 방법은 다음과 같습니다.

Blurb 모듈 추가

디자인을 만들기 위해 디자인 #1이 포함된 동일한 행의 2열에 광고 문구를 추가합니다. 계속해서 디자인 #1의 광고 문구 모듈을 복사하여 열 2에 붙여넣습니다. 그런 다음 다음과 같이 광고 문구 모듈 설정을 업데이트합니다.

• 둥근 모서리: 기본값으로 복원
• 여백: 위쪽 10%, 아래쪽 10%, 왼쪽 10%, 오른쪽 10%
• 패딩: 상단 15%, 하단 15%, 왼쪽 10%, 오른쪽 10%
• 테두리 너비: 1px
• 테두리 색상: #ffffff

열에 배경 이미지 추가

모듈이 제자리에 있으면 행 설정을 열고 배경 그라디언트를 열 2에 추가합니다.

• 배경 그라디언트 왼쪽 색상: #f7e0a5
• 배경 그라데이션 오른쪽 색상: rgba(237,240,0,0.79)
• 기울기 방향: 90deg
• 시작 위치: 50%
• 최종 위치: 0%

그런 다음 멋진 색상 혼합 효과가 있는 배경 이미지를 추가합니다.

• 배경 이미지: [이미지 업로드]
• 배경 이미지 혼합: 색상

보시다시피 색상 혼합 모드는 이미지 뒤에 있는 두 가지 그라디언트 색상의 광도를 유지하여 부드러운 색상으로 멋진 이미지 테두리 디자인을 만듭니다.

최종 결과

디자인의 최종 결과를 확인하십시오.

배경 이미지 테두리 디자인 #3

이 다음 디자인은 경계 디자인에서 시차 이미지의 사용을 강조합니다. 또한 상자 그림자 트릭을 사용하여 시차 이미지에 대한 색상 오버레이를 만듭니다.

디자인하는 방법은 다음과 같습니다.

우선 첫 번째 행 아래에 두 개의 열 행을 새로 추가하고 맨 위 행의 열 1에 있는 설명에서 설명 모듈을 복사하여 새 행의 열 1에 붙여넣습니다.

그런 다음 다음과 같이 blurb 모듈을 업데이트합니다.

• 배경색: #333344
• 텍스트 색상: 라이트
• 여백: 위쪽 10%, 아래쪽 10%, 왼쪽 10%, 오른쪽 10%
• 패딩: 상단 10%, 하단 10%
• 둥근 모서리: 20px
• 상자 그림자: 없음

광고 문구가 제자리에 있으면 행 설정을 열고 다음과 같이 열 1에 대한 설정을 업데이트합니다.

• 배경 이미지: [이미지 업로드]
• 시차 효과 사용: 예
• 시차 방법: 진정한 시차
• 둥근 모서리: 20px
• 박스 섀도우: 스크린샷 참조

지금은 시차가 있는 배경 이미지 테두리가 기본적으로 약간 과장되어 콘텐츠에서 주의를 분산시킬 수 있습니다.

시차가 있는 배경 이미지를 더 밝게 만들기 위해 라이트 오버레이 역할을 할 블러브에 상자 그림자를 추가할 수 있습니다.

광고 설정을 다시 열고 다음을 추가합니다.

• 박스 섀도우: 스크린샷 참조
• 상자 그림자 흐림 강도: 0px
• 상자 그림자 확산 강도: 200px
• 그림자 색상: #ffffff

최종 디자인

이제 최종 디자인을 확인해 보겠습니다.

배경 이미지 테두리 디자인 #4

이 다음 디자인에서는 배경 이미지를 그라디언트와 결합하여 광고 문구 콘텐츠의 상단 및 하단 테두리 역할을 할 것입니다.

Blurb 모듈 추가

시작하려면 맨 위 행의 2열에 있는 블러브 모듈을 복사하고 두 번째 행의 2열에 붙여넣습니다.

완료되면 다음과 같이 blurb 모듈 설정을 업데이트합니다.

• 테두리: [테두리 기본값을 복원하여 테두리 제거]
• 상자 그림자: 없음
• 여백: 위쪽 5%, 아래쪽 5%, 왼쪽 0%, 오른쪽 0%

배경 이미지 테두리 추가

이 디자인에 대한 배경 이미지 테두리를 추가하려면 행 설정을 열고 다음과 같이 열 2의 설정을 업데이트하십시오.

• 배경 이미지: [이미지 업로드]
• 배경 그라데이션 왼쪽 색상: #141777
• 배경 그라데이션 오른쪽 색상: #ffb7eb
• 기울기 방향: 90deg
• 시작 위치: 50%
• 최종 위치: 0%

• 배경 이미지: [이미지 업로드]
• 배경 이미지 혼합: 광도

최종 디자인

최종 디자인을 확인하세요.

마지막 생각들

Divi로 배경 이미지 테두리를 만드는 것은 디자인에 아름다움과 개성을 더하는 간단한 방법입니다. 이 튜토리얼에 소개된 디자인은 고유한 테두리 디자인을 만들기 위해 Divi에서 사용할 수 있는 주요 옵션을 보여주기 위한 것입니다. 그러나 모든 다양한 색상 조합과 혼합 모드를 사용할 수 있으므로 상상력이 한계입니다. 따라서 자신의 이미지를 몇 개 잡고 다음 프로젝트를 위한 새롭고 흥미로운 테두리 디자인을 탐색하십시오.

댓글로 여러분의 의견을 기다리겠습니다.

건배!